Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ToggleGroupControl: Document and add disabled prop in types.ts #69715

Open
wants to merge 2 commits into
base: trunk
Choose a base branch
from

Conversation

im3dabasia
Copy link
Contributor

@im3dabasia im3dabasia commented Mar 26, 2025

What?

Discovered while working on #57862
Related comment: #57862 (comment)

Why?

This PR documents the disabled prop for ToggleGroupControlOption and adds proper TypeScript type definitions for better developer experience.

While PR #63450 added the functionality to disable individual options in ToggleGroupControl, this wasn't documented in the README or demonstrated in Storybook examples. Adding this documentation and proper TypeScript types improves discoverability and makes implementation more consistent with other components in the library.

How?

I worked on the following improvements:

  1. Added the disabled prop to the types.ts file for ToggleGroupControlOption
  2. Updated the README documentation to include information about the disabled prop
  3. Added a Storybook example demonstrating the disabled state similar to WithTooltip and WithIcons examples

These changes align with how other components like Button, FormToggle, and DropdownOption handle their disabled states.

@im3dabasia im3dabasia marked this pull request as ready for review March 26, 2025 12:56
@im3dabasia im3dabasia requested a review from ajitbohra as a code owner March 26, 2025 12:56
Copy link

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 props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: im3dabasia <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@im3dabasia
Copy link
Contributor Author

Hi @Mamaduka and @t-hamano ,

When you have a moment please review this PR. Looking forward to your feedbacks.

Copy link
Contributor

@ciampo ciampo Mar 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we need to add the disabled type since all *Option components already inherit it from the button HTML element (example).

Although this will be an interesting factor to consider when auto-generiting the docs (cc @mirka )

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By the way, there is a way to add custom filter logic to react-docgen-typescript so that any disabled props will always be visible in the Storybook props table (and thus the auto-generated readmes). Do you think that's worth doing?

IIRC, the default logic filters out standard HTML attribute props that don't have explicit descriptions, as well as prop type definitions that originate in node_modules.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We could make exceptions for the most important / impactful attributes such as disabled

@t-hamano t-hamano added [Type] Developer Documentation Documentation for developers [Package] Components /packages/components labels Mar 27, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Developer Documentation Documentation for developers
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants