Apply BEM refactoring for icon (#7176)

public-ui · Dec 16, 2024 · fe81b0a · fe81b0a
2 parents bf1355b + 04010f9
commit fe81b0a
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 12 deletions.
diff --git a/packages/components/src/components/icon/shadow.tsx b/packages/components/src/components/icon/shadow.tsx
@@ -3,6 +3,7 @@ import { validateLabel, watchString } from '../../schema';
 import { Component, h, Host, Prop, State, Watch } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
+import clsx from 'clsx';
 /**
  * @part icon - Ermöglicht das Styling des inneren Icons.
  */
@@ -27,7 +28,7 @@ export class KolIcon implements IconAPI {
 					 * Referenz: https://www.w3.org/TR/wai-aria/states_and_properties#aria-hidden
 					 */
 					aria-label={ariaShow ? this.state._label : undefined}
-					class={this.state._icons}
+					class={clsx('kol-icon__icon', this.state._icons)}
 					part="icon"
 					role="img"
 				></i>

diff --git a/packages/components/src/components/icon/style.scss b/packages/components/src/components/icon/style.scss
@@ -2,19 +2,20 @@
 @import '../../assets/codicons/codicon';
 
 @layer kol-component {
-	/* :host implicitly inherits font-size, see below */
+	/*
+	* Necessary to center icon
+	 */
 	:host {
-		font-size: rem(16);
-		color: inherit;
 		display: contents;
-		line-height: inherit;
 	}
 
-	/*
-   * The <code>:important</code> is important, because we should always override the font icon style.
-   */
-	:host > i,
-	:host > i:before {
-		font-size: inherit !important;
+	.kol-icon {
+		font-size: rem(16);
+		color: inherit;
+		line-height: inherit;
+		&__icon,
+		&__icon:before {
+			font-size: inherit !important;
+		}
 	}
 }
diff --git a/packages/components/src/components/icon/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/icon/test/__snapshots__/snapshot.spec.tsx.snap
@@ -3,7 +3,7 @@
 exports[`kol-icon should render with _label="Aria-Label" _icons="codicon codicon-home" 1`] = `
 <kol-icon class="kol-icon" exportparts="icon">
   <template shadowrootmode="open">
-    <i aria-label="Aria-Label" class="codicon codicon-home" part="icon" role="img"></i>
+    <i aria-label="Aria-Label" class="codicon codicon-home kol-icon__icon" part="icon" role="img"></i>
   </template>
 </kol-icon>
 `;