bugfix(Spinner): Spinner component size get's large when passing sx and size props (#5236)

* Bug fix styled spinner

* Also pass along className

* Create forty-rats-jog.md

* Update .changeset/forty-rats-jog.md

Co-authored-by: Josh Black <[email protected]>

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

Co-authored-by: Josh Black <[email protected]>

---------

Co-authored-by: Josh Black <[email protected]>

Author: jonrohan

.changeset/forty-rats-jog.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Update Spinner component to correctly use the `size` prop when both `sx` and `size` are provided

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

@@ -7,4 +7,4 @@ export default {
   component: Spinner,
 } as Meta<typeof Spinner>
 
-export const Default = () => <Spinner sx={{border: '1px solid red'}} />
+export const Default = () => <Spinner sx={{border: '1px solid red'}} size="small" />

packages/react/src/Spinner/Spinner.tsx

@@ -6,7 +6,7 @@ import type {HTMLDataAttributes} from '../internal/internal-types'
 import {useId} from '../hooks'
 import {useFeatureFlag} from '../FeatureFlags'
 import classes from './Spinner.module.css'
-import Box from '../Box'
+import {clsx} from 'clsx'
 
 const sizeMap = {
   small: '16px',
@@ -87,17 +87,21 @@ const StyledComponentSpinner = styled(Spinner)`
   ${sx}
 `
 
-function StyledSpinner({sx, ...props}: SpinnerProps) {
+const StyledBaseSpinner = styled.div`
+  ${sx}
+`
+
+function StyledSpinner({sx, className, ...props}: SpinnerProps) {
   const enabled = useFeatureFlag('primer_react_css_modules_team')
   if (enabled) {
     if (sx) {
-      return <Box sx={sx} as={Spinner} className={classes.SpinnerAnimation} {...props} />
+      return <StyledBaseSpinner sx={sx} as={Spinner} className={clsx(className, classes.SpinnerAnimation)} {...props} />
     }
 
-    return <Spinner className={classes.SpinnerAnimation} {...props} />
+    return <Spinner className={clsx(className, classes.SpinnerAnimation)} {...props} />
   }
 
-  return <StyledComponentSpinner sx={sx} {...props} />
+  return <StyledComponentSpinner sx={sx} className={className} {...props} />
 }
 
 StyledSpinner.displayName = 'Spinner'