diff --git a/.changeset/heavy-points-marry.md b/.changeset/heavy-points-marry.md new file mode 100644 index 00000000000..179ade21518 --- /dev/null +++ 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. + + + + + + + + + +
Before After
+ +```jsx +import {Label} from "@primer/react" + + + +``` + + + +```jsx +import {Label} from "@primer/react" + + + +``` + +
diff --git a/docs/content/Label.mdx b/docs/content/Label.mdx index 37ccd68e25c..1a28230a651 100644 --- a/docs/content/Label.mdx +++ b/docs/content/Label.mdx @@ -1,52 +1,76 @@ --- 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 -<> - - - - +### Basic - - - - - - - +```javascript live noinline +render() +``` + +### Variants + +```javascript live noinline +render( + <> + + + + + + + + + + + +) +``` + +### Sizes + +```javascript live noinline +render( + <> + + + +) ``` ## Props +### Label + - - - - + + ## Status @@ -54,12 +78,13 @@ componentId: label + + + + + + + + + + + + +``` + +## 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/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index a7e0219852e..30143970b9c 100644 --- 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 diff --git a/src/Label.tsx b/src/Label.tsx index 8f356d1aa61..7309a6d5e74 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 ViewComponents and Primer CSS + }, + large: { + height: '24px', + padding: '0 10px' // hard-coded to align with Primer ViewComponents 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 a90e6f74d46..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 ViewComponents and Primer CSS - }, - large: { - height: '24px', - padding: '0 10px' // hard-coded to align with Primer ViewComponents 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/__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(