Remove sx and BoxWithFallback from the Spinner component

.changeset/beige-shrimps-sleep.md

@@ -0,0 +1,5 @@
+---
+'@primer/react': major
+---
+
+Remove sx prop support from the Spinner component.

packages/react/src/Spinner/Spinner.dev.stories.module.css

@@ -0,0 +1,3 @@
+.SpinnerBorder {
+  border: var(--borderWidth-thin) solid var(--borderColor-closed-emphasis);
+}

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

@@ -1,9 +1,10 @@
 import type {Meta} from '@storybook/react-vite'
 import Spinner from './Spinner'
+import classes from './Spinner.dev.stories.module.css'
 
 export default {
   title: 'Components/Spinner/Dev',
   component: Spinner,
 } as Meta<typeof Spinner>
 
-export const Default = () => <Spinner sx={{border: '1px solid red'}} size="small" />
+export const Default = () => <Spinner className={classes.SpinnerBorder} size="small" />

packages/react/src/Spinner/Spinner.docs.json

@@ -45,12 +45,7 @@
     {
       "name": "data-*",
       "type": "string"
-    },
-    {
-      "name": "sx",
-      "type": "SystemStyleObject",
-      "deprecated": true
     }
   ],
   "subcomponents": []
-}
+}

packages/react/src/Spinner/Spinner.tsx

@@ -1,11 +1,9 @@
 import type React from 'react'
-import {type SxProp} from '../sx'
 import {VisuallyHidden} from '../VisuallyHidden'
 import type {HTMLDataAttributes} from '../internal/internal-types'
 import {useId} from '../hooks'
 import classes from './Spinner.module.css'
 import {clsx} from 'clsx'
-import {BoxWithFallback} from '../internal/components/BoxWithFallback'
 
 const sizeMap = {
   small: '16px',
@@ -22,8 +20,7 @@ export type SpinnerProps = {
   'aria-label'?: string
   className?: string
   style?: React.CSSProperties
-} & HTMLDataAttributes &
-  SxProp
+} & HTMLDataAttributes
 
 function Spinner({
   size: sizeKey = 'medium',
@@ -48,7 +45,7 @@ function Spinner({
         aria-hidden
         aria-label={ariaLabel ?? undefined}
         aria-labelledby={hasHiddenLabel ? labelId : undefined}
-        className={className}
+        className={clsx(className, classes.SpinnerAnimation)}
         style={style}
         {...props}
       >
@@ -74,10 +71,6 @@ function Spinner({
   )
 }
 
-function StyledSpinner({className, ...props}: SpinnerProps) {
-  return <BoxWithFallback as={Spinner} className={clsx(className, classes.SpinnerAnimation)} {...props} />
-}
-
-StyledSpinner.displayName = 'Spinner'
+Spinner.displayName = 'Spinner'
 
-export default StyledSpinner
+export default Spinner

packages/styled-react/src/index.tsx

@@ -3,6 +3,8 @@ import {
   Box,
   type BoxProps,
   type SxProp,
+  Spinner as PrimerSpinner,
+  type SpinnerProps as PrimerSpinnerProps,
   StateLabel as PrimerStateLabel,
   type StateLabelProps as PrimerStateLabelProps,
   SubNav as PrimerSubNav,
@@ -41,6 +43,12 @@ type StyledProps = SxProp &
   PositionProps &
   ShadowProps
 
+type SpinnerProps = PrimerSpinnerProps & SxProp
+
+function Spinner(props: SpinnerProps) {
+  return <Box as={PrimerSpinner} {...props} />
+}
+
 type SegmentedControlProps = PropsWithChildren<PrimerSegmentedControlProps> & SxProp
 type SegmentedControlButtonProps = PropsWithChildren<PrimerSegmentedControlButtonProps> & SxProp
 type SegmentedControlIconButtonProps = PropsWithChildren<PrimerSegmentedControlIconButtonProps> & SxProp
@@ -90,7 +98,7 @@ const ToggleSwitch = forwardRef<HTMLButtonElement, ToggleSwitchProps>(function T
   return <Box as={PrimerToggleSwitch} ref={ref} {...props} />
 })
 
-export {SegmentedControl, StateLabel, SubNav, ToggleSwitch}
+export {SegmentedControl, Spinner, StateLabel, SubNav, ToggleSwitch}
 
 export {
   ActionList,
@@ -121,7 +129,6 @@ export {
   RadioGroup,
   RelativeTime,
   Select,
-  Spinner,
   Text,
   Textarea,
   TextInput,