From 4d43cce29e3ebe48dad5bd7a8bef31c482b10c09 Mon Sep 17 00:00:00 2001 From: Anveshreddy mekala Date: Tue, 21 Dec 2021 14:53:40 -0600 Subject: [PATCH] =?UTF-8?q?refactor(3491):=20rename=20animation=20duration?= =?UTF-8?q?=20variables=20and=20revert=20base=20variab=E2=80=A6=20(#3746)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * feat(3491): rename animationduration variables and revert base variable to be global * fix misspelled variables * fix failed e2e and rename quick to fast Co-authored-by: github-actions[bot] --- src/assets/styles/_animation.scss | 12 ++++++------ src/components/calcite-alert/calcite-alert.scss | 2 +- src/components/calcite-button/calcite-button.scss | 8 ++++---- .../calcite-color-picker/calcite-color-picker.scss | 2 +- src/components/calcite-loader/calcite-loader.scss | 6 +++--- .../calcite-radio-group-item.scss | 8 ++++---- src/components/calcite-slider/calcite-slider.scss | 4 ++-- .../calcite-tip-manager/calcite-tip-manager.scss | 2 +- .../calcite-tree-item/calcite-tree-item.scss | 5 ++--- src/tests/globalStyles.e2e.ts | 14 +++++++------- tailwind.config.js | 2 +- 11 files changed, 32 insertions(+), 33 deletions(-) diff --git a/src/assets/styles/_animation.scss b/src/assets/styles/_animation.scss index f6c880a3130..a1eae3ffb82 100644 --- a/src/assets/styles/_animation.scss +++ b/src/assets/styles/_animation.scss @@ -41,18 +41,18 @@ } :root { - --calcite-internal-animation-timing-factor: var(--calcite-animation-timing-factor, 1); - --calcite-internal-animation-timing: calc(150ms * var(--calcite-internal-animation-timing-factor)); - --calcite-internal-animation-timing-quick: calc(100ms * var(--calcite-internal-animation-timing-factor)); - --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-animation-timing-factor)); - --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-animation-timing-factor)); + --calcite-animation-timing: calc(150ms * var(--calcite-internal-duration-factor)); + --calcite-internal-duration-factor: var(--calcite-duration-factor, 1); + --calcite-internal-animation-timing-fast: calc(100ms * var(--calcite-internal-duration-factor)); + --calcite-internal-animation-timing-medium: calc(200ms * var(--calcite-internal-duration-factor)); + --calcite-internal-animation-timing-slow: calc(300ms * var(--calcite-internal-duration-factor)); } // allows animation trigger via JS by adding class to element .calcite-animate { opacity: 0; animation-fill-mode: both; - animation-duration: var(--calcite-internal-animation-timing); + animation-duration: var(--calcite-animation-timing); } // specify animation diff --git a/src/components/calcite-alert/calcite-alert.scss b/src/components/calcite-alert/calcite-alert.scss index 92ff1a7e975..d7dcf271c61 100644 --- a/src/components/calcite-alert/calcite-alert.scss +++ b/src/components/calcite-alert/calcite-alert.scss @@ -103,7 +103,7 @@ transform: translate3d(0, $baseline, 0); transition: var(--calcite-internal-animation-timing-slow) $easing-function, opacity var(--calcite-internal-animation-timing-slow) $easing-function, - all var(--calcite-internal-animation-timing) ease-in-out; + all var(--calcite-animation-timing) ease-in-out; } } diff --git a/src/components/calcite-button/calcite-button.scss b/src/components/calcite-button/calcite-button.scss index 9c6c0ae1374..0c7464c033d 100644 --- a/src/components/calcite-button/calcite-button.scss +++ b/src/components/calcite-button/calcite-button.scss @@ -44,10 +44,10 @@ font-inherit font-normal; // include transition from focus - transition: color var(--calcite-internal-animation-timing) ease-in-out, - background-color var(--calcite-internal-animation-timing) ease-in-out, - box-shadow var(--calcite-internal-animation-timing) ease-in-out, outline-offset 100ms ease-in-out, - outline-color 100ms ease-in-out; + transition: color var(--calcite-animation-timing) ease-in-out, + background-color var(--calcite-animation-timing) ease-in-out, box-shadow var(--calcite-animation-timing) ease-in-out, + outline-offset var(--calcite-internal-animation-timing-fast) ease-in-out, + outline-color var(--calcite-internal-animation-timing-fast) ease-in-out; &:hover { @apply no-underline; } diff --git a/src/components/calcite-color-picker/calcite-color-picker.scss b/src/components/calcite-color-picker/calcite-color-picker.scss index 6951f4be55e..2da634cab11 100644 --- a/src/components/calcite-color-picker/calcite-color-picker.scss +++ b/src/components/calcite-color-picker/calcite-color-picker.scss @@ -199,7 +199,7 @@ $gap--large: 12px; } &:hover { - transition: outline-color var(--calcite-internal-animation-timing-quick) ease-in-out; + transition: outline-color var(--calcite-internal-animation-timing-fast) ease-in-out; outline: 2px solid var(--calcite-ui-border-2); outline-offset: 2px; } diff --git a/src/components/calcite-loader/calcite-loader.scss b/src/components/calcite-loader/calcite-loader.scss index a6b6b90687b..d16658d765b 100644 --- a/src/components/calcite-loader/calcite-loader.scss +++ b/src/components/calcite-loader/calcite-loader.scss @@ -106,7 +106,7 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159; stroke: var(--calcite-ui-brand); stroke-dasharray: $loader-circumference; transform: rotate(-90deg); - transition: all var(--calcite-internal-animation-timing-quick) linear; + transition: all var(--calcite-internal-animation-timing-fast) linear; } } @@ -146,8 +146,8 @@ $loader-circumference: ($loader-scale - (2 * $stroke-width)) * 3.14159; @apply opacity-0; transform: scale(0.75, 0.75); transform-origin: center; - transition: opacity calc(180ms * var(--calcite-animation-timing-factor)) linear 800ms, - transform calc(180ms * var(--calcite-animation-timing-factor)) linear 800ms; + transition: opacity calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms, + transform calc(180ms * var(--calcite-internal-duration-factor)) linear 800ms; } :host([complete]) .loader__percentage { diff --git a/src/components/calcite-radio-group-item/calcite-radio-group-item.scss b/src/components/calcite-radio-group-item/calcite-radio-group-item.scss index 0c37ec3fc5b..9ef1993de90 100644 --- a/src/components/calcite-radio-group-item/calcite-radio-group-item.scss +++ b/src/components/calcite-radio-group-item/calcite-radio-group-item.scss @@ -3,7 +3,7 @@ self-stretch cursor-pointer font-normal; - transition: background-color var(--calcite-internal-animation-timing-quick) ease-in-out, + transition: background-color var(--calcite-internal-animation-timing-fast) ease-in-out, border-color var(--calcite-animation-timing) ease-in-out; } @@ -15,9 +15,9 @@ pointer-events-none items-center m-0.5; - transition: background-color var(--calcite-internal-animation-timing-quick) ease-in-out, - border-color var(--calcite-internal-animation-timing-quick) ease-in-out, - color var(--calcite-internal-animation-timing-quick) ease-in-out; + transition: background-color var(--calcite-internal-animation-timing-fast) ease-in-out, + border-color var(--calcite-internal-animation-timing-fast) ease-in-out, + color var(--calcite-internal-animation-timing-fast) ease-in-out; } .label--horizontal { diff --git a/src/components/calcite-slider/calcite-slider.scss b/src/components/calcite-slider/calcite-slider.scss index 624dfa7313e..147761e48cd 100644 --- a/src/components/calcite-slider/calcite-slider.scss +++ b/src/components/calcite-slider/calcite-slider.scss @@ -270,11 +270,11 @@ } .tick__label--min { - transition: opacity var(--calcite-internal-animation-timing); + transition: opacity var(--calcite-animation-timing); } .tick__label--max { - transition: opacity var(--calcite-internal-animation-timing-quick); + transition: opacity var(--calcite-internal-animation-timing-fast); } :host([has-histogram][label-handles]), diff --git a/src/components/calcite-tip-manager/calcite-tip-manager.scss b/src/components/calcite-tip-manager/calcite-tip-manager.scss index 7e95f2d83cf..fc7d562a7d0 100644 --- a/src/components/calcite-tip-manager/calcite-tip-manager.scss +++ b/src/components/calcite-tip-manager/calcite-tip-manager.scss @@ -64,7 +64,7 @@ focus-base mt-px; animation-name: none; - animation-duration: var(--calcite-internal-animation-timing); + animation-duration: var(--calcite-animation-timing); height: var(--calcite-tip-manager-height); &:focus { @apply focus-outset; diff --git a/src/components/calcite-tree-item/calcite-tree-item.scss b/src/components/calcite-tree-item/calcite-tree-item.scss index 6defc2cc219..e93904f3eec 100644 --- a/src/components/calcite-tree-item/calcite-tree-item.scss +++ b/src/components/calcite-tree-item/calcite-tree-item.scss @@ -102,9 +102,8 @@ margin-inline-start: theme("margin.5"); transform: scaleY(0); opacity: 0; - transition: var(--calcite-internal-animation-timing) $easing-function, - opacity var(--calcite-internal-animation-timing) $easing-function, - all var(--calcite-internal-animation-timing) ease-in-out; // note that we're transitioning transform, not height! + transition: var(--calcite-animation-timing) $easing-function, opacity var(--calcite-animation-timing) $easing-function, + all var(--calcite-animation-timing) ease-in-out; // note that we're transitioning transform, not height! transform-origin: top; // keep the top of the element in the same place. this is optional. :host([expanded]) > & { diff --git a/src/tests/globalStyles.e2e.ts b/src/tests/globalStyles.e2e.ts index e8f8388a777..33101c07598 100644 --- a/src/tests/globalStyles.e2e.ts +++ b/src/tests/globalStyles.e2e.ts @@ -38,17 +38,17 @@ describe("global styles", () => { }); }); - it("should set animation duration to 0ms when --animation-timing-factor set to zero", async () => { + it("should set animation duration to 0ms when --calcite-duration-factor set to zero", async () => { const page = await newE2EPage({ html: html` -
+
` @@ -65,13 +65,13 @@ describe("global styles", () => { }); }); - it("should not be able to disable animations with --animation-timing-factor at component level", async () => { + it("should not be able to disable animations with --calcite-duration-factor at component level", async () => { const page = await newE2EPage({ - html: html`
` + html: html`
` }); await page.waitForChanges(); await page.$eval("div", (element: any) => { - element.style.setProperty("--calcite-animation-timing-factor", 0); + element.style.setProperty("--calcite-duration-factor", 0); }); const eleTransition = await page.evaluate(() => { const ele = document.querySelector("div"); @@ -85,7 +85,7 @@ describe("global styles", () => { it("should set animation duration to default value 150ms", async () => { const page = await newE2EPage({ - html: html`
` + html: html`
` }); const eleTransition = await page.evaluate(() => { const ele = document.querySelector("div"); diff --git a/tailwind.config.js b/tailwind.config.js index 680d724b9fb..294ceb59838 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -239,7 +239,7 @@ module.exports = { }, ".transition-default": { "transition-property": "all", - "transition-duration": "var(--calcite-internal-animation-timing)", + "transition-duration": "var(--calcite-animation-timing)", "transition-timing-function": "ease-in-out", "transition-delay": "0s" }