feat(sbb-dialog): introduce backdrop property to control backdrop d…

…ensity
sbb-design-systems · Dec 23, 2024 · f91e56d · f91e56d
1 parent 9d47116
commit f91e56d
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 8 deletions.
diff --git a/src/elements/dialog/dialog/__snapshots__/dialog.snapshot.spec.snap.js b/src/elements/dialog/dialog/__snapshots__/dialog.snapshot.spec.snap.js
@@ -2,7 +2,10 @@
 export const snapshots = {};
 
 snapshots["sbb-dialog renders an open dialog DOM"] = 
-`<sbb-dialog data-state="opened">
+`<sbb-dialog
+  backdrop="opaque"
+  data-state="opened"
+>
   <sbb-dialog-title
     aria-level="2"
     level="2"

diff --git a/src/elements/dialog/dialog/dialog.scss b/src/elements/dialog/dialog/dialog.scss
@@ -63,6 +63,10 @@
   }
 }
 
+:host([backdrop='translucent']:is([data-state='opened'], [data-state='opening'])) {
+  --sbb-dialog-backdrop-color: var(--sbb-color-black-alpha-50);
+}
+
 :host([data-hide-header]) {
   // Hide transition
   --sbb-dialog-header-margin-block-start: calc(var(--sbb-dialog-header-height) * -1);

diff --git a/src/elements/dialog/dialog/dialog.stories.ts b/src/elements/dialog/dialog/dialog.stories.ts
@@ -84,6 +84,13 @@ const accessibilityBackLabel: InputType = {
   },
 };
 
+const backdrop: InputType = {
+  control: {
+    type: 'inline-radio',
+  },
+  options: ['opaque', 'translucent'],
+};
+
 const backdropAction: InputType = {
   control: {
     type: 'select',
@@ -99,6 +106,7 @@ const basicArgTypes: ArgTypes = {
   accessibilityBackLabel,
   negative,
   'accessibility-label': accessibilityLabel,
+  backdrop: backdrop,
   'backdrop-action': backdropAction,
 };
 
@@ -110,6 +118,7 @@ const basicArgs: Args = {
   accessibilityBackLabel: 'Go back',
   negative: false,
   'accessibility-label': undefined,
+  backdrop: 'opaque',
   'backdrop-action': backdropAction.options![0],
 };
 
@@ -391,6 +400,15 @@ export const Negative: StoryObj = {
   },
 };
 
+export const TranslucentBackdrop: StoryObj = {
+  render: DefaultTemplate,
+  argTypes: basicArgTypes,
+  args: {
+    ...basicArgs,
+    backdrop: 'translucent',
+  },
+};
+
 export const AllowBackdropClick: StoryObj = {
   render: DefaultTemplate,
   argTypes: basicArgTypes,

diff --git a/src/elements/dialog/dialog/dialog.ts b/src/elements/dialog/dialog/dialog.ts
@@ -36,6 +36,11 @@ class SbbDialogElement extends SbbOverlayBaseElement {
   @property({ attribute: 'backdrop-action' }) public accessor backdropAction: 'close' | 'none' =
     'close';
 
+  /** Backdrop density. */
+  @property({ attribute: 'backdrop', reflect: true }) public accessor backdrop:
+    | 'opaque'
+    | 'translucent' = 'opaque';
+
   // We use a timeout as a workaround to the "ResizeObserver loop completed with undelivered notifications" error.
   // For more details:
   // - https://github.com/WICG/resize-observer/issues/38#issuecomment-422126006

diff --git a/src/elements/dialog/dialog/dialog.visual.spec.ts b/src/elements/dialog/dialog/dialog.visual.spec.ts
@@ -22,7 +22,7 @@ describe(`sbb-dialog`, () => {
   const dialogContent = (longContent = false): TemplateResult => html`
     <sbb-dialog-content>
       <p style="margin: 0">
-        “What really knocks me out is a book that, when you're all done reading it, you wish the
+        What really knocks me out is a book that, when you're all done reading it, you wish the
         author that wrote it was a terrific friend of yours and you could call him up on the phone
         whenever you felt like it.
       </p>
@@ -112,5 +112,21 @@ describe(`sbb-dialog`, () => {
         setup.withPostSetupAction(() => dialog.open());
       }),
     );
+
+    it(
+      `backdrop=translucent`,
+      visualDiffDefault.with(async (setup) => {
+        await setup.withFixture(html`
+          <p>Other content visible in the background</p>
+          <sbb-dialog backdrop="translucent">
+            ${dialogTitle()} ${dialogContent()} ${dialogFooter()}
+          </sbb-dialog>
+        `);
+        const dialog = setup.snapshotElement.querySelector('sbb-dialog')!;
+        setup.withSnapshotElement(dialog);
+
+        setup.withPostSetupAction(() => dialog.open());
+      }),
+    );
   });
 });
diff --git a/src/elements/dialog/dialog/readme.md b/src/elements/dialog/dialog/readme.md
@@ -90,12 +90,13 @@ The `sbb-dialog` component may visually hide the title thanks to the `hideOnScro
 
 ## Properties
 
-| Name                 | Attribute             | Privacy | Type                | Default   | Description                                                                                                 |
-| -------------------- | --------------------- | ------- | ------------------- | --------- | ----------------------------------------------------------------------------------------------------------- |
-| `accessibilityLabel` | `accessibility-label` | public  | `string`            | `''`      | This will be forwarded as aria-label to the relevant nested element to describe the purpose of the overlay. |
-| `backdropAction`     | `backdrop-action`     | public  | `'close' \| 'none'` | `'close'` | Backdrop click action.                                                                                      |
-| `isOpen`             | -                     | public  | `boolean`           |           | Whether the element is open.                                                                                |
-| `negative`           | `negative`            | public  | `boolean`           | `false`   | Negative coloring variant flag.                                                                             |
+| Name                 | Attribute             | Privacy | Type                        | Default    | Description                                                                                                 |
+| -------------------- | --------------------- | ------- | --------------------------- | ---------- | ----------------------------------------------------------------------------------------------------------- |
+| `accessibilityLabel` | `accessibility-label` | public  | `string`                    | `''`       | This will be forwarded as aria-label to the relevant nested element to describe the purpose of the overlay. |
+| `backdrop`           | `backdrop`            | public  | `'opaque' \| 'translucent'` | `'opaque'` | Backdrop density.                                                                                           |
+| `backdropAction`     | `backdrop-action`     | public  | `'close' \| 'none'`         | `'close'`  | Backdrop click action.                                                                                      |
+| `isOpen`             | -                     | public  | `boolean`                   |            | Whether the element is open.                                                                                |
+| `negative`           | `negative`            | public  | `boolean`                   | `false`    | Negative coloring variant flag.                                                                             |
 
 ## Methods