Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
5 changes: 5 additions & 0 deletions .changeset/famous-ghosts-march.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris-migrator': minor
---

Introduce `migrate-motion` migration for migrating `transition`, `transition-duration`, and `transition-delay` usages of duration values.
31 changes: 31 additions & 0 deletions polaris-migrator/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -235,6 +235,37 @@ Be aware that this may also create additional code changes in your codebase, we
npx @shopify/polaris-migrator replace-sass-spacing <path>
```

### `replace-sass-transition`

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.

```diff
- transition-duration: 100ms;
+ transition-duration: var(--p-duration-100);

- transition-duration: legacy-polaris-v8.duration('slow');
+ transition-duration: var(--p-duration-300);

- transition-timing-function: linear;
+ transition-timing-function: var(--p-linear);

- transition-timing-function: legacy-polaris-v8.easing('in');
+ transition-timing-function: var(--p-ease-in);

- transition: opacity 100ms linear;
+ transition: opacity var(--p-duration-100) linear;

- transition: opacity legacy-polaris-v8.duration('slow') linear;
+ transition: opacity var(--p-duration-300) linear;

- transition: opacity 100ms linear, left 100ms linear;
+ transition: opacity var(--p-duration-100) linear, left var(--p-duration-100) linear;
```

```sh
npx @shopify/polaris-migrator replace-sass-transition <path>
```

## Creating Migrations

Sometimes referred to as "codemods", migrations are JavaScript functions which modify some code from one form to another (eg; to move between breaking versions of `@shopify/polaris`). ASTs (Abstract Syntax Trees) are used to "walk" through the code in discreet, strongly typed steps, called "nodes". All changes made to nodes (and thus the AST) are then written out as the new/"migrated" version of the code.
Expand Down
Loading