fix: default spacing

sbb-design-systems · Oct 24, 2023 · 13fa588 · 13fa588
1 parent cc16e8d
commit 13fa588
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 17 deletions.
diff --git a/src/components/sbb-dialog/sbb-dialog.scss b/src/components/sbb-dialog/sbb-dialog.scss
@@ -27,6 +27,10 @@
   --sbb-dialog-header-padding-block: var(--sbb-spacing-responsive-s) 0;
   --sbb-dialog-footer-border: var(--sbb-border-width-1x) solid var(--sbb-color-cloud-default);
 
+  position: fixed;
+  inset: var(--sbb-dialog-inset);
+  z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-z-index));
+
   @include sbb.mq($from: micro) {
     --sbb-dialog-padding-inline: var(--sbb-spacing-fixed-6x);
   }
@@ -91,12 +95,11 @@
 }
 
 .sbb-dialog__container {
-  position: fixed;
   pointer-events: var(--sbb-dialog-pointer-events);
   display: flex;
   align-items: center;
+  position: fixed;
   inset: var(--sbb-dialog-inset);
-  z-index: var(--sbb-dialog-z-index, var(--sbb-overlay-z-index));
 
   // Dialog backdrop (not visible on mobile)
   &::before {

diff --git a/src/components/sbb-dialog/sbb-dialog.stories.tsx b/src/components/sbb-dialog/sbb-dialog.stories.tsx
@@ -16,7 +16,7 @@ const playStory = async ({ canvasElement }): Promise<void> => {
   const canvas = within(canvasElement);
 
   await waitForComponentsReady(() =>
-    canvas.getByTestId('dialog').shadowRoot.querySelector('dialog.sbb-dialog'),
+    canvas.getByTestId('dialog').shadowRoot.querySelector('.sbb-dialog'),
   );
 
   await waitForStablePosition(() => canvas.getByTestId('dialog-trigger'));

diff --git a/src/components/sbb-navigation-section/sbb-navigation-section.stories.tsx b/src/components/sbb-navigation-section/sbb-navigation-section.stories.tsx
@@ -13,7 +13,7 @@ const playStory = async (trigger, canvasElement): Promise<void> => {
   const canvas = within(canvasElement);
 
   await waitForComponentsReady(() =>
-    canvas.getByTestId('navigation').shadowRoot.querySelector('dialog.sbb-navigation'),
+    canvas.getByTestId('navigation').shadowRoot.querySelector('.sbb-navigation'),
   );
 
   const button = canvas.getByTestId('navigation-trigger');
@@ -23,9 +23,7 @@ const playStory = async (trigger, canvasElement): Promise<void> => {
   );
   await waitFor(() =>
     expect(
-      canvas
-        .getByTestId('navigation-section')
-        .shadowRoot.querySelector('dialog.sbb-navigation-section'),
+      canvas.getByTestId('navigation-section').shadowRoot.querySelector('.sbb-navigation-section'),
     ).toBeTruthy(),
   );
   const action = canvas.getByTestId(trigger);

diff --git a/src/components/sbb-navigation/sbb-navigation.scss b/src/components/sbb-navigation/sbb-navigation.scss
@@ -26,11 +26,16 @@
   --sbb-navigation-inline-start: 0;
   --sbb-navigation-expanded-width: 100%;
   --sbb-navigation-inset: 0 auto auto 0;
-  --sbb-navgation-transform: translateX(-100%);
+  --sbb-navigation-transform: translateX(-100%);
   --sbb-navigation-content-transform: translateX(0);
   --sbb-navigation-width: 100%;
   --sbb-navigation-height: 100vh;
 
+  position: fixed;
+  inset: var(--sbb-navigation-inset);
+  z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-z-index));
+  overflow: hidden;
+
   // Needed for backwards compatibility on Chromatic
   // TODO: Remove once not needed
   @supports (height: 100dvh) {
@@ -71,7 +76,7 @@
 
 :host(:not([data-state='closed'])) {
   --sbb-navigation-inset: 0;
-  --sbb-navgation-transform: translateX(0);
+  --sbb-navigation-transform: translateX(0);
 }
 
 :host([data-has-navigation-section]) {
@@ -97,13 +102,8 @@
   @include sbb.grid-base;
 
   padding-inline: 0;
-  position: fixed;
-  inset: var(--sbb-navigation-inset);
   pointer-events: none;
-  outline: none;
-  overflow: hidden;
-  z-index: var(--sbb-navigation-z-index, var(--sbb-overlay-z-index));
-  transform: var(--sbb-navgation-transform);
+  transform: var(--sbb-navigation-transform);
 
   @include sbb.mq($from: large) {
     padding-inline: var(--sbb-layout-base-offset-responsive);

diff --git a/src/components/sbb-navigation/sbb-navigation.stories.tsx b/src/components/sbb-navigation/sbb-navigation.stories.tsx
@@ -15,7 +15,7 @@ const playStory = async ({ canvasElement }): Promise<void> => {
   const canvas = within(canvasElement);
 
   await waitForComponentsReady(() =>
-    canvas.getByTestId('navigation').shadowRoot.querySelector('dialog.sbb-navigation'),
+    canvas.getByTestId('navigation').shadowRoot.querySelector('.sbb-navigation'),
   );
 
   const button = canvas.getByTestId('navigation-trigger');

diff --git a/src/components/sbb-navigation/sbb-navigation.tsx b/src/components/sbb-navigation/sbb-navigation.tsx
@@ -357,7 +357,7 @@ export class SbbNavigation implements ComponentInterface {
         onPointerUp={(event) => this._closeOnBackdropClick(event)}
         onPointerDown={(event) => this._pointerDownListener(event)}
       >
-        <div class="sbb-navigation__container" aria-modal="true">
+        <div class="sbb-navigation__container">
           <div
             ref={(navigationRef) => (this._navigation = navigationRef)}
             id="sbb-navigation-dialog"