ci(chromatic): disable animations globally to prevent false positive visual diffs

packages/calcite-components/.storybook/main.ts

@@ -23,6 +23,19 @@ module.exports = {
       ],
     };
   },
+  previewHead: (head: string): string =>
+    `
+    ${head}
+    ${
+      process.env.STORYBOOK_SCREENSHOT_TEST_BUILD
+        ? `<style>
+          :root {
+            --calcite-duration-factor: 0;
+          }
+        </style>`
+        : ""
+    }
+  `,
   managerHead: (head: string): string => {
     if (process.env.STORYBOOK_SCREENSHOT_TEST_BUILD) {
       return head;

packages/calcite-components/src/components/alert/alert.stories.ts

@@ -160,11 +160,6 @@ queue_NoTest.parameters = {
 };
 
 export const darkModeRTL_TestOnly = (): string => html`
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <calcite-alert
     class="calcite-mode-dark"
     ${boolean("icon", true)}
@@ -188,11 +183,6 @@ export const darkModeRTL_TestOnly = (): string => html`
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
 export const actionsEndNoQueue_TestOnly = (): string => html`
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <calcite-alert label="this is a default danger with icon and link" scale="l" kind="danger" icon open>
     <div slot="title">Hello there!</div>
     <div slot="message">Do you really want to proceed?</div>
@@ -202,11 +192,6 @@ export const actionsEndNoQueue_TestOnly = (): string => html`
 `;
 
 export const actionsEndQueued_TestOnly = (): string => html`
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <calcite-alert id="one" label="One" scale="l" kind="danger" icon open>
     <div slot="title">Hello there, alert one!</div>
     <div slot="message">Do you really want to proceed?</div>
@@ -227,11 +212,6 @@ export const actionsEndQueued_TestOnly = (): string => html`
 `;
 
 export const autoClosableRetainsCloseButton_TestOnly = (): string => html`
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <calcite-alert auto-close auto-close-duration="medium" open scale="m" kind="info">
     <div slot="title">Here's a general bit of information</div>
     <div slot="message">Some kind of contextually relevant content</div>

packages/calcite-components/src/components/block/block.stories.ts

@@ -218,11 +218,6 @@ export const contentSpacing_TestOnly = (): string =>
 
 export const loadingWithSlottedIcon_TestOnly = (): string =>
   html`
-    <style>
-      :root {
-        --calcite-duration-factor: 0;
-      }
-    </style>
     <calcite-block collapsible open loading heading="Layer effects" description="Adjust blur">
       <calcite-icon scale="s" slot="icon" icon="effects"></calcite-icon>
       <calcite-notice open>
@@ -233,11 +228,6 @@ export const loadingWithSlottedIcon_TestOnly = (): string =>
 
 export const loadingWithNoStatusNorSlottedIcon_TestOnly = (): string =>
   html`
-    <style>
-      :root {
-        --calcite-duration-factor: 0;
-      }
-    </style>
     <calcite-block collapsible open loading heading="Layer effects" description="Adjust blur">
       <calcite-notice open>
         <div slot="message">Use layer effects sparingly</div>
@@ -247,11 +237,6 @@ export const loadingWithNoStatusNorSlottedIcon_TestOnly = (): string =>
 
 export const loadingWithStatusIcon_TestOnly = (): string =>
   html`
-    <style>
-      :root {
-        --calcite-duration-factor: 0;
-      }
-    </style>
     <calcite-block loading heading="Valid status" description="summary" collapsible status="valid">
       <calcite-input icon="form-field" placeholder="This is valid input field"></calcite-input>
     </calcite-block>

packages/calcite-components/src/components/dropdown/dropdown.stories.ts

@@ -184,11 +184,6 @@ export const itemsAsLinks = (): string => html`
 `;
 
 export const darkModeRTL_TestOnly = (): string => html`
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <calcite-dropdown
     dir="rtl"
     open
@@ -259,11 +254,6 @@ export const itemsAsLinksDarkMode = (): string => html`
 itemsAsLinksDarkMode.parameters = { modes: modesDarkDefault };
 
 export const scrollingAfterCertainItems_TestOnly = (): string => html`
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <calcite-dropdown
     open
     placement="${select("placement", menuPlacements, defaultMenuPlacement)}"
@@ -297,11 +287,6 @@ scrollingAfterCertainItems_TestOnly.parameters = {
 };
 
 export const scrollingWithoutMaxItems_TestOnly = (): string => html`
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <calcite-dropdown open>
     <calcite-button slot="trigger">Open Dropdown</calcite-button>
     <calcite-dropdown-group
@@ -330,11 +315,6 @@ export const scrollingWithoutMaxItems_TestOnly = (): string => html`
 `;
 
 export const noScrollingWhenMaxItemsEqualsItems_TestOnly = (): string => html` <calcite-dropdown max-items="3" open>
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <calcite-button slot="trigger">Activate Dropdown</calcite-button>
   <calcite-dropdown-group selection-mode="single" group-title="Selection Mode: Single">
     <calcite-dropdown-item>Relevance</calcite-dropdown-item>
@@ -343,35 +323,25 @@ export const noScrollingWhenMaxItemsEqualsItems_TestOnly = (): string => html` <
   </calcite-dropdown-group>
 </calcite-dropdown>`;
 
-export const disabled_TestOnly = (): string => html` <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
-  <calcite-dropdown disabled>
-    <calcite-button slot="trigger">Open Dropdown</calcite-button>
-    <calcite-dropdown-group group-title="First group">
-      <calcite-dropdown-item>1</calcite-dropdown-item>
-      <calcite-dropdown-item>2</calcite-dropdown-item>
-      <calcite-dropdown-item>3</calcite-dropdown-item>
-      <calcite-dropdown-item>4</calcite-dropdown-item>
-      <calcite-dropdown-item>5</calcite-dropdown-item>
-    </calcite-dropdown-group>
-    <calcite-dropdown-group group-title="Second group">
-      <calcite-dropdown-item>6</calcite-dropdown-item>
-      <calcite-dropdown-item>7</calcite-dropdown-item>
-      <calcite-dropdown-item>8</calcite-dropdown-item>
-      <calcite-dropdown-item>9</calcite-dropdown-item>
-      <calcite-dropdown-item>10</calcite-dropdown-item>
-    </calcite-dropdown-group>
-  </calcite-dropdown>`;
+export const disabled_TestOnly = (): string => html` <calcite-dropdown disabled>
+  <calcite-button slot="trigger">Open Dropdown</calcite-button>
+  <calcite-dropdown-group group-title="First group">
+    <calcite-dropdown-item>1</calcite-dropdown-item>
+    <calcite-dropdown-item>2</calcite-dropdown-item>
+    <calcite-dropdown-item>3</calcite-dropdown-item>
+    <calcite-dropdown-item>4</calcite-dropdown-item>
+    <calcite-dropdown-item>5</calcite-dropdown-item>
+  </calcite-dropdown-group>
+  <calcite-dropdown-group group-title="Second group">
+    <calcite-dropdown-item>6</calcite-dropdown-item>
+    <calcite-dropdown-item>7</calcite-dropdown-item>
+    <calcite-dropdown-item>8</calcite-dropdown-item>
+    <calcite-dropdown-item>9</calcite-dropdown-item>
+    <calcite-dropdown-item>10</calcite-dropdown-item>
+  </calcite-dropdown-group>
+</calcite-dropdown>`;
 
 export const flipPositioning_TestOnly = (): string => html`
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <div style="margin:10px;">
     <calcite-dropdown width="m" placement="${select("placement", menuPlacements, "top")}" open>
       <calcite-button slot="trigger">Open Dropdown</calcite-button>
@@ -390,11 +360,6 @@ flipPositioning_TestOnly.parameters = {
 };
 
 export const alignedCenter_TestOnly = (): string => html`
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <div style="text-align:center">
     <calcite-dropdown
       open
@@ -419,11 +384,6 @@ export const alignedCenter_TestOnly = (): string => html`
 `;
 
 export const alignedCenterRTL_TestOnly = (): string => html`
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <div dir="rtl" style="text-align:center">
     <calcite-dropdown
       open
@@ -449,9 +409,6 @@ export const alignedCenterRTL_TestOnly = (): string => html`
 
 export const flipPlacements_TestOnly = (): string => html`
   <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
     .my-dropdown {
       margin-top: 50px;
     }

packages/calcite-components/src/components/loader/loader.stories.ts

@@ -24,11 +24,6 @@ simple_NoTest.parameters = {
 };
 
 export const simple_TestOnly = (): string => html`
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <calcite-loader
     type="${select("type", ["determinate", "indeterminate"], "indeterminate")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"
@@ -50,11 +45,6 @@ inline_NoTest.parameters = {
 };
 
 export const inline_TestOnly = (): string => html`
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <div style="display: inline-flex;align-items: center;justify-content: center;width: 100%;">
   <calcite-loader
     scale="${select("scale", ["s", "m", "l"], "m")}"
@@ -80,11 +70,6 @@ customTheme_NoTest.parameters = {
 };
 
 export const customTheme_TestOnly = (): string => html`
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <calcite-loader
     type="${select("type", ["determinate", "indeterminate"], "indeterminate")}"
     scale="${select("scale", ["s", "m", "l"], "m")}"

packages/calcite-components/src/components/popover/popover.stories.ts

@@ -47,29 +47,24 @@ export const simple = (): string => html`
   </div>
 `;
 
-export const darkModeRTL_TestOnly = (): string => html` <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
-  <div style="width: 400px;">
-    ${referenceElementHTML}
-    <calcite-popover
-      ${boolean("closable", false)}
-      ${boolean("flip-disabled", false)}
-      ${boolean("pointer-disabled", false)}
-      reference-element="reference-element"
-      placement="${select("placement", placements, defaultPopoverPlacement)}"
-      offset-distance="${number("offset-distance", 6)}"
-      offset-skidding="${number("offset-skidding", 0)}"
-      ${boolean("open", true)}
-      text-close="${text("text-close", "Close")}"
-      dir="${select("dir", ["ltr", "rtl"], "rtl")}"
-      class="calcite-mode-dark"
-    >
-      ${contentHTML}
-    </calcite-popover>
-  </div>`;
+export const darkModeRTL_TestOnly = (): string => html` <div style="width: 400px;">
+  ${referenceElementHTML}
+  <calcite-popover
+    ${boolean("closable", false)}
+    ${boolean("flip-disabled", false)}
+    ${boolean("pointer-disabled", false)}
+    reference-element="reference-element"
+    placement="${select("placement", placements, defaultPopoverPlacement)}"
+    offset-distance="${number("offset-distance", 6)}"
+    offset-skidding="${number("offset-skidding", 0)}"
+    ${boolean("open", true)}
+    text-close="${text("text-close", "Close")}"
+    dir="${select("dir", ["ltr", "rtl"], "rtl")}"
+    class="calcite-mode-dark"
+  >
+    ${contentHTML}
+  </calcite-popover>
+</div>`;
 
 darkModeRTL_TestOnly.parameters = { modes: modesDarkDefault };
 
@@ -101,11 +96,6 @@ nested.parameters = {
 };
 
 export const flipPlacements_TestOnly = (): string => html`
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <div style="height: 100px; overflow:scroll; width: 200px;">
     <div class="my-popover-reference">
       <calcite-button title="Reference Element" id="reference-element">nostrud exercitation</calcite-button>
@@ -120,11 +110,6 @@ export const flipPlacements_TestOnly = (): string => html`
 `;
 
 export const scaleConsistencyPopoverHeadingActionSlottedIcon_TestOnly = (): string => html`
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <div style="width: 400px;">
     ${referenceElementHTML}
     <calcite-popover
@@ -141,11 +126,6 @@ export const scaleConsistencyPopoverHeadingActionSlottedIcon_TestOnly = (): stri
 `;
 
 export const smallScaleLayout_TestOnly = (): string => html`
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <div style="width: 400px;">
     ${referenceElementHTML}
     <calcite-popover
@@ -162,11 +142,6 @@ export const smallScaleLayout_TestOnly = (): string => html`
 `;
 
 export const mediumScaleLayout_TestOnly = (): string => html`
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <div style="width: 400px;">
     ${referenceElementHTML}
     <calcite-popover
@@ -183,11 +158,6 @@ export const mediumScaleLayout_TestOnly = (): string => html`
 `;
 
 export const largeScaleLayout_TestOnly = (): string => html`
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <div style="width: 400px;">
     ${referenceElementHTML}
     <calcite-popover

packages/calcite-components/src/components/progress/progress.stories.ts

@@ -22,11 +22,6 @@ export const simple = (): string => html`
 `;
 
 export const darkModeRTL_TestOnly = (): string => html`
-  <style>
-    :root {
-      --calcite-duration-factor: 0;
-    }
-  </style>
   <calcite-progress
     class="calcite-mode-dark"
     type="determinate"