-
Notifications
You must be signed in to change notification settings - Fork 1.2k
[Migrator] Add migrate-motion migration for transition easing function #7431
Conversation
e08d5cc
to
5117c24
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This is looking 🔥 💯 love the use of the property keys in the plugin Declaration object. Is this ready to run on web or are there still edge-cases that need to be handled?
Also, can you add a small bit of documentation for this migration in the migrator package README.md
?
/snapit |
🫰✨ Thanks @jesstelford! Your snapshots have been published to npm. Test the snapshots by updating your yarn add @shopify/plugin-polaris@0.0.0-snapshot-release-20221020231634 yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20221020231634 yarn add @shopify/polaris@0.0.0-snapshot-release-20221020231634 |
5117c24
to
e559f7d
Compare
/snapit |
🫰✨ Thanks @jesstelford! Your snapshots have been published to npm. Test the snapshots by updating your yarn add @shopify/plugin-polaris@0.0.0-snapshot-release-20221021024254 yarn add @shopify/polaris-migrator@0.0.0-snapshot-release-20221021024254 yarn add @shopify/polaris@0.0.0-snapshot-release-20221021024254 |
These additions have been combined into #7403 |
NOTE: Includes changes in #7403, so that PR should be merged first. In the mean-time, you can view the changes for this PR only.
WHY are these changes introduced?
ref #7213
This PR covers the
transition
andtransition-timing-function
properties, their various complex uses and a couple of edge cases as seen in the wild.WHAT is this pull request doing?
Example migrations (taken from the test files):
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 300ms legacy-polaris-v8.easing('base');
↳
transition: opacity var(--p-duration-300) var(--p-ease);
Will output various error messages for things it can't migrate:
transition-timing-function: legacy-polaris-v8.easing(anticipate);
↳
transition-timing-function: cubic-bezier(0, 0, 1, 1);
↳
Open Question: Do we consider
cubic-bezier()
/linear()
/ other built-in CSS easing functions as failures? I assume so (and have coded it to insert a comment when they're detected), but want to be sure before this gets merged.