fix(toast): switches toast[open] to use visibility hidden to fix overlay handling (#3511)

* fix(toast): switches toast[open] to use visibility hidden to fix overlay handling (#3510)

* fix(toast): switches overlaid story to click rather than hover

* fix(toast): update vrt cache key

Author: benjamind

.circleci/config.yml

@@ -10,7 +10,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: d159cee8aebe6bc8c08c163aecc068ec8df3ccf0
+        default: 592bdbdf7b59f9b27fade2d47a56e1f63dba3f6f
     wireit_cache_name:
         type: string
         default: wireit

packages/toast/src/toast.css

@@ -12,6 +12,23 @@ governing permissions and limitations under the License.
 
 @import './spectrum-toast.css';
 
-:host(:not([open])) {
-    display: none;
+:host {
+    --spectrum-overlay-animation-distance: 6px;
+    --spectrum-overlay-animation-duration: var(
+        --spectrum-animation-duration-100
+    );
+
+    opacity: 0;
+    pointer-events: none;
+    transition: transform var(--spectrum-overlay-animation-duration) ease-in-out,
+        opacity var(--spectrum-overlay-animation-duration) ease-in-out,
+        visibility 0s linear var(--spectrum-overlay-animation-duration);
+    visibility: hidden;
+}
+
+:host([open]) {
+    opacity: 1;
+    pointer-events: auto;
+    transition-delay: 0s;
+    visibility: visible;
 }

packages/toast/stories/toast.stories.ts

@@ -14,6 +14,10 @@ import { html, TemplateResult } from '@spectrum-web-components/base';
 import '@spectrum-web-components/toast/sp-toast.js';
 import '@spectrum-web-components/button/sp-button.js';
 
+import { Placement } from '@spectrum-web-components/overlay';
+import '@spectrum-web-components/overlay/overlay-trigger.js';
+import { ifDefined } from '@spectrum-web-components/base/src/directives.js';
+
 const toast = ({
     variant = '',
     open = true,
@@ -104,3 +108,74 @@ export const Negative = (args: Properties): TemplateResult =>
 
 export const Info = (args: Properties): TemplateResult =>
     variantDemo({ ...args, variant: 'info' });
+
+const overlayStyles = html`
+    <style>
+        html,
+        body,
+        #root,
+        #root-inner,
+        sp-story-decorator {
+            height: 100%;
+            margin: 0;
+        }
+
+        sp-story-decorator > div {
+            display: contents;
+        }
+
+        sp-story-decorator::part(container) {
+            display: flex;
+            flex-direction: column;
+            width: 100%;
+            height: 100%;
+            align-items: center;
+            justify-content: center;
+        }
+
+        overlay-trigger {
+            flex: none;
+            margin: 24px 0;
+        }
+
+        .self-managed:nth-child(3) {
+            margin-left: 50px;
+        }
+    </style>
+`;
+
+const overlaid = (openPlacement: Placement): TemplateResult => {
+    return html`
+        ${overlayStyles}
+        ${(
+            [
+                ['bottom', ''],
+                ['left', 'negative'],
+                ['right', 'positive'],
+                ['top', 'info'],
+            ] as [Placement, string][]
+        ).map(([placement, variant]) => {
+            return html`
+                <overlay-trigger
+                    placement=${placement}
+                    open=${ifDefined(
+                        openPlacement === placement ? 'click' : undefined
+                    )}
+                >
+                    <sp-button label="${placement} test" slot="trigger">
+                        Click for ${variant ? variant : 'toast'} on the
+                        ${placement}
+                    </sp-button>
+                    <sp-toast slot="click-content" variant=${variant}>
+                        ${placement}
+                    </sp-toast>
+                </overlay-trigger>
+            `;
+        })}
+    `;
+};
+
+export const overlaidTop = (): TemplateResult => overlaid('top');
+export const overlaidRight = (): TemplateResult => overlaid('right');
+export const overlaidBottom = (): TemplateResult => overlaid('bottom');
+export const overlaidLeft = (): TemplateResult => overlaid('left');