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 -export const Default = () => +export const Default = () => 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 + return } - return + return } - return + return } StyledSpinner.displayName = 'Spinner'