ToggleGroupControl: Add disabled state
What problem does this address?
#57562 surfaced a use case for a disabled state for ToggleGroupControl.
What is your proposed solution?
- The styling could be similar to the
isPressedButton component when it is disabled. - As for the focus behavior when disabled, we may need an additional
focusableWhenDisabledprop on ToggleGroupControl so consumers can choose.
we may need an additional focusableWhenDisabled prop on ToggleGroupControl so consumers can choose.
We should probably keep an eye on the final decision made in https://github.com/WordPress/gutenberg/issues/56547, so that we can ensure consistency in the prop naming and (potentially) default behaivior
@ciampo I accidentally confounded the two at first too, but this issue is for a disabled state on the entire component, not the individual options. This was the use case in BorderControl (#57562), where ideally I wanted to disable the entire ToggleGroupControl and maybe show a tooltip to explain why it was disabled.
Got it! Let me know if you think it's worth working on it soon, while we're still fresh from other ToggleGroupControl work
While working on this issue, I found that PR #63450 added the disabled prop to allow disabling individual options( ToggleGroupControlOption ) within the ToggleGroupControl. I noticed this functionality hasn't been documented in the README.md or Storybook examples for ToggleGroupControl, and I believe documenting this would be helpful for developers.
Also, I think adding the disabled prop to types.ts will make the API more consistent and provide better TypeScript support for developers using the ToggleGroupControlOption component. This pattern is already implemented in other components such as Button, FormToggle, and DropdownOption.
It seems we have two issues for the same enhancement - #63612. Should we close one?
It's very confusing, but this issue is for supporting disabled of the entire component. #63612 is for keeping items accessible when individual items are disabled (item-level disabling is already supported). Sorry 😂