Skip to content

Commit 7d3021e

Browse files
authored
Next major changeset edits (#1939)
* Remove unnecessary changesets * Edit changesets
1 parent f235c3c commit 7d3021e

File tree

6 files changed

+45
-180
lines changed

6 files changed

+45
-180
lines changed

.changeset/changeset-for-1917.md

Lines changed: 0 additions & 5 deletions
This file was deleted.

.changeset/empty-pillows-hunt.md

Lines changed: 0 additions & 152 deletions
This file was deleted.

.changeset/heavy-points-marry.md

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
'@primer/react': major
33
---
44

5+
<br />
6+
7+
### Label
8+
59
The Label component's API and visual design have been updated to be consistent with its counterpart in [Primer ViewComponents' Label component](https://primer.style/view-components/components/label).
610

711
Major changes in the new Label component:
@@ -14,7 +18,7 @@ If you were using the `Label` component to render issue/PR labels, use the [Issu
1418

1519
<table>
1620
<tr>
17-
<th> Before </th> <th> After </th>
21+
<th> Before (v34) </th> <th> After (v35) </th>
1822
</tr>
1923
<tr>
2024
<td valign="top">
@@ -39,3 +43,11 @@ import {Label} from "@primer/react"
3943
</td>
4044
</tr>
4145
</table>
46+
47+
To continue to use the deprecated API for now, change the import path to `@primer/react/deprecated`:
48+
49+
```js
50+
import {Label} from '@primer/react/deprecated'
51+
```
52+
53+
You can use the [one-time codemod](https://github.com/primer/react-migrate#readme) to change your import statements automatically.

.changeset/many-roses-hammer.md

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
11
---
22
'@primer/react': major
33
---
4-
### Button deprecation
54

6-
A new set of `Button` components brings a much needed update. Previously to `v35`, `Button` was a set of seven independent components. In `v35`, we now have common `Button` usage guidelines and more convenient API.
5+
<br />
6+
7+
### Button
8+
9+
Before `v35`, `Button` was a set of seven independent components. In `v35`, we now have common `Button` usage guidelines and a more convenient API.
710

811
#### Button variants
12+
913
We now support a variant property which takes values `primary`, `invisible`, `outline` and `danger`
1014

1115
<table>
@@ -17,10 +21,10 @@ We now support a variant property which takes values `primary`, `invisible`, `ou
1721

1822
```jsx
1923

20-
import { ButtonPrimary, ButtonInvisible,
21-
ButtonOutline, ButtonDanger }
22-
from '@primer/react'
23-
24+
import { ButtonPrimary, ButtonInvisible,
25+
ButtonOutline, ButtonDanger }
26+
from '@primer/react'
27+
2428
<ButtonPrimary>
2529
Primary Button
2630
</ButtonPrimary>
@@ -41,7 +45,7 @@ import { ButtonPrimary, ButtonInvisible,
4145
```jsx
4246

4347
import { Button } from '@primer/react'
44-
48+
4549
<Button variant="primary">
4650
Primary Button
4751
</Button>
@@ -60,10 +64,9 @@ import { Button } from '@primer/react'
6064
</tr>
6165
</table>
6266

63-
### Leading and Trailing icons
67+
### Leading and trailing icons
6468

65-
In the previous component, we allowed icon components to be direct children. This results in a lot of custom styling for the icon components.
66-
In the new one, we now have `leadinIcon` and `trailingIcon` properties.
69+
Previously including icons inside buttons required a lot of custom styling. In the new `Button` component, we now support first-class `leadingIcon` and `trailingIcon` props:
6770

6871
<table>
6972
<tr>
@@ -92,7 +95,7 @@ In the new one, we now have `leadinIcon` and `trailingIcon` properties.
9295

9396
### Icon buttons
9497

95-
Icon only buttons are common usages in products. So we now have a component for the specific usecase
98+
Icon-only buttons are common in many applications. We now have a component for this use-case:
9699

97100
<table>
98101
<tr>
@@ -120,7 +123,7 @@ Icon only buttons are common usages in products. So we now have a component for
120123

121124
### Size property
122125

123-
Earlier we used `variant` to mean size property. Now we have a new property called `size` which is more semantically correct.
126+
Previously, we used a `variant` prop to set the size of buttons. We now have a prop called `size` which is more semantically correct.
124127

125128
<table>
126129
<tr>

.changeset/nervous-pets-sleep.md

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,13 @@
22
'@primer/react': major
33
---
44

5+
<br />
6+
57
### ChoiceFieldset and ChoiceFieldset
68

7-
The `CheckboxGroup` and `RadioGroup` components will be used to deprecate the `ChoiceFieldset` component. The deprecation of `ChoiceFieldset` also allows us to deprecate `ChoiceInputField`.
9+
The `CheckboxGroup` and `RadioGroup` components are replacing the `ChoiceFieldset` component. The deprecation of `ChoiceFieldset` also allows us to deprecate `ChoiceInputField`.
810

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.
11+
`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.
1012

1113
<table>
1214
<tr>

.changeset/olive-bears-act.md

Lines changed: 13 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,15 @@
22
'@primer/react': major
33
---
44

5-
The `FormControl` component will be used to deprecate the `FormGroup`, `InputField`, and `ChoiceInputField` components. It has the ability to render contextual content with your inputs: labels, validation statuses, captions. It also handles the ARIA attributes that make the form controls accessible to assistive technology.
5+
<br />
6+
7+
### FormGroup, InputField, ChoiceInputField
8+
9+
The `FormControl` component is replacing the `FormGroup`, `InputField`, and `ChoiceInputField` components. It has the ability to render contextual content with your inputs: labels, validation statuses, captions. It also handles the ARIA attributes that make the form controls accessible to assistive technology.
610

711
<table>
812
<tr>
9-
<th> Before </th> <th> After </th>
13+
<th> Before (v34) </th> <th> After (v35) </th>
1014
</tr>
1115
<tr>
1216
<td valign="top">
@@ -16,22 +20,22 @@ import {FormControl, Checkbox, TextInput} from "@primer/react"
1620

1721

1822
<FormGroup>
19-
<FormGroup.Label htmlFor="example-text">Example text</FormGroup.Label>
20-
<TextInput id="example-text" />
23+
<FormGroup.Label htmlFor="example-text">Example text</FormGroup.Label>
24+
<TextInput id="example-text" />
2125
</FormGroup>
2226

2327
// OR
2428

2529
<InputField>
26-
<InputField.Label>Example text</InputField.Label>
27-
<TextInput />
30+
<InputField.Label>Example text</InputField.Label>
31+
<TextInput />
2832
</InputField>
2933

3034
// OR
3135

3236
<ChoiceInputField>
33-
<ChoiceInputField.Label>Example text</ChoiceInputField.Label>
34-
<Checkbox />
37+
<ChoiceInputField.Label>Example text</ChoiceInputField.Label>
38+
<Checkbox />
3539
</ChoiceInputField>
3640

3741
```
@@ -83,6 +87,7 @@ import {FormControl} from '@primer/react'
8387
</td>
8488
</tr>
8589
</table>
90+
8691
<table style="display: table">
8792
<tr><th>Migration steps to FormControl</th></tr>
8893
<tr>

0 commit comments

Comments
 (0)