feat: remove sx prop from Label

.changeset/good-snakes-fix.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove the sx prop from Label

packages/react/src/Label/Label.stories.tsx

@@ -39,12 +39,6 @@ Playground.argTypes = {
       disable: true,
     },
   },
-  sx: {
-    control: false,
-    table: {
-      disable: true,
-    },
-  },
 }
 
 export const Default = () => <Label>Default</Label>

packages/react/src/Label/Label.tsx

@@ -1,18 +1,16 @@
 // 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 = {
   /** The color of the label */
   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<LabelColorOptions, BetterSystemStyleObject> = {
-  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 (
-      <Box
-        as={Component}
-        className={clsx(className, classes.Label)}
-        data-size={size}
-        data-variant={variant}
-        ref={ref}
-        {...rest}
-      />
-    )
-  }
+const Label = React.forwardRef(function Label(
+  {as: Component = 'span', size = 'small', variant = 'default', className, ...rest},
+  ref,
+) {
   return (
     <Component className={clsx(className, classes.Label)} data-size={size} data-variant={variant} ref={ref} {...rest} />
   )

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

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 <Box as={PrimerLabel} ref={ref} {...props} />
+}) as ForwardRefComponent<'span', LabelProps>
+
+export {Label, type LabelProps}

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'