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>
primer · Mar 1, 2022 · e9b81fa · e9b81fa
1 parent d61b28a
commit e9b81fa
Show file tree

Hide file tree

Showing 19 changed files with 413 additions and 372 deletions.
diff --git a/.changeset/heavy-points-marry.md b/.changeset/heavy-points-marry.md
@@ -0,0 +1,41 @@
+---
+'@primer/react': major
+---
+
+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).
+
+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>
diff --git a/docs/content/Label.mdx b/docs/content/Label.mdx
@@ -1,65 +1,90 @@
 ---
 title: Label
-description: Use Label components to add contextual metadata to a design.
-status: Alpha
-source: https://github.com/primer/react/blob/main/src/Label.tsx
 componentId: label
+status: Alpha
+source: https://github.com/primer/react/tree/main/src/Label
+storybook: '/react/storybook?path=story/labels-label--label'
+description: Use Label components to add contextual metadata to a design.
 ---
 
-## Example
+## Examples
 
-```jsx live
-<>
-  <Label variant="small" outline sx={{borderColor: 'danger.emphasis', mr: 2, color: 'danger.fg'}}>
-    small
-  </Label>
-  <Label variant="medium" sx={{mr: 2}}>
-    medium (default)
-  </Label>
-  <Label variant="large" sx={{mr: 2}}>
-    large
-  </Label>
-  <Label variant="xl">xl label</Label>
+### Basic
 
-  <Box mt={4} />
-  <Label variant="medium" sx={{bg: '#A575FF', m: 1}}>
-    good first issue
-  </Label>
-  <Label variant="medium" sx={{bg: '#FF75C8', m: 1}}>
-    🚂 deploy: train
-  </Label>
-  <Label variant="medium" sx={{bg: '#1C90FA', m: 1}}>
-    css
-  </Label>
-  <Label variant="medium" sx={{bg: '#FFF06C', color: '#24292E', m: 1}}>
-    documentation
-  </Label>
-  <Label variant="medium" sx={{bg: '#656BFE', m: 1}}>
-    primer
-  </Label>
-</>
+```javascript live noinline
+render(<Label>Default</Label>)
+```
+
+### Variants
+
+```javascript live noinline
+render(
+  <>
+    <Label>Default</Label>
+    <Label variant="primary">Primary</Label>
+    <Label variant="secondary">Secondary</Label>
+    <Label variant="accent">Accent</Label>
+    <Label variant="success">Success</Label>
+    <Label variant="attention">Attention</Label>
+    <Label variant="severe">Severe</Label>
+    <Label variant="danger">Danger</Label>
+    <Label variant="done">Done</Label>
+    <Label variant="sponsors">Sponsors</Label>
+  </>
+)
+```
+
+### Sizes
+
+```javascript live noinline
+render(
+  <>
+    <Label>Small (default)</Label>
+    <Label size="large">Large</Label>
+  </>
+)
 ```
 
 ## Props
 
+### Label
+
 <PropsTable>
-  <PropsTableRow name="outline" type="boolean" defaultValue="false" description="Creates an outline style label" />
-  <PropsTableRow name="variant" type="'small' | 'medium' | 'large' | 'xl'" defaultValue="'medium'" />
-  <PropsTableRow name="dropshadow" type="boolean" defaultValue="false" description="Adds a dropshadow to the label" />
-  <PropsTableSxRow />
+  <PropsTableRow
+    name="variant"
+    type={`| 'default'
+| 'primary'
+| 'secondary'
+| 'accent'
+| 'success'
+| 'attention'
+| 'severe'
+| 'danger'
+| 'done'
+| 'sponsors'`}
+    defaultValue="'default'"
+    description="The color of the label"
+  />
+  <PropsTableRow
+    name="size"
+    type="'small' | 'large'"
+    defaultValue="'small'"
+    description="How large the label is rendered"
+  />
 </PropsTable>
 
 ## Status
 
 <ComponentChecklist
   items={{
     propsDocumented: true,
-    noUnnecessaryDeps: false,
+    noUnnecessaryDeps: true,
     adaptsToThemes: true,
-    adaptsToScreenSizes: false,
-    fullTestCoverage: false,
+    adaptsToScreenSizes: true,
+    fullTestCoverage: true,
     usedInProduction: false,
     usageExamplesDocumented: true,
+    hasStorybookStories: true,
     designReviewed: false,
     a11yReviewed: false,
     stableApi: false,

diff --git a/docs/content/deprecated/Label.mdx b/docs/content/deprecated/Label.mdx
@@ -0,0 +1,74 @@
+---
+title: Label
+description: Use Label components to add contextual metadata to a design.
+status: Deprecated
+source: https://github.com/primer/react/blob/main/src/Label.tsx
+componentId: legacy_label
+---
+
+## Deprecation
+
+Use the new [Label](/Label) instead.
+
+## Example
+
+```jsx live deprecated
+<>
+  <Label variant="small" outline sx={{borderColor: 'danger.emphasis', mr: 2, color: 'danger.fg'}}>
+    small
+  </Label>
+  <Label variant="medium" sx={{mr: 2}}>
+    medium (default)
+  </Label>
+  <Label variant="large" sx={{mr: 2}}>
+    large
+  </Label>
+  <Label variant="xl">xl label</Label>
+
+  <Box mt={4} />
+  <Label variant="medium" sx={{bg: '#A575FF', m: 1}}>
+    good first issue
+  </Label>
+  <Label variant="medium" sx={{bg: '#FF75C8', m: 1}}>
+    🚂 deploy: train
+  </Label>
+  <Label variant="medium" sx={{bg: '#1C90FA', m: 1}}>
+    css
+  </Label>
+  <Label variant="medium" sx={{bg: '#FFF06C', color: '#24292E', m: 1}}>
+    documentation
+  </Label>
+  <Label variant="medium" sx={{bg: '#656BFE', m: 1}}>
+    primer
+  </Label>
+</>
+```
+
+## Props
+
+<PropsTable>
+  <PropsTableRow name="outline" type="boolean" defaultValue="false" description="Creates an outline style label" />
+  <PropsTableRow name="variant" type="'small' | 'medium' | 'large' | 'xl'" defaultValue="'medium'" />
+  <PropsTableRow name="dropshadow" type="boolean" defaultValue="false" description="Adds a dropshadow to the label" />
+  <PropsTableSxRow />
+</PropsTable>
+
+## Status
+
+<ComponentChecklist
+  items={{
+    propsDocumented: true,
+    noUnnecessaryDeps: false,
+    adaptsToThemes: true,
+    adaptsToScreenSizes: false,
+    fullTestCoverage: false,
+    usedInProduction: false,
+    usageExamplesDocumented: true,
+    designReviewed: false,
+    a11yReviewed: false,
+    stableApi: false,
+    addressedApiFeedback: false,
+    hasDesignGuidelines: false,
+    hasFigmaComponent: false
+  }}
+/>
diff --git a/docs/content/drafts/Label2.mdx b/docs/content/drafts/Label2.mdx
diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -173,6 +173,8 @@
       url: /deprecated/Grid
     - title: InputField
       url: /deprecated/InputField
+    - title: Label
+      url: /deprecated/Label
     - title: Position
       url: /deprecated/Position
     - title: SelectMenu