gutenberg icon indicating copy to clipboard operation
gutenberg copied to clipboard

ToggleGroupControl: Add disabled state

Open mirka opened this issue 1 year ago • 2 comments

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 isPressed Button component when it is disabled.
  • As for the focus behavior when disabled, we may need an additional focusableWhenDisabled prop on ToggleGroupControl so consumers can choose.

mirka avatar Jan 15 '24 22:01 mirka

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 avatar Jan 16 '24 12:01 ciampo

@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.

mirka avatar Jul 16 '24 10:07 mirka

Got it! Let me know if you think it's worth working on it soon, while we're still fresh from other ToggleGroupControl work

ciampo avatar Jul 16 '24 14:07 ciampo

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.

im3dabasia avatar Mar 26 '25 12:03 im3dabasia

It seems we have two issues for the same enhancement - #63612. Should we close one?

Mamaduka avatar Jul 22 '25 17:07 Mamaduka

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 😂

mirka avatar Jul 24 '25 11:07 mirka