Skip to content

Commit 16a5d17

Browse files
colebemiscolebemis
authored
Update changeset examples (#1941)
1 parent 002e9cf commit 16a5d17

File tree

4 files changed

+197
-239
lines changed

4 files changed

+197
-239
lines changed

‎.changeset/heavy-points-marry.md‎

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -24,24 +24,36 @@ If you were using the `Label` component to render issue/PR labels, use the [Issu
2424
<td valign="top">
2525

2626
```jsx
27-
import {Label} from "@primer/react"
28-
29-
<>
30-
<Label outline>default</Label>
31-
<Label variant="small" outline sx={{borderColor: 'danger.emphasis', color: 'danger.fg'}}>danger</Label>
32-
</>
27+
import {Label} from '@primer/react'
28+
29+
function Example() {
30+
return (
31+
<>
32+
<Label outline>default</Label>
33+
<Label variant="small" outline sx={{borderColor: 'danger.emphasis', color: 'danger.fg'}}>
34+
danger
35+
</Label>
36+
</>
37+
)
38+
}
3339
```
3440

3541
</td>
3642
<td valign="top">
3743

3844
```jsx
39-
import {Label} from "@primer/react"
40-
41-
<>
42-
<Label>default</Label>
43-
<Label size="small" variant="danger">danger</Label>
44-
</>
45+
import {Label} from '@primer/react'
46+
47+
function Example() {
48+
return (
49+
<>
50+
<Label>default</Label>
51+
<Label size="small" variant="danger">
52+
danger
53+
</Label>
54+
</>
55+
)
56+
}
4557
```
4658

4759
</td>

‎.changeset/many-roses-hammer.md‎

Lines changed: 28 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -18,52 +18,40 @@ We now support a variant property which takes values `primary`, `invisible`, `ou
1818
</tr>
1919
<tr>
2020
<td valign="top">
21-
22-
```jsx
2321

24-
import { ButtonPrimary, ButtonInvisible,
25-
ButtonOutline, ButtonDanger }
26-
from '@primer/react'
27-
28-
<>
29-
<ButtonPrimary>
30-
Primary Button
31-
</ButtonPrimary>
32-
<ButtonInvisible>
33-
Invisible Button
34-
</ButtonInvisible>
35-
<ButtonOutline>
36-
Outline Button
37-
</ButtonOutline>
38-
<ButtonDanger>
39-
Danger Button
40-
</ButtonDanger>
41-
</>
22+
```jsx
23+
import {ButtonPrimary, ButtonInvisible, ButtonOutline, ButtonDanger} from '@primer/react'
24+
25+
function Example() {
26+
return (
27+
<>
28+
<ButtonPrimary>Primary Button</ButtonPrimary>
29+
<ButtonInvisible>Invisible Button</ButtonInvisible>
30+
<ButtonOutline>Outline Button</ButtonOutline>
31+
<ButtonDanger>Danger Button</ButtonDanger>
32+
</>
33+
)
34+
}
4235
```
43-
36+
4437
</td>
4538
<td valign="top">
46-
47-
```jsx
4839

49-
import { Button } from '@primer/react'
50-
51-
<>
52-
<Button variant="primary">
53-
Primary Button
54-
</Button>
55-
<Button variant="invisible">
56-
Invisible Button
57-
</Button>
58-
<Button variant="outline">
59-
Outline Button
60-
</Button>
61-
<Button variant="danger">
62-
Danger Button
63-
</Button>
64-
</>
40+
```jsx
41+
import {Button} from '@primer/react'
42+
43+
function Example() {
44+
return (
45+
<>
46+
<Button variant="primary">Primary Button</Button>
47+
<Button variant="invisible">Invisible Button</Button>
48+
<Button variant="outline">Outline Button</Button>
49+
<Button variant="danger">Danger Button</Button>
50+
</>
51+
)
52+
}
6553
```
66-
54+
6755
</td>
6856
</tr>
6957
</table>

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

Lines changed: 83 additions & 118 deletions
Original file line numberDiff line numberDiff line change
@@ -4,9 +4,9 @@
44

55
<br />
66

7-
### ChoiceFieldset and ChoiceFieldset
7+
### ChoiceFieldset
88

9-
The `CheckboxGroup` and `RadioGroup` components are replacing the `ChoiceFieldset` component. The deprecation of `ChoiceFieldset` also allows us to deprecate `ChoiceInputField`.
9+
The `CheckboxGroup` and `RadioGroup` components are replacing the `ChoiceFieldset` component.
1010

1111
`CheckboxGroup` and `RadioGroup` have the ability to render contextual content with your fieldset: labels, validation statuses, captions. They also handle the ARIA attributes that make the form controls accessible to assistive technology.
1212

@@ -18,131 +18,96 @@ The `CheckboxGroup` and `RadioGroup` components are replacing the `ChoiceFieldse
1818
<td valign="top">
1919

2020
```jsx
21-
import {ChoiceFieldset} from "@primer/react"
22-
23-
<>
24-
// Multi-select
25-
<ChoiceFieldset>
26-
<ChoiceFieldset.Legend>
27-
Preferred Primer component interface
28-
</ChoiceFieldset.Legend>
29-
30-
<ChoiceFieldset.List selectionVariant="multiple">
31-
<ChoiceFieldset.Item value="figma">
32-
Figma library
33-
</ChoiceFieldset.Item>
34-
<ChoiceFieldset.Item value="css">
35-
Primer CSS
36-
</ChoiceFieldset.Item>
37-
<ChoiceFieldset.Item value="react">
38-
Primer React components
39-
</ChoiceFieldset.Item>
40-
<ChoiceFieldset.Item value="viewcomponents">
41-
Primer ViewComponents
42-
</ChoiceFieldset.Item>
43-
</ChoiceFieldset.List>
44-
</ChoiceFieldset>
45-
46-
// Single select
47-
<ChoiceFieldset>
48-
<ChoiceFieldset.Legend>
49-
Preferred Primer component interface
50-
</ChoiceFieldset.Legend>
51-
52-
<ChoiceFieldset.List>
53-
<ChoiceFieldset.Item value="figma">
54-
Figma library
55-
</ChoiceFieldset.Item>
56-
<ChoiceFieldset.Item value="css">
57-
Primer CSS
58-
</ChoiceFieldset.Item>
59-
<ChoiceFieldset.Item value="react">
60-
Primer React components
61-
</ChoiceFieldset.Item>
62-
<ChoiceFieldset.Item value="viewcomponents">
63-
Primer ViewComponents
64-
</ChoiceFieldset.Item>
65-
</ChoiceFieldset.List>
66-
</ChoiceFieldset>
67-
</>
68-
21+
import {ChoiceFieldset} from '@primer/react'
22+
23+
function Example() {
24+
return (
25+
<>
26+
{/* Multi-select */}
27+
<ChoiceFieldset>
28+
<ChoiceFieldset.Legend>Preferred Primer component interface</ChoiceFieldset.Legend>
29+
<ChoiceFieldset.List selectionVariant="multiple">
30+
<ChoiceFieldset.Item value="figma">Figma library</ChoiceFieldset.Item>
31+
<ChoiceFieldset.Item value="css">Primer CSS</ChoiceFieldset.Item>
32+
<ChoiceFieldset.Item value="react">Primer React components</ChoiceFieldset.Item>
33+
<ChoiceFieldset.Item value="viewcomponents">Primer ViewComponents</ChoiceFieldset.Item>
34+
</ChoiceFieldset.List>
35+
</ChoiceFieldset>
36+
37+
{/* Single select */}
38+
<ChoiceFieldset>
39+
<ChoiceFieldset.Legend>Preferred Primer component interface</ChoiceFieldset.Legend>
40+
<ChoiceFieldset.List>
41+
<ChoiceFieldset.Item value="figma">Figma library</ChoiceFieldset.Item>
42+
<ChoiceFieldset.Item value="css">Primer CSS</ChoiceFieldset.Item>
43+
<ChoiceFieldset.Item value="react">Primer React components</ChoiceFieldset.Item>
44+
<ChoiceFieldset.Item value="viewcomponents">Primer ViewComponents</ChoiceFieldset.Item>
45+
</ChoiceFieldset.List>
46+
</ChoiceFieldset>
47+
</>
48+
)
49+
}
6950
```
7051

7152
</td>
7253
<td valign="top">
7354

7455
```jsx
75-
import {FormGroup, Checkbox} from "@primer/react"
76-
77-
<>
78-
// Multi-select
79-
<CheckboxGroup>
80-
<CheckboxGroup.Label>
81-
Preferred Primer component interface
82-
</CheckboxGroup.Label>
83-
<FormControl>
84-
<Checkbox value="figma" />
85-
<FormControl.Label>Figma</FormControl.Label>
86-
</FormControl>
87-
<FormControl>
88-
<Checkbox value="css" />
89-
<FormControl.Label>CSS</FormControl.Label>
90-
</FormControl>
91-
<FormControl>
92-
<Checkbox value="react" />
93-
<FormControl.Label>Primer React components</FormControl.Label>
94-
</FormControl>
95-
<FormControl>
96-
<Checkbox value="viewcomponents" />
97-
<FormControl.Label>Primer ViewComponents</FormControl.Label>
98-
</FormControl>
99-
</CheckboxGroup>
100-
101-
// Single select
102-
<RadioGroup name="preferred-primer">
103-
<RadioGroup.Label>
104-
Preferred Primer component interface
105-
</RadioGroup.Label>
106-
<FormControl>
107-
<Radio value="figma" />
108-
<FormControl.Label>Figma</FormControl.Label>
109-
</FormControl>
110-
<FormControl>
111-
<Radio value="css" />
112-
<FormControl.Label>CSS</FormControl.Label>
113-
</FormControl>
114-
<FormControl>
115-
<Radio value="react" />
116-
<FormControl.Label>Primer React components</FormControl.Label>
117-
</FormControl>
118-
<FormControl>
119-
<Radio value="viewcomponents" />
120-
<FormControl.Label>Primer ViewComponents</FormControl.Label>
121-
</FormControl>
122-
</RadioGroup>
123-
</>
56+
import {CheckboxGroup, RadioGroup, FormControl Checkbox, Radio} from '@primer/react'
57+
58+
function Example() {
59+
return (
60+
<>
61+
{/* Multi-select */}
62+
<CheckboxGroup>
63+
<CheckboxGroup.Label>Preferred Primer component interface</CheckboxGroup.Label>
64+
<FormControl>
65+
<Checkbox value="figma" />
66+
<FormControl.Label>Figma</FormControl.Label>
67+
</FormControl>
68+
<FormControl>
69+
<Checkbox value="css" />
70+
<FormControl.Label>CSS</FormControl.Label>
71+
</FormControl>
72+
<FormControl>
73+
<Checkbox value="react" />
74+
<FormControl.Label>Primer React components</FormControl.Label>
75+
</FormControl>
76+
<FormControl>
77+
<Checkbox value="viewcomponents" />
78+
<FormControl.Label>Primer ViewComponents</FormControl.Label>
79+
</FormControl>
80+
</CheckboxGroup>
81+
82+
{/* Single select */}
83+
<RadioGroup name="preferred-primer">
84+
<RadioGroup.Label>Preferred Primer component interface</RadioGroup.Label>
85+
<FormControl>
86+
<Radio value="figma" />
87+
<FormControl.Label>Figma</FormControl.Label>
88+
</FormControl>
89+
<FormControl>
90+
<Radio value="css" />
91+
<FormControl.Label>CSS</FormControl.Label>
92+
</FormControl>
93+
<FormControl>
94+
<Radio value="react" />
95+
<FormControl.Label>Primer React components</FormControl.Label>
96+
</FormControl>
97+
<FormControl>
98+
<Radio value="viewcomponents" />
99+
<FormControl.Label>Primer ViewComponents</FormControl.Label>
100+
</FormControl>
101+
</RadioGroup>
102+
</>
103+
)
104+
}
124105
```
125106

126-
</td>
127-
</tr>
128-
</table>
129-
<table style="display: table">
130-
<tr><th>Migration steps to CheckboxGroup and RadioGroup</th></tr>
131-
<tr>
132-
<td>
133-
134-
<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).
135-
136-
or
137-
138-
<strong>Continue using the deprecated</strong> `ChoiceFieldset` component :
107+
To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
139108

140109
```js
141-
import {ChoiceFieldset} from '@primer/react/deprecated' // change your import statements
110+
import {ChoiceFieldset} from '@primer/react/deprecated'
142111
```
143112

144-
ChoiceFieldset codemod: https://github.com/primer/react-migrate/blob/main/src/use-deprecated-choicefieldset.js
145-
146-
</td>
147-
</tr>
148-
</table>
113+
You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.

0 commit comments

Comments
 (0)