Adds Radio and RadioGroup as new web components #27113
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "type": "prerelease", | ||
| "comment": "feat(radio): add radio and radio-group web components", | ||
| "packageName": "@fluentui/web-components", | ||
| "email": "brianbrady@microsoft.com", | ||
| "dependentChangeType": "patch" | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| # Radio Group | ||
|
|
||
| > RadioGroup lets users select a single option from two or more Radio items. Use RadioGroup to present all available choices if there's enough space.. | ||
|
|
||
| <br /> | ||
|
|
||
|
|
@@ -36,13 +36,14 @@ Used anywhere an author might group a list of radio options. | |
|
|
||
| ### **Fields** | ||
|
|
||
| | Name | Privacy | Type | Default | Description | | ||
| | ------------- | ------- | ------------------------ | ------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | ||
| | `disabled` | public | `boolean` | `false` | Disables the radio group and child radios. | | ||
| | `name` | public | `string` | | The name of the radio group. Setting this value will set the name value for all child radio elements. | | ||
| | `value` | public | `string` | | The value of the checked radio. | | ||
| | `orientation` | public | `horizontal \| vertical` | `horizontal` | Determines whether radios in a radio group are rendered in a horizontal row or a vertical column. The default value is horizontal, which will render radios in a horizontal row with labels appearing inline. Setting orientation to vertical will render radios in a vertical column with labels appearing inline. | | ||
| | `stacked` | public | `boolean` | `false` | Determines whether the labels for radios appear inline or stacked when orientation is set to horizontal. The default value is false, which will display the labels inline. If stacked is set to true, the labels will appear under each radio in a horizontal row. | | ||
| | default slot | public | `HTMLElement[]` | | The default slot expecting Radio items. | | ||
|
|
||
| <br /> | ||
|
|
||
|
|
@@ -57,9 +58,9 @@ Used anywhere an author might group a list of radio options. | |
|
|
||
| ### **Events** | ||
|
|
||
| | Name | Event Type | Target | Arguments | Description | | ||
| | -------- | ------------- | ---------------- | --------- | ----------------------------------------------------------------------------------------------------------------- | | ||
| | `change` | `CustomEvent` | `FASTRadioGroup` | none | Fired when the value of the RadioGroup changes (i.e., when a different radio button within the group is selected) | | ||
|
|
||
| <br /> | ||
|
|
||
|
|
@@ -97,9 +98,10 @@ Used anywhere an author might group a list of radio options. | |
|
|
||
| ### **WAI-ARIA Roles, States, and Properties** | ||
|
|
||
| | Attributes | value | Description | | ||
| | ----------------- | -------------- | ---------------------------------------- | | ||
| | `aria-labelledby` | | used to associate a label with the group | | ||
| | `role` | `"radiogroup"` | used to define a group of radio buttons | | ||
|
|
||
| <br /> | ||
| <hr /> | ||
|
|
@@ -122,6 +124,6 @@ Used anywhere an author might group a list of radio options. | |
| <br /> | ||
|
|
||
| **Property Mapping** | ||
| | Fluent UI React 9 | Fluent Web Components | Description of difference | | ||
| |-------------------|-------------------------- |---------------------------| | ||
| | `layout` | `orientation` + `stacked` | React implementation requires user to pass either `"horizontal"` or `"horizontal-stacked"` through `layout` prop. <br /> WC3 implementation requires user to either pass `"vertical"` or "`horizontal"` through `orientation` attribute. Additionally, adding the `boolean` attribute `stacked` when the orientation is set to `horizontal` will create the `horizontal-stacked` layout available in FUIR9. | ||
|
There was a problem hiding this comment. Trying to understand, whats the difference between horizontal-stacked and orientation="vertical"? There was a problem hiding this comment. @brianchristopherbrady updated the description. Is that more clear? |
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| import { FluentDesignSystem } from '../fluent-design-system.js'; | ||
| import { definition } from './radio-group.definition.js'; | ||
|
|
||
| definition.define(FluentDesignSystem.registry); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| export * from './radio-group.js'; | ||
| export { definition as RadioGroupDefinition } from './radio-group.definition.js'; | ||
| export { styles as RadioGroupStyles } from './radio-group.styles.js'; | ||
| export { template as RadioGroupTemplate } from './radio-group.template.js'; | ||
brianchristopherbrady marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| export { RadioGroupOrientation } from '@microsoft/fast-foundation'; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,18 @@ | ||
| import { FluentDesignSystem } from '../fluent-design-system.js'; | ||
| import { RadioGroup } from './radio-group.js'; | ||
| import { styles } from './radio-group.styles.js'; | ||
| import { template } from './radio-group.template.js'; | ||
|
|
||
| /** | ||
| * The Fluent RadioGroup Element. | ||
| * | ||
| * | ||
| * @public | ||
| * @remarks | ||
| * HTML Element: \<fluent-radio-group\> | ||
| */ | ||
| export const definition = RadioGroup.compose({ | ||
| name: `${FluentDesignSystem.prefix}-radio-group`, | ||
| template, | ||
| styles, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,213 @@ | ||
| import { html } from '@microsoft/fast-element'; | ||
| import type { Args, Meta } from '@storybook/html'; | ||
| import { RadioGroupOrientation } from '@microsoft/fast-foundation'; | ||
| import { renderComponent } from '../helpers.stories.js'; | ||
| import { RadioGroup as FluentRadioGroup } from './radio-group.js'; | ||
| import './define.js'; | ||
| import '../radio/define.js'; | ||
|
|
||
| type RadioGroupStoryArgs = Args & FluentRadioGroup; | ||
| type RadioGroupStoryMeta = Meta<RadioGroupStoryArgs>; | ||
|
|
||
| const storyTemplate = html<RadioGroupStoryArgs>` | ||
| <fluent-radio-group | ||
| aria-labelledby="label-1" | ||
| ?disabled=${x => x.disabled} | ||
| ?stacked=${x => x.stacked} | ||
| orientation=${x => x.orientation} | ||
| name="radio-story" | ||
| > | ||
| <span id="label-1" slot="label">Favorite Fruit</span> | ||
| <fluent-radio ?checked="${x => x.checked}" value="apple">Apple</fluent-radio> | ||
| <fluent-radio value="pear">Pear</fluent-radio> | ||
| <fluent-radio value="banana">Banana</fluent-radio> | ||
| <fluent-radio value="orange">Orange</fluent-radio> | ||
| </fluent-radio-group> | ||
| `; | ||
|
|
||
| export default { | ||
| title: 'Components/RadioGroup', | ||
| args: { | ||
| disabled: false, | ||
| orientation: RadioGroupOrientation.horizontal, | ||
| }, | ||
| argTypes: { | ||
| disabled: { | ||
| control: { | ||
| type: 'boolean', | ||
| }, | ||
| table: { | ||
| type: { | ||
| summary: 'Sets disabled state on radio', | ||
| }, | ||
| defaultValue: { | ||
| summary: 'false', | ||
| }, | ||
| }, | ||
| }, | ||
| checked: { | ||
| control: { | ||
| type: 'boolean', | ||
| }, | ||
| table: { | ||
| type: { | ||
| summary: 'Sets checked state on radio', | ||
| }, | ||
| defaultValue: { | ||
| summary: 'false', | ||
| }, | ||
| }, | ||
| }, | ||
| stacked: { | ||
| control: { | ||
| type: 'boolean', | ||
| }, | ||
| table: { | ||
| type: { | ||
| summary: 'Creates a stacked layout for horizontal radio buttons', | ||
| }, | ||
| defaultValue: { | ||
| summary: 'false', | ||
| }, | ||
| }, | ||
| }, | ||
| orientation: { | ||
| control: { | ||
| type: 'select', | ||
| options: Object.values(RadioGroupOrientation), | ||
| }, | ||
| defaultValue: RadioGroupOrientation.horizontal, | ||
| table: { | ||
| type: { | ||
| summary: 'Sets orientation of radio group', | ||
| }, | ||
| defaultValue: { | ||
| summary: RadioGroupOrientation.horizontal, | ||
| }, | ||
| }, | ||
| }, | ||
| change: { | ||
| action: 'change', | ||
| table: { | ||
| type: { | ||
| summary: 'Event that is fired when the selected radio button changes', | ||
| }, | ||
| defaultValue: { | ||
| summary: null, | ||
| }, | ||
| }, | ||
| }, | ||
| }, | ||
| } as RadioGroupStoryMeta; | ||
|
|
||
| export const RadioGroup = renderComponent(storyTemplate).bind({}); | ||
|
|
||
| export const RadioGroupLabelledby = renderComponent(html<RadioGroupStoryArgs>` | ||
| <fluent-radio-group aria-labelledby="label-2" name="radio-story"> | ||
| <span id="label-2" slot="label">Favorite Fruit</span> | ||
| <fluent-radio value="apple">Apple</fluent-radio> | ||
| <fluent-radio value="pear">Pear</fluent-radio> | ||
| <fluent-radio value="banana">Banana</fluent-radio> | ||
| <fluent-radio value="orange">Orange</fluent-radio> | ||
| </fluent-radio-group> | ||
| `); | ||
|
|
||
| export const RadioGroupLayoutVertical = renderComponent(html<RadioGroupStoryArgs>` | ||
| <fluent-radio-group aria-labelledby="label-3" orientation="vertical" name="radio-story"> | ||
| <span id="label-3" slot="label">Favorite Fruit</span> | ||
| <fluent-radio value="apple">Apple</fluent-radio> | ||
| <fluent-radio value="pear">Pear</fluent-radio> | ||
| <fluent-radio value="banana">Banana</fluent-radio> | ||
| <fluent-radio value="orange">Orange</fluent-radio> | ||
| </fluent-radio-group> | ||
| `); | ||
|
|
||
| export const RadioGroupLayoutHorizontal = renderComponent(html<RadioGroupStoryArgs>` | ||
| <fluent-radio-group aria-labelledby="label-4" orientation="horizontal" name="radio-story"> | ||
| <span id="label-4" slot="label">Favorite Fruit</span> | ||
| <fluent-radio value="apple">Apple</fluent-radio> | ||
| <fluent-radio value="pear">Pear</fluent-radio> | ||
| <fluent-radio value="banana">Banana</fluent-radio> | ||
| <fluent-radio value="orange">Orange</fluent-radio> | ||
| </fluent-radio-group> | ||
| `); | ||
|
|
||
| export const RadioGroupLayoutHorizontalStacked = renderComponent(html<RadioGroupStoryArgs>` | ||
| <fluent-radio-group stacked aria-labelledby="label-5" orientation="horizontal" name="radio-story"> | ||
| <span id="label-5" slot="label">Favorite Fruit</span> | ||
| <fluent-radio value="apple">Apple</fluent-radio> | ||
| <fluent-radio value="pear">Pear</fluent-radio> | ||
| <fluent-radio value="banana">Banana</fluent-radio> | ||
| <fluent-radio value="orange">Orange</fluent-radio> | ||
| </fluent-radio-group> | ||
| `); | ||
|
|
||
| export const RadioGroupDefaultChecked = renderComponent(html<RadioGroupStoryArgs>` | ||
| <fluent-radio-group aria-labelledby="label-6" orientation="horizontal" name="radio-story"> | ||
| <span id="label-6" slot="label">Favorite Fruit</span> | ||
| <fluent-radio value="apple">Apple</fluent-radio> | ||
| <fluent-radio checked value="pear">Pear</fluent-radio> | ||
| <fluent-radio value="banana">Banana</fluent-radio> | ||
| <fluent-radio value="orange">Orange</fluent-radio> | ||
| </fluent-radio-group> | ||
| `); | ||
|
|
||
| export const RadioGroupDisabled = renderComponent(html<RadioGroupStoryArgs>` | ||
| <fluent-radio-group disabled aria-labelledby="label-7" name="radio-story"> | ||
| <span id="label-7" slot="label">Favorite Fruit</span> | ||
| <fluent-radio checked value="apple">Apple</fluent-radio> | ||
| <fluent-radio checked value="pear">Pear</fluent-radio> | ||
| <fluent-radio value="banana">Banana</fluent-radio> | ||
| <fluent-radio value="orange">Orange</fluent-radio> | ||
| </fluent-radio-group> | ||
| `); | ||
|
|
||
| export const RadioGroupDisabledItem = renderComponent(html<RadioGroupStoryArgs>` | ||
| <fluent-radio-group aria-labelledby="label-8" name="radio-story"> | ||
| <span id="label-8" slot="label">Favorite Fruit</span> | ||
| <fluent-radio id="baby" checked value="apple">Apple</fluent-radio> | ||
| <fluent-radio disabled value="pear">Pear</fluent-radio> | ||
| <fluent-radio value="banana">Banana</fluent-radio> | ||
| <fluent-radio value="orange">Orange</fluent-radio> | ||
| </fluent-radio-group> | ||
| `); | ||
|
|
||
| const getLabelContent = (): string | undefined => { | ||
| const radioGroup = document.querySelector('#radio-group-fruit') as FluentRadioGroup; | ||
|
|
||
| if (!radioGroup) return; // add a check to make sure radioGroup exists | ||
| const selectedRadio = radioGroup.value as string; | ||
| if (selectedRadio) { | ||
| return `Favorite fruit: ${selectedRadio.charAt(0).toUpperCase() + selectedRadio.slice(1)}`; | ||
| } else { | ||
| return 'Please select your favorite fruit'; | ||
| } | ||
| }; | ||
|
|
||
| const handleChange = (event: CustomEvent) => { | ||
| const radioGroup = document.querySelector('#radio-group-fruit') as FluentRadioGroup; | ||
|
|
||
| if (!radioGroup) return; // add a check to make sure radioGroup exists | ||
|
|
||
| const selectedRadio = radioGroup.value as string; | ||
| const labelElement = radioGroup.querySelector('[slot="label"]') as HTMLSpanElement; | ||
| if (selectedRadio) { | ||
| const labelContent = selectedRadio.charAt(0).toUpperCase() + selectedRadio.slice(1); | ||
| labelElement.textContent = `Favorite fruit: ${labelContent}`; | ||
| } | ||
| }; | ||
|
|
||
| export const RadioGroupChangeEvent = renderComponent(html<RadioGroupStoryArgs>` | ||
| <fluent-radio-group | ||
| id="radio-group-fruit" | ||
| aria-labelledby="label-8" | ||
| name="radio-story" | ||
| @change="${(event: CustomEvent) => handleChange(event)}" | ||
| > | ||
| <span id="label-8" slot="label">${getLabelContent}</span> | ||
| <fluent-radio checked value="apple">Apple</fluent-radio> | ||
| <fluent-radio value="pear">Pear</fluent-radio> | ||
| <fluent-radio value="Banana">Banana</fluent-radio> | ||
| <fluent-radio value="Orange">Orange</fluent-radio> | ||
| </fluent-radio-group> | ||
| `); |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
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.
The readme mentions
changedcallback. We should document the args passed to the callbacks.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.
And also cover them by stories. In a separate work item.
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.
I added information to the Events table in the README and created a storybook example in the
RadioGroupstory. Let me know what you think.