style(keyframes): prefix all keyframes to avoid collisions (#15682)

carbon-design-system · Feb 13, 2024 · 0442850 · 0442850
1 parent 9cda243
commit 0442850
Show file tree

Hide file tree

Showing 13 changed files with 47 additions and 38 deletions.
diff --git a/packages/react/src/components/Copy/Copy-test.js b/packages/react/src/components/Copy/Copy-test.js
@@ -13,6 +13,8 @@ import { Copy as CopyIcon } from '@carbon/icons-react';
 
 jest.useFakeTimers();
 
+const prefix = 'cds';
+
 const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
 
 describe('Copy', () => {
@@ -95,15 +97,15 @@ describe('Feedback', () => {
     const button = screen.getByTestId('copy-button-5');
     await user.click(button);
 
-    expect(button).toHaveClass('cds--copy-btn--animating');
+    expect(button).toHaveClass(`${prefix}--copy-btn--animating`);
     // eslint-disable-next-line testing-library/no-unnecessary-act
     act(() => {
       jest.runAllTimers();
       fireEvent.animationEnd(screen.getByTestId('copy-button-5'), {
-        animationName: 'hide-feedback',
+        animationName: `${prefix}--hide-feedback`,
       });
     });
-    expect(button).not.toHaveClass('cds--copy-btn--animating');
+    expect(button).not.toHaveClass(`${prefix}--copy-btn--animating`);
   });
 
   it('should be able to specify the feedback message', async () => {
@@ -134,14 +136,14 @@ describe('Feedback', () => {
     const button = screen.getByTestId('copy-button-7');
     await user.click(button);
 
-    expect(button).toHaveClass('cds--copy-btn--animating');
+    expect(button).toHaveClass(`${prefix}--copy-btn--animating`);
     // eslint-disable-next-line testing-library/no-unnecessary-act
     act(() => {
       jest.runAllTimers();
       fireEvent.animationEnd(screen.getByTestId('copy-button-7'), {
-        animationName: 'hide-feedback',
+        animationName: `${prefix}--hide-feedback`,
       });
     });
-    expect(button).not.toHaveClass('cds--copy-btn--animating');
+    expect(button).not.toHaveClass(`${prefix}--copy-btn--animating`);
   });
 });
diff --git a/packages/react/src/components/Copy/Copy.js b/packages/react/src/components/Copy/Copy.js
@@ -44,7 +44,7 @@ export default function Copy({
   }, [handleFadeOut]);
 
   const handleAnimationEnd = (event) => {
-    if (event.animationName === 'hide-feedback') {
+    if (event.animationName === `${prefix}--hide-feedback`) {
       setAnimation('');
     }
   };

diff --git a/packages/react/src/components/CopyButton/CopyButton-test.js b/packages/react/src/components/CopyButton/CopyButton-test.js
@@ -12,6 +12,7 @@ import CopyButton from '../CopyButton';
 
 jest.useFakeTimers();
 const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
+const prefix = 'cds';
 
 describe('CopyButton', () => {
   it('should set tabIndex if one is passed via props', () => {
@@ -77,12 +78,12 @@ describe('Feedback', () => {
     const button = screen.getByTestId('copy-btn-5');
     await user.click(button);
 
-    expect(button).toHaveClass('cds--copy-btn--animating');
+    expect(button).toHaveClass(`${prefix}--copy-btn--animating`);
     // eslint-disable-next-line testing-library/no-unnecessary-act
     act(() => {
       jest.runAllTimers();
       fireEvent.animationEnd(screen.getByTestId('copy-btn-5'), {
-        animationName: 'hide-feedback',
+        animationName: `${prefix}--hide-feedback`,
       });
     });
   });
@@ -113,12 +114,12 @@ describe('Feedback', () => {
     const button = screen.getByTestId('copy-btn-7');
     await user.click(button);
 
-    expect(button).toHaveClass('cds--copy-btn--animating');
+    expect(button).toHaveClass(`${prefix}--copy-btn--animating`);
     // eslint-disable-next-line testing-library/no-unnecessary-act
     act(() => {
       jest.runAllTimers();
       fireEvent.animationEnd(screen.getByTestId('copy-btn-7'), {
-        animationName: 'hide-feedback',
+        animationName: `${prefix}--hide-feedback`,
       });
     });
   });

diff --git a/packages/styles/scss/components/code-snippet/_code-snippet.scss b/packages/styles/scss/components/code-snippet/_code-snippet.scss
@@ -117,13 +117,13 @@ $copy-btn-feedback: $background-inverse !default;
   .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out::before,
   .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out
     .#{$prefix}--copy-btn__feedback {
-    animation: $duration-fast-02 motion(standard, productive) hide-feedback;
+    animation: $duration-fast-02 motion(standard, productive) #{$prefix}--hide-feedback;
   }
 
   .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in::before,
   .#{$prefix}--snippet--inline.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in
     .#{$prefix}--copy-btn__feedback {
-    animation: $duration-fast-02 motion(standard, productive) show-feedback;
+    animation: $duration-fast-02 motion(standard, productive) #{$prefix}--show-feedback;
   }
 
   .#{$prefix}--snippet--inline code {

diff --git a/packages/styles/scss/components/copy-button/_copy-button.scss b/packages/styles/scss/components/copy-button/_copy-button.scss
@@ -73,13 +73,13 @@
     &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out
       .#{$prefix}--copy-btn__feedback {
       // https://github.com/stylelint/stylelint/issues/2363
-      animation: $duration-fast-02 motion(standard, productive) hide-feedback;
+      animation: $duration-fast-02 motion(standard, productive) #{$prefix}--hide-feedback;
     }
 
     &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in::before,
     &.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in
       .#{$prefix}--copy-btn__feedback {
-      animation: $duration-fast-02 motion(standard, productive) show-feedback;
+      animation: $duration-fast-02 motion(standard, productive) #{$prefix}--show-feedback;
     }
   }
 

diff --git a/packages/styles/scss/components/inline-loading/_inline-loading.scss b/packages/styles/scss/components/inline-loading/_inline-loading.scss
@@ -61,7 +61,7 @@ $-loading-gap-small: 110;
   .#{$prefix}--inline-loading__checkmark {
     animation-duration: 250ms;
     animation-fill-mode: forwards;
-    animation-name: stroke;
+    animation-name: #{$prefix}--stroke;
     fill: none;
     stroke: $interactive;
     stroke-dasharray: 12;

diff --git a/packages/styles/scss/components/inline-loading/_keyframes.scss b/packages/styles/scss/components/inline-loading/_keyframes.scss
@@ -5,7 +5,9 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@keyframes stroke {
+@use '../../config' as *;
+
+@keyframes #{prefix}--stroke {
   100% {
     stroke-dashoffset: 0;
   }

diff --git a/packages/styles/scss/components/loading/_animation.scss b/packages/styles/scss/components/loading/_animation.scss
@@ -6,19 +6,20 @@
 //
 
 @use '../../motion';
+@use '../../config' as *;
 
 @mixin spin {
   // Animate the container
   animation-duration: 690ms;
   animation-fill-mode: forwards;
   animation-iteration-count: infinite;
-  animation-name: rotate;
+  animation-name: #{$prefix}--rotate;
   animation-timing-function: linear;
 
   // Animate the stroke
   svg circle {
     animation-duration: 10ms;
-    animation-name: init-stroke;
+    animation-name: #{$prefix}--init-stroke;
     animation-timing-function: motion.$standard-easing;
 
     @media screen and (prefers-reduced-motion: reduce) {
@@ -29,15 +30,15 @@
 
 @mixin stop {
   // Animate the container
-  animation: rotate-end-p1 700ms motion.$ease-out forwards,
-    rotate-end-p2 700ms motion.$ease-out 700ms forwards;
+  animation: #{$prefix}--rotate-end-p1 700ms motion.$ease-out forwards,
+    #{$prefix}--rotate-end-p2 700ms motion.$ease-out 700ms forwards;
 
   // Animate the stroke
   svg circle {
     animation-delay: 700ms;
     animation-duration: 700ms;
     animation-fill-mode: forwards;
-    animation-name: stroke-end;
+    animation-name: #{$prefix}--stroke-end;
     animation-timing-function: motion.$ease-out;
 
     @media screen and (prefers-reduced-motion: reduce) {

diff --git a/packages/styles/scss/components/loading/_loading.scss b/packages/styles/scss/components/loading/_loading.scss
@@ -103,7 +103,7 @@
     display: none;
   }
 
-  @keyframes rotate {
+  @keyframes #{$prefix}--rotate {
     0% {
       transform: rotate(0deg);
     }
@@ -113,20 +113,20 @@
     }
   }
 
-  @keyframes rotate-end-p1 {
+  @keyframes #{$prefix}--rotate-end-p1 {
     100% {
       transform: rotate(360deg);
     }
   }
 
-  @keyframes rotate-end-p2 {
+  @keyframes #{$prefix}--rotate-end-p2 {
     100% {
       transform: rotate(-360deg);
     }
   }
 
   /* Stroke animations */
-  @keyframes init-stroke {
+  @keyframes #{$prefix}--init-stroke {
     0% {
       stroke-dashoffset: loading-progress($circumference, 0);
     }
@@ -136,7 +136,7 @@
     }
   }
 
-  @keyframes stroke-end {
+  @keyframes #{$prefix}--stroke-end {
     0% {
       stroke-dashoffset: loading-progress($circumference, 81);
     }

diff --git a/packages/styles/scss/components/progress-bar/_progress-bar.scss b/packages/styles/scss/components/progress-bar/_progress-bar.scss
@@ -75,7 +75,7 @@
     position: absolute;
     animation-duration: 1400ms;
     animation-iteration-count: infinite;
-    animation-name: progress-bar-indeterminate;
+    animation-name: #{$prefix}--progress-bar-indeterminate;
     animation-timing-function: linear;
     background-image: linear-gradient(
       90deg,
@@ -91,7 +91,7 @@
   [dir='rtl']
     .#{$prefix}--progress-bar--indeterminate
     .#{$prefix}--progress-bar__track::after {
-    animation-name: progress-bar-indeterminate-rtl;
+    animation-name: #{$prefix}--progress-bar-indeterminate-rtl;
   }
 
   .#{$prefix}--progress-bar__helper-text {
@@ -139,7 +139,7 @@
     margin-inline-end: 0;
   }
 
-  @keyframes progress-bar-indeterminate {
+  @keyframes #{$prefix}--progress-bar-indeterminate {
     0% {
       background-position-x: 25%;
     }
@@ -150,7 +150,7 @@
     }
   }
 
-  @keyframes progress-bar-indeterminate-rtl {
+  @keyframes #{$prefix}--progress-bar-indeterminate-rtl {
     0% {
       background-position-x: -105%;
     }

diff --git a/packages/styles/scss/utilities/_keyframes.scss b/packages/styles/scss/utilities/_keyframes.scss
@@ -4,6 +4,7 @@
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
+@use '../config' as *;
 
 @mixin content-visible {
   opacity: 1;
@@ -15,7 +16,7 @@
   visibility: hidden;
 }
 
-@keyframes hide-feedback {
+@keyframes #{$prefix}--hide-feedback {
   0% {
     @include content-visible;
   }
@@ -25,7 +26,7 @@
   }
 }
 
-@keyframes show-feedback {
+@keyframes #{$prefix}--show-feedback {
   0% {
     @include content-hidden;
   }
@@ -35,7 +36,7 @@
   }
 }
 
-@keyframes skeleton {
+@keyframes #{$prefix}--skeleton {
   0% {
     opacity: 0.3;
     transform: scaleX(0);

diff --git a/packages/styles/scss/utilities/_skeleton.scss b/packages/styles/scss/utilities/_skeleton.scss
@@ -7,6 +7,7 @@
 
 @use 'keyframes';
 @use '../theme' as *;
+@use '../config' as *;
 
 /// Skeleton loading animation
 /// @access public
@@ -30,7 +31,7 @@
 
   &::before {
     position: absolute;
-    animation: 3000ms ease-in-out skeleton infinite;
+    animation: 3000ms ease-in-out #{$prefix}--skeleton infinite;
     background: $skeleton-element;
     block-size: 100%;
     content: '';
@@ -55,7 +56,7 @@
 
   &::before {
     position: absolute;
-    animation: 3000ms ease-in-out skeleton infinite;
+    animation: 3000ms ease-in-out #{$prefix}--skeleton infinite;
     background: $skeleton-element;
     block-size: 100%;
     content: '';

diff --git a/packages/styles/scss/utilities/_tooltip.scss b/packages/styles/scss/utilities/_tooltip.scss
@@ -182,7 +182,7 @@
       opacity: 1;
     }
 
-    @keyframes tooltip-fade {
+    @keyframes #{$prefix}--tooltip-fade {
       from {
         opacity: 0;
       }
@@ -202,7 +202,8 @@
     .#{$prefix}--assistive-text,
     + .#{$prefix}--assistive-text,
     &.#{$prefix}--tooltip--a11y::before {
-      animation: tooltip-fade $duration-fast-01 motion(standard, productive);
+      animation: #{$prefix}--tooltip-fade $duration-fast-01
+        motion(standard, productive);
     }
   }