Components: Deprecate reduceMotion util
#60839
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mirka
added
[Type] Code Quality
|
The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
Size Change: 0 B Total Size: 1.75 MB ℹ️ View Unchanged
|
tyxla
approved these changes
Apr 18, 2024
| @@ -3,6 +3,10 @@ | |||
| * | |||
| * @param {'transition' | 'animation' | string} [prop='transition'] CSS Property name | |||
| * @return {string} Generated CSS code for the reduced style | |||
| * | |||
| * @deprecated Write your own media query instead, | |||
There was a problem hiding this comment.
Not in this PR, but should we also refactor the existing usages? The best way to ensure that there will be new usage of this deprecated utility is to keep using it in the Gutenberg codebase.
There was a problem hiding this comment.
It's just a matter of prioritization. Ideally they should be rewritten, but this one is pretty benign compared to the million other things we need to rewrite 😭 Though, it's probably a good first issue for new contributors so I'll post an issue.
There was a problem hiding this comment.
No urgency here, an issue sounds good 👍
DaniGuardiola
approved these changes
Apr 18, 2024
| @@ -3,6 +3,10 @@ | |||
| * | |||
| * @param {'transition' | 'animation' | string} [prop='transition'] CSS Property name | |||
| * @return {string} Generated CSS code for the reduced style | |||
| * | |||
| * @deprecated Write your own media query instead, | |||
| * e.g. `@media not ( prefers-reduced-motion ) { ...some animation... }` or | |||
There was a problem hiding this comment.
Maybe this is just a typo or maybe it's another valid way to implement this, but:
-@media not ( prefers-reduced-motion ) {
+@media not ( prefers-reduced-motion: reduce ) {Are we sure those will behave the same way with no weird edge cases? Is there any practical difference between these two that could be relevant?
There was a problem hiding this comment.
The current docs do say they should be equivalent. They would differ if they ever added another possible value for prefers-reduced-motion, for example reduce-somewhat or absolutely-no-motion-im-serious, but in that case I think it'd be better for those values to be included in our simple booleans by default.
There was a problem hiding this comment.
The linked spec section is a very interesting read, and makes a lot of sense 👍
9 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Deprecates the internal
reduceMotionutility function in the components package.Why?
First discussed in #60560 (comment).
@media not ( prefers-reduced-motion )block.It isn't particularly important to remove the existing usages right now — they can be rewritten as needed. We'll be able to remove this util from the codebase once they're all rewritten though.
Testing Instructions
In your IDE, existing usages of this util should show that it is deprecated.