fix(dialog): don't show DialogWrapper divider when there's no headline

adobe · Nov 21, 2022 · b46f724 · b46f724
1 parent eb77858
commit b46f724
Show file tree

Hide file tree

Showing 3 changed files with 87 additions and 1 deletion.
diff --git a/packages/dialog/src/DialogWrapper.ts b/packages/dialog/src/DialogWrapper.ts
@@ -101,7 +101,7 @@ export class DialogWrapper extends DialogBase {
         return html`
             <sp-dialog
                 ?dismissable=${this.dismissable}
-                ?no-divider=${this.noDivider}
+                ?no-divider=${this.noDivider || !this.headline}
                 ?error=${this.error}
                 mode=${ifDefined(this.mode)}
                 size=${ifDefined(this.size)}

diff --git a/packages/dialog/stories/dialog-wrapper.stories.ts b/packages/dialog/stories/dialog-wrapper.stories.ts
@@ -473,6 +473,51 @@ export const wrapperFullscreen = (
     `;
 };
 
+export const wrapperWithHeadline = (
+    args: StoryArgs = {},
+    context: { viewMode?: string } = {}
+): TemplateResult => {
+    const open = context.viewMode === 'docs' ? false : true;
+    return html`
+        <sp-dialog-wrapper
+            ?open=${open}
+            headline="Headline for dialog"
+            @close=${handleClose(args)}
+        >
+            Content of the dialog
+        </sp-dialog-wrapper>
+    `;
+};
+
+export const wrapperWithHeadlineNoDivider = (
+    args: StoryArgs = {},
+    context: { viewMode?: string } = {}
+): TemplateResult => {
+    const open = context.viewMode === 'docs' ? false : true;
+    return html`
+        <sp-dialog-wrapper
+            ?open=${open}
+            headline="Headline for dialog"
+            no-divider=${true}
+            @close=${handleClose(args)}
+        >
+            Content of the dialog
+        </sp-dialog-wrapper>
+    `;
+};
+
+export const wrapperNoHeadline = (
+    args: StoryArgs = {},
+    context: { viewMode?: string } = {}
+): TemplateResult => {
+    const open = context.viewMode === 'docs' ? false : true;
+    return html`
+        <sp-dialog-wrapper ?open=${open} @close=${handleClose(args)}>
+            Content of the dialog
+        </sp-dialog-wrapper>
+    `;
+};
+
 export const tooltips = (
     args: StoryArgs = {},
     context: { viewMode?: string } = {}

diff --git a/packages/dialog/test/dialog-wrapper.test.ts b/packages/dialog/test/dialog-wrapper.test.ts
@@ -34,11 +34,15 @@ import {
     wrapperDismissableUnderlayError,
     wrapperFullscreen,
     wrapperLabeledHero,
+    wrapperNoHeadline,
+    wrapperWithHeadline,
+    wrapperWithHeadlineNoDivider,
 } from '../stories/dialog-wrapper.stories.js';
 import { OverlayTrigger } from '@spectrum-web-components/overlay';
 import { html, TemplateResult } from '@spectrum-web-components/base';
 import { Theme } from '@spectrum-web-components/theme';
 import { testForLitDevWarnings } from '../../../test/testing-helpers.js';
+import { Divider } from '@spectrum-web-components/divider/src/Divider.js';
 
 async function styledFixture<T extends Element>(
     story: TemplateResult
@@ -127,6 +131,43 @@ describe('Dialog Wrapper', () => {
         expect(el.open).to.be.false;
         expect(closeSpy.callCount).to.equal(1);
     });
+    it("shows header divider when there's a header", async () => {
+        const wrapper = await styledFixture<DialogWrapper>(
+            wrapperWithHeadline()
+        );
+        await elementUpdated(wrapper);
+
+        const dialog = wrapper.shadowRoot.querySelector('sp-dialog') as Dialog;
+        const divider = dialog.shadowRoot.querySelector(
+            'sp-divider.divider'
+        ) as Divider;
+
+        expect(divider).to.be.not.null;
+    });
+    it('hides header divider when there\'s a header but "no-divider"', async () => {
+        const wrapper = await styledFixture<DialogWrapper>(
+            wrapperWithHeadlineNoDivider()
+        );
+        await elementUpdated(wrapper);
+
+        const dialog = wrapper.shadowRoot.querySelector('sp-dialog') as Dialog;
+        const divider = dialog.shadowRoot.querySelector(
+            'sp-divider.divider'
+        ) as Divider;
+
+        expect(divider).to.be.null;
+    });
+    it("hides header divider when there's no header", async () => {
+        const wrapper = await styledFixture<DialogWrapper>(wrapperNoHeadline());
+        await elementUpdated(wrapper);
+
+        const dialog = wrapper.shadowRoot.querySelector('sp-dialog') as Dialog;
+        const divider = dialog.shadowRoot.querySelector(
+            'sp-divider.divider'
+        ) as Divider;
+
+        expect(divider).to.be.null;
+    });
     it('dismisses via clicking the underlay when [dismissable]', async () => {
         const test = await styledFixture<DialogWrapper>(
             wrapperDismissableUnderlayError()