-
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
CustomSelectControlV2
: Fix styling issues
#62424
CustomSelectControlV2
: Fix styling issues
#62424
Conversation
Size Change: +4.67 kB (+0.27%) Total Size: 1.75 MB
ℹ️ View Unchanged
|
…d keep it at a predictable height regardless of the number of children
position: absolute !important; | ||
max-height: 400px; | ||
overflow: auto; | ||
min-width: 100%; |
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.
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.
I can't replicate the popover width issue on Storybook — plus, it seems like we're already passing the sameWidth
prop to the underlying Ariakit implementation
I'm going to take over the work on this PR. I will review this PR and see:
I will then take over authoring, either in this PR or in a new one. |
We can close this issue, since all fixes proposed have been iterated on / moved to separate PRs |
Split from: #61272.
Depends on: #62308.
What?
Fix styling issues found while testing it via the legacy adapter. See each commit for a description of each fix.
Why?
We're preparing V2 for shipping, and these visual issues need to be fixed before we replace the V1 implementation with the adapter. This is part of a series of PRs with other fixes/tweaks to the new control (see the top of the description).
How?
By tweaking the CSS rules for the various elements that make up the component.
Testing Instructions
Check all the stories in storybook - for V2 and the adapter. Make sure they look alright;
Then tests with consumers. Here are a few consumers that can be used to test it in practice:
wp-admin/site-editor.php?canvas=edit
: Add adate
block and uncheck the "Default format' checkbox in the settings in order for the select to show;spacer
block, and in the "Height" settings, there's a custom select for it as well.There's another one under https://github.com/WordPress/gutenberg/blob/trunk/packages/block-editor/src/hooks/position.js#L290, but I couldn't find exactly where this feature is yet.
Other slight visual changes might also be made, and the review's goal is to discuss whether it's okay to keep them or if we should fix them (as in making it exactly/closer to V1).
TODO
Screenshots or screencast