Skip to content

Commit a423198

Browse files
jesstelfordjesstelford
committed
Rename 'transition' migration to 'animatable' + add tests for animation: decl
1 parent 8859f5d commit a423198

11 files changed

+849
-27
lines changed

‎polaris-migrator/README.md‎

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -235,9 +235,24 @@ Be aware that this may also create additional code changes in your codebase, we
235235
npx @shopify/polaris-migrator replace-sass-spacing <path>
236236
```
237237

238-
### `replace-sass-transition`
238+
### `replace-sass-animatable`
239239

240-
Replace timings (`ms`, `s`) and legacy Sass functions (`duration()`,`easing()`) in transition declarations (`transition`, `transition-duration`, `transition-delay`, and `transition-timing-function`) with the corresponding Polaris [motion](https://polaris.shopify.com/tokens/motion) token.
240+
Replace timings (`ms`, `s`) and legacy Sass functions (`duration()`,`easing()`) with the corresponding Polaris [motion](https://polaris.shopify.com/tokens/motion) token.
241+
242+
Declarations targeted:
243+
244+
```
245+
transition
246+
transition-duration
247+
transition-delay
248+
transition-timing-function
249+
animation
250+
animation-duration
251+
animation-delay
252+
animation-timing-function
253+
```
254+
255+
Example changes:
241256

242257
```diff
243258
- transition-duration: 100ms;
@@ -263,7 +278,7 @@ Replace timings (`ms`, `s`) and legacy Sass functions (`duration()`,`easing()`)
263278
```
264279

265280
```sh
266-
npx @shopify/polaris-migrator replace-sass-transition <path>
281+
npx @shopify/polaris-migrator replace-sass-animatable <path>
267282
```
268283

269284
## Creating Migrations

‎polaris-migrator/src/migrations/replace-sass-transition/replace-sass-transition.ts‎ renamed to ‎polaris-migrator/src/migrations/replace-sass-animatable/replace-sass-animatable.ts‎

Lines changed: 34 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const easingFuncConstantsMap = {
7171

7272
const deprecatedEasingFuncs = ['anticipate', 'excite', 'overshoot'];
7373

74-
// Per the spec for transition easing functions:
74+
// Per the spec for easing functions:
7575
// https://w3c.github.io/csswg-drafts/css-easing/#easing-functions
7676
const cssEasingBuiltinFuncs = [
7777
'linear',
@@ -101,7 +101,7 @@ function setNodeValue(node: Node, value: string): void {
101101
}
102102

103103
export default createSassMigrator(
104-
'replace-sass-transition',
104+
'replace-sass-animatable',
105105
(_, {methods, options}, context) => {
106106
const durationFunc = namespace('duration', options);
107107

@@ -150,10 +150,7 @@ export default createSassMigrator(
150150
});
151151
}
152152

153-
function mutateTransitionDurationValue(
154-
node: Node,
155-
decl: Declaration,
156-
): void {
153+
function mutateDurationValue(node: Node, decl: Declaration): void {
157154
if (isPolarisVar(node)) {
158155
return;
159156
}
@@ -226,10 +223,7 @@ export default createSassMigrator(
226223
}
227224
}
228225

229-
function mutateTransitionFunctionValue(
230-
node: Node,
231-
decl: Declaration,
232-
): void {
226+
function mutateTimingFunctionValue(node: Node, decl: Declaration): void {
233227
if (isPolarisVar(node)) {
234228
return;
235229
}
@@ -282,12 +276,12 @@ export default createSassMigrator(
282276
}
283277
}
284278

285-
function mutateTransitionDelayValue(node: Node, decl: Declaration): void {
279+
function mutateDelayValue(node: Node, decl: Declaration): void {
286280
// For now, we treat delays like durations
287-
return mutateTransitionDurationValue(node, decl);
281+
return mutateDurationValue(node, decl);
288282
}
289283

290-
function mutateTransitionShorthandValue(
284+
function mutateAnimatableShorthandValue(
291285
decl: Declaration,
292286
parsedValue: ParsedValue,
293287
): void {
@@ -309,8 +303,8 @@ export default createSassMigrator(
309303
//
310304
// Note that order is important within the items in this property: the
311305
// first value that can be parsed as a time is assigned to the
312-
// transition-duration, and the second value that can be parsed as a
313-
// time is assigned to transition-delay.
306+
// transition-duration/animation-duration, and the second value that can
307+
// be parsed as a time is assigned to transition-delay/animation-delay.
314308
// https://w3c.github.io/csswg-drafts/css-transitions-1/#transition-shorthand-property
315309
//
316310
// That sounds like an array to me! [0] is duration, [1] is delay.
@@ -327,16 +321,16 @@ export default createSassMigrator(
327321
// This node could be either the property to animate, or an easing
328322
// function. We try mutate the easing function, but if not we assume
329323
// it's the property to animate and therefore do not leave a comment.
330-
mutateTransitionFunctionValue(node, decl);
324+
mutateTimingFunctionValue(node, decl);
331325
}
332326
});
333327

334328
if (timings[0]) {
335-
mutateTransitionDurationValue(timings[0], decl);
329+
mutateDurationValue(timings[0], decl);
336330
}
337331

338332
if (timings[1]) {
339-
mutateTransitionDelayValue(timings[1], decl);
333+
mutateDelayValue(timings[1], decl);
340334
}
341335
});
342336
}
@@ -346,21 +340,39 @@ export default createSassMigrator(
346340
const handlers: {[key: string]: () => void} = {
347341
'transition-duration': () => {
348342
parsedValue.nodes.forEach((node) => {
349-
mutateTransitionDurationValue(node, decl);
343+
mutateDurationValue(node, decl);
344+
});
345+
},
346+
'animation-duration': () => {
347+
parsedValue.nodes.forEach((node) => {
348+
mutateDurationValue(node, decl);
350349
});
351350
},
352351
'transition-delay': () => {
353352
parsedValue.nodes.forEach((node) => {
354-
mutateTransitionDelayValue(node, decl);
353+
mutateDelayValue(node, decl);
354+
});
355+
},
356+
'animation-delay': () => {
357+
parsedValue.nodes.forEach((node) => {
358+
mutateDelayValue(node, decl);
355359
});
356360
},
357361
'transition-timing-function': () => {
358362
parsedValue.nodes.forEach((node) => {
359-
mutateTransitionFunctionValue(node, decl);
363+
mutateTimingFunctionValue(node, decl);
364+
});
365+
},
366+
'animation-timing-function': () => {
367+
parsedValue.nodes.forEach((node) => {
368+
mutateTimingFunctionValue(node, decl);
360369
});
361370
},
362371
transition: () => {
363-
mutateTransitionShorthandValue(decl, parsedValue);
372+
mutateAnimatableShorthandValue(decl, parsedValue);
373+
},
374+
animation: () => {
375+
mutateAnimatableShorthandValue(decl, parsedValue);
364376
},
365377
};
366378

‎polaris-migrator/src/migrations/replace-sass-transition/tests/replace-sass-transition.test.ts‎ renamed to ‎polaris-migrator/src/migrations/replace-sass-animatable/tests/replace-sass-animatable.test.ts‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,12 @@
11
import {check} from '../../../utilities/testUtils';
22

3-
const migration = 'replace-sass-transition';
4-
const fixtures = ['replace-sass-duration', 'replace-sass-easing'];
3+
const migration = 'replace-sass-animatable';
4+
const fixtures = [
5+
'replace-sass-transition-duration',
6+
'replace-sass-transition-easing',
7+
'replace-sass-animation-duration',
8+
'replace-sass-animation-easing',
9+
];
510

611
for (const fixture of fixtures) {
712
check(__dirname, {

‎polaris-migrator/src/migrations/replace-sass-animatable/tests/replace-sass-animation-duration.input.scss‎

Lines changed: 185 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,185 @@
1+
.duration-simple-string-arg {
2+
opacity: 1;
3+
animation-duration: legacy-polaris-v8.duration('none');
4+
animation-duration: legacy-polaris-v8.duration('fast');
5+
animation-duration: legacy-polaris-v8.duration('base');
6+
animation-duration: legacy-polaris-v8.duration('slow');
7+
animation-duration: legacy-polaris-v8.duration('slower');
8+
animation-duration: legacy-polaris-v8.duration('slowest');
9+
}
10+
11+
.duration-simple-non-string-arg {
12+
opacity: 1;
13+
animation-duration: legacy-polaris-v8.duration();
14+
animation-duration: legacy-polaris-v8.duration(none);
15+
animation-duration: legacy-polaris-v8.duration(fast);
16+
animation-duration: legacy-polaris-v8.duration(base);
17+
animation-duration: legacy-polaris-v8.duration(slow);
18+
animation-duration: legacy-polaris-v8.duration(slower);
19+
animation-duration: legacy-polaris-v8.duration(slowest);
20+
}
21+
22+
.duration-simple-constant {
23+
opacity: 1;
24+
animation-duration: 0;
25+
animation-duration: 0ms;
26+
animation-duration: 0s;
27+
animation-duration: 50ms;
28+
animation-duration: 0.05s;
29+
animation-duration: 100ms;
30+
animation-duration: 0.1s;
31+
animation-duration: 150ms;
32+
animation-duration: 0.15s;
33+
animation-duration: 200ms;
34+
animation-duration: 0.2s;
35+
animation-duration: 250ms;
36+
animation-duration: 0.25s;
37+
animation-duration: 300ms;
38+
animation-duration: 0.3s;
39+
animation-duration: 350ms;
40+
animation-duration: 0.35s;
41+
animation-duration: 400ms;
42+
animation-duration: 0.4s;
43+
animation-duration: 450ms;
44+
animation-duration: 0.45s;
45+
animation-duration: 500ms;
46+
animation-duration: 0.5s;
47+
animation-duration: 5s;
48+
}
49+
50+
.duration-compound-string-arg {
51+
opacity: 1;
52+
animation: fadeIn legacy-polaris-v8.duration('none') linear;
53+
animation: fadeIn legacy-polaris-v8.duration('fast') linear;
54+
animation: fadeIn legacy-polaris-v8.duration('base') linear;
55+
animation: fadeIn legacy-polaris-v8.duration('slow') linear;
56+
animation: fadeIn legacy-polaris-v8.duration('slower') linear;
57+
animation: fadeIn legacy-polaris-v8.duration('slowest') linear;
58+
}
59+
60+
.duration-compound-non-string-arg {
61+
opacity: 1;
62+
animation: fadeIn legacy-polaris-v8.duration() linear;
63+
animation: fadeIn legacy-polaris-v8.duration(none) linear;
64+
animation: fadeIn legacy-polaris-v8.duration(fast) linear;
65+
animation: fadeIn legacy-polaris-v8.duration(base) linear;
66+
animation: fadeIn legacy-polaris-v8.duration(slow) linear;
67+
animation: fadeIn legacy-polaris-v8.duration(slower) linear;
68+
animation: fadeIn legacy-polaris-v8.duration(slowest) linear;
69+
}
70+
71+
.duration-compound-constant {
72+
opacity: 1;
73+
animation: fadeIn 0 linear;
74+
animation: fadeIn 0ms linear;
75+
animation: fadeIn 0s linear;
76+
animation: fadeIn 50ms linear;
77+
animation: fadeIn 0.05s linear;
78+
animation: fadeIn 100ms linear;
79+
animation: fadeIn 0.1s linear;
80+
animation: fadeIn 150ms linear;
81+
animation: fadeIn 0.15s linear;
82+
animation: fadeIn 200ms linear;
83+
animation: fadeIn 0.2s linear;
84+
animation: fadeIn 250ms linear;
85+
animation: fadeIn 0.25s linear;
86+
animation: fadeIn 300ms linear;
87+
animation: fadeIn 0.3s linear;
88+
animation: fadeIn 350ms linear;
89+
animation: fadeIn 0.35s linear;
90+
animation: fadeIn 400ms linear;
91+
animation: fadeIn 0.4s linear;
92+
animation: fadeIn 450ms linear;
93+
animation: fadeIn 0.45s linear;
94+
animation: fadeIn 500ms linear;
95+
animation: fadeIn 0.5s linear;
96+
animation: fadeIn 5s linear;
97+
}
98+
99+
.duration-multiple-string-arg {
100+
opacity: 1;
101+
animation: fadeIn legacy-polaris-v8.duration('none') linear,
102+
left legacy-polaris-v8.duration('none') linear;
103+
animation: fadeIn legacy-polaris-v8.duration('fast') linear,
104+
left legacy-polaris-v8.duration('fast') linear;
105+
animation: fadeIn legacy-polaris-v8.duration('base') linear,
106+
left legacy-polaris-v8.duration('base') linear;
107+
animation: fadeIn legacy-polaris-v8.duration('slow') linear,
108+
left legacy-polaris-v8.duration('slow') linear;
109+
animation: fadeIn legacy-polaris-v8.duration('slower') linear,
110+
left legacy-polaris-v8.duration('slower') linear;
111+
animation: fadeIn legacy-polaris-v8.duration('slowest') linear,
112+
left legacy-polaris-v8.duration('slowest') linear;
113+
}
114+
115+
.duration-multiple-non-string-arg {
116+
opacity: 1;
117+
animation: fadeIn legacy-polaris-v8.duration() linear,
118+
left legacy-polaris-v8.duration() linear;
119+
animation: fadeIn legacy-polaris-v8.duration(none) linear,
120+
left legacy-polaris-v8.duration(none) linear;
121+
animation: fadeIn legacy-polaris-v8.duration(fast) linear,
122+
left legacy-polaris-v8.duration(fast) linear;
123+
animation: fadeIn legacy-polaris-v8.duration(base) linear,
124+
left legacy-polaris-v8.duration(base) linear;
125+
animation: fadeIn legacy-polaris-v8.duration(slow) linear,
126+
left legacy-polaris-v8.duration(slow) linear;
127+
animation: fadeIn legacy-polaris-v8.duration(slower) linear,
128+
left legacy-polaris-v8.duration(slower) linear;
129+
animation: fadeIn legacy-polaris-v8.duration(slowest) linear,
130+
left legacy-polaris-v8.duration(slowest) linear;
131+
}
132+
133+
.duration-multiple-constant {
134+
opacity: 1;
135+
animation: fadeIn 0 linear, left 0 linear;
136+
animation: fadeIn 0ms linear, left 0ms linear;
137+
animation: fadeIn 0s linear, left 0s linear;
138+
animation: fadeIn 50ms linear, left 50ms linear;
139+
animation: fadeIn 0.05s linear, left 0.05s linear;
140+
animation: fadeIn 100ms linear, left 100ms linear;
141+
animation: fadeIn 0.1s linear, left 0.1s linear;
142+
animation: fadeIn 150ms linear, left 150ms linear;
143+
animation: fadeIn 0.15s linear, left 0.15s linear;
144+
animation: fadeIn 200ms linear, left 200ms linear;
145+
animation: fadeIn 0.2s linear, left 0.2s linear;
146+
animation: fadeIn 250ms linear, left 250ms linear;
147+
animation: fadeIn 0.25s linear, left 0.25s linear;
148+
animation: fadeIn 300ms linear, left 300ms linear;
149+
animation: fadeIn 0.3s linear, left 0.3s linear;
150+
animation: fadeIn 350ms linear, left 350ms linear;
151+
animation: fadeIn 0.35s linear, left 0.35s linear;
152+
animation: fadeIn 400ms linear, left 400ms linear;
153+
animation: fadeIn 0.4s linear, left 0.4s linear;
154+
animation: fadeIn 450ms linear, left 450ms linear;
155+
animation: fadeIn 0.45s linear, left 0.45s linear;
156+
animation: fadeIn 500ms linear, left 500ms linear;
157+
animation: fadeIn 0.5s linear, left 0.5s linear;
158+
animation: fadeIn 5s linear, left 5s linear;
159+
}
160+
161+
.edges {
162+
// sass calculation
163+
animation: (legacy-polaris-v8.duration() - 33ms) fill linear 33ms;
164+
// Duration comes after easing func
165+
animation: fadeIn linear 0.5s;
166+
// Duration + Delay
167+
animation: fadeIn legacy-polaris-v8.duration(slower) linear
168+
legacy-polaris-v8.duration(fast);
169+
// Duration + Delay after easing func
170+
animation: fadeIn linear legacy-polaris-v8.duration(slower)
171+
legacy-polaris-v8.duration(fast);
172+
// foobar isn't a valid duration key
173+
animation-duration: legacy-polaris-v8.duration(foobar);
174+
// can't process variables
175+
animation-duration: $foo;
176+
animation: fadeIn $foo 0.5s;
177+
// Count and direction
178+
animation: fadeIn linear 0.5s 1 forwards;
179+
// animation name last
180+
animation: linear 0.5s 1 forwards fadeIn;
181+
// already uses polaris tokens
182+
animation: var(--p-duration-500) var(--p-linear);
183+
// partially uses polaris tokens
184+
animation: var(--p-duration-500) linear;
185+
}

0 commit comments

Comments
 (0)