Adds Radio and RadioGroup as new web components #27113

brianchristopherbrady · 2023-03-07T18:00:48Z

Radio

Radio buttons allow users to select a single option from two or more choices. Radio buttons are typically rendered as small circles, which are filled or highlighted when selected.

Design Spec

Link to Radio Design Spec in Figma

Engineering Spec

Fluent WC3 Radio is a form associated component that extends from the FAST Radio FAST Radio and is intended to be as close to the Fluent UI React 9 Menu implementation as possible. However, due to the nature of web components there will not be 100% parity between the two.

Use Case

Used anywhere an author might otherwise use an input[type="radio"]. Used to facilitate choice where only one choice is acceptable.

Class: `Radio`

Component Name

fluent-radio

Variables

Fields

Name	Privacy	Type	Default	Description
`name`	public	`string`		The name of the radio. See name attribute for more info.
`disabled`	public	`boolean`		Sets disabled state for radio
`labelPosition`	public	`"after"` `"below"`	`"below"`	The position of the label relative to the radio indicator.
`checked`	public	`boolean`	`false`	When true, radio button will be checked

Methods

Events

Name	Type	Inherited From
`change`

Attributes

Name	Field
`name`	name
`disabled`	disabled
`label-position`	labelPosition
`checked`	checked

Slots

Name	Description
`checked-indicator`	The checked indicator
	Default slotted content for label text

Suggested Template

radioTemplate from FastFoundation

Accessibility

W3 Radio Spec

WAI-ARIA Roles, States, and Properties

Attributes	value	Description
`role`	`radio`
`aria-checked`		the checked state of the component
`aria-required`		the required state of the component
`aria-disabled`		the disabled state of the component
`tabindex`	`0`

Preparation

Fluent Web Component v3 v.s Fluent React 9

Component and Slot Mapping

Fluent UI React 9	Fluent Web Components 3
`<Radio>`	`<fluent-radio>`

Property Mapping

Fluent UI React 9	Fluent Web Components 3	Description of difference
`prop label`	default slotted content	React implementation requires user to pass a string through the `label` prop on the Radio component The web component implementation requires users to pass the label text through the default slotted content

Radio Group

RadioGroup lets people select a single option from two or more Radio items. Use RadioGroup to present all available choices if there's enough space..

Design Spec

Link to Radio Design Spec in Figma

Engineering Spec

As defined by the W3C..

A radio group is a set of checkable buttons, known as radio buttons, where no more than one of the buttons can be checked at a time. Some implementations may initialize the set with all buttons in the unchecked state in order to force the user to check one of the buttons before moving past a certain point in the workflow.

Use Case

Used anywhere an author might group a list of radio options.

Class: `RadioGroup`

Component Name

fluent-radio-group

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`	The orientation of the group
default slot	public	`HTMLElement[]`		The default slot expecting Radio items

Methods

Name	Privacy	Description	Parameters	Return	Inherited From
`nameChanged`	protected			`void`
`valueChanged`	protected			`void`

Events

Name	Type	Description
`change`		Fires a custom 'change' event when the value changes

Attributes

Name	Field	Inherited From
`disabled`	disabled
`named`	name
`value`	value
`orientation`	orientation

Slots

Name	Description
	The default slot for radios
label	Provide label for the radio group

Suggested Template

radioGroupTemplate from FastFoundation

Accessibility

W3 Radio Spec

WAI-ARIA Roles, States, and Properties

Attributes	value	Description
`aria-labelledby`		used to associate a label with the group

Preparation

Fluent Web Component v3 v.s Fluent React 9

Component and Slot Mapping

Fluent UI React 9	Fluent Web Components 3
`<RadioGroup>`	`<fluent-radio-group>`

Property Mapping

Fluent UI React 9	Fluent Web Components 3	Description of difference
`layout`	`orientation`	React implementation requires user to pass either `"horizontal"` or `"horizontal-stacked"` through `layout` prop. WC3 implementation requires user to either pass `"vertical"` or "`horizontal"` through `orientation` attribute.

Screenshots

…erbrady/fluentui-fork into web-components-v3

codesandbox-ci · 2023-03-07T18:16:25Z

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 9a6705f:

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

fabricteam · 2023-03-07T19:55:57Z

📊 Bundle size report

_{🤖 This report was generated against 06a52667968547f07b360da4d1d6f65891b7496f}

size-auditor · 2023-03-07T20:10:23Z

Asset size changes

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

Baseline commit: 06a52667968547f07b360da4d1d6f65891b7496f (build)

packages/web-components/src/radio-group/radio-group.styles.ts

packages/web-components/src/radio/radio.styles.ts

packages/web-components/src/radio-group/radio-group.ts

chrisdholt · 2023-03-09T18:01:34Z

packages/web-components/src/radio-group/radio-group.ts

+  protected disableChanged(): void {
+    if (!this.$fastController.isConnected) {
+      return;
+    }
+    this.slottedRadioButtons.forEach((item: HTMLElement, index: number) => {
+      if (this.disabled) {
+        item.setAttribute('disabled', '');
+      }
+    });
+  }


I'd like to understand the addition of this here - for awareness, the iteration over individual radio buttons and modifying their state was explicitly removed with a purpose in this PR: microsoft/fast#6601

The corresponding issue is here: microsoft/fast#6567

(If this hasn't been published we plan on doing so by EOW)

@chrisdholt I did this because slotted content within Radio needs specific disabled styling. But is it possible to target slotted content within slotted content from the RadioGroup?

Something like this..?

// markup <fluent-radio-group disabled> slotted: <fluent-radio role="radio"> slotted: <div class="label"> ...</div> </fluent-radio> </fluent-radio-group> // radiogroup.styles.ts :host([disabled]) ::slotted([role="radio"]) ::slotted(.label) { // apply styles }

What is the disabled styling you need to accomplish? Visuals are one thing - keep in mind that the code above is behavioral as well. If a user made a change to the radio, and then they changed something else which disables that portion of the form...if the radio-group is re-enabled, the state is gone because of a side-effect of the radiogroup.

The disabled styling we need..

RadioGroup[disabled] Radio[checked] .control { border-color } Radio[disabled] Radio .control { border-color } RadioGroup[disabled] Radio[checked] .checked-indicator { border-color } RadioGroup[disabled] Radio .checked-indicator { background-color } RadioGroup[disabled] Radio .label { color }

I'll pull this down and check it out.

@chrisdholt This might be a good case for local tokens? It would be much more straight forward then the Menu + Menu Item attempt.

@procload i want to reiterate that this will override any state set outside the component.

packages/web-components/src/accordion-item/accordion-item.styles.ts

packages/web-components/src/radio-group/radio-group.ts

packages/web-components/src/radio/radio.styles.ts

packages/web-components/src/radio-group/index.ts

chrisdholt · 2023-03-13T19:10:23Z

packages/web-components/src/radio/radio.styles.ts

+  .control {
+    align-items: center;
+    border: 1px solid ${colorNeutralStrokeAccessible};
+    border-radius: 50%;


Just a question - is this hardcoded or should this be a token value? I can see an argument for both

Good catch.. I can't see a scenario where Fluent would ever make the radio anything but a perfect circle but they do have a borderRadiusCircular so probably best to go ahead and use it.

chrisdholt · 2023-03-13T20:21:39Z

packages/web-components/src/radio-group/radio-group.styles.ts

+    justify-content: center;
+  }
+
+  :host([disabled]) ::slotted([role='radio'] ::slotted(.label)) {


Where is the .label class coming from here? We shouldn't sprout classes on host elements, so I don't think I'd anticipate this being on a given element. If the thinking is that this needs to be added by a consumer I'm not sure that's a great ergonomic

.label class comes directly from the FAST Radio template.

That’s in the shadow root, is this actually reaching into the shadow root and grabbing it and applying it? The label text slotted into the radio is going to be in the light dom but even an element would only include selectors targetable by this in the light dom.

Oh wait I'm sorry I see what you are looking at now. Yeah that's dead code it never worked and shouldn't have been commited. I was just experimenting to see if it was possible to reach into the shadow DOM of a child component as a potential solution to being able to style Radio slotted content when the RadioGroup is disabled.

Follow up.. the radio's label also needs specific styling when stacked="true" is set on the RadioGroup.

jpaims · 2023-03-14T00:39:37Z

Design check:

#	Issue	Category	Screenshot	Comments
1	Radio outside circle border should be 16x16 (currently 18x18)	Sizing		---
2	Overall hit target height should be 32px (currently 36px)	Sizing		This seems to be a bug in React too. The design spec defines 32px height.
3	Group label color should be foreground 1	Color	---	---
4	Stacked radio should have 8px padding left and right of the label	Sizing		---
5	Focus border outer should be 2px instead of 1px	Stroke		---

eljefe223 · 2023-04-26T16:38:48Z

packages/web-components/src/radio/radio.styles.ts

+    box-shadow: inset 0 0 0 2px ${colorStrokeFocus2};
+    content: '';
+    cursor: pointer;
+    inset: 0px;


NIT inset: 0

I removed these styles to be more inline with how the other components are setting the focus state

…adio-radio-group

…ps://github.com/brianchristopherbrady/fluentui-fork into user/brianbrady/web-component-radio-radio-group

eljefe223 · 2023-04-27T23:50:50Z

packages/web-components/src/radio-group/radio-group.styles.ts

+  }
+  :host([disabled]) {
+    --control-border-color: ${colorNeutralForegroundDisabled};
+    --checked-indicator-background-color: ${colorNeutralForegroundDisabled};


since these are for radio I'd move the definitions for these there. Then simply reassign them in your disabled selector.

so

host([disabled]) ::slotted([role='radio']) { --control-border-color: ${colorNeutralForegroundDisabled}; --checked-indicator-background-color: ${colorNeutralForegroundDisabled}; --state-color: ${colorNeutralForegroundDisabled}; }

eljefe223 · 2023-04-27T23:51:07Z

packages/web-components/src/radio-group/radio-group.styles.ts

+  ${display('flex')}
+
+  :host {
+    --control-border-color: ${colorNeutralStrokeAccessible};


just move all these to the host of radio

* radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * radio init * styles radio * adds radio and radio group to index rollup * merge * cherry-pick * fixes arguments passed to slottedRadioButtonsChanged * yarn changew * updates radio group logic * cherry-pick * updates styles * cherry-pick * merge * adds radio group attributes * removes console logs * updates styles * updates RadioGroup readme * fixes jsdoc * updats radio and radio group stories * formats radio group story markup * removes redundant attribute on RadioGroup story * removes dead code * updates radio styles * updates radio group styles * removes redundant attribute on radio group * merge * styles radio and radio group * removes dead code * updates css value to token * exports RadioGroupOrientation namespaced type * updates styles per design review * updates focus styles * reverts file * reverts file * mege * adds back story args * re exports RadioGroupOrientation from FAST * removes redundant stack attribute * testing local tokens for disabled styling * radio: updates styles per review * radio: updates design tokens & styles * radio: adds storybook content * radio init * styles radio * radio: merge * merge * cherry-pick * fixes arguments passed to slottedRadioButtonsChanged * yarn changew * updates radio group logic * cherry-pick * updates styles * cherry-pick * merge * adds radio group attributes * removes console logs * updates styles * updates RadioGroup readme * fixes jsdoc * updats radio and radio group stories * formats radio group story markup * removes redundant attribute on RadioGroup story * removes dead code * updates radio styles * updates radio group styles * removes redundant attribute on radio group * merge * styles radio and radio group * removes dead code * updates css value to token * exports RadioGroupOrientation namespaced type * updates styles per design review * updates focus styles * reverts file * reverts file * mege * adds back story args * re exports RadioGroupOrientation from FAST * removes redundant stack attribute * testing local tokens for disabled styling * radio: updates styles per review * radio: updates design tokens & styles * radio: adds storybook content * radio: initiates css variables in css * leverage css grid for spacing and remove js application for padding * radio: adds export to root json * radio: changes per review * radio: removes pointer events from disabled radio item * radio: updates styling * radio: styles formatting * radio: updates styles * Update change/@fluentui-web-components-94ca1c7a-1462-4aa5-9458-41a54f17527e.json Co-authored-by: Miroslav Stastny <mistastn@microsoft.com> * removes redundant style * radio: addresses pr feedback * radio: updates disabled styles * Update packages/web-components/src/radio/radio.stories.ts Co-authored-by: Chris Holt <chhol@microsoft.com> * radio: swaps args table value for const * radio: removes duplicate style * radio: optimizes styles * radio: swaps js for css disabled styling solution * radiogroup, radio: updates based on feedback * radiogroup, radio: updates storybook content and README * radiogroup, radio: updates docs * radiogroup, radio: removes label-position from docs * radiogroup, radio: updates docs * Update packages/web-components/src/radio/README.md Co-authored-by: Miroslav Stastny <mistastn@microsoft.com> * radiogroup, radio: addresses feedback * radiogroup, radio: updates docs * radiogroup, radio: addresses feedback * radiogroup, radio: updates styles * radiogroup, radio: removes whitespace * radiogroup, radio: updates styles per review * radiogroup, radio: formats files * radiogroup, radio: format document * radiogroup, radio: fixes import --------- Co-authored-by: Chris Holt <chhol@microsoft.com> Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>

brianchristopherbrady and others added 5 commits March 3, 2023 10:45

radio init

7f9af9e

styles radio

70c55e0

Merge branch 'microsoft:web-components-v3' into web-components-v3

f3cb7f4

reverts branch

a72d10f

Merge branch 'web-components-v3' of https://github.com/brianchristoph…

2941fa7

…erbrady/fluentui-fork into web-components-v3

brianchristopherbrady added the Draft label Mar 7, 2023

brianchristopherbrady requested a review from a team as a code owner March 7, 2023 18:00

brianchristopherbrady self-assigned this Mar 7, 2023

msft-fluent-ui-bot added the web-components label Mar 7, 2023

brianchristopherbrady requested review from chrisdholt and procload March 7, 2023 19:58