graduates Label2 to main bundle

primer · Feb 24, 2022 · d41c354 · d41c354
1 parent ca87ead
commit d41c354
Show file tree

Hide file tree

Showing 14 changed files with 373 additions and 370 deletions.
diff --git a/docs/content/Label.mdx b/docs/content/Label.mdx
@@ -1,71 +1,97 @@
 ---
-title: Label
+title: Label v2
+componentId: label2
+status: Alpha
+source: https://github.com/primer/react/tree/main/src/Label2
+storybook: '/react/storybook?path=story/labels-label--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
 ---
 
-import {Label} from '@primer/react/deprecated'
+## Examples
 
-## Deprecation
+### Basic
 
-Use the new [Label](/Label) instead.
+```javascript live noinline
+// import {Label} from '@primer/react/drafts'
+const {Label} = drafts // ignore docs silliness; import like that ↑
 
-## Example
+render(<Label>Default</Label>)
+```
 
-```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>
+### Variants
 
-  <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
+// import {Label} from '@primer/react/drafts'
+const {Label} = drafts // ignore docs silliness; import like that ↑
+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
+// import {Label} from '@primer/react/drafts'
+const {Label} = drafts // ignore docs silliness; import like that ↑
+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/Label_deprecated.mdx b/docs/content/Label_deprecated.mdx
@@ -0,0 +1,76 @@
+---
+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
+---
+
+import {Label} from '@primer/react/deprecated'
+
+## Deprecation
+
+Use the new [Label](/Label) instead.
+
+## Example
+
+```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>
+
+  <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