Dropdown: remove extra white space around toggle #56005
Merged
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
ciampo
added
[Type] Bug
|
Size Change: -4 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
jameskoster
approved these changes
Nov 9, 2023
Contributor
jameskoster
left a comment
jameskoster
left a comment
There was a problem hiding this comment.
Thanks, it works well. I didn't spot any issues in the Editor.
Contributor
|
It looks like this change has caused a regression for the color picker buttons: 
With 
I imagine we could fix this locally for the color selection buttons, but I imagine there could be other components out in the wild that expected the |
Contributor
Author
|
Let's revert for now, and think about a more satisfactory solution. In theory, switching to a flex-based layout is the correct solution for dealing with inline-block extra spacing. An even better solution would be to use the A couple of ideas that we would need to test:
All of these solutions could potentially cause some changes in the consumers of Another simpler alternative could be to add something like @andrewserong @jameskoster what are your thoughts? The more I think about it, the more I believe that the last option ( |
ciampo
added a commit
that referenced
this pull request
Nov 10, 2023
Contributor
|
Thanks for reverting, and for the follow-up! Interesting problem. I think option 1 sounds potentially risky since we don't know what the children will be doing exactly, and similarly applying
|
cbravobernal
pushed a commit
that referenced
this pull request
Nov 14, 2023
* Dropdown: remove extra white space around toggle * CHANGELOG
cbravobernal
pushed a commit
that referenced
this pull request
Nov 14, 2023
Contributor
|
I discovered the following problem, probably related to this PR and #56028. In the Site Editor sidebar, the button with the dropdown is shifted to the bottom. As @andrewserong said, the problem can be solved by applying
|
Contributor
|
Thanks for flagging that @t-hamano — interestingly enough, that button in the Navigation header goes back to displaying in the correct position if we remove the 
Another option could be to set the wrapper for the I've opened a PR in #56233 to fix the positioning in case we want to go in that direction for that component 🙂 |
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?
A tweak to the
Dropdowncomponent to make sure that there isn't extra white space rendered around the toggle button.Why?
As flagged in #56002 (comment), sometimes there could be extra space around the dropdown toggle
How?
By changing
Dropdown'sdisplaystyle frominline-blocktoinline-flex. Using flexbox, in fact, automatically removes such white space around a wrapper's children.Testing Instructions
DropdownMenuexample, addtoggleProps: { size: 'small' }prop to the default exampleDropdownMenuwrapper element around the toggle (the one with classcomponents-dropdown components-dropdown-menu) is exactly 24x24 px (with the same changes applied totrunk, the wrapper would be 27px tall instead of 24)Additionally, smoke test usages of
DropdownandDropdownMenuacross the editor and make sure that the components look and behave as expected.