ToolbarButton: Fix text centering for short labels #59117
Merged
Conversation
This file contains 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
talldan
added
[Type] Bug
talldan
changed the title
talldan
force-pushed
the
fix/button-text-centering
branch
from
12dba7b
to
4d459cc
Compare
|
Size Change: +10 B (0%) Total Size: 1.7 MB
ℹ️ View Unchanged
|
|
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. |
aaronrobertshaw
approved these changes
Feb 16, 2024
There was a problem hiding this comment.
Thanks for the fix here @talldan 👍
This PR centres the toolbar buttons for me as advertised.
Within the code I could also see a range of ToolbarItem components with the as="Button" prop but I didn't see any of these misaligned in the editor.
When the "show button text labels" preference is enabled the buttons were still centred correctly as well.
LGTM 🚢
kevin940726
approved these changes
Feb 16, 2024
mirka
approved these changes
Feb 16, 2024
There was a problem hiding this comment.
I checked whether this should be addressed in the Button component itself, but it's irrelevant there because there is no min-width set unless it's an icon button.
One thing that may be worth considering is to collocate the justify-content: center declaration closer to where the problem is introduced, rather than in the toolbar-button stylesheet where the problem is unlikely to manifest in isolation. That would make it less likely for someone in the future to prune that rule by accident. No strong opinion on this if it poses other complications though.
talldan
force-pushed
the
fix/button-text-centering
branch
from
4d459cc
to
8acb599
Compare
Good suggestion - I've done that. |
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?
Observed here - #58998 (review)
When a toolbar button has a short string, the min width css rule can come into action (the button is no longer assuming the size of its content. When that happens it's noticeable that there's no center alignment of the button content.
This PR adds a
justify-content: center;rule so that content is always centeredNote
There seem to be a whole bunch of styles for toolbar button that use the
.components-toolbar__control.components-buttonclass name. Most toolbar buttons use onlycomponents-toolbar-buttonnow. The former class name seems to be used when the toolbar has an 'inaccessible' state (which is triggered when a toolbar contains something like a regularButton). The potential for drift between these styles might be a little bit of a worry. When I tested, thejustify-contentrule wasn't needed for this style of button.There are also some places in the codebase where
components-toolbar__controlis manually added, which is quite anti-BEM.Testing Instructions
Screenshots or screencast
Before
After