From f95d2ef679df4d79ad1f935dfc5cbe027f046790 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 5 Nov 2024 20:14:55 +0000
Subject: [PATCH 1/5] Bug fix styled spinner

---
 packages/react/src/Spinner/Spinner.dev.stories.tsx | 2 +-
 packages/react/src/Spinner/Spinner.tsx             | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/Spinner/Spinner.dev.stories.tsx b/packages/react/src/Spinner/Spinner.dev.stories.tsx
index 4faf30a1d02..a3550d94ef9 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..3fa8ba7f0d4 100644
--- a/packages/react/src/Spinner/Spinner.tsx
+++ b/packages/react/src/Spinner/Spinner.tsx
@@ -6,7 +6,6 @@ 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'
 
 const sizeMap = {
   small: '16px',
@@ -87,11 +86,15 @@ const StyledComponentSpinner = styled(Spinner)`
   ${sx}
 `
 
+const StyledBaseSpinner = styled.div`
+  ${sx}
+`
+
 function StyledSpinner({sx, ...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={classes.SpinnerAnimation} {...props} />
     }
 
     return <Spinner className={classes.SpinnerAnimation} {...props} />

From 8c6ef49e5cd42150f3ec82043b01f50759d678b2 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 5 Nov 2024 21:15:39 +0000
Subject: [PATCH 2/5] Also pass along className

---
 packages/react/src/Spinner/Spinner.tsx | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/react/src/Spinner/Spinner.tsx b/packages/react/src/Spinner/Spinner.tsx
index 3fa8ba7f0d4..6d022133aff 100644
--- a/packages/react/src/Spinner/Spinner.tsx
+++ b/packages/react/src/Spinner/Spinner.tsx
@@ -6,6 +6,7 @@ import type {HTMLDataAttributes} from '../internal/internal-types'
 import {useId} from '../hooks'
 import {useFeatureFlag} from '../FeatureFlags'
 import classes from './Spinner.module.css'
+import {clsx} from 'clsx'
 
 const sizeMap = {
   small: '16px',
@@ -90,17 +91,17 @@ const StyledBaseSpinner = styled.div`
   ${sx}
 `
 
-function StyledSpinner({sx, ...props}: SpinnerProps) {
+function StyledSpinner({sx, className, ...props}: SpinnerProps) {
   const enabled = useFeatureFlag('primer_react_css_modules_team')
   if (enabled) {
     if (sx) {
-      return <StyledBaseSpinner 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'

From 7a9075a1c3cb1d7cf563dbc5bc8c097522f65087 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 5 Nov 2024 13:23:57 -0800
Subject: [PATCH 3/5] Create forty-rats-jog.md

---
 .changeset/forty-rats-jog.md | 5 +++++
 1 file changed, 5 insertions(+)
 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..20697744031
--- /dev/null
+++ b/.changeset/forty-rats-jog.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Spinner component size get's large when passing sx and size props

From 27631c910633529cd23c4863ad767b818a264012 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 5 Nov 2024 13:30:28 -0800
Subject: [PATCH 4/5] Update .changeset/forty-rats-jog.md

Co-authored-by: Josh Black <joshblack@github.com>
---
 .changeset/forty-rats-jog.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.changeset/forty-rats-jog.md b/.changeset/forty-rats-jog.md
index 20697744031..68a7dea56f7 100644
--- a/.changeset/forty-rats-jog.md
+++ b/.changeset/forty-rats-jog.md
@@ -2,4 +2,4 @@
 "@primer/react": patch
 ---
 
-Spinner component size get's large when passing sx and size props
+Update Spinner component to correctly use the `size` prop when both `sx` and `size` are provided

From 293ca5026d72e4a89a5c9ea9ccee5ebb241c31c0 Mon Sep 17 00:00:00 2001
From: Jon Rohan <yes@jonrohan.codes>
Date: Tue, 5 Nov 2024 13:30:37 -0800
Subject: [PATCH 5/5] Update packages/react/src/Spinner/Spinner.dev.stories.tsx

Co-authored-by: Josh Black <joshblack@github.com>
---
 packages/react/src/Spinner/Spinner.dev.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/Spinner/Spinner.dev.stories.tsx b/packages/react/src/Spinner/Spinner.dev.stories.tsx
index a3550d94ef9..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'}} size={'small'} />
+export const Default = () => <Spinner sx={{border: '1px solid red'}} size="small" />