-
Notifications
You must be signed in to change notification settings - Fork 4.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
SearchControl
: allow for 32px compact size, introduce option to change default size to 40px
#54548
Conversation
@jameskoster added some testing instructions too. Let me know how this looks like (it may need some refinements around icon / button sizing) |
Size Change: +79 B (0%) Total Size: 1.62 MB
ℹ️ View Unchanged
|
Flaky tests detected in f0b1901. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/6221574205
|
Thanks so much :)
Is this for backwards compatibility? I'm wondering if it's necessary. Of course if there's a technical reason to keep the old sizing then that's fine, but I don't think it would be a problem to deprecate that size entirely. |
It's mostly following the approach highlighted by Lena in #46741 (she mostly took care of components sizing works but she's now AFK) |
Okay. I suppose we can follow-up to make current instances of SearchControl use __next40pxDefaultSize. |
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 seems to be working as advertised
Thank you for the review! Happy to tweak further if needed, as we start setting the |
Dev note added to #46741 |
What?
Closes #54501
Part of #46741
This PR reworks the size (height) of the
SearchControl
input, updating it as per the specsWhy?
Following the latest design specs
How?
size
prop is introduced. The prop accepts the'default'
and'compact'
values:'default'
value will keep the component looking as-is (48px
height)'compact'
value will change the component's height to be32px
(in line with theButton
component whensize="compact"
)__next40pxDefaultSize
prop. When the prop is set totrue
, thesize="default"
will render the component with a height of40px
instead of48px
Testing Instructions
__next40pxDefaultSize
prop totrue
. The component should render with a 40px heightsize
prop to'compact'
. The component should render with a 32px heightSmoke test the component in the editor — nothing should change for now.
Screenshots or screencast
searchcontrol-sizing.mp4