Skip to content

Commit 900862e

Browse files
SainathPoojarySainathPoojaryt-hamano
authoredJan 7, 2025··
Components: Standardize reduced motion handling using media queries (#68421)
* Button: Standardize reduced motion handling using media queries * Button: Standardize animation reduced motion handling using media queries * CheckboxControl: Standardize reduced motion handling using media queries * CircularOptionPicker: Standardize reduced motion handling using media queries * FormToggle: Standardize reduced motion handling using media queries * FormTokenField: Standardize reduced motion handling using media queries * Panel: Standardize reduced motion handling using media queries * Placeholder: Standardize reduced motion handling using media queries * ResizableBox: Standardize reduced motion handling using media queries * TabPanel: Standardize reduced motion handling using media queries * DropZoneComponent: Standardize reduced motion handling using media queries * Animate: Standardize reduced motion handling using media queries * Modal: Standardize reduced motion handling using media queries * Toolbar: Standardize reduced motion handling using media queries * Animate: Fix stuck animation for slide-in animation * Components: Move will-change inside media query for transform optimization - ResizableBox: Optimized transform. - CircularOptionPicker: Optimized transform. * Components: Update CHANGELOG for reduced motion standardization * Components: Move CHANGELOG entry to Unreleased section Co-authored-by: SainathPoojary <sainathpoojary@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>
·
@wordpress/wordcount@4.19.1v20.1.0-rc.1
1 parent 3e6a5e4 commit 900862e

File tree

14 files changed

+126
-79
lines changed

14 files changed

+126
-79
lines changed
 

‎packages/components/CHANGELOG.md

+4
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22

33
## Unreleased
44

5+
### Internal
6+
7+
- `Components`: Standardize reduced motion handling using media queries ([#68421](https://github.com/WordPress/gutenberg/pull/68421)).
8+
59
## 29.1.0 (2025-01-02)
610

711
### Enhancements

‎packages/components/src/animate/style.scss

+16-12
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
.components-animate__appear {
2-
animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
3-
animation-fill-mode: forwards;
4-
@include reduce-motion("animation");
2+
@media not (prefers-reduced-motion) {
3+
animation: components-animate__appear-animation 0.1s cubic-bezier(0, 0, 0.2, 1) 0s;
4+
animation-fill-mode: forwards;
5+
}
56

67
&.is-from-top,
78
&.is-from-top.is-from-left {
@@ -29,16 +30,17 @@
2930
}
3031

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

36-
&.is-from-left {
37-
transform: translateX(+100%);
38-
}
37+
&.is-from-left {
38+
transform: translateX(+100%);
39+
}
3940

40-
&.is-from-right {
41-
transform: translateX(-100%);
41+
&.is-from-right {
42+
transform: translateX(-100%);
43+
}
4244
}
4345
}
4446

@@ -49,7 +51,9 @@
4951
}
5052

5153
.components-animate__loading {
52-
animation: components-animate__loading 1.6s ease-in-out infinite;
54+
@media not (prefers-reduced-motion) {
55+
animation: components-animate__loading 1.6s ease-in-out infinite;
56+
}
5357
}
5458

5559
@keyframes components-animate__loading {

‎packages/components/src/button/style.scss

+14-11
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,11 @@
1515
cursor: pointer;
1616
-webkit-appearance: none;
1717
background: none;
18-
transition: box-shadow 0.1s linear;
19-
@include reduce-motion("transition");
18+
19+
@media not (prefers-reduced-motion) {
20+
transition: box-shadow 0.1s linear;
21+
}
22+
2023
height: $button-size;
2124
align-items: center;
2225
box-sizing: border-box;
@@ -245,10 +248,13 @@
245248
text-align: left;
246249
color: $components-color-accent;
247250
text-decoration: underline;
248-
transition-property: border, background, color;
249-
transition-duration: 0.05s;
250-
transition-timing-function: ease-in-out;
251-
@include reduce-motion("transition");
251+
252+
@media not (prefers-reduced-motion) {
253+
transition-property: border, background, color;
254+
transition-duration: 0.05s;
255+
transition-timing-function: ease-in-out;
256+
}
257+
252258
height: auto;
253259

254260
&:focus {
@@ -275,11 +281,8 @@
275281
&.is-secondary.is-busy,
276282
&.is-secondary.is-busy:disabled,
277283
&.is-secondary.is-busy[aria-disabled="true"] {
278-
animation: components-button__busy-animation 2500ms infinite linear;
279-
// This should be refactored to use the reduce-motion("animation") mixin
280-
// as soon as https://github.com/WordPress/gutenberg/issues/55566 is closed.
281-
@media (prefers-reduced-motion: reduce) {
282-
animation-duration: 0s;
284+
@media not (prefers-reduced-motion) {
285+
animation: components-button__busy-animation 2500ms infinite linear;
283286
}
284287
background-size: 100px 100%;
285288
/* stylelint-disable -- Disable reason: This function call looks nicer when each argument is on its own line. */

‎packages/components/src/checkbox-control/style.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -32,8 +32,10 @@
3232
height: var(--checkbox-input-size);
3333

3434
appearance: none;
35-
transition: 0.1s border-color ease-in-out;
36-
@include reduce-motion("transition");
35+
36+
@media not (prefers-reduced-motion) {
37+
transition: 0.1s border-color ease-in-out;
38+
}
3739

3840
&:focus {
3941
@include button-style-outset__focus(var(--wp-admin-theme-color));

‎packages/components/src/circular-option-picker/style.scss

+10-5
Original file line numberDiff line numberDiff line change
@@ -35,9 +35,11 @@ $color-palette-circle-spacing: 12px;
3535
width: $color-palette-circle-size;
3636
vertical-align: top;
3737
transform: scale(1);
38-
transition: 100ms transform ease;
39-
will-change: transform;
40-
@include reduce-motion("transition");
38+
39+
@media not (prefers-reduced-motion) {
40+
transition: 100ms transform ease;
41+
will-change: transform;
42+
}
4143

4244
&:hover {
4345
transform: scale(1.2);
@@ -73,8 +75,11 @@ $color-palette-circle-spacing: 12px;
7375
border-radius: $radius-round;
7476
background: transparent;
7577
box-shadow: inset 0 0 0 ($color-palette-circle-size * 0.5);
76-
transition: 100ms box-shadow ease;
77-
@include reduce-motion("transition");
78+
79+
@media not (prefers-reduced-motion) {
80+
transition: 100ms box-shadow ease;
81+
}
82+
7883
cursor: pointer;
7984

8085
&:hover {

‎packages/components/src/drop-zone/style.scss

+6-9
Original file line numberDiff line numberDiff line change
@@ -46,22 +46,19 @@
4646
.components-drop-zone__content {
4747
opacity: 1;
4848

49-
transition: opacity 0.2s ease-in-out;
50-
@media (prefers-reduced-motion) {
51-
transition: none;
49+
@media not (prefers-reduced-motion) {
50+
transition: opacity 0.2s ease-in-out;
5251
}
5352
}
5453

5554
.components-drop-zone__content-inner {
5655
opacity: 1;
5756
transform: scale(1);
5857

59-
transition:
60-
opacity 0.1s ease-in-out 0.1s,
61-
transform 0.1s ease-in-out 0.1s;
62-
63-
@media (prefers-reduced-motion) {
64-
transition: none;
58+
@media not (prefers-reduced-motion) {
59+
transition:
60+
opacity 0.1s ease-in-out 0.1s,
61+
transform 0.1s ease-in-out 0.1s;
6562
}
6663
}
6764
}

‎packages/components/src/form-toggle/style.scss

+17-10
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,13 @@ $transition-duration: 0.2s;
2424
width: $toggle-width;
2525
height: $toggle-height;
2626
border-radius: math.div($toggle-height, 2);
27-
transition:
28-
$transition-duration background-color ease,
29-
$transition-duration border-color ease;
30-
@include reduce-motion("transition");
27+
28+
@media not (prefers-reduced-motion) {
29+
transition:
30+
$transition-duration background-color ease,
31+
$transition-duration border-color ease;
32+
}
33+
3134
overflow: hidden;
3235

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

42-
transition: $transition-duration opacity ease;
43-
@include reduce-motion("transition");
45+
@media not (prefers-reduced-motion) {
46+
transition: $transition-duration opacity ease;
47+
}
4448

4549
opacity: 0;
4650
}
@@ -55,10 +59,13 @@ $transition-duration: 0.2s;
5559
width: $toggle-thumb-size;
5660
height: $toggle-thumb-size;
5761
border-radius: $radius-round;
58-
transition:
59-
$transition-duration transform ease,
60-
$transition-duration background-color ease-out;
61-
@include reduce-motion("transition");
62+
63+
@media not (prefers-reduced-motion) {
64+
transition:
65+
$transition-duration transform ease,
66+
$transition-duration background-color ease-out;
67+
}
68+
6269
background-color: $gray-900;
6370
box-shadow: $elevation-x-small;
6471

‎packages/components/src/form-token-field/style.scss

+9-4
Original file line numberDiff line numberDiff line change
@@ -124,8 +124,10 @@
124124
height: auto;
125125
background: $gray-300;
126126
min-width: unset;
127-
transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
128-
@include reduce-motion;
127+
128+
@media not (prefers-reduced-motion) {
129+
transition: all 0.2s cubic-bezier(0.4, 1, 0.4, 1);
130+
}
129131
}
130132

131133
.components-form-token-field__token-text {
@@ -154,8 +156,11 @@
154156
min-width: 100%;
155157
max-height: $grid-unit-80 * 2;
156158
overflow-y: auto;
157-
transition: all 0.15s ease-in-out;
158-
@include reduce-motion("transition");
159+
160+
@media not (prefers-reduced-motion) {
161+
transition: all 0.15s ease-in-out;
162+
}
163+
159164
list-style: none;
160165
box-shadow: inset 0 $border-width 0 0 $gray-600; // Matches the border color of the input.
161166
margin: 0;

‎packages/components/src/modal/style.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -33,10 +33,12 @@
3333
display: flex;
3434
// Animate the modal frame/contents appearing on the page.
3535
animation-name: components-modal__appear-animation;
36-
animation-duration: var(--modal-frame-animation-duration);
3736
animation-fill-mode: forwards;
3837
animation-timing-function: cubic-bezier(0.29, 0, 0, 1);
39-
@include reduce-motion("animation");
38+
39+
@media not (prefers-reduced-motion) {
40+
animation-duration: var(--modal-frame-animation-duration);
41+
}
4042

4143
.components-modal__screen-overlay.is-animating-out & {
4244
animation-name: components-modal__disappear-animation;

‎packages/components/src/panel/style.scss

+14-6
Original file line numberDiff line numberDiff line change
@@ -62,9 +62,12 @@
6262
font-size: inherit;
6363
margin-top: 0;
6464
margin-bottom: 0;
65-
transition: 0.1s background ease-in-out;
66-
@include reduce-motion("transition");
65+
66+
@media not (prefers-reduced-motion) {
67+
transition: 0.1s background ease-in-out;
68+
}
6769
}
70+
6871
.components-panel__body.is-opened > .components-panel__body-title {
6972
margin: -1 * $grid-unit-20;
7073
margin-bottom: 5px;
@@ -87,8 +90,11 @@
8790
color: $gray-900;
8891
border: none;
8992
box-shadow: none;
90-
transition: 0.1s background ease-in-out;
91-
@include reduce-motion("transition");
93+
94+
@media not (prefers-reduced-motion) {
95+
transition: 0.1s background ease-in-out;
96+
}
97+
9298
height: auto;
9399

94100
&:focus {
@@ -103,8 +109,10 @@
103109
transform: translateY(-50%);
104110
color: $gray-900;
105111
fill: currentColor;
106-
transition: 0.1s color ease-in-out;
107-
@include reduce-motion("transition");
112+
113+
@media not (prefers-reduced-motion) {
114+
transition: 0.1s color ease-in-out;
115+
}
108116
}
109117

110118
// mirror the arrow horizontally in RTL languages

‎packages/components/src/placeholder/style.scss

+4-2
Original file line numberDiff line numberDiff line change
@@ -173,8 +173,10 @@
173173
.components-button {
174174
opacity: 0;
175175
pointer-events: none;
176-
transition: opacity 0.1s linear;
177-
@include reduce-motion("transition");
176+
177+
@media not (prefers-reduced-motion) {
178+
transition: opacity 0.1s linear;
179+
}
178180
}
179181

180182
.is-selected > & {

‎packages/components/src/resizable-box/style.scss

+14-9
Original file line numberDiff line numberDiff line change
@@ -60,9 +60,12 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
6060
position: absolute;
6161
top: calc(50% - 1px);
6262
right: calc(50% - 1px);
63-
transition: transform 0.1s ease-in;
64-
@include reduce-motion("transition");
65-
will-change: transform;
63+
64+
@media not (prefers-reduced-motion) {
65+
transition: transform 0.1s ease-in;
66+
will-change: transform;
67+
}
68+
6669
opacity: 0;
6770
}
6871

@@ -102,18 +105,20 @@ $resize-handler-container-size: $resize-handler-size + ($grid-unit-05 * 2); // M
102105
.components-resizable-box__side-handle.components-resizable-box__handle-bottom:hover::before,
103106
.components-resizable-box__side-handle.components-resizable-box__handle-top:active::before,
104107
.components-resizable-box__side-handle.components-resizable-box__handle-bottom:active::before {
105-
animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s;
106-
animation-fill-mode: forwards;
107-
@include reduce-motion("animation");
108+
@media not (prefers-reduced-motion) {
109+
animation: components-resizable-box__top-bottom-animation 0.1s ease-out 0s;
110+
animation-fill-mode: forwards;
111+
}
108112
}
109113

110114
.components-resizable-box__side-handle.components-resizable-box__handle-left:hover::before,
111115
.components-resizable-box__side-handle.components-resizable-box__handle-right:hover::before,
112116
.components-resizable-box__side-handle.components-resizable-box__handle-left:active::before,
113117
.components-resizable-box__side-handle.components-resizable-box__handle-right:active::before {
114-
animation: components-resizable-box__left-right-animation 0.1s ease-out 0s;
115-
animation-fill-mode: forwards;
116-
@include reduce-motion("animation");
118+
@media not (prefers-reduced-motion) {
119+
animation: components-resizable-box__left-right-animation 0.1s ease-out 0s;
120+
animation-fill-mode: forwards;
121+
}
117122
}
118123

119124
/* This CSS is shown only to Safari, which has a bug with table-caption making it jumpy.

‎packages/components/src/tab-panel/style.scss

+6-4
Original file line numberDiff line numberDiff line change
@@ -40,8 +40,9 @@
4040
border-radius: 0;
4141

4242
// Animation
43-
transition: all 0.1s linear;
44-
@include reduce-motion("transition");
43+
@media not (prefers-reduced-motion) {
44+
transition: all 0.1s linear;
45+
}
4546
}
4647

4748
// Active.
@@ -68,8 +69,9 @@
6869
border-radius: $radius-small;
6970

7071
// Animation
71-
transition: all 0.1s linear;
72-
@include reduce-motion("transition");
72+
@media not (prefers-reduced-motion) {
73+
transition: all 0.1s linear;
74+
}
7375
}
7476

7577
&:focus-visible::before {

‎packages/components/src/toolbar/toolbar/style.scss

+4-3
Original file line numberDiff line numberDiff line change
@@ -56,9 +56,10 @@
5656
z-index: -1;
5757

5858
// Animate in.
59-
animation: components-button__appear-animation 0.1s ease;
60-
animation-fill-mode: forwards;
61-
@include reduce-motion("animation");
59+
@media not (prefers-reduced-motion) {
60+
animation: components-button__appear-animation 0.1s ease;
61+
animation-fill-mode: forwards;
62+
}
6263
}
6364

6465
svg {

0 commit comments

Comments
 (0)
Please sign in to comment.