AnglePickerColor: migrate Emotion to style.module #73786
+63
−77
Conversation
This file contains hidden or 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
jsnajdr
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. |
jsnajdr
force-pushed
the
remove/emotion-ang-picker-ctrl
branch
from
066b192 to
f76881d
Compare
jsnajdr
commented
Dec 5, 2025
| <div | ||
| ref={ angleCircleRef } | ||
| onMouseDown={ startDrag } | ||
| className="components-angle-picker-control__angle-circle" |
Member
Author
There was a problem hiding this comment.
All the components-angle-picker-control-* class names are unused, so I removed them.
Member
There was a problem hiding this comment.
We've been keeping all these for back compat, unfortunately 😅
For example:
gutenberg/packages/components/src/date-time/time/index.tsx
Lines 141 to 143 in b9e9788
|
Size Change: +547 B (+0.02%) Total Size: 2.58 MB
ℹ️ View Unchanged
|
Mamaduka
reviewed
Dec 5, 2025
| const classes = clsx( 'components-angle-picker-control', className ); | ||
|
|
||
| const unitText = <UnitText>°</UnitText>; | ||
| const unitText = <Text className={ styles[ 'unit-text' ] }>°</Text>; |
Member
There was a problem hiding this comment.
I think the default Text styles are overriding the unit text styles. The unit symbol is touching the border in this PR>
Screenshot
Member
Author
There was a problem hiding this comment.
This is interesting, my Storybook displays this correctly. The margin and color styles are potentially conflicting, but in my case the .unit-text one wins:
Both class names have the same specificity, so it all depends on insertion order. Either Emotion inserts its PolymorphicDiv-Text styles first, or the style.module.scss inserts its styles first. Both are dynamically added <style> elements.
Member
There was a problem hiding this comment.
Is the something fixable? Don’t like the idea of relying on random order.
Member
There was a problem hiding this comment.
I think we could remove the Text component and the custom CSS styles, and just use InputControlSuffixWrapper for the padding. It doesn't make sense that the degree symbol is blue, it's not interactive.
Member
Author
There was a problem hiding this comment.
Is the something fixable? Don’t like the idea of relying on random order.
When both styles used Emotion, like
const Text = styled.div`color: blue`;
const UnitText = styled(Text)`color: red`;
then Emotion guaranteed that the red color always wins. But now when the red style is not Emotion, we don't have that guarantee any more and have to implement it ourselves somehow. Let me see what we can do.
Member
Author
There was a problem hiding this comment.
I think we could remove the
Textcomponent and the custom CSS styles, and just useInputControlSuffixWrapperfor the padding
@mirka Would you mind pushing a commit that implements this? You probably know much better than me what exactly needs to be done.
We have at least one learning for further migration: if one styled component depends on another styled component, we should migrate the dependency first. That keeps the order of stylesheets.
style.module.css styles are inserted early, immediately when the using module is initialized. And Emotion styles are inserted lazily, at the moment when the component that uses them is mounted.
Member
There was a problem hiding this comment.
Done in 4203b46 ✅
We have at least one learning for further migration
And also to remove this instruction 😄
- if the style element already has an additional class name, like
components-something, verify if that class name is really used in CSS styles. Remove it if it isn't.
mirka
force-pushed
the
remove/emotion-ang-picker-ctrl
branch
from
0892056 to
4203b46
Compare
jsnajdr
commented
Dec 5, 2025
| : [ null, unitText ]; | ||
| const prefixOrSuffixProp = isRTL() | ||
| ? { prefix: <InputControlPrefixWrapper>°</InputControlPrefixWrapper> } | ||
| : { suffix: <InputControlSuffixWrapper>°</InputControlSuffixWrapper> }; |
Member
Author
There was a problem hiding this comment.
By the way, while we are here, is it really correct to use either prefix or suffix depending on RTL? I'd expect that "prefix" and "suffix" are semantic terms, something like CSS logical properties (*-start, *-end), and that the NumberControl would take care of displaying them in the right order.
Member
There was a problem hiding this comment.
Thanks for reminding me, there should be a code comment here (169ecc3). I was actually confused too and looked up the history to make sure.
The prefix and suffix slots reposition themselves "semantically" by default, but we're intentionally overriding that behavior here.
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.
Migrates the
AnglePickerColorcomponent from Emotion to astyle.module.scssstyle.I did the migration with the following Cursor prompt:
After reviewing the results, I had to add several additional clarifications: