fixup! Feat(web): Introduce Drawer component #DS-1580

lmc-eu · Jan 3, 2025 · 6c0cc32 · 6c0cc32
1 parent d8d5219
commit 6c0cc32
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 21 deletions.
diff --git a/...scss/components/Drawer/_DrawerDialog.scss → .../scss/components/Drawer/_DrawerPanel.scss b/...scss/components/Drawer/_DrawerDialog.scss → .../scss/components/Drawer/_DrawerPanel.scss
@@ -1,4 +1,4 @@
-// 1. Use ScrollView's backdoor to fix its height inside DrawerDialog in Safari.
+// 1. Use ScrollView's backdoor to fix its height inside DrawerPanel in Safari.
 // 2. We need to set the box-sizing again because the parent element unsets styles using `all: unset`.
 // 3. Intentionally transition also the worse performing properties to smooth out the changes of viewport size around
 //    the tablet breakpoint. However, `top` and `bottom` are not transitioned when switching from and to `auto`.
@@ -9,7 +9,7 @@
 @use '../../tools/typography';
 @use 'theme';
 
-.DrawerDialog {
+.DrawerPanel {
     @include typography.generate(theme.$typography);
 
     --drawer-translate-x: 0%;
@@ -19,15 +19,15 @@
     display: flex;
     flex-direction: column;
     box-sizing: border-box;
-    width: theme.$dialog-width;
+    width: theme.$panel-width;
     max-width: calc(100% - #{theme.$padding-x});
-    height: theme.$dialog-height;
-    max-height: theme.$dialog-max-height;
+    height: theme.$panel-height;
+    max-height: theme.$panel-max-height;
     overflow-x: var(--drawer-body-overflow-x, visible);
     overflow-y: var(--drawer-body-overflow-y, visible);
-    color: theme.$dialog-text-color;
-    background-color: theme.$dialog-background-color;
-    box-shadow: theme.$dialog-shadow;
+    color: theme.$panel-text-color;
+    background-color: theme.$panel-background-color;
+    box-shadow: theme.$panel-shadow;
     transform: translateX(var(--drawer-translate-x)) translateY(var(--drawer-translate-y)) scale(var(--drawer-scale));
     transform-origin: var(--drawer-transform-origin);
     overscroll-behavior: contain;
@@ -39,19 +39,19 @@
     }
 }
 
-.Drawer--left .DrawerDialog {
+.Drawer--left .DrawerPanel {
     --drawer-translate-x: -100%;
 }
 
-.Drawer--right .DrawerDialog {
+.Drawer--right .DrawerPanel {
     --drawer-translate-x: 100%;
 }
 
-.Drawer--center .DrawerDialog {
+.Drawer--center .DrawerPanel {
     --drawer-translate-x: 0%;
 }
 
-.Drawer[open] .DrawerDialog {
+.Drawer[open] .DrawerPanel {
     --drawer-translate-x: 0%;
     --drawer-translate-y: 0%;
     --drawer-scale: 1;

diff --git a/packages/web/src/scss/components/Drawer/_theme.scss b/packages/web/src/scss/components/Drawer/_theme.scss
@@ -15,11 +15,11 @@ $backdrop-background-color: tokens.$background-backdrop;
 $common-padding-x: tokens.$space-900;
 $common-padding-x-tablet: tokens.$space-1000;
 
-// ModalDialog
-$dialog-width: 375px;
-$dialog-height: auto;
-$dialog-max-height: none;
-$dialog-text-color: tokens.$text-primary;
-$dialog-border-radius: tokens.$radius-300;
-$dialog-background-color: tokens.$background-primary;
-$dialog-shadow: tokens.$shadow-300;
+// DrawerPanel
+$panel-width: 375px;
+$panel-height: auto;
+$panel-max-height: none;
+$panel-text-color: tokens.$text-primary;
+$panel-border-radius: tokens.$radius-300;
+$panel-background-color: tokens.$background-primary;
+$panel-shadow: tokens.$shadow-300;
diff --git a/packages/web/src/scss/components/Drawer/index.scss b/packages/web/src/scss/components/Drawer/index.scss
@@ -1,2 +1,2 @@
 @forward 'Drawer';
-@forward 'DrawerDialog';
+@forward 'DrawerPanel';