Adds Label as a new web component #27344

brianchristopherbrady · 2023-03-27T18:04:38Z

Label

A label represents a caption for an item in a user interface.

Design Spec

Engineering Spec

notes

In web components, when using the shadow DOM, it's not feasible to associate elements across the shadow DOM boundary using the traditional for attribute, since the shadow DOM creates a boundary that prevents the label element from accessing the input element's id attribute. Instead, the WC3 Label component uses the aria-labelledby attribute to associate the label element with the input element. This attribute has a value that matches the id of another element on the page, which serves as a label for the input element.

The fluent-label has several visual font size (small, medium, large) and font weight(regular, semibold) options. The fluent-label also provides appearances for required and disabled states.

Use Case

Creating a simple label element with an optional info icon and optional required state

Class: `Label`

Variables

Fields

Name	Privacy	Type	Default	Description
`required`	public	`boolean`	`false`	Specifies required styling for label
`disabled`	public	`boolean`	`false`	Sets disabled state for label
`size`	public	`"small"` `"medium"` `"large"`	`"medium"`	Specifies font size for label
`weight`	public	`"regular"` `"semibold"`	`"regular"`	Specifies font weight for label

Methods

Events

Attributes

Name	Field
`required`	required
`disabled`	disabled
`size`	size
`weight`	weight

Slots

Name	Description
	Default slotted content for label text

Template

<slot></slot> <span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>

Accessibility

W3 Label Spec

WAI-ARIA Roles, States, and Properties

aria-labelledby

Preparation

Fluent Web Component v3 v.s Fluent React 9

Component and Slot Mapping

Fluent UI React 9	Fluent Web Components 3
`<Label>`	`<fluent-label>`

Additional Deltas

	Fluent UI React 9	Fluent Web Components 3
Renders	`HTMLLabelElement`	`HTMLElement`
API	`HTMLLabelElement` Spec	`HTMLElement` Spec
Shadow DOM	n/a	uses Shadow DOM
Accessibility	Uses `for` attribute to associate with form elements	Uses `aria-labelledby` to associate with form elements, does not have a `for` attribute

…ntui into web-components-v3

eljefe223 · 2023-03-27T18:20:11Z

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

+  :host([weight='semibold']) {
+    font-weight: ${fontWeightSemibold};
+  }
+  :host([weight='semibold']) {


codesandbox-ci · 2023-03-27T18:20:52Z

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 3da8c8b:

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

eljefe223 · 2023-03-27T18:22:38Z

packages/web-components/src/label/label.ts

+   * @remarks
+   * HTML Attribute: size
+   */
+  @attr({ attribute: 'size' })


No need to decorate @attr with attribute property unless the display attribute names is different from the property.

So this can just be

@attr public size: LabelSize = LabelSize.medium;

eljefe223 · 2023-03-27T18:22:50Z

packages/web-components/src/label/label.ts

+   * @remarks
+   * HTML Attribute: weight
+   */
+  @attr({ attribute: 'weight' })


eljefe223 · 2023-03-27T18:27:09Z

packages/web-components/src/label/label.template.ts

+    required="${(attr: Label) => attr.required}"
+    size="${(attr: Label) => attr.size}"
+    weight="${(attr: Label) => attr.weight}"
+    id="${(attr: Label) => attr.id}"


You don't need to bind these on on the template.

…fluentui into user/brianbrady/label

chrisdholt

Would be good to have @miroslavstastny look over this as well just to be sure I didn't miss anything.

miroslavstastny · 2023-04-06T21:21:18Z

change/@fluentui-web-components-2b95d12e-1c42-47e8-88da-aa67dac5673b.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "feat(label): adds Label as a new web component",


Suggested change

"comment": "feat(label): adds Label as a new web component",

"comment": "feat(label): add label as a new web component",

miroslavstastny · 2023-04-06T21:35:08Z

packages/web-components/src/label/label.template.ts

+export function labelTemplate<T extends Label>(): ElementViewTemplate<T> {
+  return html<T>`
+    <slot></slot>
+    <span part="asterisk" class="asterisk" ?hidden="${x => !x.required}">*</span>


Just for me to learn - is it better to use hidden attribute than conditionally rendering the span?

* label init * merge web-components-v3 * updates readme * updates styles * adds label styles * removes dead import * divides accordion and accordion item readme * updates label docs * updates label template * updates label template and styles * updates label stories * label updates per review * removes attr decorator on label * label: yarn change * radio: updates attribute story names * label: removes attribute binding on template * label: removes template tag * label: updates per review * label: adds export to root json * adds disabled attr * removes dead code * Update change/@fluentui-web-components-2b95d12e-1c42-47e8-88da-aa67dac5673b.json Co-authored-by: Chris Holt <chhol@microsoft.com> * label: removes dead import, updates storybook args to use consts * label: removes dead imports * label: updates asterisk styling * label:docs: enumerates rendered element API difs between FUIRv9 and FUIWC3 * label: updates docs * label: fixes mispelling in docs * label: updates template, docs * label: updates docs * label: replaces arg values with label options const --------- Co-authored-by: Chris Holt <chhol@microsoft.com>

brianchristopherbrady added 16 commits February 10, 2023 13:46

label init

0107ff2

Merge branch 'web-components-v3' into user/brianbrady/label

8913910

merge web-components-v3

6f0cf27

updates readme

8896c7b

updates styles

560d292

adds label styles

2afbf01

removes dead import

d25354c

divides accordion and accordion item readme

fe5c09c

updates label docs

8f52208

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

08de7d1

…ntui into web-components-v3

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

8255212

…ntui into web-components-v3

merge

7c54b52

updates label template

4a0d4ef

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

5844949

…ntui into web-components-v3

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

2c9bfc1

…ntui into web-components-v3

updates label template and styles

595ac88

brianchristopherbrady requested review from miroslavstastny, chrisdholt and eljefe223 March 27, 2023 18:04

brianchristopherbrady self-assigned this Mar 27, 2023

brianchristopherbrady requested a review from a team as a code owner March 27, 2023 18:04

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

eljefe223 reviewed Mar 27, 2023

View reviewed changes

updates label stories

35b54cc

eljefe223 reviewed Mar 27, 2023

View reviewed changes

brianchristopherbrady added 2 commits March 27, 2023 11:27

label updates per review

dc28a96

removes attr decorator on label

f39d6c1

brianchristopherbrady added 4 commits March 31, 2023 13:00

Merge branch 'user/brianbrady/label' of https://github.com/microsoft/…

ab11029

…fluentui into user/brianbrady/label

label: updates docs

1eec0ce

label: fixes mispelling in docs

bd03b34

label: updates template, docs

298c155

brianchristopherbrady requested a review from chrisdholt March 31, 2023 20:42

label: updates docs

b18a259

chrisdholt approved these changes Mar 31, 2023

View reviewed changes

label: replaces arg values with label options const

ecb836c

brianchristopherbrady changed the title ~~Label Web Component~~ WC3 Label Apr 5, 2023

chrisdholt changed the title ~~WC3 Label~~ Add Label as a new web component Apr 5, 2023

brianchristopherbrady changed the title ~~Add Label as a new web component~~ WC3 Label Apr 5, 2023

Merge branch 'web-components-v3' into user/brianbrady/label

3da8c8b

brianchristopherbrady changed the title ~~WC3 Label~~ Adds Label as a new web component Apr 6, 2023

miroslavstastny reviewed Apr 6, 2023

View reviewed changes

miroslavstastny approved these changes Apr 6, 2023

View reviewed changes

brianchristopherbrady merged commit 48980fe into web-components-v3 Apr 6, 2023

khmakoto deleted the user/brianbrady/label branch April 11, 2023 20:44

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds Label as a new web component #27344

Adds Label as a new web component #27344

brianchristopherbrady commented Mar 27, 2023 •

edited

Loading

eljefe223 Mar 27, 2023

codesandbox-ci bot commented Mar 27, 2023 •

edited

Loading

eljefe223 Mar 27, 2023

eljefe223 Mar 27, 2023

eljefe223 Mar 27, 2023

chrisdholt left a comment

miroslavstastny Apr 6, 2023

miroslavstastny Apr 6, 2023

	"comment": "feat(label): adds Label as a new web component",
	"comment": "feat(label): add label as a new web component",

Adds Label as a new web component #27344

Adds Label as a new web component #27344

Conversation

brianchristopherbrady commented Mar 27, 2023 • edited Loading

Label

Design Spec

Engineering Spec

Use Case

Class: Label

Variables

Fields

Methods

Events

Attributes

Slots

Template

Accessibility

WAI-ARIA Roles, States, and Properties

Preparation

Fluent Web Component v3 v.s Fluent React 9

eljefe223 Mar 27, 2023

Choose a reason for hiding this comment

codesandbox-ci bot commented Mar 27, 2023 • edited Loading

eljefe223 Mar 27, 2023

Choose a reason for hiding this comment

eljefe223 Mar 27, 2023

Choose a reason for hiding this comment

eljefe223 Mar 27, 2023

Choose a reason for hiding this comment

chrisdholt left a comment

Choose a reason for hiding this comment

miroslavstastny Apr 6, 2023

Choose a reason for hiding this comment

miroslavstastny Apr 6, 2023

Choose a reason for hiding this comment

brianchristopherbrady commented Mar 27, 2023 •

edited

Loading

Class: `Label`

codesandbox-ci bot commented Mar 27, 2023 •

edited

Loading