feat(Spinner): add shorthand sizes (#2000)

Co-authored-by: Michael Marszalek <[email protected]>
digdir · May 16, 2024 · b18eb98 · b18eb98
1 parent 919c43c
commit b18eb98
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 24 deletions.
diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/Button/Button.stories.tsx
@@ -317,7 +317,7 @@ export const Lasting: StoryFn<typeof Button> = () => (
       <Spinner
         variant='interaction'
         title='loading'
-        size='small'
+        size='sm'
       />
       Laster...
     </Button>
@@ -328,7 +328,7 @@ export const Lasting: StoryFn<typeof Button> = () => (
       <Spinner
         variant='interaction'
         title='loading'
-        size='small'
+        size='sm'
       />
       Laster...
     </Button>
@@ -339,7 +339,7 @@ export const Lasting: StoryFn<typeof Button> = () => (
       <Spinner
         variant='interaction'
         title='loading'
-        size='small'
+        size='sm'
       />
       Laster...
     </Button>

diff --git a/packages/react/src/components/Spinner/Spinner.stories.tsx b/packages/react/src/components/Spinner/Spinner.stories.tsx
@@ -29,7 +29,7 @@ export const Preview: Story = (args) => <Spinner {...args} />;
 
 Preview.args = {
   title: 'Henter kaffi',
-  size: 'medium',
+  size: 'md',
   variant: 'default',
 };
 
@@ -38,12 +38,12 @@ export const Variants: Story = () => (
     <Spinner
       title='Henter kaffi'
       variant='default'
-      size='xlarge'
+      size='xl'
     />
     <Spinner
       title='Henter kaffi'
       variant='interaction'
-      size='xlarge'
+      size='xl'
     />
     <div
       style={{
@@ -53,7 +53,7 @@ export const Variants: Story = () => (
       <Spinner
         title='Henter kaffi'
         variant='inverted'
-        size='xlarge'
+        size='xl'
       />
     </div>
   </>
@@ -64,32 +64,32 @@ export const Sizes: Story = () => (
     <Spinner
       title='Henter kaffi'
       variant='default'
-      size='xxsmall'
+      size='2xs'
     />
     <Spinner
       title='Henter kaffi'
       variant='default'
-      size='xsmall'
+      size='xs'
     />
     <Spinner
       title='Henter kaffi'
       variant='default'
-      size='small'
+      size='sm'
     />
     <Spinner
       title='Henter kaffi'
       variant='default'
-      size='medium'
+      size='md'
     />
     <Spinner
       title='Henter kaffi'
       variant='default'
-      size='large'
+      size='lg'
     />
     <Spinner
       title='Henter kaffi'
       variant='default'
-      size='xlarge'
+      size='xl'
     />
   </>
 );
diff --git a/packages/react/src/components/Spinner/Spinner.tsx b/packages/react/src/components/Spinner/Spinner.tsx
@@ -2,34 +2,57 @@ import type * as React from 'react';
 import cl from 'clsx/lite';
 
 import { useSynchronizedAnimation } from '../../hooks';
+import { getSize } from '../../utilities/getSize';
 
-const sizeMap: { [key in NonNullable<SpinnerProps['size']>]: number } = {
-  xxsmall: 13,
-  xsmall: 20,
-  small: 27,
-  medium: 40,
-  large: 56,
-  xlarge: 79,
+type OldSpinnerSizes =
+  | 'xxsmall'
+  | 'xsmall'
+  | 'small'
+  | 'medium'
+  | 'large'
+  | 'xlarge';
+
+const sizeMap: {
+  [key in Exclude<NonNullable<SpinnerProps['size']>, OldSpinnerSizes>]: number;
+} = {
+  '2xs': 13,
+  xs: 20,
+  sm: 27,
+  md: 40,
+  lg: 56,
+  xl: 79,
 };
 
 export type SpinnerProps = {
   /** Spinner title  */
   title: string;
-  /** Spinner size  */
-  size?: 'xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  /**
+   * Spinner size
+   *
+   * @default md
+   * @note `xxsmall`, `xsmall`, `small`, `medium`, `large`, `xlarge` is deprecated
+   */
+  size?: '2xs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | OldSpinnerSizes;
   /** Spinner appearance  */
   variant?: 'default' | 'interaction' | 'inverted';
 } & React.ComponentPropsWithoutRef<'svg'>;
 
 /**  Spinner component used for indicating busy or indeterminate loading */
 export const Spinner = ({
   title,
-  size = 'medium',
   variant = 'default',
   className,
   style,
   ...rest
 }: SpinnerProps): JSX.Element => {
+  const size = getSize(rest.size || 'md') as
+    | '2xs'
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl';
+
   const svgRef = useSynchronizedAnimation<SVGSVGElement>(
     'fds-spinner-rotate-animation',
   );

diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx
@@ -449,7 +449,7 @@ export const ComboboxComponent = forwardRef<HTMLInputElement, ComboboxProps>(
                   <ComboboxCustom className={'fds-combobox__loading'}>
                     <Spinner
                       title='Laster'
-                      size='small'
+                      size='sm'
                     />
                     {loadingLabel}
                   </ComboboxCustom>