Skip to content

Commit cd7c5ce

Browse files
mperrottimperrotti
committed
deprecates ChoiceFieldset and ChoiceInputField
1 parent 1e18d39 commit cd7c5ce

File tree

6 files changed

+133
-14
lines changed

6 files changed

+133
-14
lines changed

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

Lines changed: 116 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
---
2+
'@primer/react': major
3+
---
4+
5+
![image](https://user-images.githubusercontent.com/2313998/155632630-60822d7b-6053-480d-925d-cea4d3b04919.png)
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 </th> <th> After </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>Prefered Primer component interface</ChoiceFieldset.Legend>
24+
25+
<ChoiceFieldset.List selectionVariant="multiple">
26+
<ChoiceFieldset.Item value="figma">Figma library</ChoiceFieldset.Item>
27+
<ChoiceFieldset.Item value="css">Primer CSS</ChoiceFieldset.Item>
28+
<ChoiceFieldset.Item value="react">Primer React components</ChoiceFieldset.Item>
29+
<ChoiceFieldset.Item value="viewcomponents">Primer ViewComponents</ChoiceFieldset.Item>
30+
</ChoiceFieldset.List>
31+
</ChoiceFieldset>
32+
33+
// Single select
34+
<ChoiceFieldset>
35+
<ChoiceFieldset.Legend>Prefered Primer component interface</ChoiceFieldset.Legend>
36+
37+
<ChoiceFieldset.List>
38+
<ChoiceFieldset.Item value="figma">Figma library</ChoiceFieldset.Item>
39+
<ChoiceFieldset.Item value="css">Primer CSS</ChoiceFieldset.Item>
40+
<ChoiceFieldset.Item value="react">Primer React components</ChoiceFieldset.Item>
41+
<ChoiceFieldset.Item value="viewcomponents">Primer ViewComponents</ChoiceFieldset.Item>
42+
</ChoiceFieldset.List>
43+
</ChoiceFieldset>
44+
45+
```
46+
47+
</td>
48+
<td valign="top">
49+
50+
```jsx
51+
import {FormGroup, Checkbox} from "@primer/react";
52+
53+
// Multi-select
54+
<CheckboxGroup>
55+
<CheckboxGroup.Label>Prefered Primer component interface</CheckboxGroup.Label>
56+
<FormControl>
57+
<Checkbox value="figma" />
58+
<FormControl.Label>Figma</FormControl.Label>
59+
</FormControl>
60+
<FormControl>
61+
<Checkbox value="css" />
62+
<FormControl.Label>CSS</FormControl.Label>
63+
</FormControl>
64+
<FormControl>
65+
<Checkbox value="react" />
66+
<FormControl.Label>Primer React components</FormControl.Label>
67+
</FormControl>
68+
<FormControl>
69+
<Checkbox value="viewcomponents" />
70+
<FormControl.Label>Primer ViewComponents</FormControl.Label>
71+
</FormControl>
72+
</CheckboxGroup>
73+
74+
// Single select
75+
<RadioGroup name="preferred-primer">
76+
<RadioGroup.Label>Prefered Primer component interface</RadioGroup.Label>
77+
<FormControl>
78+
<Radio value="figma" />
79+
<FormControl.Label>Figma</FormControl.Label>
80+
</FormControl>
81+
<FormControl>
82+
<Radio value="css" />
83+
<FormControl.Label>CSS</FormControl.Label>
84+
</FormControl>
85+
<FormControl>
86+
<Radio value="react" />
87+
<FormControl.Label>Primer React components</FormControl.Label>
88+
</FormControl>
89+
<FormControl>
90+
<Radio value="viewcomponents" />
91+
<FormControl.Label>Primer ViewComponents</FormControl.Label>
92+
</FormControl>
93+
</RadioGroup>
94+
```
95+
96+
</td>
97+
</tr>
98+
</table>
99+
<table style="display: table">
100+
<tr><th>Migration steps to CheckboxGroup and RadioGroup</th></tr>
101+
<tr>
102+
<td>
103+
104+
<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).
105+
106+
or
107+
108+
<strong>Continue using the deprecated</strong> `ChoiceFieldset` component :
109+
110+
```js
111+
import {ChoiceFieldset} from '@primer/react/deprecated' // change your import statements
112+
```
113+
114+
</td>
115+
</tr>
116+
</table>

‎docs/content/ChoiceFieldset.mdx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ Use [CheckboxGroup](/CheckboxGroup) or [RadioGroup](/RadioGroup) instead.
1919

2020
### Basic
2121

22-
```jsx live
22+
```jsx live deprecated
2323
<ChoiceFieldset>
2424
<ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
2525
<ChoiceFieldset.List>
@@ -33,7 +33,7 @@ Use [CheckboxGroup](/CheckboxGroup) or [RadioGroup](/RadioGroup) instead.
3333

3434
### Using an onSelect handler
3535

36-
```javascript live noinline
36+
```javascript live noinline deprecated
3737
const WithOnSelectHandler = () => {
3838
const [selectedChoices, setSelectedChoices] = React.useState([])
3939
const choices = [
@@ -94,7 +94,7 @@ render(<WithOnSelectHandler />)
9494
9595
### Checkbox group
9696
97-
```jsx live
97+
```jsx live deprecated
9898
<ChoiceFieldset>
9999
<ChoiceFieldset.Legend>Prefered Primer component interface</ChoiceFieldset.Legend>
100100
@@ -109,7 +109,7 @@ render(<WithOnSelectHandler />)
109109
110110
### Disabled
111111
112-
```jsx live
112+
```jsx live deprecated
113113
<ChoiceFieldset disabled>
114114
<ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
115115
<ChoiceFieldset.List>
@@ -123,7 +123,7 @@ render(<WithOnSelectHandler />)
123123
124124
### Required
125125
126-
```jsx live
126+
```jsx live deprecated
127127
<ChoiceFieldset required>
128128
<ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
129129
<ChoiceFieldset.List>
@@ -137,7 +137,7 @@ render(<WithOnSelectHandler />)
137137
138138
### With pre-selected choices
139139
140-
```jsx live
140+
```jsx live deprecated
141141
<ChoiceFieldset selected={['figma', 'react']}>
142142
<ChoiceFieldset.Legend>Prefered Primer component interface</ChoiceFieldset.Legend>
143143
@@ -152,7 +152,7 @@ render(<WithOnSelectHandler />)
152152
153153
### With validation
154154
155-
```javascript live noinline
155+
```javascript live noinline deprecated
156156
const choices = [
157157
{
158158
value: 'figma',
@@ -222,7 +222,7 @@ render(<ChoiceFieldsetWithValidation />)
222222
223223
### A visually hidden legend
224224
225-
```jsx live
225+
```jsx live deprecated
226226
<ChoiceFieldset>
227227
<ChoiceFieldset.Legend visuallyHidden>Color mode</ChoiceFieldset.Legend>
228228
<ChoiceFieldset.List>
@@ -236,7 +236,7 @@ render(<ChoiceFieldsetWithValidation />)
236236
237237
### With a ChoiceFieldset.Description
238238
239-
```jsx live
239+
```jsx live deprecated
240240
<ChoiceFieldset>
241241
<ChoiceFieldset.Legend>Notification preferences</ChoiceFieldset.Legend>
242242
<ChoiceFieldset.Description>
@@ -271,7 +271,7 @@ render(<ChoiceFieldsetWithValidation />)
271271
272272
### With one disabled item
273273
274-
```jsx live
274+
```jsx live deprecated
275275
<ChoiceFieldset>
276276
<ChoiceFieldset.Legend>Color mode</ChoiceFieldset.Legend>
277277
<ChoiceFieldset.List>
@@ -287,7 +287,7 @@ render(<ChoiceFieldsetWithValidation />)
287287
288288
### Items with a caption and a leading visual
289289
290-
```jsx live
290+
```jsx live deprecated
291291
<ChoiceFieldset>
292292
<ChoiceFieldset.Legend>Notification preferences</ChoiceFieldset.Legend>
293293

‎src/ChoiceFieldset/ChoiceFieldset.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const {Slots, Slot} = createSlots(['Description', 'ChoiceList', 'Legend', 'Valid
5757
export {Slot}
5858

5959
/**
60-
* @deprecated Use `CheckboxGroup` or `RadioGroup` instead.
60+
* @deprecated Use `CheckboxGroup` or `RadioGroup` instead. See https://primer.style/react/CheckboxGroup and https://primer.style/react/RadioGroup for more info
6161
*/
6262
const ChoiceFieldset = <T extends Record<string, FormValidationStatus>>({
6363
children,

‎src/ChoiceInputField.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,9 @@ const getInputToRender = (inputType: 'radio' | 'checkbox', children?: React.Reac
2525
)
2626
}
2727

28+
/**
29+
* @deprecated Use `FormControl` instead. See https://primer.style/react/FormControl for more info
30+
*/
2831
const ChoiceInputField: React.FC<Props> = ({children, disabled, id: idProp, validationStatus}) => {
2932
const id = useSSRSafeId(idProp)
3033
const captionChildren: React.ReactElement[] | undefined | null = React.Children.map(children, child =>

‎src/deprecated/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88

99
export {default as BorderBox} from '../BorderBox'
1010
export type {BorderBoxProps} from '../BorderBox'
11+
export {default as ChoiceFieldset, Item} from '../ChoiceFieldset'
12+
export {default as ChoiceInputField} from '../ChoiceInputField'
1113
export {default as Flex} from '../Flex'
1214
export type {FlexProps} from '../Flex'
1315
export {default as Grid} from '../Grid'

‎src/index.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,12 +66,10 @@ export type {
6666
} from './Button'
6767
export {default as Caret} from './Caret'
6868
export type {CaretProps} from './Caret'
69-
export {default as ChoiceInputField} from './ChoiceInputField'
7069
export {default as CircleBadge} from './CircleBadge'
7170
export type {CircleBadgeProps, CircleBadgeIconProps} from './CircleBadge'
7271
export {default as CircleOcticon} from './CircleOcticon'
7372
export type {CircleOcticonProps} from './CircleOcticon'
74-
export {default as ChoiceFieldset, Item} from './ChoiceFieldset'
7573
export {default as CheckboxGroup} from './CheckboxGroup'
7674
export {default as CounterLabel} from './CounterLabel'
7775
export type {CounterLabelProps} from './CounterLabel'

0 commit comments

Comments
 (0)