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.

Sign up for GitHub

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

Jump to bottom

Allow define RadioControl label with ReactNode component #66615

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

Allow define RadioControl label with ReactNode component #66615

wants to merge 9 commits into from
+46 −3

Conversation

retrofox
Copy link
Contributor

@retrofox retrofox commented Oct 30, 2024 •
edited
Loading

What?

This PR allows using a ReactNode element for label in the RadioControl component

Why?

Because sometimes it's desired to render not only text for the radio control label

How?

  • Allow to define ReactNode for radio label

Testing Instructions

  1. Run storybook
npm run storybook:dev
  1. Go to the new With Component Labels story
  2. Confirm the story works as expected
image

Testing Instructions for Keyboard

Screenshots or screencast

@retrofox retrofox added the [Package] Components /packages/components label Oct 30, 2024
@retrofox retrofox self-assigned this Oct 30, 2024
@retrofox retrofox requested a review from ajitbohra as a code owner October 30, 2024 18:17
@github-actions GitHub Actions
Copy link

github-actions bot commented Oct 30, 2024 •
edited
Loading

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: retrofox <[email protected]>
Co-authored-by: mirka <[email protected]>
Co-authored-by: tyxla <[email protected]>
Co-authored-by: ciampo <[email protected]>

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

@retrofox retrofox linked an issue Oct 30, 2024 that may be closed by this pull request
Allow React Components as label in RadioControl Options for Enhanced Customization #66603
Open
@retrofox retrofox requested a review from mirka October 30, 2024 18:17
@retrofox retrofox added the [Type] Enhancement A suggestion for improvement. label Oct 30, 2024
mirka
mirka reviewed Nov 26, 2024
View reviewed changes
Copy link
Member

@mirka mirka left a comment

Choose a reason for hiding this comment

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

Sorry for the delay!

Like I noted in the original issue, I think a requirement for this change is that we stop using a <label> internally and associate the input with a aria-labelledby instead. The usage example in this PR already renders invalid HTML (<div> inside a <label>), so we can assume other consumers would make the same mistake 😄

packages/components/src/radio-control/README.md Outdated Show resolved Hide resolved
packages/components/src/radio-control/types.ts Show resolved Hide resolved
packages/components/src/radio-control/types.ts Outdated Show resolved Hide resolved
packages/components/src/radio-control/stories/index.story.tsx Show resolved Hide resolved
@mirka mirka requested a review from a team November 26, 2024 20:22
tyxla
tyxla reviewed Nov 27, 2024
View reviewed changes
packages/components/src/radio-control/types.ts Outdated
*/
label: string;
label: string | React.ReactNode;
Copy link
Member

Choose a reason for hiding this comment

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

ReactNode is a bit broad. Do we really want label to possibly be boolean or null or even number? I wonder if we meant ReactElement instead.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Mmm, I don't think so. Maybe a number, but I believe string covers that.
Replacing...

Copy link
Contributor Author

Choose a reason for hiding this comment

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

c6b9c9e

Copy link
Member

Choose a reason for hiding this comment

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

Do we really want label to possibly be boolean or null

This is a reasonable point, but I think we should also consider how many of our components that accept non-string labels right now already accept ReactNode. Introducing a subtle inconsistency like this could cause complications when composing components/types. Would it be ok to consider a package-wide switch from ReactNode to ReactElement as a separate issue?

Copy link
Member

Choose a reason for hiding this comment

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

I'm happy to consider this a separate issue 👍 Let's document it in an issue though.

@retrofox
Copy link
Contributor Author

retrofox commented Nov 27, 2024 •
edited
Loading

Sorry for the delay!

Like I noted in the original issue, I think a requirement for this change is that we stop using a <label> internally and associate the input with a aria-labelledby instead. The usage example in this PR already renders invalid HTML (<div> inside a <label>), so we can assume other consumers would make the same mistake 😄

Never stop learning. Thanks a bunch for your :-) feedback

@github-actions GitHub Actions
Copy link

github-actions bot commented Nov 27, 2024 •
edited
Loading

Flaky tests detected in c6b9c9e.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12055287484
📝 Reported issues:

ciampo
ciampo reviewed Dec 4, 2024
View reviewed changes
Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

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

Looks like all feedback so far has been addressed — @mirka and @tyxla, do you have any more feedback to share?

packages/components/src/radio-control/README.md
@@ -104,7 +104,8 @@ A function that receives the value of the new option that is being selected as i

An array of objects containing the value and label of the options.

- `label`: `string` The label to be shown to the user.
- `label`: `ReactNode` The label to be shown to the user. When the label is not a string, make sure that the element is accessibly labeled.
Copy link
Contributor

Choose a reason for hiding this comment

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

Matching TypeScript types

Suggested change
- `label`: `ReactNode` The label to be shown to the user. When the label is not a string, make sure that the element is accessibly labeled.
- `label`: `string` | `React.ReactElement` The label to be shown to the user. When the label is not a string, make sure that the element is accessibly labeled.

Copy link
Contributor

Choose a reason for hiding this comment

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

Based on #66615 (comment), it looks like we may want to revert to ReactNode. In that case, feel free to ignore my suggestion above, and instead let's change the TypeScript type back to ReactNode.

@tyxla
Copy link
Member

tyxla commented Dec 4, 2024

Nothing from my end 👍

@mirka
Copy link
Member

mirka commented Dec 4, 2024

Looks like all feedback so far has been addressed

The internals need to be altered to stop using <label>.

@mirka mirka mentioned this pull request Dec 10, 2024
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@tyxla tyxla tyxla left review comments

@ciampo ciampo ciampo left review comments

@mirka mirka mirka left review comments

@ajitbohra ajitbohra Awaiting requested review from ajitbohra ajitbohra is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

@retrofox retrofox

Labels
[Package] Components /packages/components [Type] Enhancement A suggestion for improvement.
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

Allow React Components as label in RadioControl Options for Enhanced Customization
4 participants
@retrofox @tyxla @mirka @ciampo