From 0a240acfb5f7165882610ae2dd3f67af45e9eb12 Mon Sep 17 00:00:00 2001 From: alex_ Date: Sat, 16 Nov 2024 14:40:13 +0100 Subject: [PATCH] badge refactor Refs: #7036 --- .../src/components/badge/shadow.tsx | 29 +++++---- .../src/components/badge/style.scss | 16 +++-- .../test/__snapshots__/snapshot.spec.tsx.snap | 20 +++--- packages/themes/bmf/src/components/badge.scss | 16 ++--- .../themes/default/src/components/badge.scss | 63 +++++++++---------- .../ecl/src/ecl-ec/components/badge.scss | 2 +- .../ecl/src/ecl-eu/components/badge.scss | 7 +-- .../themes/itzbund/src/components/badge.scss | 44 ++++++------- 8 files changed, 86 insertions(+), 111 deletions(-) diff --git a/packages/components/src/components/badge/shadow.tsx b/packages/components/src/components/badge/shadow.tsx index e3dd34dd96..4fc6be48f9 100644 --- a/packages/components/src/components/badge/shadow.tsx +++ b/packages/components/src/components/badge/shadow.tsx @@ -1,12 +1,13 @@ import type { BadgeAPI, BadgeStates, ButtonProps, KoliBriIconsProp, LabelPropType, PropColor, Stringified } from '../../schema'; import { featureHint, handleColorChange, objectObjectHandler, parseJson, setState, validateColor } from '../../schema'; -import { Component, h, Host, Prop, State, Watch } from '@stencil/core'; +import { Component, h, Prop, State, Watch } from '@stencil/core'; import { KolSpanWcTag } from '../../core/component-names'; import { nonce } from '../../utils/dev.utils'; import type { JSX } from '@stencil/core'; import { KolButtonWcTag } from '../../core/component-names'; +import clsx from 'clsx'; featureHint(`[KolBadge] Optimierung des _color-Properties (rgba, rgb, hex usw.).`); @Component({ @@ -41,20 +42,18 @@ export class KolBadge implements BadgeAPI { public render(): JSX.Element { const hasSmartButton = typeof this.state._smartButton === 'object' && this.state._smartButton !== null; return ( - - - - {hasSmartButton && this.renderSmartButton(this.state._smartButton as ButtonProps)} - - + + + {hasSmartButton && this.renderSmartButton(this.state._smartButton as ButtonProps)} + ); } diff --git a/packages/components/src/components/badge/style.scss b/packages/components/src/components/badge/style.scss index 9ff750fa96..e774ff33e5 100644 --- a/packages/components/src/components/badge/style.scss +++ b/packages/components/src/components/badge/style.scss @@ -2,19 +2,17 @@ @import '../style'; @layer kol-component { - /* :host implicitly inherits font-size, e.g. for usage in headlines */ - :host { - font-size: rem(16); - } - - :host > span { + .kol-badge { display: inline-flex; place-items: center; /* Visible with forced colors */ outline: transparent solid rem(1); - } + font-size: rem(16); - :host > span > .kol-button-wc button { - color: inherit; + .kol-button-wc { + button { + color: inherit; + } + } } } diff --git a/packages/components/src/components/badge/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/badge/test/__snapshots__/snapshot.spec.tsx.snap index 201867ed90..189170b51f 100644 --- a/packages/components/src/components/badge/test/__snapshots__/snapshot.spec.tsx.snap +++ b/packages/components/src/components/badge/test/__snapshots__/snapshot.spec.tsx.snap @@ -1,9 +1,9 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`kol-badge should render with _label="**Te**xt" 1`] = ` - + @@ -11,9 +11,9 @@ exports[`kol-badge should render with _label="**Te**xt" 1`] = ` `; exports[`kol-badge should render with _label="Text" _color="#000000" 1`] = ` - + @@ -21,9 +21,9 @@ exports[`kol-badge should render with _label="Text" _color="#000000" 1`] = ` `; exports[`kol-badge should render with _label="Text" _icons="codicon codicon-home" _color="#000000" 1`] = ` - + @@ -31,9 +31,9 @@ exports[`kol-badge should render with _label="Text" _icons="codicon codicon-home `; exports[`kol-badge should render with _label="Text" _icons="codicon codicon-home" 1`] = ` - + @@ -41,9 +41,9 @@ exports[`kol-badge should render with _label="Text" _icons="codicon codicon-home `; exports[`kol-badge should render with _label="Text" 1`] = ` - + diff --git a/packages/themes/bmf/src/components/badge.scss b/packages/themes/bmf/src/components/badge.scss index 57fea7fce9..dce88e45f0 100644 --- a/packages/themes/bmf/src/components/badge.scss +++ b/packages/themes/bmf/src/components/badge.scss @@ -1,20 +1,16 @@ @import '../mixins/rem'; @layer kol-theme-component { - :host { - display: inline-block; - font-family: var(--font-family); - } - - :host .kol-icon { - color: inherit; - } - - :host > span { + .kol-badge { border-radius: rem(5); display: inline-flex; + font-family: var(--font-family); font-style: normal; + .kol-icon { + color: inherit; + } + .kol-span-wc { padding: rem(4) rem(12); } diff --git a/packages/themes/default/src/components/badge.scss b/packages/themes/default/src/components/badge.scss index 2169325cc3..b346f9e89c 100644 --- a/packages/themes/default/src/components/badge.scss +++ b/packages/themes/default/src/components/badge.scss @@ -1,45 +1,38 @@ @import '../mixins/rem'; @layer kol-theme-component { - :host { - display: inline-block; + .kol-badge { font-family: var(--font-family); - } - - :host > span { border-radius: var(--border-radius); display: inline-flex; font-style: normal; - } - - :host > span.smart-button { - align-items: center; - } - - :host > span .kol-button-wc:hover > button { - background-color: var(--color-primary-variant); - color: var(--color-light); - } - - :host > span .kol-button-wc > button { - color: inherit; - border-top-right-radius: var(--border-radius); - border-bottom-right-radius: var(--border-radius); - padding: rem(3.2); - } - - :host > span .kol-span-wc { - padding: rem(4) rem(12); - } - - :host > span > .kol-span-wc { - align-items: center; - font-style: normal; - gap: rem(8); - } - :host > span > .kol-span-wc > span { - display: flex; - gap: rem(4); + span.smart-button { + align-items: center; + } + + .kol-button-wc:hover > button { + background-color: var(--color-primary-variant); + color: var(--color-light); + } + + .kol-button-wc > button { + color: inherit; + border-top-right-radius: var(--border-radius); + border-bottom-right-radius: var(--border-radius); + padding: rem(3.2); + } + + .kol-span-wc { + padding: rem(4) rem(12); + align-items: center; + font-style: normal; + gap: rem(8); + + span { + display: flex; + gap: rem(4); + } + } } } diff --git a/packages/themes/ecl/src/ecl-ec/components/badge.scss b/packages/themes/ecl/src/ecl-ec/components/badge.scss index 066c9d61ba..c134d2ff6a 100644 --- a/packages/themes/ecl/src/ecl-ec/components/badge.scss +++ b/packages/themes/ecl/src/ecl-ec/components/badge.scss @@ -1,7 +1,7 @@ @import '../../mixins/rem'; @layer kol-theme-component { - :host > span { + .kol-badge { font: normal normal var(--font-weight) 1em var(--font-family); padding: calc(rem(8) - rem(1)) calc(rem(12) - rem(1)); text-transform: uppercase; diff --git a/packages/themes/ecl/src/ecl-eu/components/badge.scss b/packages/themes/ecl/src/ecl-eu/components/badge.scss index 19556da6bc..9db56509fb 100644 --- a/packages/themes/ecl/src/ecl-eu/components/badge.scss +++ b/packages/themes/ecl/src/ecl-eu/components/badge.scss @@ -1,12 +1,9 @@ @import '../../mixins/rem'; @layer kol-theme-component { - :host { - font-family: var(--font-family); - } - - :host > span { + .kol-badge { font: normal normal var(--font-weight) rem(14) / 1em var(--font-family); + font-family: var(--font-family); padding: calc(rem(8) - rem(1)) calc(rem(12) - rem(1)); text-transform: uppercase; } diff --git a/packages/themes/itzbund/src/components/badge.scss b/packages/themes/itzbund/src/components/badge.scss index debad8241d..86cf485e4e 100644 --- a/packages/themes/itzbund/src/components/badge.scss +++ b/packages/themes/itzbund/src/components/badge.scss @@ -1,36 +1,28 @@ @import '../mixins/rem'; @layer kol-theme-component { - :host { - display: inline-block; + .kol-badge { + display: inline-flex; font-family: inherit; - } - - :host > span { border-radius: rem(5); - display: inline-flex; - } - :host > span .kol-button-wc { - border-left: rem(1) solid rgba(0, 0, 0, 0.25); - } + .kol-button-wc { + border-left: rem(1) solid rgba(0, 0, 0, 0.25); + } + .kol-span-wc { + align-items: center; + font-style: normal; + gap: rem(8); + padding: rem(4) rem(8); - :host > span .kol-span-wc { - padding: rem(4) rem(8); - } - - :host > span > .kol-span-wc { - align-items: center; - font-style: normal; - gap: rem(8); - } - - :host > span > .kol-span-wc > span { - display: flex; - gap: rem(4); - } + span { + display: flex; + gap: rem(4); + } + } - :host button { - border-radius: 0 var(--spacing) var(--spacing) 0; + button { + border-radius: 0 var(--spacing) var(--spacing) 0; + } } }