Skip to content

Commit d61b28a

Browse files
mperrottimperrotti
authored
Deprecate ChoiceFieldset and ChoiceInputField (#1900)
* deprecates ChoiceFieldset and ChoiceInputField * update import paths in tests * addresses more PR feedback * fixes bad imports in docs * updates outdated story and test * moves components to deprecated directory * fixes broken docs pages * fixes bad formatting in changelog markdown * minor tweaks * moves deprecated notation for ChoiceInputField
1 parent 4babf20 commit d61b28a

28 files changed

+315
-35389
lines changed

‎.changeset/nervous-pets-sleep.md‎

Lines changed: 142 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,142 @@
1+
---
2+
'@primer/react': major
3+
---
4+
5+
### ChoiceFieldset and ChoiceFieldset
6+
7+
The `CheckboxGroup` and `RadioGroup` components will be used to deprecate the `ChoiceFieldset` component. The deprecation of `ChoiceFieldset` also allows us to deprecate `ChoiceInputField`.
8+
9+
`CheckboxGroup` and `RadioGroup` have the ability to render contextual content with your fieldset: labels, validation statuses, captions. It also handles the ARIA attributes that make the form controls accessible to assistive technology.
10+
11+
<table>
12+
<tr>
13+
<th> Before (v34)</th> <th> After (v35)</th>
14+
</tr>
15+
<tr>
16+
<td valign="top">
17+
18+
```jsx
19+
import {ChoiceFieldset} from "@primer/react"
20+
21+
// Multi-select
22+
<ChoiceFieldset>
23+
<ChoiceFieldset.Legend>
24+
Preferred Primer component interface
25+
</ChoiceFieldset.Legend>
26+
27+
<ChoiceFieldset.List selectionVariant="multiple">
28+
<ChoiceFieldset.Item value="figma">
29+
Figma library
30+
</ChoiceFieldset.Item>
31+
<ChoiceFieldset.Item value="css">
32+
Primer CSS
33+
</ChoiceFieldset.Item>
34+
<ChoiceFieldset.Item value="react">
35+
Primer React components
36+
</ChoiceFieldset.Item>
37+
<ChoiceFieldset.Item value="viewcomponents">
38+
Primer ViewComponents
39+
</ChoiceFieldset.Item>
40+
</ChoiceFieldset.List>
41+
</ChoiceFieldset>
42+
43+
// Single select
44+
<ChoiceFieldset>
45+
<ChoiceFieldset.Legend>
46+
Preferred Primer component interface
47+
</ChoiceFieldset.Legend>
48+
49+
<ChoiceFieldset.List>
50+
<ChoiceFieldset.Item value="figma">
51+
Figma library
52+
</ChoiceFieldset.Item>
53+
<ChoiceFieldset.Item value="css">
54+
Primer CSS
55+
</ChoiceFieldset.Item>
56+
<ChoiceFieldset.Item value="react">
57+
Primer React components
58+
</ChoiceFieldset.Item>
59+
<ChoiceFieldset.Item value="viewcomponents">
60+
Primer ViewComponents
61+
</ChoiceFieldset.Item>
62+
</ChoiceFieldset.List>
63+
</ChoiceFieldset>
64+
65+
```
66+
67+
</td>
68+
<td valign="top">
69+
70+
```jsx
71+
import {FormGroup, Checkbox} from "@primer/react"
72+
73+
// Multi-select
74+
<CheckboxGroup>
75+
<CheckboxGroup.Label>
76+
Preferred Primer component interface
77+
</CheckboxGroup.Label>
78+
<FormControl>
79+
<Checkbox value="figma" />
80+
<FormControl.Label>Figma</FormControl.Label>
81+
</FormControl>
82+
<FormControl>
83+
<Checkbox value="css" />
84+
<FormControl.Label>CSS</FormControl.Label>
85+
</FormControl>
86+
<FormControl>
87+
<Checkbox value="react" />
88+
<FormControl.Label>Primer React components</FormControl.Label>
89+
</FormControl>
90+
<FormControl>
91+
<Checkbox value="viewcomponents" />
92+
<FormControl.Label>Primer ViewComponents</FormControl.Label>
93+
</FormControl>
94+
</CheckboxGroup>
95+
96+
// Single select
97+
<RadioGroup name="preferred-primer">
98+
<RadioGroup.Label>
99+
Preferred Primer component interface
100+
</RadioGroup.Label>
101+
<FormControl>
102+
<Radio value="figma" />
103+
<FormControl.Label>Figma</FormControl.Label>
104+
</FormControl>
105+
<FormControl>
106+
<Radio value="css" />
107+
<FormControl.Label>CSS</FormControl.Label>
108+
</FormControl>
109+
<FormControl>
110+
<Radio value="react" />
111+
<FormControl.Label>Primer React components</FormControl.Label>
112+
</FormControl>
113+
<FormControl>
114+
<Radio value="viewcomponents" />
115+
<FormControl.Label>Primer ViewComponents</FormControl.Label>
116+
</FormControl>
117+
</RadioGroup>
118+
```
119+
120+
</td>
121+
</tr>
122+
</table>
123+
<table style="display: table">
124+
<tr><th>Migration steps to CheckboxGroup and RadioGroup</th></tr>
125+
<tr>
126+
<td>
127+
128+
<strong>Upgrade to the new</strong> `CheckboxGroup` and `RadioGroup` components by referring to the examples in our documentation: [CheckboxGroup](https://primer.style/react/CheckboxGroup), [RadioGroup](https://primer.style/react/RadioGroup).
129+
130+
or
131+
132+
<strong>Continue using the deprecated</strong> `ChoiceFieldset` component :
133+
134+
```js
135+
import {ChoiceFieldset} from '@primer/react/deprecated' // change your import statements
136+
```
137+
138+
ChoiceFieldset codemod: https://github.com/primer/react-migrate/blob/main/src/use-deprecated-choicefieldset.js
139+
140+
</td>
141+
</tr>
142+
</table>

‎docs/content/Checkbox.mdx‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ storybook: '/react/storybook?path=/story/forms-checkbox--default'
77
componentId: checkbox
88
---
99

10-
import {ComponentChecklist} from '../src/component-checklist'
11-
1210
## Examples
1311

1412
<Note variant="warning">

‎docs/content/CheckboxGroup.mdx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ storybook: '/react/storybook/?path=/story/forms-checkboxgroup-examples--basic'
88

99
import {CheckboxGroup, Checkbox, Box} from '@primer/components'
1010
import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react'
11-
import {ComponentChecklist} from '../src/component-checklist'
1211

1312
## Examples
1413

‎docs/content/CounterLabel.mdx‎

Lines changed: 1 addition & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,6 @@ status: Alpha
66
source: https://github.com/primer/react/blob/main/src/CounterLabel.tsx
77
---
88

9-
import {ComponentChecklist} from '../src/component-checklist'
10-
import {PropsTable} from '../src/props-table'
11-
129
## Example
1310

1411
```jsx live
@@ -22,7 +19,7 @@ import {PropsTable} from '../src/props-table'
2219
## Props
2320

2421
<PropsTable>
25-
<PropsTable.Row
22+
<PropsTableRow
2623
name="scheme"
2724
type="''primary' | 'secondary'"
2825
description="Pass in 'primary' for a darker background and inverse text, or 'secondary' for a lighter background and primary text. Omitting the scheme prop renders the default counter scheme"

‎docs/content/RadioGroup.mdx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ storybook: '/react/storybook/?path=/story/forms-radiogroup-examples--basic'
88

99
import {RadioGroup, Radio, Box} from '@primer/components'
1010
import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react'
11-
import {ComponentChecklist} from '../src/component-checklist'
1211

1312
## Examples
1413

‎docs/content/TextInputWithTokens.mdx‎

Lines changed: 8 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,8 +8,6 @@ storybook: '/react/storybook?path=/story/forms-text-input-with-tokens--default'
88
---
99

1010
import {TextInputWithTokens} from '@primer/react'
11-
import {PropsTable} from '../src/props-table'
12-
import {ComponentChecklist} from '../src/component-checklist'
1311

1412
A `TextInputWithTokens` component supports all of the features of a [TextInput](/TextInput) component, but it can render a list of [Tokens](/Token) next to the area a user types in.
1513

@@ -242,37 +240,37 @@ render(LeadingVisualExample)
242240
## Props
243241

244242
<PropsTable>
245-
<PropsTable.Row required name="tokens" type="TokenProps[]" description="The array of tokens to render" />
246-
<PropsTable.Row
243+
<PropsTableRow required name="tokens" type="TokenProps[]" description="The array of tokens to render" />
244+
<PropsTableRow
247245
required
248246
name="onTokenRemove"
249247
type="(tokenId: string|number) => void"
250248
description="The function that gets called when a token is removed"
251249
/>
252-
<PropsTable.Row
250+
<PropsTableRow
253251
name="tokenComponent"
254252
type="React.ComponentType<any>"
255253
defaultValue="Token"
256254
description="The component used to render each token"
257255
/>
258-
<PropsTable.Row
256+
<PropsTableRow
259257
name="maxHeight"
260258
type="React.CSSProperties['maxHeight']"
261259
description="The maximum height of the component. If the content in the input exceeds this height, it will scroll vertically"
262260
/>
263-
<PropsTable.Row
261+
<PropsTableRow
264262
name="preventTokenWrapping"
265263
type="boolean"
266264
defaultValue="false"
267265
description="Whether tokens should render inline horizontally. By default, tokens wrap to new lines"
268266
/>
269-
<PropsTable.Row
267+
<PropsTableRow
270268
name="size"
271269
type="'small' | 'medium' | 'large' | 'extralarge'"
272270
defaultValue="extralarge"
273271
description="The size of the tokens and text input"
274272
/>
275-
<PropsTable.Row
273+
<PropsTableRow
276274
name="hideTokenRemoveButtons"
277275
type="boolean"
278276
defaultValue="false"
@@ -283,7 +281,7 @@ render(LeadingVisualExample)
283281
type="'error' | 'success' | 'warning'"
284282
description="Style the input to match the status"
285283
/>
286-
<PropsTable.Row
284+
<PropsTableRow
287285
name="visibleTokenCount"
288286
type="number"
289287
description="The number of tokens to display before truncating"

‎docs/content/ChoiceFieldset.mdx‎ renamed to ‎docs/content/deprecated/ChoiceFieldset.mdx‎

Lines changed: 11 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ storybook: '/react/storybook/?path=/story/forms-choicefieldset--radio-group'
77

88
import {ChoiceFieldset, Box} from '@primer/components'
99
import {CheckIcon, XIcon, AlertIcon} from '@primer/octicons-react'
10-
import {ComponentChecklist} from '../src/component-checklist'
1110

1211
A `ChoiceFieldset` is a controlled component that is used to render a related set of checkbox or radio inputs.
1312

@@ -19,7 +18,7 @@ Use [CheckboxGroup](/CheckboxGroup) or [RadioGroup](/RadioGroup) instead.
1918

2019
### Basic
2120

22-
```jsx live
21+
```jsx live deprecated
2322
<ChoiceFieldset>
2423
<ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
2524
<ChoiceFieldset.List>
@@ -33,7 +32,7 @@ Use [CheckboxGroup](/CheckboxGroup) or [RadioGroup](/RadioGroup) instead.
3332

3433
### Using an onSelect handler
3534

36-
```javascript live noinline
35+
```javascript live noinline deprecated
3736
const WithOnSelectHandler = () => {
3837
const [selectedChoices, setSelectedChoices] = React.useState([])
3938
const choices = [
@@ -94,7 +93,7 @@ render(<WithOnSelectHandler />)
9493
9594
### Checkbox group
9695
97-
```jsx live
96+
```jsx live deprecated
9897
<ChoiceFieldset>
9998
<ChoiceFieldset.Legend>Prefered Primer component interface</ChoiceFieldset.Legend>
10099
@@ -109,7 +108,7 @@ render(<WithOnSelectHandler />)
109108
110109
### Disabled
111110
112-
```jsx live
111+
```jsx live deprecated
113112
<ChoiceFieldset disabled>
114113
<ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
115114
<ChoiceFieldset.List>
@@ -123,7 +122,7 @@ render(<WithOnSelectHandler />)
123122
124123
### Required
125124
126-
```jsx live
125+
```jsx live deprecated
127126
<ChoiceFieldset required>
128127
<ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
129128
<ChoiceFieldset.List>
@@ -137,7 +136,7 @@ render(<WithOnSelectHandler />)
137136
138137
### With pre-selected choices
139138
140-
```jsx live
139+
```jsx live deprecated
141140
<ChoiceFieldset selected={['figma', 'react']}>
142141
<ChoiceFieldset.Legend>Prefered Primer component interface</ChoiceFieldset.Legend>
143142
@@ -152,7 +151,7 @@ render(<WithOnSelectHandler />)
152151
153152
### With validation
154153
155-
```javascript live noinline
154+
```javascript live noinline deprecated
156155
const choices = [
157156
{
158157
value: 'figma',
@@ -222,7 +221,7 @@ render(<ChoiceFieldsetWithValidation />)
222221
223222
### A visually hidden legend
224223
225-
```jsx live
224+
```jsx live deprecated
226225
<ChoiceFieldset>
227226
<ChoiceFieldset.Legend visuallyHidden>Color mode</ChoiceFieldset.Legend>
228227
<ChoiceFieldset.List>
@@ -236,7 +235,7 @@ render(<ChoiceFieldsetWithValidation />)
236235
237236
### With a ChoiceFieldset.Description
238237
239-
```jsx live
238+
```jsx live deprecated
240239
<ChoiceFieldset>
241240
<ChoiceFieldset.Legend>Notification preferences</ChoiceFieldset.Legend>
242241
<ChoiceFieldset.Description>
@@ -271,7 +270,7 @@ render(<ChoiceFieldsetWithValidation />)
271270
272271
### With one disabled item
273272
274-
```jsx live
273+
```jsx live deprecated
275274
<ChoiceFieldset>
276275
<ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
277276
<ChoiceFieldset.List>
@@ -287,7 +286,7 @@ render(<ChoiceFieldsetWithValidation />)
287286
288287
### Items with a caption and a leading visual
289288
290-
```jsx live
289+
```jsx live deprecated
291290
<ChoiceFieldset>
292291
<ChoiceFieldset.Legend>Notification preferences</ChoiceFieldset.Legend>
293292

0 commit comments

Comments
 (0)