-
Notifications
You must be signed in to change notification settings - Fork 980
[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
[Label] Use native label
#1686
Conversation
"@radix-ui/react-dropdown-menu": patch | ||
"@radix-ui/react-focus-scope": patch | ||
"@radix-ui/react-hover-card": patch | ||
"@radix-ui/react-label": major |
There was a problem hiding this comment.
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 patch
es
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" /> | ||
</> | ||
); | ||
|
There was a problem hiding this comment.
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.
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 } }; |
There was a problem hiding this comment.
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.
There was a problem hiding this 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?
packages/react/select/src/Select.tsx
Outdated
// 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" |
There was a problem hiding this comment.
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?
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Thanks, reads great 👍
Closes #1233