-
Notifications
You must be signed in to change notification settings - Fork 1.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[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/[email protected] yarn add @shopify/[email protected] yarn add @shopify/[email protected] |
5117c24
to
e559f7d
Compare
/snapit |
🫰✨ Thanks @jesstelford! Your snapshots have been published to npm. Test the snapshots by updating your yarn add @shopify/[email protected] yarn add @shopify/[email protected] yarn add @shopify/[email protected] |
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.