Skip to content

Commit 5c7f0e9

Browse files
committed
adds changeset
1 parent 94fc42c commit 5c7f0e9

File tree

1 file changed

+43
-0
lines changed

1 file changed

+43
-0
lines changed

.changeset/heavy-points-marry.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
---
2+
'@primer/react': major
3+
---
4+
5+
![NewLabels](https://user-images.githubusercontent.com/2313998/155384037-8a56c943-4cff-4349-925b-dc28247e3491.png)
6+
7+
The Label component has been updated to align with [Primer ViewComponents' Label component](https://primer.style/view-components/components/label). Now the React component is consistent ViewComponents and the intent of the design team.
8+
9+
Major changes in the new Label component:
10+
11+
- No more `medium` size - only `small` and `large`
12+
- Labels are outlined by default, so the `outline` prop has been removed
13+
- Custom text and background colors are discouraged, but still possible via the `sx` prop
14+
15+
If you were using the `Label` component to render issue/PR labels, use the [IssueLabelToken](https://primer.style/react/Token#issuelabeltoken) component instead.
16+
17+
<table>
18+
<tr>
19+
<th> Before </th> <th> After </th>
20+
</tr>
21+
<tr>
22+
<td valign="top">
23+
24+
```jsx
25+
import {Label} from "@primer/react"
26+
27+
<Label outline>default</Label>
28+
<Label variant="small" outline sx={{borderColor: 'danger.emphasis', color: 'danger.fg'}}>danger</Label>
29+
```
30+
31+
</td>
32+
<td valign="top">
33+
34+
```jsx
35+
import {Label} from "@primer/react"
36+
37+
<Label>default</Label>
38+
<Label size="small" variant="danger">danger</Label>
39+
```
40+
41+
</td>
42+
</tr>
43+
</table>

0 commit comments

Comments
 (0)