diff --git a/docs/content/Label.mdx b/docs/content/Label.mdx
index 5986a4aba07..5687f1e9cea 100644
--- a/docs/content/Label.mdx
+++ b/docs/content/Label.mdx
@@ -1,58 +1,83 @@
---
-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()
+```
-```jsx live
-<>
-
-
-
-
+### Variants
-
-
-
-
-
-
-
+```javascript live noinline
+// import {Label} from '@primer/react/drafts'
+const {Label} = drafts // ignore docs silliness; import like that ↑
+render(
+ <>
+
+
+
+
+
+
+
+
+
+
+
+)
+```
+
+### Sizes
+
+```javascript live noinline
+// import {Label} from '@primer/react/drafts'
+const {Label} = drafts // ignore docs silliness; import like that ↑
+render(
+ <>
+
+
+
+)
```
## Props
+### Label
+
-
-
-
-
+
+
## Status
@@ -60,12 +85,13 @@ Use the new [Label](/Label) instead.
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+## Props
+
+
+
+
+
+
+
+
+## Status
+
+
diff --git a/docs/content/drafts/Label2.mdx b/docs/content/drafts/Label2.mdx
deleted file mode 100644
index 5687f1e9cea..00000000000
--- a/docs/content/drafts/Label2.mdx
+++ /dev/null
@@ -1,102 +0,0 @@
----
-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.
----
-
-## Examples
-
-### Basic
-
-```javascript live noinline
-// import {Label} from '@primer/react/drafts'
-const {Label} = drafts // ignore docs silliness; import like that ↑
-
-render()
-```
-
-### Variants
-
-```javascript live noinline
-// import {Label} from '@primer/react/drafts'
-const {Label} = drafts // ignore docs silliness; import like that ↑
-render(
- <>
-
-
-
-
-
-
-
-
-
-
-
-)
-```
-
-### Sizes
-
-```javascript live noinline
-// import {Label} from '@primer/react/drafts'
-const {Label} = drafts // ignore docs silliness; import like that ↑
-render(
- <>
-
-
-
-)
-```
-
-## Props
-
-### Label
-
-
-
-
-
-
-## Status
-
-
diff --git a/src/Label.tsx b/src/Label.tsx
index 8f356d1aa61..df48bcd44df 100644
--- a/src/Label.tsx
+++ b/src/Label.tsx
@@ -1,72 +1,100 @@
-import styled, {css} from 'styled-components'
-import {borderColor, BorderColorProps, variant} from 'styled-system'
+import styled from 'styled-components'
+import {variant} from 'styled-system'
+import sx, {SxProp, BetterSystemStyleObject} from './sx'
import {get} from './constants'
-import sx, {SxProp} from './sx'
-import {ComponentProps} from './utils/types'
-const outlineStyles = css`
- margin-top: -1px; // offsets the 1px border
- margin-bottom: -1px; // offsets the 1px border
- color: ${get('colors.fg.muted')};
- border: ${get('borderWidths.1')} solid ${get('colors.border.default')};
- box-shadow: none;
- ${borderColor};
- background-color: transparent;
-`
+export type LabelProps = {
+ /** The color of the label */
+ variant?: LabelColorOptions
+ /** How large the label is rendered */
+ size?: LabelSizeKeys
+} & SxProp
-const sizeVariant = variant({
- variants: {
- small: {
- fontSize: 0,
- lineHeight: '16px',
- padding: '0px 8px'
- },
- medium: {
- fontSize: 0,
- lineHeight: '20px',
- padding: '0 8px'
- },
- large: {
- fontSize: 0,
- lineHeight: '24px',
- padding: '0 12px'
- },
- // corresponds to StateLabel fontSize/lineHeight/padding
- xl: {
- fontSize: 1,
- lineHeight: '16px',
- padding: '8px 12px'
- }
- }
-})
+export type LabelColorOptions =
+ | 'default'
+ | 'primary'
+ | 'secondary'
+ | 'accent'
+ | 'success'
+ | 'attention'
+ | 'severe'
+ | 'danger'
+ | 'done'
+ | 'sponsors'
+
+type LabelSizeKeys = 'small' | 'large'
-const Label = styled.span<
- {
- variant?: 'small' | 'medium' | 'large' | 'xl'
- dropshadow?: boolean
- outline?: boolean
- } & BorderColorProps &
- SxProp
->`
- display: inline-block;
- font-weight: ${get('fontWeights.semibold')};
- color: ${get('colors.fg.onEmphasis')};
- border-radius: ${get('radii.3')};
- background-color: ${get('colors.neutral.emphasis')};
+export const variants: Record = {
+ default: {
+ borderColor: 'border.default'
+ },
+ primary: {
+ borderColor: 'fg.default'
+ },
+ secondary: {
+ borderColor: 'border.muted',
+ color: 'fg.muted'
+ },
+ accent: {
+ borderColor: 'accent.emphasis',
+ color: 'accent.fg'
+ },
+ success: {
+ borderColor: 'success.emphasis',
+ color: 'success.fg'
+ },
+ attention: {
+ borderColor: 'attention.emphasis',
+ color: 'attention.fg'
+ },
+ severe: {
+ borderColor: 'severe.emphasis',
+ color: 'severe.fg'
+ },
+ danger: {
+ borderColor: 'danger.emphasis',
+ color: 'danger.fg'
+ },
+ done: {
+ borderColor: 'done.fg',
+ color: 'done.emphasis'
+ },
+ sponsors: {
+ borderColor: 'sponsors.fg',
+ color: 'sponsors.emphasis'
+ }
+}
- &:hover {
- text-decoration: none;
+const sizes: Record = {
+ small: {
+ height: '20px',
+ padding: '0 7px' // hard-coded to align with Primer ViewCompnents and Primer CSS
+ },
+ large: {
+ height: '24px',
+ padding: '0 10px' // hard-coded to align with Primer ViewCompnents and Primer CSS
}
+}
- ${sizeVariant}
- ${props => (props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '')}
- ${props => (props.outline ? outlineStyles : '')} // must be last to override other values
- ${sx}
+const Label = styled.span`
+ align-items: center;
+ background-color: transparent;
+ border-width: 1px;
+ border-radius: 999px;
+ border-style: solid;
+ display: inline-flex;
+ font-weight: ${get('fontWeights.bold')};
+ font-size: ${get('fontSizes.0')};
+ line-height: 1;
+ white-space: nowrap;
+ ${variant({variants})};
+ ${variant({prop: 'size', variants: sizes})};
+ ${sx};
`
Label.defaultProps = {
- variant: 'medium'
+ size: 'small',
+ variant: 'default'
}
-export type LabelProps = ComponentProps
export default Label
diff --git a/src/Label2.tsx b/src/Label2.tsx
deleted file mode 100644
index 34ea8357750..00000000000
--- a/src/Label2.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import styled from 'styled-components'
-import {variant} from 'styled-system'
-import sx, {SxProp, BetterSystemStyleObject} from './sx'
-import {get} from './constants'
-
-export type LabelProps = {
- /** The color of the label */
- variant?: LabelColorOptions
- /** How large the label is rendered */
- size?: LabelSizeKeys
-} & SxProp
-
-export type LabelColorOptions =
- | 'default'
- | 'primary'
- | 'secondary'
- | 'accent'
- | 'success'
- | 'attention'
- | 'severe'
- | 'danger'
- | 'done'
- | 'sponsors'
-
-type LabelSizeKeys = 'small' | 'large'
-
-export const variants: Record = {
- default: {
- borderColor: 'border.default'
- },
- primary: {
- borderColor: 'fg.default'
- },
- secondary: {
- borderColor: 'border.muted',
- color: 'fg.muted'
- },
- accent: {
- borderColor: 'accent.emphasis',
- color: 'accent.fg'
- },
- success: {
- borderColor: 'success.emphasis',
- color: 'success.fg'
- },
- attention: {
- borderColor: 'attention.emphasis',
- color: 'attention.fg'
- },
- severe: {
- borderColor: 'severe.emphasis',
- color: 'severe.fg'
- },
- danger: {
- borderColor: 'danger.emphasis',
- color: 'danger.fg'
- },
- done: {
- borderColor: 'done.fg',
- color: 'done.emphasis'
- },
- sponsors: {
- borderColor: 'sponsors.fg',
- color: 'sponsors.emphasis'
- }
-}
-
-const sizes: Record = {
- small: {
- height: '20px',
- padding: '0 7px' // hard-coded to align with Primer ViewCompnents and Primer CSS
- },
- large: {
- height: '24px',
- padding: '0 10px' // hard-coded to align with Primer ViewCompnents and Primer CSS
- }
-}
-
-export const Label = styled.span`
- align-items: center;
- background-color: transparent;
- border-width: 1px;
- border-radius: 999px;
- border-style: solid;
- display: inline-flex;
- font-weight: ${get('fontWeights.bold')};
- font-size: ${get('fontSizes.0')};
- line-height: 1;
- white-space: nowrap;
- ${variant({variants})};
- ${variant({prop: 'size', variants: sizes})};
- ${sx};
-`
-
-Label.defaultProps = {
- size: 'small',
- variant: 'default'
-}
diff --git a/src/Label_deprecated.tsx b/src/Label_deprecated.tsx
new file mode 100644
index 00000000000..8f356d1aa61
--- /dev/null
+++ b/src/Label_deprecated.tsx
@@ -0,0 +1,72 @@
+import styled, {css} from 'styled-components'
+import {borderColor, BorderColorProps, variant} from 'styled-system'
+import {get} from './constants'
+import sx, {SxProp} from './sx'
+import {ComponentProps} from './utils/types'
+
+const outlineStyles = css`
+ margin-top: -1px; // offsets the 1px border
+ margin-bottom: -1px; // offsets the 1px border
+ color: ${get('colors.fg.muted')};
+ border: ${get('borderWidths.1')} solid ${get('colors.border.default')};
+ box-shadow: none;
+ ${borderColor};
+ background-color: transparent;
+`
+
+const sizeVariant = variant({
+ variants: {
+ small: {
+ fontSize: 0,
+ lineHeight: '16px',
+ padding: '0px 8px'
+ },
+ medium: {
+ fontSize: 0,
+ lineHeight: '20px',
+ padding: '0 8px'
+ },
+ large: {
+ fontSize: 0,
+ lineHeight: '24px',
+ padding: '0 12px'
+ },
+ // corresponds to StateLabel fontSize/lineHeight/padding
+ xl: {
+ fontSize: 1,
+ lineHeight: '16px',
+ padding: '8px 12px'
+ }
+ }
+})
+
+const Label = styled.span<
+ {
+ variant?: 'small' | 'medium' | 'large' | 'xl'
+ dropshadow?: boolean
+ outline?: boolean
+ } & BorderColorProps &
+ SxProp
+>`
+ display: inline-block;
+ font-weight: ${get('fontWeights.semibold')};
+ color: ${get('colors.fg.onEmphasis')};
+ border-radius: ${get('radii.3')};
+ background-color: ${get('colors.neutral.emphasis')};
+
+ &:hover {
+ text-decoration: none;
+ }
+
+ ${sizeVariant}
+ ${props => (props.dropshadow ? 'box-shadow: inset 0 -1px 0 rgba(27, 31, 35, 0.12)' : '')}
+ ${props => (props.outline ? outlineStyles : '')} // must be last to override other values
+ ${sx}
+`
+
+Label.defaultProps = {
+ variant: 'medium'
+}
+
+export type LabelProps = ComponentProps
+export default Label
diff --git a/src/__tests__/Label.test.tsx b/src/__tests__/Label.test.tsx
index fac7245e851..a987dab727a 100644
--- a/src/__tests__/Label.test.tsx
+++ b/src/__tests__/Label.test.tsx
@@ -1,34 +1,40 @@
import React from 'react'
-import {Label} from '..'
-import {render, behavesAsComponent, checkExports} from '../utils/testing'
-import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {render, cleanup} from '@testing-library/react'
import {axe, toHaveNoViolations} from 'jest-axe'
import 'babel-polyfill'
+import Label, {variants, LabelColorOptions} from '../Label'
+import {renderStyles} from '../utils/testing'
expect.extend(toHaveNoViolations)
describe('Label', () => {
- behavesAsComponent({Component: Label})
-
- checkExports('Label', {
- default: Label
- })
-
- it('renders a ', () => {
- expect(render().type).toEqual('span')
+ it('renders text node child', () => {
+ const container = render()
+ const label = container.baseElement
+ expect(label.textContent).toEqual('Default')
})
+ it('default size is rendered as "small"', () => {
+ const expectedStyles = {
+ height: '20px',
+ padding: '0 7px'
+ }
+ const defaultStyles = renderStyles()
- it('should have no axe violations', async () => {
- const {container} = HTMLRender()
- const results = await axe(container)
- expect(results).toHaveNoViolations()
- cleanup()
+ expect(defaultStyles).toEqual(expect.objectContaining(expectedStyles))
})
+ it('default variant is rendered as "default"', () => {
+ const expectedStyles = {
+ ['border-color']: '#d0d7de'
+ }
+ const defaultStyles = renderStyles()
- it('respects the "outline" prop', () => {
- expect(render()).toMatchSnapshot()
+ expect(defaultStyles).toEqual(expect.objectContaining(expectedStyles))
})
-
- it('respects the "variant" prop', () => {
- expect(render()).toMatchSnapshot()
+ it('should have no axe violations', async () => {
+ for (const variant in variants) {
+ const {container} = render()
+ const results = await axe(container)
+ expect(results).toHaveNoViolations()
+ cleanup()
+ }
})
})
diff --git a/src/__tests__/Label.types.test.tsx b/src/__tests__/Label.types.test.tsx
index 96fe2613bff..d4d50a850e8 100644
--- a/src/__tests__/Label.types.test.tsx
+++ b/src/__tests__/Label.types.test.tsx
@@ -1,5 +1,5 @@
import React from 'react'
-import Label from '../Label'
+import Label from '../Label_deprecated'
export function shouldAcceptCallWithNoProps() {
return
diff --git a/src/__tests__/Label2.test.tsx b/src/__tests__/Label2.test.tsx
deleted file mode 100644
index a0989ab845f..00000000000
--- a/src/__tests__/Label2.test.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import React from 'react'
-import {render, cleanup} from '@testing-library/react'
-import {axe, toHaveNoViolations} from 'jest-axe'
-import 'babel-polyfill'
-import {Label, variants, LabelColorOptions} from '../Label2'
-import {renderStyles} from '../utils/testing'
-expect.extend(toHaveNoViolations)
-
-describe('Label2', () => {
- it('renders text node child', () => {
- const container = render()
- const label = container.baseElement
- expect(label.textContent).toEqual('Default')
- })
- it('default size is rendered as "small"', () => {
- const expectedStyles = {
- height: '20px',
- padding: '0 7px'
- }
- const defaultStyles = renderStyles()
-
- expect(defaultStyles).toEqual(expect.objectContaining(expectedStyles))
- })
- it('default variant is rendered as "default"', () => {
- const expectedStyles = {
- ['border-color']: '#d0d7de'
- }
- const defaultStyles = renderStyles()
-
- expect(defaultStyles).toEqual(expect.objectContaining(expectedStyles))
- })
- it('should have no axe violations', async () => {
- for (const variant in variants) {
- const {container} = render()
- const results = await axe(container)
- expect(results).toHaveNoViolations()
- cleanup()
- }
- })
-})
diff --git a/src/__tests__/Label_deprecated.test.tsx b/src/__tests__/Label_deprecated.test.tsx
new file mode 100644
index 00000000000..0a9c6854701
--- /dev/null
+++ b/src/__tests__/Label_deprecated.test.tsx
@@ -0,0 +1,34 @@
+import React from 'react'
+import Label from '../Label_deprecated'
+import {render, behavesAsComponent, checkExports} from '../utils/testing'
+import {render as HTMLRender, cleanup} from '@testing-library/react'
+import {axe, toHaveNoViolations} from 'jest-axe'
+import 'babel-polyfill'
+expect.extend(toHaveNoViolations)
+
+describe('Label_deprecated', () => {
+ behavesAsComponent({Component: Label})
+
+ checkExports('Label', {
+ default: Label
+ })
+
+ it('renders a ', () => {
+ expect(render().type).toEqual('span')
+ })
+
+ it('should have no axe violations', async () => {
+ const {container} = HTMLRender()
+ const results = await axe(container)
+ expect(results).toHaveNoViolations()
+ cleanup()
+ })
+
+ it('respects the "outline" prop', () => {
+ expect(render()).toMatchSnapshot()
+ })
+
+ it('respects the "variant" prop', () => {
+ expect(render()).toMatchSnapshot()
+ })
+})
diff --git a/src/deprecated/index.ts b/src/deprecated/index.ts
index 44e3ca68cfc..a1ff9cbc703 100644
--- a/src/deprecated/index.ts
+++ b/src/deprecated/index.ts
@@ -27,6 +27,6 @@ export type {
} from '../Dropdown'
export {default as FormGroup} from '../FormGroup'
export type {FormGroupProps, FormGroupLabelProps} from '../FormGroup'
-export {default as Label} from '../Label'
-export type {LabelProps} from '../Label'
+export {default as Label} from '../Label_deprecated'
+export type {LabelProps} from '../Label_deprecated'
export {default as SelectMenu} from '../SelectMenu'
diff --git a/src/drafts/index.ts b/src/drafts/index.ts
index efa9ff196c5..954c0c9a29d 100644
--- a/src/drafts/index.ts
+++ b/src/drafts/index.ts
@@ -10,4 +10,4 @@ export * from '../ActionList2'
export * from '../Button2'
export * from '../ActionMenu2'
export * from '../DropdownMenu2'
-export * from '../Label2'
+export * from '../PageLayout'
diff --git a/src/index.ts b/src/index.ts
index aadf7669b23..837966ffbc6 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -84,6 +84,8 @@ export type {HeaderProps, HeaderItemProps, HeaderLinkProps} from './Header'
export {default as Heading} from './Heading'
export type {HeadingProps} from './Heading'
export {default as InputField} from './InputField'
+export {default as Label} from './Label'
+export type {LabelProps, LabelColorOptions} from './Label'
export {default as LabelGroup} from './LabelGroup'
export type {LabelGroupProps} from './LabelGroup'
export {default as Link} from './Link'
diff --git a/src/stories/Label2.stories.tsx b/src/stories/Label.stories.tsx
similarity index 94%
rename from src/stories/Label2.stories.tsx
rename to src/stories/Label.stories.tsx
index 74fa851a372..8b2a5d27959 100644
--- a/src/stories/Label2.stories.tsx
+++ b/src/stories/Label.stories.tsx
@@ -2,12 +2,11 @@ import React from 'react'
import {Meta} from '@storybook/react'
import {BaseStyles, ThemeProvider} from '..'
import {ComponentProps} from '../utils/types'
-import {Label} from '../Label2'
+import Label from '../Label'
type Args = ComponentProps
export default {
- // TODO: update story nesting
title: 'Labels/Label',
component: Label,
argTypes: {