diff --git a/.changeset/itchy-rivers-arrive.md b/.changeset/itchy-rivers-arrive.md new file mode 100644 index 00000000000..f78d716caf4 --- /dev/null +++ b/.changeset/itchy-rivers-arrive.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris-migrator': minor +--- + +Added `animation` properties to tokenize motion migration diff --git a/polaris-migrator/README.md b/polaris-migrator/README.md index d5b26d0b21c..4ea9925920a 100644 --- a/polaris-migrator/README.md +++ b/polaris-migrator/README.md @@ -306,7 +306,7 @@ npx @shopify/polaris-migrator styles-tokenize-font ### `styles-tokenize-motion` -Replace timings (`ms`, `s`) in transition declarations (`transition`, `transition-duration`, `transition-delay`, and `transition-timing-function`) with the corresponding Polaris [motion](https://polaris.shopify.com/tokens/motion) token. +Replace timings (`ms`, `s`) in transition declarations (`transition`, `transition-duration`, `transition-delay`, and `transition-timing-function`) and animation declarations (`animation`, `animation-duration`, `animation-delay`, and `animation-timing-function`) with the corresponding Polaris [motion](https://polaris.shopify.com/tokens/motion) token. ```diff - transition-duration: 100ms; @@ -320,6 +320,18 @@ Replace timings (`ms`, `s`) in transition declarations (`transition`, `transitio - transition: opacity 100ms linear, left 100ms linear; + transition: opacity var(--p-duration-100) linear, left var(--p-duration-100) linear; + +- animation-duration: 100ms; ++ animation-duration: var(--p-duration-100); + +- animation-timing-function: linear; ++ animation-timing-function: var(--p-linear); + +- animation: 100ms linear fadeIn; ++ animation: var(--p-duration-100) linear fadeIn; + +- animation: 100ms linear slideIn, 100ms linear slideIn; ++ animation: var(--p-duration-100) linear slideIn, var(--p-duration-100) linear slideIn; ``` ```sh diff --git a/polaris-migrator/src/migrations/styles-tokenize-motion/styles-tokenize-motion.ts b/polaris-migrator/src/migrations/styles-tokenize-motion/styles-tokenize-motion.ts index d19126665e8..6c5fd3f831c 100644 --- a/polaris-migrator/src/migrations/styles-tokenize-motion/styles-tokenize-motion.ts +++ b/polaris-migrator/src/migrations/styles-tokenize-motion/styles-tokenize-motion.ts @@ -78,10 +78,7 @@ export default createSassMigrator( }); } - function mutateTransitionDurationValue( - node: Node, - decl: Declaration, - ): void { + function mutateDurationValue(node: Node, decl: Declaration): void { if (isPolarisVar(node)) { return; } @@ -126,10 +123,7 @@ export default createSassMigrator( } } - function mutateTransitionFunctionValue( - node: Node, - decl: Declaration, - ): void { + function mutateFunctionValue(node: Node, decl: Declaration): void { if (isPolarisVar(node)) { return; } @@ -181,12 +175,12 @@ export default createSassMigrator( } } - function mutateTransitionDelayValue(node: Node, decl: Declaration): void { + function mutateDelayValue(node: Node, decl: Declaration): void { // For now, we treat delays like durations - return mutateTransitionDurationValue(node, decl); + return mutateDurationValue(node, decl); } - function mutateTransitionShorthandValue( + function mutateShorthandValue( decl: Declaration, parsedValue: ParsedValue, ): void { @@ -223,16 +217,16 @@ export default createSassMigrator( // This node could be either the property to animate, or an easing // function. We try mutate the easing function, but if not we assume // it's the property to animate and therefore do not leave a comment. - mutateTransitionFunctionValue(node, decl); + mutateFunctionValue(node, decl); } }); if (timings[0]) { - mutateTransitionDurationValue(timings[0], decl); + mutateDurationValue(timings[0], decl); } if (timings[1]) { - mutateTransitionDelayValue(timings[1], decl); + mutateDelayValue(timings[1], decl); } }); } @@ -242,21 +236,39 @@ export default createSassMigrator( const handlers: {[key: string]: () => void} = { 'transition-duration': () => { parsedValue.nodes.forEach((node) => { - mutateTransitionDurationValue(node, decl); + mutateDurationValue(node, decl); }); }, 'transition-delay': () => { parsedValue.nodes.forEach((node) => { - mutateTransitionDelayValue(node, decl); + mutateDelayValue(node, decl); }); }, 'transition-timing-function': () => { parsedValue.nodes.forEach((node) => { - mutateTransitionFunctionValue(node, decl); + mutateFunctionValue(node, decl); }); }, transition: () => { - mutateTransitionShorthandValue(decl, parsedValue); + mutateShorthandValue(decl, parsedValue); + }, + 'animation-duration': () => { + parsedValue.nodes.forEach((node) => { + mutateDurationValue(node, decl); + }); + }, + 'animation-delay': () => { + parsedValue.nodes.forEach((node) => { + mutateDelayValue(node, decl); + }); + }, + 'animation-timing-function': () => { + parsedValue.nodes.forEach((node) => { + mutateFunctionValue(node, decl); + }); + }, + animation: () => { + mutateShorthandValue(decl, parsedValue); }, }; diff --git a/polaris-migrator/src/migrations/styles-tokenize-motion/tests/styles-tokenize-motion.input.scss b/polaris-migrator/src/migrations/styles-tokenize-motion/tests/styles-tokenize-motion.input.scss index 82493cffef3..61ef9d8ac38 100644 --- a/polaris-migrator/src/migrations/styles-tokenize-motion/tests/styles-tokenize-motion.input.scss +++ b/polaris-migrator/src/migrations/styles-tokenize-motion/tests/styles-tokenize-motion.input.scss @@ -125,7 +125,14 @@ transition: opacity 5s linear, left 5s linear; } -.edges { +.animation { + animation: 300ms linear fadeIn; + animation-duration: 200ms; + animation-delay: 0.2s; + animation-timing-function: ease; +} + +.edge-cases { // Without an easing function transition: fill 300ms; // Duration comes after easing func diff --git a/polaris-migrator/src/migrations/styles-tokenize-motion/tests/styles-tokenize-motion.output.scss b/polaris-migrator/src/migrations/styles-tokenize-motion/tests/styles-tokenize-motion.output.scss index 5b9d974921d..5c1b23c00f3 100644 --- a/polaris-migrator/src/migrations/styles-tokenize-motion/tests/styles-tokenize-motion.output.scss +++ b/polaris-migrator/src/migrations/styles-tokenize-motion/tests/styles-tokenize-motion.output.scss @@ -195,7 +195,14 @@ left var(--p-duration-5000) var(--p-linear); } -.edges { +.animation { + animation: var(--p-duration-300) var(--p-linear) fadeIn; + animation-duration: var(--p-duration-200); + animation-delay: var(--p-duration-200); + animation-timing-function: var(--p-ease); +} + +.edge-cases { // Without an easing function transition: fill var(--p-duration-300); // Duration comes after easing func