Remove sx prop support from the Token component

packages/react/src/Token/Token.dev.stories.tsx

@@ -6,4 +6,4 @@ export default {
   component: Token,
 } as Meta<typeof Token>
 
-export const DevDefault = () => <Token text="token" sx={{color: 'red'}} style={{border: '2px solid blue'}} />
+export const DevDefault = () => <Token text="token" style={{color: 'red', border: '2px solid blue'}} />

packages/react/src/Token/Token.docs.json

@@ -80,11 +80,6 @@
       "name": "size",
       "type": "'small' | 'medium' | 'large' | 'xlarge'",
       "description": "Which size the token will be rendered at"
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": [
@@ -131,11 +126,6 @@
           "name": "size",
           "type": "'small' | 'medium' | 'large' | 'xlarge'",
           "description": "Which size the token will be rendered at"
-        },
-        {
-          "name": "sx",
-          "type": "SystemStyleObject",
-          "deprecated": true
         }
       ]
     }

packages/react/src/Token/Token.tsx

@@ -1,7 +1,6 @@
 import type {MouseEventHandler} from 'react'
 import type React from 'react'
 import {forwardRef} from 'react'
-import {type SxProp} from '../sx'
 import type {TokenBaseProps} from './TokenBase'
 import TokenBase, {defaultTokenSize, isTokenInteractive} from './TokenBase'
 import RemoveTokenButton from './_RemoveTokenButton'
@@ -14,7 +13,7 @@ import {clsx} from 'clsx'
 
 // Omitting onResize and onResizeCapture because seems like React 18 types includes these menthod in the expansion but React 17 doesn't.
 // TODO: This is a temporary solution until we figure out why these methods are causing type errors.
-export interface TokenProps extends TokenBaseProps, SxProp {
+export interface TokenProps extends TokenBaseProps {
   /**
    * A component that renders before the token text
    */

packages/react/src/Token/TokenBase.tsx

@@ -1,10 +1,8 @@
 import type {ComponentProps, KeyboardEvent} from 'react'
 import React from 'react'
 import {clsx} from 'clsx'
-import type {SxProp} from '../sx'
 import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
 import classes from './TokenBase.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 export type TokenSizeKeys = 'small' | 'medium' | 'large' | 'xlarge'
 
@@ -65,12 +63,20 @@ export const isTokenInteractive = ({
 
 const TokenBase = React.forwardRef<HTMLButtonElement | HTMLAnchorElement | HTMLSpanElement | undefined, TokenBaseProps>(
   (
-    {onRemove, onKeyDown, id, className, size = defaultTokenSize, isSelected: _isSelected, as = 'span', ...rest},
+    {
+      onRemove,
+      onKeyDown,
+      id,
+      className,
+      size = defaultTokenSize,
+      isSelected: _isSelected,
+      as: Component = 'span',
+      ...rest
+    },
     forwardedRef,
   ) => {
     return (
-      <BoxWithFallback
-        as={as}
+      <Component
         onKeyDown={(event: KeyboardEvent<HTMLSpanElement & HTMLAnchorElement & HTMLButtonElement>) => {
           onKeyDown && onKeyDown(event)
 
@@ -79,14 +85,27 @@ const TokenBase = React.forwardRef<HTMLButtonElement | HTMLAnchorElement | HTMLS
           }
         }}
         className={clsx(classes.TokenBase, className)}
-        data-cursor-is-interactive={isTokenInteractive({as, ...rest})}
+        data-cursor-is-interactive={isTokenInteractive({
+          as: Component,
+          onClick: rest.onClick,
+          onFocus: rest.onFocus,
+          tabIndex: rest.tabIndex,
+          disabled: rest.disabled,
+        })}
         data-size={size}
         id={id?.toString()}
-        {...rest}
-        ref={forwardedRef}
+        {...(Component === 'button'
+          ? (rest as React.ButtonHTMLAttributes<HTMLButtonElement>)
+          : Component === 'a'
+            ? (rest as React.AnchorHTMLAttributes<HTMLAnchorElement>)
+            : (rest as React.HTMLAttributes<HTMLSpanElement>))}
+        // TypeScript cannot resolve polymorphic ref types at compile time
+        // This assertion is safe because the ref will match the actual rendered element
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        ref={forwardedRef as any}
       />
     )
   },
-) as PolymorphicForwardRefComponent<'span' | 'a' | 'button', TokenBaseProps & SxProp>
+) as PolymorphicForwardRefComponent<'span' | 'a' | 'button', TokenBaseProps>
 
 export default TokenBase

packages/react/src/Token/_RemoveTokenButton.tsx

@@ -1,14 +1,12 @@
 import type React from 'react'
 import {XIcon} from '@primer/octicons-react'
 import {clsx} from 'clsx'
-import {type SxProp} from '../sx'
 import type {TokenSizeKeys} from './TokenBase'
 import {tokenSizes, defaultTokenSize} from './TokenBase'
 
 import classes from './_RemoveTokenButton.module.css'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
-interface TokenButtonProps extends SxProp {
+interface TokenButtonProps {
   borderOffset?: number
   size?: TokenSizeKeys
   isParentInteractive?: boolean
@@ -29,20 +27,37 @@ const RemoveTokenButton = ({
 }: React.PropsWithChildren<RemoveTokenButtonProps & {as?: React.ElementType}>) => {
   // eslint-disable-next-line react-compiler/react-compiler
   delete rest.children
+  if (isParentInteractive) {
+    return (
+      <span
+        {...rest}
+        tabIndex={-1}
+        aria-label={ariaLabel}
+        data-size={size}
+        className={clsx(classes.TokenButton, className)}
+        style={{
+          transform: `translate(${borderOffset}px, -${borderOffset}px)`,
+        }}
+      >
+        <XIcon size={getTokenButtonIconSize(size)} />
+      </span>
+    )
+  }
+
   return (
-    <BoxWithFallback
-      as={isParentInteractive ? 'span' : 'button'}
-      tabIndex={isParentInteractive ? -1 : undefined}
-      aria-label={!isParentInteractive ? 'Remove token' : ariaLabel}
+    <button
+      {...rest}
+      aria-label={'Remove token'}
       data-size={size}
       className={clsx(classes.TokenButton, className)}
       style={{
         transform: `translate(${borderOffset}px, -${borderOffset}px)`,
       }}
-      {...rest}
+      ref={rest.ref as React.Ref<HTMLButtonElement>}
+      type="button"
     >
       <XIcon size={getTokenButtonIconSize(size)} />
-    </BoxWithFallback>
+    </button>
   )
 }
 

packages/react/src/Token/_TokenTextContainer.tsx

@@ -2,13 +2,12 @@ import type {TokenBaseProps} from './TokenBase'
 import type React from 'react'
 import classes from './_TokenTextContainer.module.css'
 import {clsx} from 'clsx'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
-const TokenTextContainer = ({children, ...props}: React.PropsWithChildren<Partial<TokenBaseProps>>) => {
+const TokenTextContainer = ({children, id, ...props}: React.PropsWithChildren<Partial<TokenBaseProps>>) => {
   return (
-    <BoxWithFallback as="span" className={clsx(classes.TokenTextContainer)} {...props}>
+    <span className={clsx(classes.TokenTextContainer)} id={id?.toString()} {...props}>
       {children}
-    </BoxWithFallback>
+    </span>
   )
 }
 

packages/react/src/Token/__tests__/Token.types.test.tsx

@@ -70,17 +70,6 @@ export function allowsOnResizeProps() {
   return <Token text="Token test" onResize={() => {}} onResizeCapture={() => {}} />
 }
 
-export function allowsSxProp() {
-  return (
-    <Token
-      text="Token test"
-      sx={{
-        backgroundColor: 'canvas.default',
-      }}
-    />
-  )
-}
-
 export function hasReasonableEventsForTargets() {
   const handleButtonClick: React.MouseEventHandler<HTMLButtonElement> = _event => {}
   const handleAnchorClick: React.MouseEventHandler<HTMLAnchorElement> = _event => {}