Apply BEM refactor for drawer (#7196)

public-ui · Dec 16, 2024 · efccdbc · efccdbc
2 parents d37732f + 4ee4c17
commit efccdbc
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 82 deletions.
diff --git a/packages/components/src/components/drawer/shadow.tsx b/packages/components/src/components/drawer/shadow.tsx
@@ -4,6 +4,7 @@ import { setState, validateLabel, validateOpen, validateAlign, validateModal } f
 import { Component, Host, Method, Prop, State, Watch, h } from '@stencil/core';
 
 import type { JSX } from '@stencil/core';
+import clsx from 'clsx';
 
 /**
  * @slot - The Content of drawer.
@@ -55,10 +56,13 @@ export class KolDrawer implements DrawerAPI {
 		return (
 			<div
 				ref={this.getWrapperRef}
-				class={`drawer__wrapper drawer__wrapper--${align} ${this.state._open ? 'drawer__wrapper--open' : 'is-closing'}`}
+				class={clsx(`kol-drawer__wrapper`, `kol-drawer__wrapper--${align}`, {
+					'kol-drawer__wrapper--open': this.state._open,
+					'kol-drawer__wrapper--is-closing': this.state._open === false,
+				})}
 				aria-label={this.state._label}
 			>
-				<div class="drawer__content">
+				<div class="kol-drawer__content">
 					<slot />
 				</div>
 			</div>
@@ -69,8 +73,13 @@ export class KolDrawer implements DrawerAPI {
 	public render(): JSX.Element {
 		const isModal = this.state._modal;
 		return (
-			<Host class={`kol-drawer drawer ${isModal ? 'drawer--modal' : ''}`} ref={(el) => (this.hostElement = el as HTMLElement)}>
-				<dialog class="drawer__dialog" ref={this.getRef}>
+			<Host
+				class={clsx('kol-drawer--modal', {
+					'kol-drawer--modal': isModal,
+				})}
+				ref={(el) => (this.hostElement = el as HTMLElement)}
+			>
+				<dialog class="kol-drawer__dialog" ref={this.getRef}>
 					{this.renderDialogContent()}
 				</dialog>
 			</Host>

diff --git a/packages/components/src/components/drawer/style.scss b/packages/components/src/components/drawer/style.scss
@@ -2,11 +2,9 @@
 @import '../style';
 
 @layer kol-component {
-	:host {
+	.kol-drawer {
 		font-size: rem(16);
-	}
 
-	.drawer {
 		&__dialog {
 			padding: 0;
 			border: none;

diff --git a/packages/components/src/components/drawer/test/__snapshots__/snapshot.spec.tsx.snap b/packages/components/src/components/drawer/test/__snapshots__/snapshot.spec.tsx.snap
@@ -1,11 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=false 1`] = `
-<kol-drawer class="drawer kol-drawer">
+<kol-drawer class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--top is-closing">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -15,11 +15,11 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=false 1
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="bottom" 1`] = `
-<kol-drawer _variant="bottom" class="drawer kol-drawer">
+<kol-drawer _variant="bottom" class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -29,11 +29,11 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="left" 1`] = `
-<kol-drawer _variant="left" class="drawer kol-drawer">
+<kol-drawer _variant="left" class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -43,11 +43,11 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="right" 1`] = `
-<kol-drawer _variant="right" class="drawer kol-drawer">
+<kol-drawer _variant="right" class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -57,11 +57,11 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=false _open=true _variant="top" 1`] = `
-<kol-drawer _variant="top" class="drawer kol-drawer">
+<kol-drawer _variant="top" class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -71,11 +71,11 @@ exports[`kol-drawer should render with _label="Label" _modal=false _open=true _v
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=false 1`] = `
-<kol-drawer class="drawer drawer--modal kol-drawer">
+<kol-drawer class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--top is-closing">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -85,11 +85,11 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=false 1`
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="bottom" 1`] = `
-<kol-drawer _variant="bottom" class="drawer drawer--modal kol-drawer">
+<kol-drawer _variant="bottom" class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -99,11 +99,11 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="left" 1`] = `
-<kol-drawer _variant="left" class="drawer drawer--modal kol-drawer">
+<kol-drawer _variant="left" class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -113,11 +113,11 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="right" 1`] = `
-<kol-drawer _variant="right" class="drawer drawer--modal kol-drawer">
+<kol-drawer _variant="right" class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -127,11 +127,11 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
 `;
 
 exports[`kol-drawer should render with _label="Label" _modal=true _open=true _variant="top" 1`] = `
-<kol-drawer _variant="top" class="drawer drawer--modal kol-drawer">
+<kol-drawer _variant="top" class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--open drawer__wrapper--top">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--open kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -141,11 +141,11 @@ exports[`kol-drawer should render with _label="Label" _modal=true _open=true _va
 `;
 
 exports[`kol-drawer should render with _label="Label" _open=false 1`] = `
-<kol-drawer class="drawer kol-drawer">
+<kol-drawer class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--top is-closing">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>
@@ -155,11 +155,11 @@ exports[`kol-drawer should render with _label="Label" _open=false 1`] = `
 `;
 
 exports[`kol-drawer should render with _label="Label" 1`] = `
-<kol-drawer class="drawer kol-drawer">
+<kol-drawer class="kol-drawer--modal">
   <template shadowrootmode="open">
-    <dialog class="drawer__dialog">
-      <div aria-label="Label" class="drawer__wrapper drawer__wrapper--top is-closing">
-        <div class="drawer__content">
+    <dialog class="kol-drawer__dialog">
+      <div aria-label="Label" class="kol-drawer__wrapper kol-drawer__wrapper--is-closing kol-drawer__wrapper--top">
+        <div class="kol-drawer__content">
           <slot></slot>
         </div>
       </div>

diff --git a/packages/themes/default/src/components/drawer.scss b/packages/themes/default/src/components/drawer.scss
@@ -2,38 +2,40 @@
 
 $duration: 0.4s;
 @layer kol-theme-component {
-	.drawer__wrapper {
-		box-shadow: 0 0 rem(4) var(--color-subtle);
+	.kol-drawer {
+		&__wrapper {
+			box-shadow: 0 0 rem(4) var(--color-subtle);
 
-		&--left {
-			animation: slideInLeft $duration forwards;
+			&--left {
+				animation: slideInLeft $duration forwards;
 
-			&.is-closing {
-				animation: slideOutLeft $duration forwards;
+				&.kol-drawer__wrapper--is-closing {
+					animation: slideOutLeft $duration forwards;
+				}
 			}
-		}
 
-		&--right {
-			animation: slideInRight $duration forwards;
+			&--right {
+				animation: slideInRight $duration forwards;
 
-			&.is-closing {
-				animation: slideOutRight $duration forwards;
+				&.kol-drawer__wrapper--is-closing {
+					animation: slideOutRight $duration forwards;
+				}
 			}
-		}
 
-		&--top {
-			animation: slideInTop $duration forwards;
+			&--top {
+				animation: slideInTop $duration forwards;
 
-			&.is-closing {
-				animation: slideOutTop $duration forwards;
+				&.kol-drawer__wrapper--is-closing {
+					animation: slideOutTop $duration forwards;
+				}
 			}
-		}
 
-		&--bottom {
-			animation: slideInBottom $duration forwards;
+			&--bottom {
+				animation: slideInBottom $duration forwards;
 
-			&.is-closing {
-				animation: slideOutBottom $duration forwards;
+				&.kol-drawer__wrapper--is-closing {
+					animation: slideOutBottom $duration forwards;
+				}
 			}
 		}
 	}

diff --git a/packages/themes/ecl/src/ecl-ec/components/drawer.scss b/packages/themes/ecl/src/ecl-ec/components/drawer.scss
@@ -1,5 +1,7 @@
 @layer kol-theme-component {
-	:host .drawer__wrapper {
-		box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
+	.kol-drawer {
+		&__wrapper {
+			box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
+		}
 	}
 }
diff --git a/packages/themes/ecl/src/ecl-eu/components/drawer.scss b/packages/themes/ecl/src/ecl-eu/components/drawer.scss
@@ -1,5 +1,7 @@
 @layer kol-theme-component {
-	:host .drawer__wrapper {
-		box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
+	.kol-drawer {
+		&__wrapper {
+			box-shadow: 0 0 calc(var(--spacing-2xs) / 2) var(--color-black);
+		}
 	}
 }
diff --git a/packages/themes/itzbund/src/components/drawer.scss b/packages/themes/itzbund/src/components/drawer.scss
@@ -1,5 +1,7 @@
 @layer kol-theme-component {
-	:host .drawer__wrapper {
-		box-shadow: 0 0 0.25em gray;
+	.kol-drawer {
+		&__wrapper {
+			box-shadow: 0 0 0.25em gray;
+		}
 	}
 }