diff --git a/packages/react/src/components/Button/Button.stories.tsx b/packages/react/src/components/Button/Button.stories.tsx index 73defda807..3522f3e590 100644 --- 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 = () => ( Laster... @@ -328,7 +328,7 @@ export const Lasting: StoryFn = () => ( Laster... @@ -339,7 +339,7 @@ export const Lasting: StoryFn = () => ( Laster... diff --git a/packages/react/src/components/Spinner/Spinner.stories.tsx b/packages/react/src/components/Spinner/Spinner.stories.tsx index f888a62bc0..5e73477285 100644 --- 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) => ; Preview.args = { title: 'Henter kaffi', - size: 'medium', + size: 'md', variant: 'default', }; @@ -38,12 +38,12 @@ export const Variants: Story = () => (
(
@@ -64,32 +64,32 @@ export const Sizes: Story = () => ( ); diff --git a/packages/react/src/components/Spinner/Spinner.tsx b/packages/react/src/components/Spinner/Spinner.tsx index 52042c52b7..1d95190083 100644 --- a/packages/react/src/components/Spinner/Spinner.tsx +++ b/packages/react/src/components/Spinner/Spinner.tsx @@ -2,21 +2,37 @@ 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]: 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, 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'>; @@ -24,12 +40,19 @@ export type SpinnerProps = { /** 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( 'fds-spinner-rotate-animation', ); diff --git a/packages/react/src/components/form/Combobox/Combobox.tsx b/packages/react/src/components/form/Combobox/Combobox.tsx index caea3c1674..463054e4fb 100644 --- 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( {loadingLabel}