Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 2 commits into from
Feb 13, 2024
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
caf95b1
style(keyframes): prefix all keyframes to avoid collisions
tw15egan Feb 2, 2024
75e922c
Merge branch 'main' into prefix-animations
tw15egan Feb 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 8 additions & 6 deletions packages/react/src/components/Copy/Copy-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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 () => {
Expand Down Expand Up @@ -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`);
});
});
2 changes: 1 addition & 1 deletion packages/react/src/components/Copy/Copy.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export default function Copy({
}, [handleFadeOut]);

const handleAnimationEnd = (event) => {
if (event.animationName === 'hide-feedback') {
if (event.animationName === `${prefix}--hide-feedback`) {
setAnimation('');
}
};
Expand Down
9 changes: 5 additions & 4 deletions packages/react/src/components/CopyButton/CopyButton-test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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', () => {
Expand Down Expand Up @@ -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`,
});
});
});
Expand Down Expand Up @@ -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`,
});
});
});
Expand Down
4 changes: 2 additions & 2 deletions packages/styles/scss/components/code-snippet/_code-snippet.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
4 changes: 2 additions & 2 deletions packages/styles/scss/components/copy-button/_copy-button.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down
2 changes: 1 addition & 1 deletion packages/styles/scss/components/inline-loading/_inline-loading.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
4 changes: 3 additions & 1 deletion packages/styles/scss/components/inline-loading/_keyframes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand Down
11 changes: 6 additions & 5 deletions packages/styles/scss/components/loading/_animation.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) {
Expand All @@ -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) {
Expand Down
10 changes: 5 additions & 5 deletions packages/styles/scss/components/loading/_loading.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,7 +103,7 @@
display: none;
}

@keyframes rotate {
@keyframes #{$prefix}--rotate {
0% {
transform: rotate(0deg);
}
Expand All @@ -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);
}
Expand All @@ -136,7 +136,7 @@
}
}

@keyframes stroke-end {
@keyframes #{$prefix}--stroke-end {
0% {
stroke-dashoffset: loading-progress($circumference, 81);
}
Expand Down
8 changes: 4 additions & 4 deletions packages/styles/scss/components/progress-bar/_progress-bar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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 {
Expand Down Expand Up @@ -139,7 +139,7 @@
margin-inline-end: 0;
}

@keyframes progress-bar-indeterminate {
@keyframes #{$prefix}--progress-bar-indeterminate {
0% {
background-position-x: 25%;
}
Expand All @@ -150,7 +150,7 @@
}
}

@keyframes progress-bar-indeterminate-rtl {
@keyframes #{$prefix}--progress-bar-indeterminate-rtl {
0% {
background-position-x: -105%;
}
Expand Down
7 changes: 4 additions & 3 deletions packages/styles/scss/utilities/_keyframes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -15,7 +16,7 @@
visibility: hidden;
}

@keyframes hide-feedback {
@keyframes #{$prefix}--hide-feedback {
0% {
@include content-visible;
}
Expand All @@ -25,7 +26,7 @@
}
}

@keyframes show-feedback {
@keyframes #{$prefix}--show-feedback {
0% {
@include content-hidden;
}
Expand All @@ -35,7 +36,7 @@
}
}

@keyframes skeleton {
@keyframes #{$prefix}--skeleton {
0% {
opacity: 0.3;
transform: scaleX(0);
Expand Down
5 changes: 3 additions & 2 deletions packages/styles/scss/utilities/_skeleton.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

@use 'keyframes';
@use '../theme' as *;
@use '../config' as *;

/// Skeleton loading animation
/// @access public
Expand All @@ -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: '';
Expand All @@ -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: '';
Expand Down
5 changes: 3 additions & 2 deletions packages/styles/scss/utilities/_tooltip.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,7 +182,7 @@
opacity: 1;
}

@keyframes tooltip-fade {
@keyframes #{$prefix}--tooltip-fade {
from {
opacity: 0;
}
Expand All @@ -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);
}
}

Expand Down
Loading