feat(clerk-js): Added new size variant for Spinner

clerk · Oct 9, 2023 · 1dc8454 · 1dc8454
1 parent 1f884f3
commit 1dc8454
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 6 deletions.
diff --git a/packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx b/packages/clerk-js/src/ui/common/InfiniteListSpinner.tsx
@@ -22,7 +22,7 @@ export const InfiniteListSpinner = forwardRef<HTMLDivElement>((_, ref) => {
         }}
       >
         <Spinner
-          size='md'
+          size='sm'
           colorScheme='primary'
         />
       </Box>

diff --git a/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx b/packages/clerk-js/src/ui/components/OrganizationList/shared.tsx
@@ -83,7 +83,7 @@ export const PreviewListSpinner = forwardRef<HTMLDivElement>((_, ref) => {
         }}
       >
         <Spinner
-          size='md'
+          size='sm'
           colorScheme='primary'
         />
       </Box>

diff --git a/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx b/packages/clerk-js/src/ui/components/OrganizationProfile/DomainList.tsx
@@ -144,7 +144,7 @@ export const DomainList = (props: DomainListProps) => {
             }}
           >
             <Spinner
-              size='md'
+              size='sm'
               colorScheme='primary'
             />
           </Box>

diff --git a/packages/clerk-js/src/ui/primitives/Spinner.tsx b/packages/clerk-js/src/ui/primitives/Spinner.tsx
@@ -37,8 +37,9 @@ const { applyVariants, filterProps } = createVariants(theme => {
         md: { [thickness]: theme.sizes.$1 },
       },
       size: {
-        sm: { [size]: theme.sizes.$3 },
-        md: { [size]: theme.sizes.$4 },
+        xs: { [size]: theme.sizes.$3 },
+        sm: { [size]: theme.sizes.$4 },
+        md: { [size]: theme.sizes.$5 },
         lg: { [size]: theme.sizes.$6 },
         xl: { [size]: theme.sizes.$8 },
       },
@@ -50,7 +51,7 @@ const { applyVariants, filterProps } = createVariants(theme => {
     defaultVariants: {
       speed: 'normal',
       thickness: 'sm',
-      size: 'md',
+      size: 'sm',
     },
   };
 });