Button: Replace ButtonGroup usage with ToggleGroupControl #65346
+17
−23
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
Mamaduka
added
[Focus] Accessibility (a11y)
4 tasks
|
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. |
|
Size Change: -6 B (0%) Total Size: 1.77 MB
ℹ️ View Unchanged
|
2 tasks
ciampo
reviewed
Sep 16, 2024
| return ( | ||
| <PanelBody title={ __( 'Settings' ) }> | ||
| <ButtonGroup aria-label={ __( 'Button width' ) }> | ||
| <ToggleGroupControl |
There was a problem hiding this comment.
I feel like we should add the isBlock prop here:
- it will make the control full-width
- it will show a border
There was a problem hiding this comment.
Makes sense. I'll add the prop.
What's the reason for having border style connected to the isBlock prop?
Update: If you use isBlock and isDeselectable combo, the border isn't applied. This looks like a bug.
There was a problem hiding this comment.
I believe it was decided together with design folks given the specific constraints that we faced on the component — but I'll let Lena clarity if necessary.
There was a problem hiding this comment.
Yes, the relationship between the props and the patterns are not very clear at the moment. The three "valid" patterns we can have are:
- Text options +
isBlock - Icon options
- Icon options +
isDeselectable
I'll make a note about this for when we stabilize this component (#61067).
mirka
reviewed
Sep 16, 2024
| onChange={ ( newWidth ) => | ||
| setAttributes( { width: newWidth } ) | ||
| } | ||
| isDeselectable |
There was a problem hiding this comment.
@t-hamano suggested in #52223 (comment) that we add an "Auto" or "None" option for the reset. I think that might be better than the isDeselectable variant in this case, because our options items here are not icon buttons.
There was a problem hiding this comment.
Mmm, good point about the "None" discussion.
The thing is, "Text options + isDeselectable" is not a valid pattern for this component 😕 For the sake of this PR, could we do a "None" option, or maybe add a separate Clear or Reset button?
There was a problem hiding this comment.
To be honest, the reason I suggested adding Auto/None options here was because I wasn't aware of the isDeselectable prop 😅
I also learned from this discussion that "Text option + isDeselectable" is not a valid pattern.
When an explicit percentage width is not set on a button, the button's width grows and shrinks depending on the text inside, so "Auto" feels more appropriate than "None".
There was a problem hiding this comment.
Sounds good! I guess we should go with a adding a "Auto" option?
There was a problem hiding this comment.
"Auto" should work fine, but as mentioned in this comment, it may cause unintended layouts when localized.
If there was a custom width (UnitControl) UI, we could set the value to empty (undefined) via that, but currently there isn't.
Given this, would it be a good idea to add a reset button?
There was a problem hiding this comment.
As explained in #65340 (comment), if we currently added a "Reset" button, we'd still face the issue that ToggleGroupControl selects a value when it receives focus.
So, with the current behaviour of the component, an Auto option is the only viable option IMO. We could otherwise pause the work here until ToggleGroupControl gets a new design and behaviour.
|
This could possibly be addressed in a follow-up, but #65378 has been filed suggesting adding a label. |
FWIW, the control already has an accessibility label, "Button width", but a visible label definitely makes sense IMHO. Right now it's not clear whether this is about width, height, or anything else in particular. |
Agreed — we could add a visible label also in this PR, since it should be as easy as remove the related prop to hide it visually. |
mirka
added
[Type] Bug
Mamaduka
force-pushed
the
update/button-block-toggle-group-ctrl
branch
from
5056c09
to
635dca8
Compare
|
I've updated the code to show the label; see the update screenshot in the PR description. As I can see, the only "blocker" here is the value deselection option. This can probably be handled separately, as this migration PR doesn't change the Button setting behavior. |
|
Flaky tests detected in 635dca8. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/11013604125
|
I'll let @mirka chime in here, since I'm not sure that the current way |
2 tasks
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?
Fixes #65378.
PR replaces the
ButtonGroupcomponent withToggleGroupControlin the Button block controls.Why?
Part of #65339.
Testing Instructions
Testing Instructions for Keyboard
Same.
Screenshot