UnitControl: Add flag for larger default size #40627
Conversation
| const paddingStyles = ( { disableUnits }: InputProps ) => { | ||
| if ( disableUnits ) return ''; | ||
|
|
||
| return css` | ||
| ${ rtl( paddings[ size ] )() }; | ||
| ${ rtl( { paddingRight: 8 } )() }; |
There was a problem hiding this comment.
I simplified the logic here to capture the intent better. Basically, we want the padding-right to always be 8px when units are enabled. Otherwise, it simply inherits from the paddings that InputControl specifies.
There was a problem hiding this comment.
Love this, so much easier to read!
Not for this PR, but I wonder if we should specify these amounts using the space utility (i.e. multiples of 4) — we should probably do an overhaul of the config before that, though.
There was a problem hiding this comment.
Yes, good point. I think we're supposed to move to this final design for the unit dropdown eventually, so maybe that would be a good time to clean up 👇
| const paddingStyles = ( { disableUnits }: InputProps ) => { | ||
| if ( disableUnits ) return ''; | ||
|
|
||
| return css` | ||
| ${ rtl( paddings[ size ] )() }; | ||
| ${ rtl( { paddingRight: 8 } )() }; |
There was a problem hiding this comment.
Love this, so much easier to read!
Not for this PR, but I wonder if we should specify these amounts using the space utility (i.e. multiples of 4) — we should probably do an overhaul of the config before that, though.
mirka
force-pushed
the
unit-control-36px
branch
from
cf37ecf to
695b9f2
Compare
Part of #39397
What?
Adds the temporary prop
__next36pxDefaultSizeto opt into the new 36px height default size.Why?
As part of the effort to move toward consistent component sizes.
How?
Details of the migration plan are written in the original issue #39397.
Testing Instructions
npm run storybook:devUnitControl. By setting the__next36pxDefaultSizecontrol totrue, the height of thedefaultsize variant should increase to 36px. All other size variants are unchanged.Screenshots or screencast
Old default height
New default height (opt-in for now)