Adds Checkbox as a new web component #27450

brianchristopherbrady · 2023-04-05T18:52:51Z

Checkbox

An implementation of a checkbox as a form-connected web-component.

Design Spec

Engineering Spec

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

Class: `Checkbox`

Component Name

<fluent-checkbox>

Component Template

FAST checkboxTemplate

Variables

Name	Description	Type
`checkboxLabelPosition`	label position types	`{ before: "before", after: "after" }`
`checkboxShape`	checkbox shape types	`{ square: "square", circular: "circular" }`
`checkboxSize`	checkbox size types	`{ medium: "medium", large: "large" }`

Fields

Name	Privacy	Type	Default	Description
`labelPosition`	public	`CheckboxLabelPosition`	`CheckboxLabelPosition.after`	Indicates postion of label
`checked`	public	`boolean`	`false`	Indicates whether input is checked
`indeterminate`	public	`boolean`	`false`	Indicates whether input is initially indeterminate
`disabled`	public	`boolean`	`false`	Indicates whether input is disabled
`required`	public	`boolean`	`false`	Indicates whether input is required
`size`	public	`CheckboxSize`	`CheckboxSize.medium`	Indicates the size of the checkbox
`shape`	public	`CheckboxShape`	`CheckboxShape.square`	Indicates shape of the checkbox

Methods

Name	Privacy	Description
`keypressHandler`	public	fires on keyboard press
`clickHandler`	public	fires on mouse click

Events

Name	Type	Description	Inherited From
`change`		Fires a custom change event	`FASTCheckbox`

Attributes

Name	Field
`label-position`	labelPosition
`checked`	checked
`disabled`	disabled
`required`	required
`size`	size
`shape`	shape

IDL Attributes

Name	Field	Type	Description
`checked`	checked	`boolean`	The current checked state of the checkbox
`indeterminate`	indeterminate	`boolean`	The indeterminate state. Independent of checked

Slots

Name	Description
	The default slot for text input content
`checked-indicator`	The named slot for the checked indicator
`indeterminate-indicator`	The named slot for the indeterminate indicator

Accessibility

W3C Checkbox Spec

WAI-ARIA Roles, States, and Properties

role="checkbox"
aria-checked
aria-required
aria-disabled

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

change/@fluentui-web-components-eba99a5e-947a-4735-815b-86d613000d31.json

miroslavstastny · 2023-07-07T22:04:36Z

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

There is no visible focus indicator on the checkbox:

miroslavstastny · 2023-07-07T22:19:06Z

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

+    align-items: center;
+    justify-content: center;
+    color: ${colorNeutralForegroundInverted};
+    height: 16px;


I do not know what the height is good for but is moves the checked indicator 1px down:

height was no necessary

miroslavstastny · 2023-07-07T22:22:07Z

packages/web-components/src/checkbox/README.md

+| --------------- | ------- | ----------------------- | ----------------------------- | -------------------------------------------------- |
+| `labelPosition` | public  | `CheckboxLabelPosition` | `CheckboxLabelPosition.after` | Indicates postion of label                         |
+| `checked`       | public  | `boolean`               | `false`                       | Indicates whether input is checked                 |
+| `indeterminate` | public  | `boolean`               | `false`                       | Indicates whether input is initially indeterminate |


FUIR9 uses checked: boolean | 'mixed'.
The difference should be covered in Fluent Web Component v3 v.s Fluent React 9 section of the readme

miroslavstastny · 2023-07-07T22:25:45Z

packages/web-components/src/checkbox/README.md

+
+<br />
+
+### **Attributes**


Do we need to document Fields and Attributes separately?

I have been following FASTUI docs on these but this has come up a lot so I have removed the fields table and made sure everything is documented in the attributes table.

miroslavstastny · 2023-07-07T22:25:58Z

packages/web-components/src/checkbox/README.md

+| Name             | Field         |
+| ---------------- | ------------- |
+| `label-position` | labelPosition |
+| `checked`        | checked       |


Missing indeterminate

miroslavstastny · 2023-07-07T22:26:22Z

packages/web-components/src/checkbox/README.md

+
+| Name                    | Description          | Type                                         |
+| ----------------------- | -------------------- | -------------------------------------------- |
+| `checkboxLabelPosition` | label position types | `{ before: "before", after: "after" }`       |


What are these variables? I cannot find them anywhere in code.

These are the exported options from checkbox.options.ts

…000d31.json Co-authored-by: Miroslav Stastny <[email protected]>

fabricteam · 2023-07-17T17:03:24Z

🕵 FluentUI-web-components No visual regressions between this PR and main

…ub.com/brianchristopherbrady/fluentui-fork into user/brianbrady/web-component-checkbox

miroslavstastny · 2023-07-18T16:08:05Z

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

+    height: 20px;
+  }
+  :host([aria-checked='mixed'][size='large']) .indeterminate-indicator {
+    width: 10px;


The size of the large indeterminate indicator is now 10x8 (for both square and circular), I guess it should be 10x10:

fabricteam · 2023-07-18T16:45:40Z

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

* radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * checkbox init * updats checkbox styles * checkbox: adds attributes to Checkbox * checkbox: updates checked-indicator svg and storybook templates * checkbox: updates styles * checkbox: adds exports * checkbox: organizes css * checkbox: updates styles * checkbox: adds README * checkbox: formats README * deletes dead file * checkbox: cleans up * checkbox: updates storybook content * checkbox: removes file * checkbox: yarn change * checkbox: updates README * checkbox: updates styles * checkbox: fixes styling bug * checkbox: optimze css * checkbox: updates storybook * checkbox: adds required story * checkbox: updates stories * Update change/@fluentui-web-components-eba99a5e-947a-4735-815b-86d613000d31.json Co-authored-by: Miroslav Stastny <[email protected]> * checkbox: updates README, adds focus styles * checkbox: api-report * reverts api report * checkbox: updates styles --------- Co-authored-by: Miroslav Stastny <[email protected]>

brianchristopherbrady and others added 25 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

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

9b350fc

input spec init

2cf59ce

cleans up spec

79b6bff

formatting

5558b93

updates component name to text input

3c045c3

updates component name in spec

2370967

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

9c4eb6b

checkbox init

2174a0b

updats checkbox styles

76ccb93

checkbox: adds attributes to Checkbox

093845f

checkbox: updates checked-indicator svg and storybook templates

bf36f35

checkbox: updates styles

a2d05f7

checkbox: adds exports

0938b05

checkbox: organizes css

868eabe

checkbox: updates styles

ecd2107

checkbox: adds README

534bd5e

checkbox: formats README

8cf47d7

deletes dead file

9f8a265

checkbox: cleans up

9749c9b

checkbox: updates storybook content

c01625b

brianchristopherbrady added the Draft label Apr 5, 2023

brianchristopherbrady requested a review from a team as a code owner April 5, 2023 18:52

msft-fluent-ui-bot added the web-components label Apr 5, 2023

msft-fluent-ui-bot assigned miroslavstastny Apr 5, 2023

checkbox: removes file

976bf86

brianchristopherbrady added 2 commits April 24, 2023 16:27

checkbox: adds required story

0410781

checkbox: updates stories

06ee6d9

miroslavstastny reviewed Jul 7, 2023

View reviewed changes

Update change/@fluentui-web-components-eba99a5e-947a-4735-815b-86d613…

6b00985

…000d31.json Co-authored-by: Miroslav Stastny <[email protected]>

brianchristopherbrady added 3 commits July 17, 2023 13:09

checkbox: updates README, adds focus styles

284f54f

Merge branch 'user/brianbrady/web-component-checkbox' of https://gith…

34bf57c

…ub.com/brianchristopherbrady/fluentui-fork into user/brianbrady/web-component-checkbox

checkbox: api-report

89b9981

brianchristopherbrady requested a review from miroslavstastny July 17, 2023 20:59

reverts api report

7781bec

miroslavstastny reviewed Jul 18, 2023

View reviewed changes

miroslavstastny approved these changes Jul 18, 2023

View reviewed changes

checkbox: updates styles

dbbeadd

brianchristopherbrady enabled auto-merge (squash) July 18, 2023 16:38

brianchristopherbrady merged commit 44328d3 into microsoft:web-components-v3 Jul 18, 2023

brianchristopherbrady removed the Draft label Aug 3, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds Checkbox as a new web component #27450

Adds Checkbox as a new web component #27450

brianchristopherbrady commented Apr 5, 2023 •

edited

Loading

miroslavstastny Jul 7, 2023

brianchristopherbrady Jul 17, 2023

miroslavstastny Jul 7, 2023

brianchristopherbrady Jul 17, 2023

miroslavstastny Jul 7, 2023

miroslavstastny Jul 7, 2023

brianchristopherbrady Jul 17, 2023

miroslavstastny Jul 7, 2023

miroslavstastny Jul 7, 2023

brianchristopherbrady Jul 17, 2023

fabricteam commented Jul 17, 2023 •

edited

Loading

miroslavstastny Jul 18, 2023

fabricteam commented Jul 18, 2023


		<br />

		### Attributes

Adds Checkbox as a new web component #27450

Adds Checkbox as a new web component #27450

Conversation

brianchristopherbrady commented Apr 5, 2023 • edited Loading

Checkbox

Design Spec

Engineering Spec

Class: Checkbox

Component Name

Component Template

Variables

Fields

Methods

Events

Attributes

IDL Attributes

Slots

Accessibility

WAI-ARIA Roles, States, and Properties

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

fabricteam commented Jul 17, 2023 • edited Loading

🕵 FluentUI-web-components No visual regressions between this PR and main

Choose a reason for hiding this comment

fabricteam commented Jul 18, 2023

🕵 fluentui-web-components-v3 No visual regressions between this PR and main

brianchristopherbrady commented Apr 5, 2023 •

edited

Loading

Class: `Checkbox`

fabricteam commented Jul 17, 2023 •

edited

Loading