@fluentui/react-radio 0.0.0-nightly-20221128-0427.1 → 0.0.0-nightly-20221130-0423.1
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.
- package/CHANGELOG.json +17 -17
- package/CHANGELOG.md +11 -11
- package/package.json +8 -8
- package/Spec.md +0 -292
package/CHANGELOG.json
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
"name": "@fluentui/react-radio",
|
|
3
3
|
"entries": [
|
|
4
4
|
{
|
|
5
|
-
"date": "
|
|
6
|
-
"tag": "@fluentui/react-radio_v0.0.0-nightly-
|
|
7
|
-
"version": "0.0.0-nightly-
|
|
5
|
+
"date": "Wed, 30 Nov 2022 04:32:17 GMT",
|
|
6
|
+
"tag": "@fluentui/react-radio_v0.0.0-nightly-20221130-0423.1",
|
|
7
|
+
"version": "0.0.0-nightly-20221130-0423.1",
|
|
8
8
|
"comments": {
|
|
9
9
|
"prerelease": [
|
|
10
10
|
{
|
|
@@ -16,44 +16,44 @@
|
|
|
16
16
|
{
|
|
17
17
|
"author": "beachball",
|
|
18
18
|
"package": "@fluentui/react-radio",
|
|
19
|
-
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
20
|
-
"commit": "
|
|
19
|
+
"comment": "Bump @fluentui/react-context-selector to v0.0.0-nightly-20221130-0423.1",
|
|
20
|
+
"commit": "7006b33f3297728bdb7ea58250d339350b88097b"
|
|
21
21
|
},
|
|
22
22
|
{
|
|
23
23
|
"author": "beachball",
|
|
24
24
|
"package": "@fluentui/react-radio",
|
|
25
|
-
"comment": "Bump @fluentui/react-field to v0.0.0-nightly-
|
|
26
|
-
"commit": "
|
|
25
|
+
"comment": "Bump @fluentui/react-field to v0.0.0-nightly-20221130-0423.1",
|
|
26
|
+
"commit": "7006b33f3297728bdb7ea58250d339350b88097b"
|
|
27
27
|
},
|
|
28
28
|
{
|
|
29
29
|
"author": "beachball",
|
|
30
30
|
"package": "@fluentui/react-radio",
|
|
31
|
-
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-
|
|
32
|
-
"commit": "
|
|
31
|
+
"comment": "Bump @fluentui/react-label to v0.0.0-nightly-20221130-0423.1",
|
|
32
|
+
"commit": "7006b33f3297728bdb7ea58250d339350b88097b"
|
|
33
33
|
},
|
|
34
34
|
{
|
|
35
35
|
"author": "beachball",
|
|
36
36
|
"package": "@fluentui/react-radio",
|
|
37
|
-
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
38
|
-
"commit": "
|
|
37
|
+
"comment": "Bump @fluentui/react-tabster to v0.0.0-nightly-20221130-0423.1",
|
|
38
|
+
"commit": "7006b33f3297728bdb7ea58250d339350b88097b"
|
|
39
39
|
},
|
|
40
40
|
{
|
|
41
41
|
"author": "beachball",
|
|
42
42
|
"package": "@fluentui/react-radio",
|
|
43
|
-
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
44
|
-
"commit": "
|
|
43
|
+
"comment": "Bump @fluentui/react-theme to v0.0.0-nightly-20221130-0423.1",
|
|
44
|
+
"commit": "7006b33f3297728bdb7ea58250d339350b88097b"
|
|
45
45
|
},
|
|
46
46
|
{
|
|
47
47
|
"author": "beachball",
|
|
48
48
|
"package": "@fluentui/react-radio",
|
|
49
|
-
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
50
|
-
"commit": "
|
|
49
|
+
"comment": "Bump @fluentui/react-utilities to v0.0.0-nightly-20221130-0423.1",
|
|
50
|
+
"commit": "7006b33f3297728bdb7ea58250d339350b88097b"
|
|
51
51
|
},
|
|
52
52
|
{
|
|
53
53
|
"author": "beachball",
|
|
54
54
|
"package": "@fluentui/react-radio",
|
|
55
|
-
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
56
|
-
"commit": "
|
|
55
|
+
"comment": "Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221130-0423.1",
|
|
56
|
+
"commit": "7006b33f3297728bdb7ea58250d339350b88097b"
|
|
57
57
|
}
|
|
58
58
|
]
|
|
59
59
|
}
|
package/CHANGELOG.md
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-radio
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 30 Nov 2022 04:32:17 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
-
## [0.0.0-nightly-
|
|
7
|
+
## [0.0.0-nightly-20221130-0423.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v0.0.0-nightly-20221130-0423.1)
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.12..@fluentui/react-radio_v0.0.0-nightly-
|
|
9
|
+
Wed, 30 Nov 2022 04:32:17 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-radio_v9.0.12..@fluentui/react-radio_v0.0.0-nightly-20221130-0423.1)
|
|
11
11
|
|
|
12
12
|
### Changes
|
|
13
13
|
|
|
14
14
|
- Release nightly v9 ([commit](https://github.com/microsoft/fluentui/commit/not available) by fluentui-internal@service.microsoft.com)
|
|
15
|
-
- Bump @fluentui/react-context-selector to v0.0.0-nightly-
|
|
16
|
-
- Bump @fluentui/react-field to v0.0.0-nightly-
|
|
17
|
-
- Bump @fluentui/react-label to v0.0.0-nightly-
|
|
18
|
-
- Bump @fluentui/react-tabster to v0.0.0-nightly-
|
|
19
|
-
- Bump @fluentui/react-theme to v0.0.0-nightly-
|
|
20
|
-
- Bump @fluentui/react-utilities to v0.0.0-nightly-
|
|
21
|
-
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-
|
|
15
|
+
- Bump @fluentui/react-context-selector to v0.0.0-nightly-20221130-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/7006b33f3297728bdb7ea58250d339350b88097b) by beachball)
|
|
16
|
+
- Bump @fluentui/react-field to v0.0.0-nightly-20221130-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/7006b33f3297728bdb7ea58250d339350b88097b) by beachball)
|
|
17
|
+
- Bump @fluentui/react-label to v0.0.0-nightly-20221130-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/7006b33f3297728bdb7ea58250d339350b88097b) by beachball)
|
|
18
|
+
- Bump @fluentui/react-tabster to v0.0.0-nightly-20221130-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/7006b33f3297728bdb7ea58250d339350b88097b) by beachball)
|
|
19
|
+
- Bump @fluentui/react-theme to v0.0.0-nightly-20221130-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/7006b33f3297728bdb7ea58250d339350b88097b) by beachball)
|
|
20
|
+
- Bump @fluentui/react-utilities to v0.0.0-nightly-20221130-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/7006b33f3297728bdb7ea58250d339350b88097b) by beachball)
|
|
21
|
+
- Bump @fluentui/react-conformance-griffel to v0.0.0-nightly-20221130-0423.1 ([commit](https://github.com/microsoft/fluentui/commit/7006b33f3297728bdb7ea58250d339350b88097b) by beachball)
|
|
22
22
|
|
|
23
23
|
## [9.0.12](https://github.com/microsoft/fluentui/tree/@fluentui/react-radio_v9.0.12)
|
|
24
24
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@fluentui/react-radio",
|
|
3
|
-
"version": "0.0.0-nightly-
|
|
3
|
+
"version": "0.0.0-nightly-20221130-0423.1",
|
|
4
4
|
"description": "Fluent UI Radio component",
|
|
5
5
|
"main": "lib-commonjs/index.js",
|
|
6
6
|
"module": "lib/index.js",
|
|
@@ -27,16 +27,16 @@
|
|
|
27
27
|
"devDependencies": {
|
|
28
28
|
"@fluentui/eslint-plugin": "*",
|
|
29
29
|
"@fluentui/react-conformance": "*",
|
|
30
|
-
"@fluentui/react-conformance-griffel": "0.0.0-nightly-
|
|
30
|
+
"@fluentui/react-conformance-griffel": "0.0.0-nightly-20221130-0423.1"
|
|
31
31
|
},
|
|
32
32
|
"dependencies": {
|
|
33
|
-
"@fluentui/react-context-selector": "0.0.0-nightly-
|
|
34
|
-
"@fluentui/react-field": "0.0.0-nightly-
|
|
33
|
+
"@fluentui/react-context-selector": "0.0.0-nightly-20221130-0423.1",
|
|
34
|
+
"@fluentui/react-field": "0.0.0-nightly-20221130-0423.1",
|
|
35
35
|
"@fluentui/react-icons": "^2.0.175",
|
|
36
|
-
"@fluentui/react-label": "0.0.0-nightly-
|
|
37
|
-
"@fluentui/react-tabster": "0.0.0-nightly-
|
|
38
|
-
"@fluentui/react-theme": "0.0.0-nightly-
|
|
39
|
-
"@fluentui/react-utilities": "0.0.0-nightly-
|
|
36
|
+
"@fluentui/react-label": "0.0.0-nightly-20221130-0423.1",
|
|
37
|
+
"@fluentui/react-tabster": "0.0.0-nightly-20221130-0423.1",
|
|
38
|
+
"@fluentui/react-theme": "0.0.0-nightly-20221130-0423.1",
|
|
39
|
+
"@fluentui/react-utilities": "0.0.0-nightly-20221130-0423.1",
|
|
40
40
|
"@griffel/react": "^1.4.2",
|
|
41
41
|
"tslib": "^2.1.0"
|
|
42
42
|
},
|
package/Spec.md
DELETED
|
@@ -1,292 +0,0 @@
|
|
|
1
|
-
# @fluentui/react-radio Spec
|
|
2
|
-
|
|
3
|
-
A Radio allows a user to select a single value from two or more options. All Radios with the same `name` are considered to be part of the same group. However, a `RadioGroup` is recommended to add a group label, formatting, and other functionality.
|
|
4
|
-
|
|
5
|
-
## Background
|
|
6
|
-
|
|
7
|
-
### Prior Art
|
|
8
|
-
|
|
9
|
-
- [OpenUI research](https://open-ui.org/components/radio-button.research)
|
|
10
|
-
- [Epic](https://github.com/microsoft/fluentui/issues/19953)
|
|
11
|
-
|
|
12
|
-
### Comparison of [Fabric ChoiceGroup](https://developer.microsoft.com/en-us/fluentui#/controls/web/choicegroup) and [Stardust RadioGroup](https://fluentsite.z22.web.core.windows.net/components/radio-group/definition)
|
|
13
|
-
|
|
14
|
-
- All mentions of v7 or v8 refer to Fabric - `@fluentui/react` ([docsite](https://developer.microsoft.com/en-us/fluentui#/))
|
|
15
|
-
- All mentions of v0 refer to Northstar - `@fluentui/react-northstar` ([docsite](https://fluentsite.z22.web.core.windows.net/))
|
|
16
|
-
|
|
17
|
-
See Appendix for a detailed comparison of the two components.
|
|
18
|
-
|
|
19
|
-
In Fabric the Radio component is represented by the [ChoiceGroup](https://developer.microsoft.com/en-us/fluentui#/controls/web/choicegroup) component.
|
|
20
|
-
Fabric creates options based on data passed in via the `options` prop.
|
|
21
|
-
It uses the option's `key` property as the input value and holds the currently selected value in the `selectedKey` prop.
|
|
22
|
-
Fabric also allows an image to serve as a label for an option.
|
|
23
|
-
|
|
24
|
-
```tsx
|
|
25
|
-
<ChoiceGroup
|
|
26
|
-
defaultSelectedKey="B"
|
|
27
|
-
options={[
|
|
28
|
-
{ key: 'A', text: 'Option A' },
|
|
29
|
-
{ key: 'B', text: 'Option B' },
|
|
30
|
-
{ key: 'C', text: 'Option C', disabled: true },
|
|
31
|
-
{ key: 'D', text: 'Option D' },
|
|
32
|
-
]}
|
|
33
|
-
label="Pick one"
|
|
34
|
-
required={true}
|
|
35
|
-
/>
|
|
36
|
-
```
|
|
37
|
-
|
|
38
|
-
In Northstar the Radio component is represented by the [RadioGroup](https://fluentsite.z22.web.core.windows.net/components/radio-group/definition) component.
|
|
39
|
-
Northstar creates options based on data passed in via the `items` prop.
|
|
40
|
-
It uses the option's `value` property as the input value and holds the currently selected value in the `checkedValue` prop.
|
|
41
|
-
|
|
42
|
-
```tsx
|
|
43
|
-
<RadioGroup
|
|
44
|
-
onCheckedValueChange={handleChange}
|
|
45
|
-
items={[
|
|
46
|
-
{ key: '1', label: 'Make your choice', value: '1' },
|
|
47
|
-
{ key: '2', label: 'Another option', value: '2' },
|
|
48
|
-
]}
|
|
49
|
-
/>
|
|
50
|
-
```
|
|
51
|
-
|
|
52
|
-
## Variants
|
|
53
|
-
|
|
54
|
-
### Layout
|
|
55
|
-
|
|
56
|
-
#### Horizonal
|
|
57
|
-
|
|
58
|
-
Inline positioning of the inputs and labels.
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
#### Horizonal stacked
|
|
63
|
-
|
|
64
|
-
Positioning the label at the bottom of the radio inputs.
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
#### Vertical
|
|
69
|
-
|
|
70
|
-
Default vertical positioning of Radio items.
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
#### Vertical with input
|
|
75
|
-
|
|
76
|
-
Default positioning of Radio items with an input as its last Radio item.
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
### Vertical with dropdown
|
|
81
|
-
|
|
82
|
-
Default positioning of Radio items with a dropdown as its last Radio item.
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
## API
|
|
87
|
-
|
|
88
|
-
### Components
|
|
89
|
-
|
|
90
|
-
| Component | Purpose |
|
|
91
|
-
| ----------------- | ------------------------------------------------------------------------------- |
|
|
92
|
-
| RadioGroup | Wraps radio inputs. Provides RadioGroupContext and layout for the radio items. |
|
|
93
|
-
| RadioGroupContext | Provides some props like `name` to Radio items that are children of RadioGroup. |
|
|
94
|
-
| Radio | Represents a single radio item (input and label). |
|
|
95
|
-
|
|
96
|
-
### RadioGroup
|
|
97
|
-
|
|
98
|
-
Link to [RadioGroup.types.ts](https://github.com/microsoft/fluentui/blob/master/packages/react-radio/src/components/RadioGroup/RadioGroup.types.ts)
|
|
99
|
-
|
|
100
|
-
| Prop | Type | Default value | Purpose |
|
|
101
|
-
| -------------- | --------------------------------------------------- | ---------------------- | -------------------------------------------------------- |
|
|
102
|
-
| (root) | slot: `<div role="radiogroup">` | | The root slot has the radiogroup role. |
|
|
103
|
-
| `name` | `string` | `useId('radiogroup-')` | Name property passed to child radios. |
|
|
104
|
-
| `value` | `string` | | Currently selected value. Used only for controlled mode. |
|
|
105
|
-
| `defaultValue` | `string` | | Default selected value. |
|
|
106
|
-
| `disabled` | `boolean` | `false` | Disables all radio items inside the group. |
|
|
107
|
-
| `layout` | `"vertical" \| "horizontal" \| "horizontalStacked"` | `vertical` | Specifies the layout of the radio items. |
|
|
108
|
-
| `onChange` | `(event, data: { value: string }) => void` | | Callback when a radio item is selected. |
|
|
109
|
-
|
|
110
|
-
### RadioGroupContext
|
|
111
|
-
|
|
112
|
-
This is a context object provided by RadioGroup that allows all of the child Radio items to have the same name, and coordinate the selected item.
|
|
113
|
-
|
|
114
|
-
The context contains the following props from RadioGroup:
|
|
115
|
-
|
|
116
|
-
- `name`
|
|
117
|
-
- `layout`
|
|
118
|
-
- `defaultValue`
|
|
119
|
-
- `value`
|
|
120
|
-
- `disabled`
|
|
121
|
-
|
|
122
|
-
### Radio
|
|
123
|
-
|
|
124
|
-
Link to [Radio.types.ts](https://github.com/microsoft/fluentui/blob/master/packages/react-radio/src/components/Radio/Radio.types.ts)
|
|
125
|
-
|
|
126
|
-
| Prop | Type | Purpose |
|
|
127
|
-
| ----------- | ---------------------------- | ------------------------------------------------------------------- |
|
|
128
|
-
| (root) | slot: `<span>` | Wrapper for the input, indicator, and label |
|
|
129
|
-
| `input` | slot: `<input type="radio">` | Hidden input element that handles the radio's behavior. |
|
|
130
|
-
| `indicator` | slot: `<div>` | The circular indicator to show the radio's checked/unchecked state. |
|
|
131
|
-
| `label` | slot: `<Label>` | Label that will be rendered next to the radio indicator. |
|
|
132
|
-
| `value` | `string` | The value of the RadioGroup when this Radio is selected |
|
|
133
|
-
| `checked` | `boolean` | Whether the input is checked or not. |
|
|
134
|
-
| `disabled` | `boolean` | Whether the input is disabled or not. |
|
|
135
|
-
|
|
136
|
-
## Sample Code
|
|
137
|
-
|
|
138
|
-
A simple `RadioGroup`.
|
|
139
|
-
|
|
140
|
-
```jsx
|
|
141
|
-
<RadioGroup defaultValue="one">
|
|
142
|
-
<Radio value="one" label="Option One" />
|
|
143
|
-
<Radio value="two" label="Option Two" />
|
|
144
|
-
<Radio value="three" label="Option Three" />
|
|
145
|
-
</RadioGroup>
|
|
146
|
-
```
|
|
147
|
-
|
|
148
|
-
`Radio` can be used without a `RadioGroup`, but it is then up to the user to add the same `name` to each item:
|
|
149
|
-
|
|
150
|
-
```jsx
|
|
151
|
-
<>
|
|
152
|
-
<Radio name="number" value="one" label="Option One" defaultChecked />
|
|
153
|
-
<Radio name="number" value="two" label="Option Two" />
|
|
154
|
-
<Radio name="number" value="three" label="Option Three" />
|
|
155
|
-
</>
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
## Structure
|
|
159
|
-
|
|
160
|
-
### Expected DOM structure
|
|
161
|
-
|
|
162
|
-
```html
|
|
163
|
-
<div role="radiogroup" class="fui-RadioGroup" name="radiogroup-0">
|
|
164
|
-
<span class="fui-Radio">
|
|
165
|
-
<input type="radio" id="radio-1" name="radiogroup-0" value="one" checked />
|
|
166
|
-
<div class="fui-Radio__indicator">
|
|
167
|
-
<svg><circle /></svg>
|
|
168
|
-
</div>
|
|
169
|
-
<label class="fui-Label" for="radio-1">Option One</label>
|
|
170
|
-
</span>
|
|
171
|
-
|
|
172
|
-
<span class="fui-Radio">
|
|
173
|
-
<input type="radio" id="radio-2" name="radiogroup-0" value="two" />
|
|
174
|
-
<div class="fui-Radio__indicator">
|
|
175
|
-
<svg><circle /></svg>
|
|
176
|
-
</div>
|
|
177
|
-
<label class="fui-Label" for="radio-2">Option Two</label>
|
|
178
|
-
</span>
|
|
179
|
-
|
|
180
|
-
<span class="fui-Radio">
|
|
181
|
-
<input type="radio" id="radio-3" name="radiogroup-0" value="three" />
|
|
182
|
-
<div class="fui-Radio__indicator">
|
|
183
|
-
<svg><circle /></svg>
|
|
184
|
-
</div>
|
|
185
|
-
<label class="fui-Label" for="radio-3">Option Three</label>
|
|
186
|
-
</span>
|
|
187
|
-
</div>
|
|
188
|
-
```
|
|
189
|
-
|
|
190
|
-
## Behaviors
|
|
191
|
-
|
|
192
|
-
### Mouse/Touch
|
|
193
|
-
|
|
194
|
-
The Radio's hit target fills the entire space around the indicator and label (including the padding).
|
|
195
|
-
|
|
196
|
-
### Keyboard
|
|
197
|
-
|
|
198
|
-
RadioGroup inherits all of its mouse and keyboard behaviors from the browser's handling of `<input type="radio">`.
|
|
199
|
-
|
|
200
|
-
- It has no special handling of clicks or keypresses for toggling beyond the built-in control.
|
|
201
|
-
- The browser handles arrow key selection, and creating a single tab stop for the control.
|
|
202
|
-
|
|
203
|
-
### Disabled
|
|
204
|
-
|
|
205
|
-
- Individual Radio items can be disabled, in which case they are grayed out and can't be selected or focused.
|
|
206
|
-
- This interaction is built-into the browser by setting `disabled` on the `<input>` control.
|
|
207
|
-
- The entire RadioGroup can be disabled, which uses RadioGroupContext to disable all of the individual Radio items.
|
|
208
|
-
|
|
209
|
-
### Group Name
|
|
210
|
-
|
|
211
|
-
- All Radio items in a group must have the same `name` for the browser to handle keyboarding and selection.
|
|
212
|
-
- The RadioGroup provides its `name` through RadioGroupContext, and each Radio inside applies the `name`.
|
|
213
|
-
- If a `name` is not provided on RadioGroup, a unique name is automatically generated with `useId`.
|
|
214
|
-
|
|
215
|
-
## Accessibility
|
|
216
|
-
|
|
217
|
-
### RadioGroup
|
|
218
|
-
|
|
219
|
-
This implementation based on the [Grouping Controls](https://www.w3.org/WAI/tutorials/forms/grouping/) examples of Web Accessibility Tutorials (that follow WCAG).
|
|
220
|
-
|
|
221
|
-
- The RadioGroup root is a `<div role="radiogroup">` to provide the default accessibility behavior of a radiogroup.
|
|
222
|
-
- If a group label is added, the RadioGroup needs to have `aria-labelledby` referencing the label.
|
|
223
|
-
|
|
224
|
-
### Radio
|
|
225
|
-
|
|
226
|
-
- The Radio's primary slot is an `<input type="radio">`, with opacity 0, and covers the root.
|
|
227
|
-
- This way, the Radio's hit target fills the entire space around the indicator and label (including the padding).
|
|
228
|
-
- The Radio's label is a `<label>` element with `for={input.id}` to associate it with the input slot.
|
|
229
|
-
|
|
230
|
-
<!--
|
|
231
|
-
## Migration
|
|
232
|
-
TBD: Link to Migration guide
|
|
233
|
-
-->
|
|
234
|
-
|
|
235
|
-
# Appendix
|
|
236
|
-
|
|
237
|
-
## v8 vs v0 comparison
|
|
238
|
-
|
|
239
|
-
### RadioGroup (v0) vs ChoiceGroup (v8) prop mapping
|
|
240
|
-
|
|
241
|
-
_⚠️ Props not included in this section are marked as deprecated and will not be considered._
|
|
242
|
-
|
|
243
|
-
| Purpose | Fabric (v8) | Northstar (v0) | Matching |
|
|
244
|
-
| ------------------------------------------------------------------------------------------------- | ------------------ | -------------------- | ------------------------------------------ |
|
|
245
|
-
| Called after radio group value is changed. | onChange | onCheckedValueChange | Matching 🛠️ |
|
|
246
|
-
| The options/items for the group. | options | items | Matching |
|
|
247
|
-
| Additional CSS styles to apply to the component instance. | styles | styles | Matching |
|
|
248
|
-
| Initial checkedValue value. | defaultSelectedKey | defaultCheckedValue | Matching functionality, not implementation |
|
|
249
|
-
| Value of the currently checked radio item. | selectedKey | checkedValue | Matching functionality, not implementation |
|
|
250
|
-
| Theme - Override for theme site variables to allow modifications of component styling via themes. | theme | variables | Matching |
|
|
251
|
-
| ID of an element to use as the aria label for this ChoiceGroup. | ariaLabelledBy | - | - |
|
|
252
|
-
| Optional callback to access the `IChoiceGroup` interface. | componentRef | - | - |
|
|
253
|
-
| Descriptive label for the choice group. | label | - | - |
|
|
254
|
-
| Accessibility behavior if overridden by the user. | - | accessibility | - |
|
|
255
|
-
| An element type to render as (string or component). | - | as | - |
|
|
256
|
-
| Additional CSS class name(s) to apply. | - | className | - |
|
|
257
|
-
| A vertical radio group displays elements vertically. | - | vertical | - |
|
|
258
|
-
| - | - | design | - |
|
|
259
|
-
|
|
260
|
-
### RadioItem (v0) vs ChoiceGroupOption (v8) props mapping
|
|
261
|
-
|
|
262
|
-
| Purpose | Fabric (v8) | Northstar (v0) | Matching |
|
|
263
|
-
| ------------------------------------------------------------------------------- | ------------------ | ---------------- | -------- |
|
|
264
|
-
| A required key to uniquely identify the option. | key (required) | - | - |
|
|
265
|
-
| The text string for the option. | text (required) ❓ | label | Matching |
|
|
266
|
-
| Call to provide customized styling that will layer on top of the variant rules. | styles | styles | Matching |
|
|
267
|
-
| A radio item can appear disabled and be unable to change states. | disabled | disabled | Matching |
|
|
268
|
-
| Aria label of the option for the benefit of screen reader users. | ariaLabel | - | - |
|
|
269
|
-
| Props for an icon to display with this option. | iconProps | - | - |
|
|
270
|
-
| ID used on the option's input element. | id | - | - |
|
|
271
|
-
| Alt text if the option is an image. | imageAlt | - | - |
|
|
272
|
-
| The width and height of the image in px for choice field. | imageSize | - | - |
|
|
273
|
-
| Image to display with this option. | imageSrc | - | - |
|
|
274
|
-
| ID used on the option's label. | labelId | - | - |
|
|
275
|
-
| Used to customize option rendering. | onRenderField | - | - |
|
|
276
|
-
| Used to customize label rendering. | onRenderLabel | - | - |
|
|
277
|
-
| The src of image for choice field which is selected. | selectedImageSrc | - | - |
|
|
278
|
-
| Accessibility behavior if overridden by the user. | - | accessibility | - |
|
|
279
|
-
| Whether or not radio item is checked. | - | checked | - |
|
|
280
|
-
| The checked radio item indicator can be customized. | - | checkedIndicator | - |
|
|
281
|
-
| Initial checked value. | - | defaultChecked | - |
|
|
282
|
-
| The radio item indicator can be customized. | - | indicator | - |
|
|
283
|
-
| The HTML input name. | - | name | - |
|
|
284
|
-
| Called after radio item checked state is changed. | - | onChange | - |
|
|
285
|
-
| Called after radio item is clicked. | - | onClick | - |
|
|
286
|
-
| Whether should focus when checked | - | shouldFocus | - |
|
|
287
|
-
| The HTML input value. | - | value | - |
|
|
288
|
-
| A vertical radio group displays elements vertically. | - | vertical | - |
|
|
289
|
-
| - | - | as | - |
|
|
290
|
-
| - | - | className | - |
|
|
291
|
-
| - | - | variables | - |
|
|
292
|
-
| - | - | design | - |
|