fix(dialog): fade-out animation when lazy loaded on popover overlays (#4937)

* fix(dialog): fade-out animation when lazy loaded on popover overlays

* fix(dialog): missing fade-out animations close dispatch

* chore: update storybook paragraph

* fix: underlay guard

* chore: hash update

* chore: golden hash update

* ci: updated golden image cache

* fix: combined decorators

* ci: updated golden image cache

---------

Co-authored-by: TaraT <[email protected]>
Co-authored-by: Rajdeep Chandra <[email protected]>
Co-authored-by: Rajdeep Chandra <[email protected]>

Author: 4 people

.circleci/config.yml

@@ -14,7 +14,7 @@ parameters:
     # 3. Commit this change to the PR branch where the changes exist.
     current_golden_images_hash:
         type: string
-        default: 62ecc57a00a4e68cdacbad3ce6f0a205fda2e002
+        default: 167f7d54c17e719f195fa9076629e58da969f9ca
     wireit_cache_name:
         type: string
         default: wireit

packages/dialog/src/DialogBase.ts

@@ -155,18 +155,41 @@ export class DialogBase extends FocusVisiblePolyfillMixin(SpectrumElement) {
         this.handleTransitionEvent(event);
     }
 
+    private get hasTransitionDuration(): boolean {
+        const modal = this.shadowRoot.querySelector('.modal') as HTMLElement;
+
+        const modalTransitionDurations =
+            window.getComputedStyle(modal).transitionDuration;
+        for (const duration of modalTransitionDurations.split(','))
+            if (parseFloat(duration) > 0) return true;
+
+        const underlay = this.shadowRoot.querySelector(
+            'sp-underlay'
+        ) as HTMLElement;
+
+        if (underlay) {
+            const underlayTransitionDurations =
+                window.getComputedStyle(underlay).transitionDuration;
+            for (const duration of underlayTransitionDurations.split(','))
+                if (parseFloat(duration) > 0) return true;
+        }
+
+        return false;
+    }
+
     protected override update(changes: PropertyValues<this>): void {
         if (changes.has('open') && changes.get('open') !== undefined) {
+            const hasTransitionDuration = this.hasTransitionDuration;
             this.animating = true;
             this.transitionPromise = new Promise((res) => {
                 this.resolveTransitionPromise = () => {
                     this.animating = false;
+                    if (!this.open && hasTransitionDuration)
+                        this.dispatchClosed();
                     res();
                 };
             });
-            if (!this.open) {
-                this.dispatchClosed();
-            }
+            if (!this.open && !hasTransitionDuration) this.dispatchClosed();
         }
         super.update(changes);
     }

packages/dialog/stories/dialog-base.stories.ts

@@ -10,33 +10,24 @@ governing permissions and limitations under the License.
 */
 
 import { html, TemplateResult } from '@spectrum-web-components/base';
-import '@spectrum-web-components/dialog/sp-dialog-base.js';
-import '@spectrum-web-components/dialog/sp-dialog.js';
 import '@spectrum-web-components/button/sp-button.js';
-import '@spectrum-web-components/overlay/sp-overlay.js';
 import '@spectrum-web-components/checkbox/sp-checkbox.js';
+import '@spectrum-web-components/dialog/sp-dialog-base.js';
+import '@spectrum-web-components/dialog/sp-dialog.js';
+import { trigger } from '@spectrum-web-components/overlay';
 import { alertDestructive } from './dialog.stories.js';
 import { portrait } from './images.js';
-import { disabledButtonDecorator } from './index.js';
+import {
+    disabledButtonWithOverlayDecorator,
+    withOverlayDecorator,
+} from './index.js';
 
 export default {
     title: 'Dialog Base',
     component: 'sp-dialog-base',
-    decorators: [
-        (story: () => TemplateResult): TemplateResult => {
-            return html`
-                <sp-button variant="primary" id="trigger">
-                    Toggle Dialog
-                </sp-button>
-                <sp-overlay type="modal" trigger="trigger@click" open>
-                    ${story()}
-                </sp-overlay>
-            `;
-        },
-    ],
 };
 
-export const Slotted = (): TemplateResult => html`
+export const slotted = (): TemplateResult => html`
     <sp-dialog-base
         underlay
         @click=${(event: Event) => {
@@ -50,6 +41,7 @@ export const Slotted = (): TemplateResult => html`
         ${alertDestructive()}
     </sp-dialog-base>
 `;
+slotted.decorators = [withOverlayDecorator];
 
 export const disabledButton = (): TemplateResult => {
     return html`
@@ -116,7 +108,7 @@ export const disabledButton = (): TemplateResult => {
     `;
 };
 
-disabledButton.decorators = [disabledButtonDecorator];
+disabledButton.decorators = [disabledButtonWithOverlayDecorator];
 
 export const notAgain = (): TemplateResult => html`
     <sp-dialog-base
@@ -143,6 +135,7 @@ export const notAgain = (): TemplateResult => html`
         </sp-dialog>
     </sp-dialog-base>
 `;
+notAgain.decorators = [withOverlayDecorator];
 
 export const moreCustom = (): TemplateResult => html`
     <sp-dialog-base
@@ -189,6 +182,7 @@ export const moreCustom = (): TemplateResult => html`
         </div>
     </sp-dialog-base>
 `;
+moreCustom.decorators = [withOverlayDecorator];
 
 export const fullyCustom = (): TemplateResult => html`
     <sp-dialog-base
@@ -222,3 +216,46 @@ export const fullyCustom = (): TemplateResult => html`
         </div>
     </sp-dialog-base>
 `;
+fullyCustom.decorators = [withOverlayDecorator];
+
+export const lazyLoaded = (): TemplateResult => {
+    const template = (): TemplateResult => html`
+        <sp-dialog-base
+            underlay
+            @click=${(event: Event) => {
+                if ((event.target as HTMLElement).localName === 'sp-button') {
+                    (event.target as HTMLElement).dispatchEvent(
+                        new Event('close', { bubbles: true, composed: true })
+                    );
+                }
+            }}
+        >
+            <sp-dialog size="m">
+                <h2 slot="heading">This is a heading</h2>
+                <p>
+                    The click on the "OK" button should close the overlay with
+                    the correct animation (duration).
+                </p>
+                <sp-button variant="secondary" treatment="fill" slot="button">
+                    Ok
+                </sp-button>
+            </sp-dialog>
+        </sp-dialog-base>
+    `;
+
+    return html`
+        <sp-button
+            variant="primary"
+            ${trigger(template, {
+                open: false,
+                triggerInteraction: 'click',
+            })}
+        >
+            Open dialog
+        </sp-button>
+    `;
+};
+
+lazyLoaded.swc_vrt = {
+    skip: true,
+};

packages/dialog/stories/index.ts

@@ -11,6 +11,8 @@ governing permissions and limitations under the License.
 */
 
 import { html, TemplateResult } from '@spectrum-web-components/base';
+import '@spectrum-web-components/button/sp-button.js';
+import '@spectrum-web-components/overlay/sp-overlay.js';
 
 class CountdownWatcher extends HTMLElement {
     ready!: (value: boolean | PromiseLike<boolean>) => void;
@@ -43,3 +45,18 @@ export const disabledButtonDecorator = (
         <countdown-complete-watcher></countdown-complete-watcher>
     `;
 };
+
+export const withOverlayDecorator = (
+    story: () => TemplateResult
+): TemplateResult => {
+    return html`
+        <sp-button variant="primary" id="trigger">Toggle Dialog</sp-button>
+        <sp-overlay type="modal" trigger="trigger@click" open>
+            ${story()}
+        </sp-overlay>
+    `;
+};
+
+export const disabledButtonWithOverlayDecorator = (
+    story: () => TemplateResult
+): TemplateResult => withOverlayDecorator(() => disabledButtonDecorator(story));