From caf95b13539d8b521fdf19a2b4540aa783f4525e Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Fri, 2 Feb 2024 11:06:49 -0500
Subject: [PATCH] style(keyframes): prefix all keyframes to avoid collisions

---
 packages/react/src/components/Copy/Copy-test.js    | 14 ++++++++------
 packages/react/src/components/Copy/Copy.js         |  2 +-
 .../src/components/CopyButton/CopyButton-test.js   |  9 +++++----
 .../components/code-snippet/_code-snippet.scss     |  4 ++--
 .../scss/components/copy-button/_copy-button.scss  |  4 ++--
 .../components/inline-loading/_inline-loading.scss |  2 +-
 .../scss/components/inline-loading/_keyframes.scss |  4 +++-
 .../styles/scss/components/loading/_animation.scss | 11 ++++++-----
 .../styles/scss/components/loading/_loading.scss   | 10 +++++-----
 .../components/progress-bar/_progress-bar.scss     |  8 ++++----
 packages/styles/scss/utilities/_keyframes.scss     |  7 ++++---
 packages/styles/scss/utilities/_skeleton.scss      |  5 +++--
 packages/styles/scss/utilities/_tooltip.scss       |  5 +++--
 13 files changed, 47 insertions(+), 38 deletions(-)

diff --git a/packages/react/src/components/Copy/Copy-test.js b/packages/react/src/components/Copy/Copy-test.js
index 291c2b5b705d..dfbcdd9239ac 100644
--- 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
index 10b4976a79f4..55c57d5404e1 100644
--- 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
index 9d04876a1b77..e0c52694fdbd 100644
--- 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
index 7dc757b43969..d66d0023125b 100644
--- 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
index 9bda42e837c6..57fa28b1ddc0 100644
--- 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
index e8b538a9d6bd..29548d477a54 100644
--- 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
index 498da41773eb..06ee0cb9bc10 100644
--- 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
index 17cd41543b43..f29e9936d2ae 100644
--- 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
index 9c75ca966e64..4b527be8de2b 100644
--- 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
index df661abb300a..063dfc5abeb1 100644
--- 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
index afaea6ed0237..d0bc18d7c7cd 100644
--- 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
index 3fd619511050..05efa94c3d91 100644
--- 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
index 09d83167e450..8a453b9c1e03 100644
--- 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);
     }
   }