badge refactor

Refs: #7036
public-ui · Nov 16, 2024 · 0a240ac · 0a240ac
1 parent 378b0cc
commit 0a240ac
Show file tree

Hide file tree

Showing 8 changed files with 86 additions and 111 deletions.
diff --git 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 (
-			<Host class="kol-badge">
-				<span
-					class={{
-						'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
-					}}
-					style={{
-						backgroundColor: this.bgColorStr,
-						color: this.colorStr,
-					}}
-				>
-					<KolSpanWcTag id={hasSmartButton ? this.id : undefined} _allowMarkdown _icons={this._icons} _label={this._label}></KolSpanWcTag>
-					{hasSmartButton && this.renderSmartButton(this.state._smartButton as ButtonProps)}
-				</span>
-			</Host>
+			<span
+				class={clsx('kol-badge', {
+					'smart-button': typeof this.state._smartButton === 'object' && this.state._smartButton !== null,
+				})}
+				style={{
+					backgroundColor: this.bgColorStr,
+					color: this.colorStr,
+				}}
+			>
+				<KolSpanWcTag id={hasSmartButton ? this.id : undefined} _allowMarkdown _icons={this._icons} _label={this._label}></KolSpanWcTag>
+				{hasSmartButton && this.renderSmartButton(this.state._smartButton as ButtonProps)}
+			</span>
 		);
 	}
 

diff --git 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
@@ -1,49 +1,49 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-badge should render with _label="**Te**xt" 1`] = `
-<kol-badge class="kol-badge">
+<kol-badge>
   <template shadowrootmode="open">
-    <span style="background-color: #000; color: #959595;">
+    <span class="kol-badge" style="background-color: #000; color: #959595;">
       <kol-span-wc _allowmarkdown="" _label="**Te**xt"></kol-span-wc>
     </span>
   </template>
 </kol-badge>
 `;
 
 exports[`kol-badge should render with _label="Text" _color="#000000" 1`] = `
-<kol-badge class="kol-badge">
+<kol-badge>
   <template shadowrootmode="open">
-    <span style="background-color: #000; color: #959595;">
+    <span class="kol-badge" style="background-color: #000; color: #959595;">
       <kol-span-wc _allowmarkdown="" _label="Text"></kol-span-wc>
     </span>
   </template>
 </kol-badge>
 `;
 
 exports[`kol-badge should render with _label="Text" _icons="codicon codicon-home" _color="#000000" 1`] = `
-<kol-badge class="kol-badge">
+<kol-badge>
   <template shadowrootmode="open">
-    <span style="background-color: #000; color: #959595;">
+    <span class="kol-badge" style="background-color: #000; color: #959595;">
       <kol-span-wc _allowmarkdown="" _icons="codicon codicon-home" _label="Text"></kol-span-wc>
     </span>
   </template>
 </kol-badge>
 `;
 
 exports[`kol-badge should render with _label="Text" _icons="codicon codicon-home" 1`] = `
-<kol-badge class="kol-badge">
+<kol-badge>
   <template shadowrootmode="open">
-    <span style="background-color: #000; color: #959595;">
+    <span class="kol-badge" style="background-color: #000; color: #959595;">
       <kol-span-wc _allowmarkdown="" _icons="codicon codicon-home" _label="Text"></kol-span-wc>
     </span>
   </template>
 </kol-badge>
 `;
 
 exports[`kol-badge should render with _label="Text" 1`] = `
-<kol-badge class="kol-badge">
+<kol-badge>
   <template shadowrootmode="open">
-    <span style="background-color: #000; color: #959595;">
+    <span class="kol-badge" style="background-color: #000; color: #959595;">
       <kol-span-wc _allowmarkdown="" _label="Text"></kol-span-wc>
     </span>
   </template>

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
+		}
 	}
 }