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

@@ -10,7 +10,7 @@ export type LabelProps = {
   variant?: LabelColorOptions
   /** How large the label is rendered */
   size?: LabelSizeKeys
-} & SxProp
+}
 
 export type LabelColorOptions =
   | 'default'
@@ -26,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/package.json

@@ -26,6 +26,7 @@
     "type-check": "tsc --noEmit"
   },
   "devDependencies": {
+    "@babel/preset-react": "^7.27.1",
     "@babel/preset-typescript": "^7.27.1",
     "@primer/react": "^37.31.0",
     "@rollup/plugin-babel": "^6.0.4",

packages/styled-react/rollup.config.js

@@ -14,14 +14,14 @@ function createPackageRegex(name) {
 }
 
 export default defineConfig({
-  input: ['src/index.ts', 'src/experimental.ts', 'src/deprecated.ts'],
+  input: ['src/index.tsx', 'src/experimental.ts', 'src/deprecated.ts'],
   external: dependencies.map(createPackageRegex),
   plugins: [
     typescript({
       tsconfig: 'tsconfig.build.json',
     }),
     babel({
-      presets: ['@babel/preset-typescript'],
+      presets: ['@babel/preset-typescript', '@babel/preset-react'],
       extensions: ['.ts', '.tsx'],
       babelHelpers: 'bundled',
     }),

packages/styled-react/src/index.tsx

@@ -0,0 +1,58 @@
+import {Box, Label as PrimerLabel, type LabelProps as PrimerLabelProps, type SxProp} from '@primer/react'
+import {forwardRef} from 'react'
+import type {
+  BackgroundProps,
+  BorderProps,
+  ColorProps,
+  FlexboxProps,
+  GridProps,
+  LayoutProps,
+  PositionProps,
+  ShadowProps,
+  SpaceProps,
+  TypographyProps,
+} from 'styled-system'
+import type {ForwardRefComponent} from './polymorphic'
+
+type StyledProps = SxProp &
+  SpaceProps &
+  ColorProps &
+  TypographyProps &
+  LayoutProps &
+  FlexboxProps &
+  GridProps &
+  BackgroundProps &
+  BorderProps &
+  PositionProps &
+  ShadowProps
+
+const Label = forwardRef(function Label(props, ref) {
+  // @ts-expect-error there is an issue with polymorphic `as` with this
+  // component
+  return <Box as={PrimerLabel} ref={ref} {...props} />
+}) as ForwardRefComponent<'span', PrimerLabelProps & Omit<StyledProps, keyof PrimerLabelProps>>
+
+export {Label}
+export {
+  ActionList,
+  ActionMenu,
+  Box,
+  type BoxProps,
+  Breadcrumbs,
+  Button,
+  Flash,
+  FormControl,
+  Heading,
+  IconButton,
+  Link,
+  LinkButton,
+  PageLayout,
+  Text,
+  TextInput,
+  Truncate,
+
+  // Utilities for working with the `sx` prop
+  sx,
+  type SxProp,
+  type BetterSystemStyleObject,
+} from '@primer/react'

packages/styled-react/src/polymorphic.ts

@@ -0,0 +1,60 @@
+/**
+ * This file is originally from `@radix-ui/react-polymorphic` before the package
+ * was deprecated. The original source for this lived in the URL below.
+ *
+ * @see https://github.com/radix-ui/primitives/blob/17ffcb7aaa42cbd36b3c210ba86d7d73d218e5be/packages/react/polymorphic/src/polymorphic.ts
+ */
+
+import * as React from 'react'
+
+/* -------------------------------------------------------------------------------------------------
+ * Utility types
+ * -----------------------------------------------------------------------------------------------*/
+type Merge<P1 = {}, P2 = {}> = Omit<P1, keyof P2> & P2
+
+/**
+ * Infers the OwnProps if E is a ForwardRefExoticComponentWithAs
+ */
+type OwnProps<E> = E extends ForwardRefComponent<any, infer P> ? P : {}
+
+/**
+ * Infers the JSX.IntrinsicElement if E is a ForwardRefExoticComponentWithAs
+ */
+type IntrinsicElement<E> = E extends ForwardRefComponent<infer I, any> ? I : never
+
+type ForwardRefExoticComponent<E, OwnProps> = React.ForwardRefExoticComponent<
+  Merge<E extends React.ElementType ? React.ComponentPropsWithRef<E> : never, OwnProps & {as?: E}>
+>
+
+/* -------------------------------------------------------------------------------------------------
+ * ForwardRefComponent
+ * -----------------------------------------------------------------------------------------------*/
+
+interface ForwardRefComponent<
+  IntrinsicElementString,
+  OwnProps = {},
+  /**
+   * Extends original type to ensure built in React types play nice
+   * with polymorphic components still e.g. `React.ElementRef` etc.
+   */
+> extends ForwardRefExoticComponent<IntrinsicElementString, OwnProps> {
+  /**
+   * When `as` prop is passed, use this overload.
+   * Merges original own props (without DOM props) and the inferred props
+   * from `as` element with the own props taking precedence.
+   *
+   * We explicitly avoid `React.ElementType` and manually narrow the prop types
+   * so that events are typed when using JSX.IntrinsicElements.
+   */
+  <As = IntrinsicElementString>(
+    props: As extends ''
+      ? {as: keyof JSX.IntrinsicElements}
+      : As extends React.ComponentType<infer P>
+        ? Merge<P, OwnProps & {as: As}>
+        : As extends keyof JSX.IntrinsicElements
+          ? Merge<JSX.IntrinsicElements[As], OwnProps & {as: As}>
+          : never,
+  ): React.ReactElement | null
+}
+
+export type {ForwardRefComponent, OwnProps, IntrinsicElement, Merge}