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

Components: Standardize reduced motion handling using media queries #68421

Open
wants to merge 15 commits into
base: trunk
Choose a base branch
from
Open

Components: Standardize reduced motion handling using media queries #68421

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
a45c67a
Button: Standardize reduced motion handling using media queries
SainathPoojary Dec 31, 2024
72773cc
Button: Standardize animation reduced motion handling using media que…
SainathPoojary Dec 31, 2024
3872568
CheckboxControl: Standardize reduced motion handling using media queries
SainathPoojary Dec 31, 2024
8d46aed
CircularOptionPicker: Standardize reduced motion handling using media…
SainathPoojary Dec 31, 2024
386c259
FormToggle: Standardize reduced motion handling using media queries
SainathPoojary Dec 31, 2024
2c421b0
FormTokenField: Standardize reduced motion handling using media queries
SainathPoojary Dec 31, 2024
7105494
Panel: Standardize reduced motion handling using media queries
SainathPoojary Dec 31, 2024
c863a53
Placeholder: Standardize reduced motion handling using media queries
SainathPoojary Dec 31, 2024
f9a5c9b
ResizableBox: Standardize reduced motion handling using media queries
SainathPoojary Jan 2, 2025
bdb3f8d
TabPanel: Standardize reduced motion handling using media queries
SainathPoojary Jan 2, 2025
90804a2
DropZoneComponent: Standardize reduced motion handling using media qu…
SainathPoojary Jan 2, 2025
147e9bb
Animate: Standardize reduced motion handling using media queries
SainathPoojary Jan 3, 2025
7ea0752
Modal: Standardize reduced motion handling using media queries
SainathPoojary Jan 3, 2025
fb9f4ee
Toolbar: Standardize reduced motion handling using media queries
SainathPoojary Jan 3, 2025
3ab4762
Animate: Fix stuck animation for slide-in animation
SainathPoojary Jan 3, 2025
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
28 changes: 16 additions & 12 deletions packages/components/src/animate/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,8 @@
.components-animate__appear {
animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
animation-fill-mode: forwards;
@include reduce-motion("animation");
@media not (prefers-reduced-motion) {
animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
animation-fill-mode: forwards;
}

&.is-from-top,
&.is-from-top.is-from-left {
Expand Down Expand Up @@ -29,16 +30,17 @@
}

.components-animate__slide-in {
animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1);
animation-fill-mode: forwards;
@include reduce-motion("animation");
@media not (prefers-reduced-motion) {
animation: components-animate__slide-in-animation 0.1s cubic-bezier(0, 0, 0.2, 1);
animation-fill-mode: forwards;

&.is-from-left {
transform: translateX(+100%);
}
&.is-from-left {
transform: translateX(+100%);
}

&.is-from-right {
transform: translateX(-100%);
&.is-from-right {
transform: translateX(-100%);
}
}
}

Expand All @@ -49,7 +51,9 @@
}

.components-animate__loading {
animation: components-animate__loading 1.6s ease-in-out infinite;
@media not (prefers-reduced-motion) {
animation: components-animate__loading 1.6s ease-in-out infinite;
}
}

@keyframes components-animate__loading {
Expand Down
25 changes: 14 additions & 11 deletions packages/components/src/button/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,11 @@
cursor: pointer;
-webkit-appearance: none;
background: none;
transition: box-shadow 0.1s linear;
@include reduce-motion("transition");

@media not (prefers-reduced-motion) {
transition: box-shadow 0.1s linear;
}

height: $button-size;
align-items: center;
box-sizing: border-box;
Expand Down Expand Up @@ -245,10 +248,13 @@
text-align: left;
color: $components-color-accent;
text-decoration: underline;
transition-property: border, background, color;
transition-duration: 0.05s;
transition-timing-function: ease-in-out;
@include reduce-motion("transition");

@media not (prefers-reduced-motion) {
transition-property: border, background, color;
transition-duration: 0.05s;
transition-timing-function: ease-in-out;
}

height: auto;

&:focus {
Expand All @@ -275,11 +281,8 @@
&.is-secondary.is-busy,
&.is-secondary.is-busy:disabled,
&.is-secondary.is-busy[aria-disabled="true"] {
animation: components-button__busy-animation 2500ms infinite linear;
// This should be refactored to use the reduce-motion("animation") mixin
// as soon as https://github.com/WordPress/gutenberg/issues/55566 is closed.
@media (prefers-reduced-motion: reduce) {
animation-duration: 0s;
@media not (prefers-reduced-motion) {
animation: components-button__busy-animation 2500ms infinite linear;
}
background-size: 100px 100%;
/* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */
Expand Down
6 changes: 4 additions & 2 deletions packages/components/src/checkbox-control/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,8 +32,10 @@
height: var(--checkbox-input-size);

appearance: none;
transition: 0.1s border-color ease-in-out;
@include reduce-motion("transition");

@media not (prefers-reduced-motion) {
transition: 0.1s border-color ease-in-out;
}

&:focus {
@include button-style-outset__focus(var(--wp-admin-theme-color));
Expand Down
14 changes: 10 additions & 4 deletions packages/components/src/circular-option-picker/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,9 +35,12 @@ $color-palette-circle-spacing: 12px;
width: $color-palette-circle-size;
vertical-align: top;
transform: scale(1);
transition: 100ms transform ease;

@media not (prefers-reduced-motion) {
transition: 100ms transform ease;
}

will-change: transform;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we could move the will-change inside the media query.

@include reduce-motion("transition");

&:hover {
transform: scale(1.2);
Expand Down Expand Up @@ -73,8 +76,11 @@ $color-palette-circle-spacing: 12px;
border-radius: $radius-round;
background: transparent;
box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5);
transition: 100ms box-shadow ease;
@include reduce-motion("transition");

@media not (prefers-reduced-motion) {
transition: 100ms box-shadow ease;
}

cursor: pointer;

&:hover {
Expand Down
15 changes: 6 additions & 9 deletions packages/components/src/drop-zone/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,22 +46,19 @@
.components-drop-zone__content {
opacity: 1;

transition: opacity 0.2s ease-in-out;
@media (prefers-reduced-motion) {
transition: none;
@media not (prefers-reduced-motion) {
transition: opacity 0.2s ease-in-out;
}
}

.components-drop-zone__content-inner {
opacity: 1;
transform: scale(1);

transition:
opacity 0.1s ease-in-out 0.1s,
transform 0.1s ease-in-out 0.1s;

@media (prefers-reduced-motion) {
transition: none;
@media not (prefers-reduced-motion) {
transition:
opacity 0.1s ease-in-out 0.1s,
transform 0.1s ease-in-out 0.1s;
}
}
}
Expand Down
27 changes: 17 additions & 10 deletions packages/components/src/form-toggle/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,10 +24,13 @@ $transition-duration: 0.2s;
width: $toggle-width;
height: $toggle-height;
border-radius: math.div($toggle-height, 2);
transition:
$transition-duration background-color ease,
$transition-duration border-color ease;
@include reduce-motion("transition");

@media not (prefers-reduced-motion) {
transition:
$transition-duration background-color ease,
$transition-duration border-color ease;
}

overflow: hidden;

// Windows High Contrast Mode
Expand All @@ -39,8 +42,9 @@ $transition-duration: 0.2s;
// Expand the border to fake a solid in Windows High Contrast Mode.
border-top: #{ $toggle-height } solid transparent;

transition: $transition-duration opacity ease;
@include reduce-motion("transition");
@media not (prefers-reduced-motion) {
transition: $transition-duration opacity ease;
}

opacity: 0;
}
Expand All @@ -55,10 +59,13 @@ $transition-duration: 0.2s;
width: $toggle-thumb-size;
height: $toggle-thumb-size;
border-radius: $radius-round;
transition:
$transition-duration transform ease,
$transition-duration background-color ease-out;
@include reduce-motion("transition");

@media not (prefers-reduced-motion) {
transition:
$transition-duration transform ease,
$transition-duration background-color ease-out;
}

background-color: $gray-900;
box-shadow: $elevation-x-small;

Expand Down
13 changes: 9 additions & 4 deletions packages/components/src/form-token-field/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,8 +124,10 @@
height: auto;
background: $gray-300;
min-width: unset;
transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
@include reduce-motion;

@media not (prefers-reduced-motion) {
transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
}
}

.components-form-token-field__token-text {
Expand Down Expand Up @@ -154,8 +156,11 @@
min-width: 100%;
max-height: $grid-unit-80 * 2;
overflow-y: auto;
transition: all 0.15s ease-in-out;
@include reduce-motion("transition");

@media not (prefers-reduced-motion) {
transition: all 0.15s ease-in-out;
}

list-style: none;
box-shadow: inset 0 $border-width 0 0 $gray-600; // Matches the border color of the input.
margin: 0;
Expand Down
6 changes: 4 additions & 2 deletions packages/components/src/modal/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,12 @@
display: flex;
// Animate the modal frame/contents appearing on the page.
animation-name: components-modal__appear-animation;
animation-duration: var(--modal-frame-animation-duration);
animation-fill-mode: forwards;
animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
@include reduce-motion("animation");

@media not (prefers-reduced-motion) {
animation-duration: var(--modal-frame-animation-duration);
}

.components-modal__screen-overlay.is-animating-out & {
animation-name: components-modal__disappear-animation;
Expand Down
20 changes: 14 additions & 6 deletions packages/components/src/panel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,9 +62,12 @@
font-size: inherit;
margin-top: 0;
margin-bottom: 0;
transition: 0.1s background ease-in-out;
@include reduce-motion("transition");

@media not (prefers-reduced-motion) {
transition: 0.1s background ease-in-out;
}
}

.components-panel__body.is-opened > .components-panel__body-title {
margin: -1 * $grid-unit-20;
margin-bottom: 5px;
Expand All @@ -87,8 +90,11 @@
color: $gray-900;
border: none;
box-shadow: none;
transition: 0.1s background ease-in-out;
@include reduce-motion("transition");

@media not (prefers-reduced-motion) {
transition: 0.1s background ease-in-out;
}

height: auto;

&:focus {
Expand All @@ -103,8 +109,10 @@
transform: translateY(-50%);
color: $gray-900;
fill: currentColor;
transition: 0.1s color ease-in-out;
@include reduce-motion("transition");

@media not (prefers-reduced-motion) {
transition: 0.1s color ease-in-out;
}
}

// mirror the arrow horizontally in RTL languages
Expand Down
6 changes: 4 additions & 2 deletions packages/components/src/placeholder/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,8 +173,10 @@
.components-button {
opacity: 0;
pointer-events: none;
transition: opacity 0.1s linear;
@include reduce-motion("transition");

@media not (prefers-reduced-motion) {
transition: opacity 0.1s linear;
}
}

.is-selected > & {
Expand Down
21 changes: 13 additions & 8 deletions packages/components/src/resizable-box/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -60,8 +60,11 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
position: absolute;
top: calc(50% - 1px);
right: calc(50% - 1px);
transition: transform 0.1s ease-in;
@include reduce-motion("transition");

@media not (prefers-reduced-motion) {
transition: transform 0.1s ease-in;
}

will-change: transform;
Comment on lines +64 to 68
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
@media not (prefers-reduced-motion) {
transition: transform 0.1s ease-in;
}
will-change: transform;
@media not (prefers-reduced-motion) {
transition: transform 0.1s ease-in;
will-change: transform;
}

opacity: 0;
}
Expand Down Expand Up @@ -102,18 +105,20 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
.components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
.components-resizable-box__side-handle.components-resizable-box__handle-top:active::before,
.components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before {
animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s;
animation-fill-mode: forwards;
@include reduce-motion("animation");
@media not (prefers-reduced-motion) {
animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s;
animation-fill-mode: forwards;
}
}

.components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before,
.components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before,
.components-resizable-box__side-handle.components-resizable-box__handle-left:active::before,
.components-resizable-box__side-handle.components-resizable-box__handle-right:active::before {
animation: components-resizable-box__left-right-animation 0.1s ease-out 0s;
animation-fill-mode: forwards;
@include reduce-motion("animation");
@media not (prefers-reduced-motion) {
animation: components-resizable-box__left-right-animation 0.1s ease-out 0s;
animation-fill-mode: forwards;
}
}

/* This CSS is shown only to Safari, which has a bug with table-caption making it jumpy.
Expand Down
10 changes: 6 additions & 4 deletions packages/components/src/tab-panel/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,8 +40,9 @@
border-radius: 0;

// Animation
transition: all 0.1s linear;
@include reduce-motion("transition");
@media not (prefers-reduced-motion) {
transition: all 0.1s linear;
}
}

// Active.
Expand All @@ -68,8 +69,9 @@
border-radius: $radius-small;

// Animation
transition: all 0.1s linear;
@include reduce-motion("transition");
@media not (prefers-reduced-motion) {
transition: all 0.1s linear;
}
}

&:focus-visible::before {
Expand Down
7 changes: 4 additions & 3 deletions packages/components/src/toolbar/toolbar/style.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,10 @@
z-index: -1;

// Animate in.
animation: components-button__appear-animation 0.1s ease;
animation-fill-mode: forwards;
@include reduce-motion("animation");
@media not (prefers-reduced-motion) {
animation: components-button__appear-animation 0.1s ease;
animation-fill-mode: forwards;
}
Comment on lines -59 to +62
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you know what this animation is intended to do? As far as I've tested, the outline animation when I focus on a button doesn't work.

Maybe we can improve or fix this in a follow-up.

}

svg {
Expand Down
Loading