fix(story-decorator): ensure reduce motion application in overlays

adobe · Jan 27, 2021 · 3f1bc23 · 3f1bc23
1 parent 865115e
commit 3f1bc23
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 40 deletions.
diff --git a/projects/story-decorator/package.json b/projects/story-decorator/package.json
@@ -53,6 +53,7 @@
         "@spectrum-web-components/base": "^0.3.0",
         "@spectrum-web-components/dropdown": "^0.10.0",
         "@spectrum-web-components/menu": "^0.6.0",
+        "@spectrum-web-components/overlay": "^0.8.0",
         "@spectrum-web-components/switch": "^0.6.0",
         "@spectrum-web-components/theme": "^0.7.1",
         "tslib": "^2.0.0"

diff --git a/projects/story-decorator/src/StoryDecorator.ts b/projects/story-decorator/src/StoryDecorator.ts
@@ -16,6 +16,7 @@ import {
     css,
     property,
     TemplateResult,
+    ifDefined,
 } from '@spectrum-web-components/base';
 import '@spectrum-web-components/theme/sp-theme.js';
 import '@spectrum-web-components/theme/src/themes.js';
@@ -26,6 +27,7 @@ import '@spectrum-web-components/switch/sp-switch.js';
 import { Dropdown } from '@spectrum-web-components/dropdown';
 import { Switch } from '@spectrum-web-components/switch';
 import { Scale, Color } from '@spectrum-web-components/theme';
+import { ActiveOverlay } from '@spectrum-web-components/overlay';
 
 const queryString = window.location.search;
 const urlParams = new URLSearchParams(queryString);
@@ -49,6 +51,41 @@ declare global {
 
 window.__swc_hack_knobs__ = window.__swc_hack_knobs__ || {};
 
+const reduceMotionProperties = css`
+    --spectrum-global-animation-duration-100: 0ms;
+    --spectrum-global-animation-duration-200: 0ms;
+    --spectrum-global-animation-duration-300: 0ms;
+    --spectrum-global-animation-duration-400: 0ms;
+    --spectrum-global-animation-duration-500: 0ms;
+    --spectrum-global-animation-duration-600: 0ms;
+    --spectrum-global-animation-duration-700: 0ms;
+    --spectrum-global-animation-duration-800: 0ms;
+    --spectrum-global-animation-duration-900: 0ms;
+    --spectrum-global-animation-duration-1000: 0ms;
+    --spectrum-global-animation-duration-2000: 0ms;
+    --spectrum-global-animation-duration-4000: 0ms;
+`;
+
+ActiveOverlay.prototype.renderTheme = function (
+    content: TemplateResult
+): TemplateResult {
+    const { color, scale } = this;
+    return html`
+        ${window.__swc_hack_knobs__.defaultReduceMotion
+            ? html`
+                  <style>
+                      sp-theme {
+                          ${reduceMotionProperties}
+                      }
+                  </style>
+              `
+            : html``}
+        <sp-theme color=${ifDefined(color)} scale=${ifDefined(scale)}>
+            ${content}
+        </sp-theme>
+    `;
+};
+
 export class StoryDecorator extends SpectrumElement {
     static styles = [
         css`
@@ -67,19 +104,7 @@ export class StoryDecorator extends SpectrumElement {
                 );
             }
             :host([reduce-motion]) sp-theme {
-                --spectrum-global-animation-duration-0: 0ms;
-                --spectrum-global-animation-duration-100: 0ms;
-                --spectrum-global-animation-duration-200: 0ms;
-                --spectrum-global-animation-duration-300: 0ms;
-                --spectrum-global-animation-duration-400: 0ms;
-                --spectrum-global-animation-duration-500: 0ms;
-                --spectrum-global-animation-duration-600: 0ms;
-                --spectrum-global-animation-duration-700: 0ms;
-                --spectrum-global-animation-duration-800: 0ms;
-                --spectrum-global-animation-duration-900: 0ms;
-                --spectrum-global-animation-duration-1000: 0ms;
-                --spectrum-global-animation-duration-2000: 0ms;
-                --spectrum-global-animation-duration-4000: 0ms;
+                ${reduceMotionProperties}
             }
             .manage-theme {
                 position: fixed;
@@ -242,18 +267,10 @@ export class StoryDecorator extends SpectrumElement {
                 @change=${this.updateTheme}
             >
                 <sp-menu>
-                    <sp-menu-item value="lightest">
-                        Lightest
-                    </sp-menu-item>
-                    <sp-menu-item value="light">
-                        Light
-                    </sp-menu-item>
-                    <sp-menu-item value="dark">
-                        Dark
-                    </sp-menu-item>
-                    <sp-menu-item value="darkest">
-                        Darkest
-                    </sp-menu-item>
+                    <sp-menu-item value="lightest">Lightest</sp-menu-item>
+                    <sp-menu-item value="light">Light</sp-menu-item>
+                    <sp-menu-item value="dark">Dark</sp-menu-item>
+                    <sp-menu-item value="darkest">Darkest</sp-menu-item>
                 </sp-menu>
             </sp-dropdown>
         `;
@@ -271,22 +288,16 @@ export class StoryDecorator extends SpectrumElement {
                 @change=${this.updateTheme}
             >
                 <sp-menu>
-                    <sp-menu-item value="medium">
-                        Medium
-                    </sp-menu-item>
-                    <sp-menu-item value="large">
-                        Large
-                    </sp-menu-item>
+                    <sp-menu-item value="medium">Medium</sp-menu-item>
+                    <sp-menu-item value="large">Large</sp-menu-item>
                 </sp-menu>
             </sp-dropdown>
         `;
     }
 
     private get dirControl(): TemplateResult {
         return html`
-            <label @click=${this.handleClickLabel}>
-                Direction
-            </label>
+            <label @click=${this.handleClickLabel}>Direction</label>
             <sp-dropdown
                 id="dir"
                 label="Direction"
@@ -296,12 +307,8 @@ export class StoryDecorator extends SpectrumElement {
                 @change=${this.updateTheme}
             >
                 <sp-menu>
-                    <sp-menu-item value="ltr">
-                        LTR
-                    </sp-menu-item>
-                    <sp-menu-item value="rtl">
-                        RTL
-                    </sp-menu-item>
+                    <sp-menu-item value="ltr">LTR</sp-menu-item>
+                    <sp-menu-item value="rtl">RTL</sp-menu-item>
                 </sp-menu>
             </sp-dropdown>
         `;