Skip to content

[Label] Use native label #1686

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

Merged
merged 2 commits into from
Sep 26, 2022
Merged

[Label] Use native label #1686

merged 2 commits into from
Sep 26, 2022

Conversation

benoitgrelard
Copy link
Contributor

@benoitgrelard benoitgrelard commented Sep 26, 2022

Closes #1233

"@radix-ui/react-dropdown-menu": patch
"@radix-ui/react-focus-scope": patch
"@radix-ui/react-hover-card": patch
"@radix-ui/react-label": major
Copy link
Contributor Author

@benoitgrelard benoitgrelard Sep 26, 2022

Choose a reason for hiding this comment

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

one major in a sea of patches

Comment on lines -10 to -30
export const AutoGeneratedId = () => (
<Label className={rootClass()}>
Label <Control />
</Label>
);

export const SuppliedId = () => (
<Label id="test" className={rootClass()}>
Label <Control />
</Label>
);

export const WithHtmlFor = () => (
<>
<Label htmlFor="test" className={rootClass()}>
This should add an `aria-labelledby` to the control
</Label>
<Control id="test" />
</>
);

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Removed these now irrelevant stories.

Comment on lines -81 to -101
export const Chromatic = () => (
<>
<h1>Auto generated id</h1>
<Label className={chromaticRootClass()}>
<Control />
</Label>

<h1>Supplied id</h1>
<Label id="one" className={chromaticRootClass()}>
<Control />
</Label>

<h1>With htmlFor</h1>
<Label htmlFor="two" className={chromaticRootClass()}>
{' '}
This should add an `aria-labelledby` to the control
</Label>
<Control id="two" />
</>
);
Chromatic.parameters = { chromatic: { disable: false } };
Copy link
Contributor Author

Choose a reason for hiding this comment

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

Not much we now can/need to test visually.

Copy link
Contributor

@andy-hook andy-hook left a comment

Choose a reason for hiding this comment

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

Change looks good, just a tiny nit about a comment that may / not apply.

Do we need to do any extra as relates to Slider given the now native label?

Comment on lines 236 to 238
// enable compatibility with native label or custom `Label` "click"
// this doesn't create any other side-effect because we are preventing default
// in `onPointerDown` so effectively this only runs for a label "click"
Copy link
Contributor

Choose a reason for hiding this comment

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

My memory is already failing but was this a Safari specific compatibility? if so should we be more explicit about that here?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Yes that's correct, I'll add a mention of Safari.

Do we need to do any extra as relates to Slider given the now native label?

Given Label was never integrated with Slider yet, I was going to handle that in a separate PR.

Copy link
Contributor

Choose a reason for hiding this comment

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

Thanks, reads great 👍

@benoitgrelard benoitgrelard merged commit 373e752 into main Sep 26, 2022
@benoitgrelard benoitgrelard deleted the 1233-native-label branch September 26, 2022 14:40
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Label] hover effect should match label element
2 participants