Skip to content

Commit e9b81fa

Browse files
mperrottirezrah
mperrotti
and
rezrah
authored
Deprecate legacy Label component (#1889)
* moves Label to deprecated bundle * graduates Label2 to main bundle * cleanup * adds changeset * fixes tests * update legacy label snapshots * Update .changeset/heavy-points-marry.md Co-authored-by: Rez <rezrah@github.com> * Update docs/content/Label.mdx Co-authored-by: Rez <rezrah@github.com> * addresses pr feedback * adds Label back to sidebar * updates tests, removes docs header image * removes docs header image * fixes tests * resets changed test Co-authored-by: Rez <rezrah@github.com>
1 parent d61b28a commit e9b81fa

File tree

19 files changed

+413
-372
lines changed

19 files changed

+413
-372
lines changed

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

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
---
2+
'@primer/react': major
3+
---
4+
5+
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).
6+
7+
Major changes in the new Label component:
8+
9+
- No more `medium` size - only `small` and `large`
10+
- Labels are outlined by default, so the `outline` prop has been removed
11+
- Custom text and background colors are discouraged, but still possible via the `sx` prop
12+
13+
If you were using the `Label` component to render issue/PR labels, use the [IssueLabelToken](https://primer.style/react/Token#issuelabeltoken) component instead.
14+
15+
<table>
16+
<tr>
17+
<th> Before </th> <th> After </th>
18+
</tr>
19+
<tr>
20+
<td valign="top">
21+
22+
```jsx
23+
import {Label} from "@primer/react"
24+
25+
<Label outline>default</Label>
26+
<Label variant="small" outline sx={{borderColor: 'danger.emphasis', color: 'danger.fg'}}>danger</Label>
27+
```
28+
29+
</td>
30+
<td valign="top">
31+
32+
```jsx
33+
import {Label} from "@primer/react"
34+
35+
<Label>default</Label>
36+
<Label size="small" variant="danger">danger</Label>
37+
```
38+
39+
</td>
40+
</tr>
41+
</table>

‎docs/content/Label.mdx‎

Lines changed: 65 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -1,65 +1,90 @@
11
---
22
title: Label
3-
description: Use Label components to add contextual metadata to a design.
4-
status: Alpha
5-
source: https://github.com/primer/react/blob/main/src/Label.tsx
63
componentId: label
4+
status: Alpha
5+
source: https://github.com/primer/react/tree/main/src/Label
6+
storybook: '/react/storybook?path=story/labels-label--label'
7+
description: Use Label components to add contextual metadata to a design.
78
---
89

9-
## Example
10+
## Examples
1011

11-
```jsx live
12-
<>
13-
<Label variant="small" outline sx={{borderColor: 'danger.emphasis', mr: 2, color: 'danger.fg'}}>
14-
small
15-
</Label>
16-
<Label variant="medium" sx={{mr: 2}}>
17-
medium (default)
18-
</Label>
19-
<Label variant="large" sx={{mr: 2}}>
20-
large
21-
</Label>
22-
<Label variant="xl">xl label</Label>
12+
### Basic
2313

24-
<Box mt={4} />
25-
<Label variant="medium" sx={{bg: '#A575FF', m: 1}}>
26-
good first issue
27-
</Label>
28-
<Label variant="medium" sx={{bg: '#FF75C8', m: 1}}>
29-
🚂 deploy: train
30-
</Label>
31-
<Label variant="medium" sx={{bg: '#1C90FA', m: 1}}>
32-
css
33-
</Label>
34-
<Label variant="medium" sx={{bg: '#FFF06C', color: '#24292E', m: 1}}>
35-
documentation
36-
</Label>
37-
<Label variant="medium" sx={{bg: '#656BFE', m: 1}}>
38-
primer
39-
</Label>
40-
</>
14+
```javascript live noinline
15+
render(<Label>Default</Label>)
16+
```
17+
18+
### Variants
19+
20+
```javascript live noinline
21+
render(
22+
<>
23+
<Label>Default</Label>
24+
<Label variant="primary">Primary</Label>
25+
<Label variant="secondary">Secondary</Label>
26+
<Label variant="accent">Accent</Label>
27+
<Label variant="success">Success</Label>
28+
<Label variant="attention">Attention</Label>
29+
<Label variant="severe">Severe</Label>
30+
<Label variant="danger">Danger</Label>
31+
<Label variant="done">Done</Label>
32+
<Label variant="sponsors">Sponsors</Label>
33+
</>
34+
)
35+
```
36+
37+
### Sizes
38+
39+
```javascript live noinline
40+
render(
41+
<>
42+
<Label>Small (default)</Label>
43+
<Label size="large">Large</Label>
44+
</>
45+
)
4146
```
4247

4348
## Props
4449

50+
### Label
51+
4552
<PropsTable>
46-
<PropsTableRow name="outline" type="boolean" defaultValue="false" description="Creates an outline style label" />
47-
<PropsTableRow name="variant" type="'small' | 'medium' | 'large' | 'xl'" defaultValue="'medium'" />
48-
<PropsTableRow name="dropshadow" type="boolean" defaultValue="false" description="Adds a dropshadow to the label" />
49-
<PropsTableSxRow />
53+
<PropsTableRow
54+
name="variant"
55+
type={`| 'default'
56+
| 'primary'
57+
| 'secondary'
58+
| 'accent'
59+
| 'success'
60+
| 'attention'
61+
| 'severe'
62+
| 'danger'
63+
| 'done'
64+
| 'sponsors'`}
65+
defaultValue="'default'"
66+
description="The color of the label"
67+
/>
68+
<PropsTableRow
69+
name="size"
70+
type="'small' | 'large'"
71+
defaultValue="'small'"
72+
description="How large the label is rendered"
73+
/>
5074
</PropsTable>
5175

5276
## Status
5377

5478
<ComponentChecklist
5579
items={{
5680
propsDocumented: true,
57-
noUnnecessaryDeps: false,
81+
noUnnecessaryDeps: true,
5882
adaptsToThemes: true,
59-
adaptsToScreenSizes: false,
60-
fullTestCoverage: false,
83+
adaptsToScreenSizes: true,
84+
fullTestCoverage: true,
6185
usedInProduction: false,
6286
usageExamplesDocumented: true,
87+
hasStorybookStories: true,
6388
designReviewed: false,
6489
a11yReviewed: false,
6590
stableApi: false,

‎docs/content/deprecated/Label.mdx‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
---
2+
title: Label
3+
description: Use Label components to add contextual metadata to a design.
4+
status: Deprecated
5+
source: https://github.com/primer/react/blob/main/src/Label.tsx
6+
componentId: legacy_label
7+
---
8+
9+
## Deprecation
10+
11+
Use the new [Label](/Label) instead.
12+
13+
## Example
14+
15+
```jsx live deprecated
16+
<>
17+
<Label variant="small" outline sx={{borderColor: 'danger.emphasis', mr: 2, color: 'danger.fg'}}>
18+
small
19+
</Label>
20+
<Label variant="medium" sx={{mr: 2}}>
21+
medium (default)
22+
</Label>
23+
<Label variant="large" sx={{mr: 2}}>
24+
large
25+
</Label>
26+
<Label variant="xl">xl label</Label>
27+
28+
<Box mt={4} />
29+
<Label variant="medium" sx={{bg: '#A575FF', m: 1}}>
30+
good first issue
31+
</Label>
32+
<Label variant="medium" sx={{bg: '#FF75C8', m: 1}}>
33+
🚂 deploy: train
34+
</Label>
35+
<Label variant="medium" sx={{bg: '#1C90FA', m: 1}}>
36+
css
37+
</Label>
38+
<Label variant="medium" sx={{bg: '#FFF06C', color: '#24292E', m: 1}}>
39+
documentation
40+
</Label>
41+
<Label variant="medium" sx={{bg: '#656BFE', m: 1}}>
42+
primer
43+
</Label>
44+
</>
45+
```
46+
47+
## Props
48+
49+
<PropsTable>
50+
<PropsTableRow name="outline" type="boolean" defaultValue="false" description="Creates an outline style label" />
51+
<PropsTableRow name="variant" type="'small' | 'medium' | 'large' | 'xl'" defaultValue="'medium'" />
52+
<PropsTableRow name="dropshadow" type="boolean" defaultValue="false" description="Adds a dropshadow to the label" />
53+
<PropsTableSxRow />
54+
</PropsTable>
55+
56+
## Status
57+
58+
<ComponentChecklist
59+
items={{
60+
propsDocumented: true,
61+
noUnnecessaryDeps: false,
62+
adaptsToThemes: true,
63+
adaptsToScreenSizes: false,
64+
fullTestCoverage: false,
65+
usedInProduction: false,
66+
usageExamplesDocumented: true,
67+
designReviewed: false,
68+
a11yReviewed: false,
69+
stableApi: false,
70+
addressedApiFeedback: false,
71+
hasDesignGuidelines: false,
72+
hasFigmaComponent: false
73+
}}
74+
/>

‎docs/content/drafts/Label2.mdx‎

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

‎docs/src/@primer/gatsby-theme-doctocat/nav.yml‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,8 @@
173173
url: /deprecated/Grid
174174
- title: InputField
175175
url: /deprecated/InputField
176+
- title: Label
177+
url: /deprecated/Label
176178
- title: Position
177179
url: /deprecated/Position
178180
- title: SelectMenu

0 commit comments

Comments
 (0)