Skip to content

Conversation

@spmonahan
Copy link
Contributor

Current Behavior

Radios inside a required RadioGroup each display a red "required asterisk" after each of their labels. This means users see a required asterisk for the RadioGroup label and for each of the Radios.

New Behavior

Radio labels do not show the visual required asterisk. They continue to mark the input element as required

Before

RadioGroup before the change

After

RadioGroup after the change

Related Issue(s)

Fixes #22770

Prior to this change when a Radio was marked as "required" a red
asterisk was shown on the Radio's label to visually indicate it was
required.

This change no longer passes the `required` prop to the Label
subcomponent so this visual indicator is not shown. The Radio input is
still marked with the `required` attribute so it continues to be
semantically required.

As Radio is intended to be used inside a RadioGroup which should have a
label for the entire group the Label for the group should disply the
required indicator.

The required indicator can still be shown on the Label by passing the
`required` prop to the `label` slot via shorthand.
@codesandbox-ci
Copy link

codesandbox-ci bot commented May 3, 2022

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit d3ea67d:

Sandbox Source
@fluentui/react 8 starter Configuration
@fluentui/react-components 9 starter Configuration

@fabricteam
Copy link
Collaborator

📊 Bundle size report

Package & Exports Baseline (minified/GZIP) PR Change
react-radio
Radio
23.556 kB
7.898 kB
23.534 kB
7.892 kB
-22 B
-6 B
Unchanged fixtures
Package & Exports Size (minified/GZIP)
react-radio
RadioGroup
8.205 kB
3.516 kB
🤖 This report was generated against 78337857af5757efd278ac8e96ced4e15e878a52

@fabricteam
Copy link
Collaborator

Perf Analysis (@fluentui/react-components)

No significant results to display.

All results

Scenario Render type Master Ticks PR Ticks Iterations Status
Avatar mount 1197 1189 5000
Button mount 756 698 5000
FluentProvider mount 2323 2364 5000
FluentProviderWithTheme mount 395 375 10
FluentProviderWithTheme virtual-rerender 344 323 10
FluentProviderWithTheme virtual-rerender-with-unmount 407 417 10
MakeStyles mount 1878 1877 50000

@size-auditor
Copy link

size-auditor bot commented May 3, 2022

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 78337857af5757efd278ac8e96ced4e15e878a52 (build)

@spmonahan spmonahan merged commit 4bc1c43 into microsoft:master May 3, 2022
marwan38 pushed a commit to marwan38/fluentui that referenced this pull request Jun 13, 2022
Prior to this change when a Radio was marked as "required" a red
asterisk was shown on the Radio's label to visually indicate it was
required.

This change no longer passes the `required` prop to the Label
subcomponent so this visual indicator is not shown. The Radio input is
still marked with the `required` attribute so it continues to be
semantically required.

As Radio is intended to be used inside a RadioGroup which should have a
label for the entire group the Label for the group should disply the
required indicator.

The required indicator can still be shown on the Label by passing the
`required` prop to the `label` slot via shorthand.
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

RadioGroup v9: update examples to include group labels, required semantics

5 participants