From 2e5c601b8793c2f15604258b4f66371ea791cac7 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Wed, 6 Nov 2024 11:38:35 -0800
Subject: [PATCH] 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 <joshblack@github.com>

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

Co-authored-by: Josh Black <joshblack@github.com>

---------

Co-authored-by: Josh Black <joshblack@github.com>
---
 .changeset/forty-rats-jog.md                       |  5 +++++
 packages/react/src/Spinner/Spinner.dev.stories.tsx |  2 +-
 packages/react/src/Spinner/Spinner.tsx             | 14 +++++++++-----
 3 files changed, 15 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/forty-rats-jog.md

diff --git a/.changeset/forty-rats-jog.md b/.changeset/forty-rats-jog.md
new file mode 100644
index 00000000000..68a7dea56f7
--- /dev/null
+++ b/.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
diff --git a/packages/react/src/Spinner/Spinner.dev.stories.tsx b/packages/react/src/Spinner/Spinner.dev.stories.tsx
index 4faf30a1d02..04761c7d9e2 100644
--- a/packages/react/src/Spinner/Spinner.dev.stories.tsx
+++ b/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" />
diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx
index 6292234b6fe..6d022133aff 100644
--- a/packages/react/src/Spinner/Spinner.tsx
+++ b/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'