diff --git a/.changeset/good-snakes-fix.md b/.changeset/good-snakes-fix.md new file mode 100644 index 00000000000..a5755fb247e --- /dev/null +++ b/.changeset/good-snakes-fix.md @@ -0,0 +1,5 @@ +--- +'@primer/react': major +--- + +Remove the sx prop from Label diff --git a/packages/react/src/Label/Label.dev.stories.tsx b/packages/react/src/Label/Label.dev.stories.tsx deleted file mode 100644 index 109c06b6d49..00000000000 --- a/packages/react/src/Label/Label.dev.stories.tsx +++ /dev/null @@ -1,20 +0,0 @@ -import type {Meta} from '@storybook/react-vite' -import type {ComponentProps} from '../utils/types' -import Label from './Label' - -export default { - title: 'Components/Label/Dev', - component: Label, -} as Meta> - -export const AccentSx = () => ( - -) - -export const SizeSmallSx = () => ( - -) diff --git a/packages/react/src/Label/Label.stories.tsx b/packages/react/src/Label/Label.stories.tsx index 4e3a04d950b..def99bd16c4 100644 --- a/packages/react/src/Label/Label.stories.tsx +++ b/packages/react/src/Label/Label.stories.tsx @@ -39,12 +39,6 @@ Playground.argTypes = { disable: true, }, }, - sx: { - control: false, - table: { - disable: true, - }, - }, } export const Default = () => diff --git a/packages/react/src/Label/Label.tsx b/packages/react/src/Label/Label.tsx index a35224568b5..640d16e2de0 100644 --- a/packages/react/src/Label/Label.tsx +++ b/packages/react/src/Label/Label.tsx @@ -1,10 +1,8 @@ // TODO: merge https://github.com/primer/react/pull/6631 which removes `Box` usage import {clsx} from 'clsx' -import Box from '../Box' import classes from './Label.module.css' import React from 'react' -import type {BetterSystemStyleObject, SxProp} from '../sx' import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic' export type LabelProps = { @@ -12,7 +10,7 @@ export type LabelProps = { variant?: LabelColorOptions /** How large the label is rendered */ size?: LabelSizeKeys -} & SxProp +} export type LabelColorOptions = | 'default' @@ -28,61 +26,10 @@ export type LabelColorOptions = 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.emphasis', - color: 'done.fg', - }, - sponsors: { - borderColor: 'sponsors.emphasis', - color: 'sponsors.fg', - }, -} - -const Label = React.forwardRef(function Label({as, size = 'small', variant = 'default', className, ...rest}, ref) { - const Component = as || 'span' - if (rest.sx) { - return ( - - ) - } +const Label = React.forwardRef(function Label( + {as: Component = 'span', size = 'small', variant = 'default', className, ...rest}, + ref, +) { return ( ) diff --git a/packages/react/src/Label/index.ts b/packages/react/src/Label/index.ts index 69d089bf334..9a8b11cc67f 100644 --- a/packages/react/src/Label/index.ts +++ b/packages/react/src/Label/index.ts @@ -1,4 +1,3 @@ import Label from './Label' export type {LabelProps, LabelColorOptions} from './Label' -export {variants} from './Label' export default Label diff --git a/packages/styled-react/src/components/Label.tsx b/packages/styled-react/src/components/Label.tsx new file mode 100644 index 00000000000..d840ce19695 --- /dev/null +++ b/packages/styled-react/src/components/Label.tsx @@ -0,0 +1,12 @@ +import {type LabelProps as PrimerLabelProps, Label as PrimerLabel, Box} from '@primer/react' +import {type SxProp} from '../sx' +import {forwardRef} from 'react' +import type {ForwardRefComponent} from '../polymorphic' + +type LabelProps = PrimerLabelProps & SxProp + +const Label = forwardRef(function Label(props, ref) { + return +}) as ForwardRefComponent<'span', LabelProps> + +export {Label, type LabelProps} diff --git a/packages/styled-react/src/index.tsx b/packages/styled-react/src/index.tsx index 63b78f6e54e..fc791bf6de7 100644 --- a/packages/styled-react/src/index.tsx +++ b/packages/styled-react/src/index.tsx @@ -6,7 +6,6 @@ export {Button} from '@primer/react' export {CheckboxGroup} from '@primer/react' export {Details} from '@primer/react' export {IconButton} from '@primer/react' -export {Label} from '@primer/react' export {ProgressBar} from '@primer/react' export {Select} from '@primer/react' export {Text} from '@primer/react' @@ -35,6 +34,7 @@ export {Flash} from './components/Flash' export {FormControl, type FormControlProps} from './components/FormControl' export {Header, type HeaderProps} from './components/Header' export {Heading} from './components/Heading' +export {Label, type LabelProps} from './components/Label' export {Link, type LinkProps} from './components/Link' export {LinkButton, type LinkButtonProps} from './components/LinkButton' export {NavList, type NavListProps} from './components/NavList'