Patch @primer/styled-react@1.0.0 rc.6

.changeset/pre.json

@@ -74,6 +74,7 @@
     "pretty-emus-cover",
     "pretty-women-sing",
     "proud-chairs-study",
+    "purple-waves-pay",
     "rich-walls-fold",
     "rotten-carpets-raise",
     "rude-cycles-scream",

.changeset/purple-waves-pay.md

@@ -0,0 +1,5 @@
+---
+"@primer/styled-react": patch
+---
+
+chore: use styled wrapper instead of Box for Label, Token and Spinner

packages/styled-react/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @primer/styled-react
 
+## 1.0.0-rc.6
+
+### Patch Changes
+
+- [`013c200`](https://github.com/primer/react/commit/013c200dd9969743c5e824f635964802ccfdcbfa) Thanks [@francinelucca](https://github.com/francinelucca)! - chore: use styled wrapper instead of Box for Label, Token and Spinner
+
 ## 1.0.0-rc.5
 
 ### Minor Changes

packages/styled-react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/styled-react",
-  "version": "1.0.0-rc.5",
+  "version": "1.0.0-rc.6",
   "type": "module",
   "exports": {
     ".": {

packages/styled-react/src/components/Label.tsx

@@ -1,13 +1,16 @@
-import {type LabelProps as PrimerLabelProps, Label as PrimerLabel, Box} from '@primer/react'
-import {type SxProp} from '../sx'
+import {type LabelProps as PrimerLabelProps, Label as PrimerLabel} from '@primer/react'
+import {sx, type SxProp} from '../sx'
 import {forwardRef} from 'react'
 import type {ForwardRefComponent} from '../polymorphic'
+import styled from 'styled-components'
 
 type LabelProps = PrimerLabelProps & SxProp & {as?: React.ElementType}
 
-const StyledLabel = forwardRef(function Label(props, ref) {
-  return <Box as={PrimerLabel} ref={ref} {...props} />
-}) as ForwardRefComponent<'span', LabelProps>
+const StyledLabel: ForwardRefComponent<'span', LabelProps> = styled(PrimerLabel).withConfig({
+  shouldForwardProp: prop => (prop as keyof LabelProps) !== 'sx',
+})<LabelProps>`
+  ${sx}
+`
 
 const Label = forwardRef<HTMLElement, LabelProps>(({as, ...props}, ref) => {
   return <StyledLabel {...props} {...(as ? {forwardedAs: as} : {})} ref={ref} />

packages/styled-react/src/components/Spinner.tsx

@@ -1,9 +1,11 @@
-import {Box, Spinner as PrimerSpinner, type SpinnerProps as PrimerSpinnerProps} from '@primer/react'
-import React from 'react'
-import type {SxProp} from '../sx'
+import {Spinner as PrimerSpinner, type SpinnerProps as PrimerSpinnerProps} from '@primer/react'
+import {sx, type SxProp} from '../sx'
+import styled from 'styled-components'
 
 export type SpinnerProps = PrimerSpinnerProps & SxProp
 
-export function Spinner(props: SpinnerProps) {
-  return <Box as={PrimerSpinner} {...props} />
-}
+export const Spinner = styled(PrimerSpinner).withConfig({
+  shouldForwardProp: prop => (prop as keyof SpinnerProps) !== 'sx',
+})<SpinnerProps>`
+  ${sx}
+`

packages/styled-react/src/components/Token.tsx

@@ -1,33 +1,20 @@
-import React from 'react'
-import {
-  type TokenProps as PrimerTokenProps,
-  type SxProp,
-  Token as PrimerToken,
-  useTheme,
-  theme as defaultTheme,
-} from '@primer/react'
-import css from '@styled-system/css'
+import React, {forwardRef} from 'react'
+import {type TokenProps as PrimerTokenProps, Token as PrimerToken} from '@primer/react'
+import {sx, type SxProp} from '../sx'
 import type {ForwardRefComponent} from '../polymorphic'
 import type {PropsWithChildren} from 'react'
+import styled from 'styled-components'
 
 type TokenProps = PropsWithChildren<PrimerTokenProps> & SxProp
 
-const Token: ForwardRefComponent<'a' | 'button' | 'span', TokenProps> = React.forwardRef<HTMLElement, TokenProps>(
-  ({sx: sxProp, style, ...rest}, ref) => {
-    const contextTheme = useTheme()
-    const theme = contextTheme.theme || defaultTheme
+const StyledToken: ForwardRefComponent<'a' | 'button' | 'span', TokenProps> = styled(PrimerToken).withConfig({
+  shouldForwardProp: prop => (prop as keyof TokenProps) !== 'sx',
+})<TokenProps>`
+  ${sx}
+`
 
-    // If no sx prop is provided, just return PrimerToken directly
-    if (!sxProp) {
-      return <PrimerToken {...rest} style={style} ref={ref} />
-    }
-
-    // Convert sx to CSS styles using the theme context
-    const sxStyles = css(sxProp)(theme)
-    const mergedStyle = {...sxStyles, ...style}
-
-    return <PrimerToken {...rest} style={mergedStyle} ref={ref} />
-  },
-) as ForwardRefComponent<'a' | 'button' | 'span', TokenProps>
+const Token = forwardRef<HTMLElement, TokenProps>(({as, ...props}, ref) => {
+  return <StyledToken {...props} {...(as ? {forwardedAs: as} : {})} ref={ref} />
+}) as ForwardRefComponent<'a' | 'button' | 'span', TokenProps>
 
 export {Token, type TokenProps}