@fluentui/react-checkbox 9.0.9 → 9.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.json +21 -6
  2. package/CHANGELOG.md +16 -7
  3. package/package.json +1 -1
  4. package/MIGRATION.md +0 -51
  5. package/Spec.md +0 -184
package/CHANGELOG.json CHANGED
@@ -2,7 +2,22 @@
2
2
  "name": "@fluentui/react-checkbox",
3
3
  "entries": [
4
4
  {
5
- "date": "Thu, 20 Oct 2022 08:35:06 GMT",
5
+ "date": "Tue, 25 Oct 2022 00:34:07 GMT",
6
+ "tag": "@fluentui/react-checkbox_v9.0.10",
7
+ "version": "9.0.10",
8
+ "comments": {
9
+ "patch": [
10
+ {
11
+ "author": "tristan.watanabe@gmail.com",
12
+ "package": "@fluentui/react-checkbox",
13
+ "commit": "11156f964c91c90f778a08e1d7ec650104756f80",
14
+ "comment": "chore: Migrate to new package structure."
15
+ }
16
+ ]
17
+ }
18
+ },
19
+ {
20
+ "date": "Thu, 20 Oct 2022 08:39:29 GMT",
6
21
  "tag": "@fluentui/react-checkbox_v9.0.9",
7
22
  "version": "9.0.9",
8
23
  "comments": {
@@ -23,31 +38,31 @@
23
38
  "author": "beachball",
24
39
  "package": "@fluentui/react-checkbox",
25
40
  "comment": "Bump @fluentui/react-label to v9.0.8",
26
- "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
41
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
27
42
  },
28
43
  {
29
44
  "author": "beachball",
30
45
  "package": "@fluentui/react-checkbox",
31
46
  "comment": "Bump @fluentui/react-tabster to v9.2.0",
32
- "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
47
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
33
48
  },
34
49
  {
35
50
  "author": "beachball",
36
51
  "package": "@fluentui/react-checkbox",
37
52
  "comment": "Bump @fluentui/react-theme to v9.1.1",
38
- "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
53
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
39
54
  },
40
55
  {
41
56
  "author": "beachball",
42
57
  "package": "@fluentui/react-checkbox",
43
58
  "comment": "Bump @fluentui/react-utilities to v9.1.2",
44
- "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
59
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
45
60
  },
46
61
  {
47
62
  "author": "beachball",
48
63
  "package": "@fluentui/react-checkbox",
49
64
  "comment": "Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16",
50
- "commit": "be27026d83b8a019bcb945d0f42635ae76c00385"
65
+ "commit": "5ea1372675d910d76cf1b9cbd74d05b7c4e8fcbc"
51
66
  }
52
67
  ]
53
68
  }
package/CHANGELOG.md CHANGED
@@ -1,23 +1,32 @@
1
1
  # Change Log - @fluentui/react-checkbox
2
2
 
3
- This log was last generated on Thu, 20 Oct 2022 08:35:06 GMT and should not be manually modified.
3
+ This log was last generated on Tue, 25 Oct 2022 00:34:07 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [9.0.10](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.10)
8
+
9
+ Tue, 25 Oct 2022 00:34:07 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.9..@fluentui/react-checkbox_v9.0.10)
11
+
12
+ ### Patches
13
+
14
+ - chore: Migrate to new package structure. ([PR #25337](https://github.com/microsoft/fluentui/pull/25337) by tristan.watanabe@gmail.com)
15
+
7
16
  ## [9.0.9](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.9)
8
17
 
9
- Thu, 20 Oct 2022 08:35:06 GMT
18
+ Thu, 20 Oct 2022 08:39:29 GMT
10
19
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-checkbox_v9.0.8..@fluentui/react-checkbox_v9.0.9)
11
20
 
12
21
  ### Patches
13
22
 
14
23
  - chore: Bump peer deps to support React 18 ([PR #24972](https://github.com/microsoft/fluentui/pull/24972) by mgodbolt@microsoft.com)
15
24
  - chore: Update Griffel to latest version ([PR #25212](https://github.com/microsoft/fluentui/pull/25212) by olfedias@microsoft.com)
16
- - Bump @fluentui/react-label to v9.0.8 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
17
- - Bump @fluentui/react-tabster to v9.2.0 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
18
- - Bump @fluentui/react-theme to v9.1.1 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
19
- - Bump @fluentui/react-utilities to v9.1.2 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
20
- - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16 ([commit](https://github.com/microsoft/fluentui/commit/be27026d83b8a019bcb945d0f42635ae76c00385) by beachball)
25
+ - Bump @fluentui/react-label to v9.0.8 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
26
+ - Bump @fluentui/react-tabster to v9.2.0 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
27
+ - Bump @fluentui/react-theme to v9.1.1 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
28
+ - Bump @fluentui/react-utilities to v9.1.2 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
29
+ - Bump @fluentui/react-conformance-griffel to v9.0.0-beta.16 ([PR #25265](https://github.com/microsoft/fluentui/pull/25265) by beachball)
21
30
 
22
31
  ## [9.0.8](https://github.com/microsoft/fluentui/tree/@fluentui/react-checkbox_v9.0.8)
23
32
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-checkbox",
3
- "version": "9.0.9",
3
+ "version": "9.0.10",
4
4
  "description": "Fluent UI checkbox component",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
package/MIGRATION.md DELETED
@@ -1,51 +0,0 @@
1
- # Checkbox Migration
2
-
3
- ## Migration from v0
4
-
5
- - `Checkbox`
6
- - `checked` => `checked`.
7
- - `defaultChecked` => `defaultChecked`.
8
- - `disabled` => Use native `disabled`.
9
- - `indicator` => `indicator`.
10
- - `label` => `label`.
11
- - `labelPosition` => `labelPosition`.
12
- - `onChange` => `onChange`.
13
- - `onClick` => Consider using `onChange`.
14
- - `toggle` => Toggle checkbox is not supported in vNext.
15
-
16
- ## Migration from v8
17
-
18
- - `Checkbox`
19
- - `boxSide` => `labelPosition`.
20
- - `checked`, `indeterminate` => `checked`.
21
- - `checkmarkIconProps` => `indicator`.
22
- - `componentRef` => Not supported.
23
- - `defaultChecked`, `defaultIndeterminate` => `defaultChecked`.
24
- - `disabled` => Use native `disabled`.
25
- - `id` => Use native `id`.
26
- - `label` => `label`.
27
- - `name` => Not supported.
28
- - `onChange` => `onChange`.
29
- - `onRenderLabel` => Use `label` slot.
30
- - `required` => Use native `required`.
31
- - `title` => Use native `title`.
32
-
33
- ## Property Mapping
34
-
35
- | v8 `Checkbox` | v0 `Checkbox` | v9 `Checkbox` |
36
- | -------------------- | ---------------- | ---------------- |
37
- | `boxSide` | `labelPosition` | `labelPosition` |
38
- | `checked` | `checked` | `checked` |
39
- | `checkmarkIconProps` | `indicator` | `indicator` |
40
- | `componentRef` | | |
41
- | `defaultChecked` | `defaultChecked` | `defaultChecked` |
42
- | `disabled` | `disabled` | `disabled` |
43
- | `id` | | `id` |
44
- | `label` | `label` | `label` |
45
- | `name` | | |
46
- | `onChange` | `onChange` | `onChange` |
47
- | | `onClick` | `onChange` |
48
- | `onRenderLabel` | | `label` |
49
- | `required` | | `required` |
50
- | `title` | | `title` |
51
- | | `toggle` | |
package/Spec.md DELETED
@@ -1,184 +0,0 @@
1
- # @fluentui/react-checkbox Spec
2
-
3
- ## Background
4
-
5
- Checkboxes give people a way to select one or more items from a group, or switch between
6
- two mutually exclusive options (checked or unchecked).
7
-
8
- ## Prior Art
9
-
10
- - Open UI research:
11
- - Concepts: https://open-ui.org/components/checkbox.research.concepts
12
- - Findings: https://open-ui.org/components/checkbox.research.findings
13
- - Proposal: https://open-ui.org/components/checkbox
14
- - Github Epic: https://github.com/microsoft/fluentui/issues/18454
15
-
16
- ### [Checkbox in v0/Northstar](https://fluentsite.z22.web.core.windows.net/0.56.0/components/checkbox/definition)
17
-
18
- The v0 `Checkbox` component supports a mixed state, which is the same as indeterminate in v8. It is rendered as a `div` with `role="checkbox"` and does not use the native input element.
19
-
20
- ```tsx
21
- // string
22
- <Checkbox label="Make my profile visible" />
23
-
24
- // jsx
25
- <Checkbox
26
- label={
27
- <span>
28
- Long labels will wrap and the indicator <br /> should remain top-aligned.
29
- </span>
30
- }
31
- />
32
- ```
33
-
34
- Component props:
35
-
36
- | Prop | Description |
37
- | -------------- | ------------------------------------------------------------------ |
38
- | accessibility | Accessibility behavior if overridden by the user. |
39
- | as | Render as given string or component. |
40
- | checked | Checkbox's checked state. |
41
- | className | Additional styles. |
42
- | defaultChecked | Whether the checkbox should be set to checked by default. |
43
- | design | ... |
44
- | disabled | Whether the checkbox is disabled or not. |
45
- | indicator | Checkbox's icon indicator. |
46
- | label | Label text or jsx to be rendered in the label. |
47
- | labelPosition | Whether the label is rendered on left or right (`start` or `end`). |
48
- | onChange | Event handler to be called after checked state has changed. |
49
- | onClick | Event handler to be called after the checkbox is clicked. |
50
- | styles | Additional styles. |
51
- | toggle | Render a toggle style checkbox with on and off choices. |
52
- | variables | Additional styles. |
53
-
54
- ### [Checkbox in v8/Fabric](https://developer.microsoft.com/en-us/fluentui#/controls/web/checkbox)
55
-
56
- The v8 `Checkbox` component supports both `indeterminate` and `checked` states. In this case, an input tag is used and its opacity is set to 0. This allows for the logic to be performed by the native element while a div is rendered to show the styled checkbox.
57
-
58
- Example
59
-
60
- ```tsx
61
- <Checkbox
62
- label="Indeterminate checkbox (controlled)"
63
- indeterminate={isIndeterminate}
64
- checked={isChecked}
65
- onChange={onChange}
66
- />
67
- ```
68
-
69
- Component props:
70
-
71
- | Prop | Description |
72
- | -------------------- | ------------------------------------------------------------------------------ |
73
- | ariaDescribedBy | Id of the element that describes the checkbox. |
74
- | ariaLabel | Accessible label for the checkbox. |
75
- | ariaLabelledBy | Id of the element that contains the label information of the checkbox. |
76
- | ariaPositionInSet | Number in the parent set (if in a set) for aria-posinset. |
77
- | ariaSetSize | The total size of the parent set (if in a set) for aria-setsize. |
78
- | boxSide | Wheter the checkbox should be shown before or after the label. |
79
- | checked | Checkbox's checked state. |
80
- | checkmarkIconProps | Icon to be rendered in the checkbox. |
81
- | className | Additional styles. |
82
- | componentRef | Optional ref. |
83
- | defaultChecked | Whether the checkbox should be set to checked by default. |
84
- | defaultIndeterminate | Whether the checkbox should be set to indeterminate by default. |
85
- | disabled | Whether the checkbox is disabled or not. |
86
- | id | Id for the checkbox input. |
87
- | indeterminate | Checkbox's indeterminate state. |
88
- | inputProps | Optional props to be applied to the input element before applying other props. |
89
- | label | String to display next to the checkbox. |
90
- | name | Name for the checkbox input. |
91
- | onChange | Event handler to be called after the checked value has changed. |
92
- | onRenderLabel | Custom render for the label. |
93
- | required | Required state of the checkbox. |
94
- | styles | Additional styles. |
95
- | theme | Additional styles. |
96
- | title | Title text applied to the root element and the hidden checkbox input. |
97
-
98
- ### Conclusion
99
-
100
- - Most props will follow the approach of `v8` as well as the render structure. The main idea will be to use the native `input` tag and set its opacity to 0 to then render a custom checkbox.
101
- - This approach will also use the `Label` component from `@fluentui/react-label`
102
- - The converged `Checkbox` should also support `circular` checkboxes which both `v8` and `v0` do not support.
103
-
104
- ## Sample Code
105
-
106
- ```tsx
107
- <Checkbox label="Example Checkbox" />
108
-
109
- <Checkbox label={<>Example Checkbox with <a href="https://www.microsoft.com">link</a></>} />
110
-
111
- <Checkbox label="Circular Checkbox" circular size="large" />
112
-
113
- <Checkbox label="Controlled Checkbox" onChange={onChangeFunction} />
114
-
115
- <Checkbox label="Mixed Checkbox" checked="mixed" />
116
-
117
- <Checkbox label={{ children: 'Custom Label', style: { color: 'red' }, required: true }} />
118
- ```
119
-
120
- ## Variants
121
-
122
- - A Checkbox has two size variants: `medium (default)` and `large`.
123
- - A Checkbox has four appearance variants: `disabled`, `unchecked`, `checked`, and `mixed`.
124
- - A Checkbox has a `circular` variant.
125
-
126
- ## API
127
-
128
- ### Checkbox Props
129
-
130
- See [Checkbox.types.ts](./src/components/Checkbox/Checkbox.types.ts)
131
-
132
- ## Structure
133
-
134
- ### Slots
135
-
136
- - `root`: Outermost `<span>` that contains the rest of the slots
137
- - `input`: The HTML `<input type="checkbox">`. This is the **primary** slot: it receives all of the native props passed to the
138
- Checkbox component. It has opacity 0 and overlaps the entire `root` slot, for hit testing.
139
- - `indicator`: A `<div>` that is the visual representation of the check "box". Its child is the checkmark icon.
140
- - `label`: (optional) The `<label>` describing this checkbox.
141
-
142
- ### **Public**
143
-
144
- ```jsx
145
- <Checkbox label="Example Checkbox" />
146
- ```
147
-
148
- ### **Internal**
149
-
150
- ```tsx
151
- <slots.root {...slotProps.root}>
152
- <slots.input {...slotProps.input} />
153
- {state.labelPosition === 'before' && slots.label && <slots.label {...slotProps.label} />}
154
- <slots.indicator {...slotProps.indicator} />
155
- {state.labelPosition === 'after' && slots.label && <slots.label {...slotProps.label} />}
156
- </slots.root>
157
- ```
158
-
159
- ### **DOM**
160
-
161
- ```html
162
- <span class="fui-Checkbox">
163
- <input type="checkbox" id="checkbox-1" class="fui-Checkbox__input" />
164
- <div aria-hidden="true" class="fui-Checkbox__indicator">
165
- <CheckmarkRegular />
166
- </div>
167
- <label for="checkbox-1" className="fui-Checkbox__label">Example Checkbox</label>
168
- </span>
169
- ```
170
-
171
- ## Migration
172
-
173
- See [MIGRATION.md](MIGRATION.md)
174
-
175
- ## Behaviors
176
-
177
- - Checkbox inherits all of its mouse and keyboard behaviors from the native `<input type="checkbox">`. It has no special handling of clicks or keypresses for toggling beyond the native control.
178
- - In case of a label having a link or information button, items inside the label may be focused.
179
-
180
- ## Accessibility
181
-
182
- - Aria design pattern: [Checkbox](https://www.w3.org/TR/wai-aria-practices-1.2/#checkbox).
183
- - Checkbox uses a standard HTML `<input type="checkbox">` and does not require any additional aria attributes on the input element.
184
- - The checkmark indicator has `aria-hidden="true"`, as it is purely a visual representation of the state of the underlying input.