Skip to content

Commit

Permalink
adds changeset
Browse files Browse the repository at this point in the history
  • Loading branch information
mperrotti committed Feb 24, 2022
1 parent ea882de commit e02c828
Showing 1 changed file with 43 additions and 0 deletions.
43 changes: 43 additions & 0 deletions .changeset/heavy-points-marry.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,43 @@
---
'@primer/react': major
---

![NewLabels](https://user-images.githubusercontent.com/2313998/155384037-8a56c943-4cff-4349-925b-dc28247e3491.png)

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.

Major changes in the new Label component:

- No more `medium` size - only `small` and `large`
- Labels are outlined by default, so the `outline` prop has been removed
- Custom text and background colors are discouraged, but still possible via the `sx` prop

If you were using the `Label` component to render issue/PR labels, use the [IssueLabelToken](https://primer.style/react/Token#issuelabeltoken) component instead.

<table>
<tr>
<th> Before </th> <th> After </th>
</tr>
<tr>
<td valign="top">

```jsx
import {Label} from "@primer/react"

<Label outline>default</Label>
<Label variant="small" outline sx={{borderColor: 'danger.emphasis', color: 'danger.fg'}}>danger</Label>
```

</td>
<td valign="top">

```jsx
import {Label} from "@primer/react"

<Label>default</Label>
<Label size="small" variant="danger">danger</Label>
```

</td>
</tr>
</table>

0 comments on commit e02c828

Please sign in to comment.