diff --git a/packages/css/switch.css b/packages/css/switch.css index 051f0ef359..76675310d1 100644 --- a/packages/css/switch.css +++ b/packages/css/switch.css @@ -101,47 +101,47 @@ margin-left: var(--fds-spacing-1); } - .fds-switch--small, - .fds-switch--small .fds-switch__label { + .fds-switch--sm, + .fds-switch--sm .fds-switch__label { min-height: var(--fds-sizing-6); } - .fds-switch--medium, - .fds-switch--medium .fds-switch__label { + .fds-switch--md, + .fds-switch--md .fds-switch__label { min-height: var(--fds-sizing-7); } - .fds-switch--large, - .fds-switch--large .fds-switch__label { + .fds-switch--lg, + .fds-switch--lg .fds-switch__label { min-height: var(--fds-sizing-8); } - .fds-switch--small { + .fds-switch--sm { --fds-switch-height: var(--fds-sizing-6); --fds-switch-width: var(--fds-sizing-11); } - .fds-switch--small .fds-switch__input { + .fds-switch--sm .fds-switch__input { left: -0.25rem; top: -0.25rem; } - .fds-switch--medium { + .fds-switch--md { --fds-switch-height: var(--fds-sizing-7); --fds-switch-width: var(--fds-sizing-13); } - .fds-switch--medium .fds-switch__input { + .fds-switch--md .fds-switch__input { left: 0; top: 0; } - .fds-switch--large { + .fds-switch--lg { --fds-switch-height: var(--fds-sizing-8); --fds-switch-width: var(--fds-sizing-15); } - .fds-switch--large .fds-switch__input { + .fds-switch--lg .fds-switch__input { left: 0; top: 0.25rem; } diff --git a/packages/react/src/components/form/Switch/Switch.stories.tsx b/packages/react/src/components/form/Switch/Switch.stories.tsx index 54015977f3..331d80a676 100644 --- a/packages/react/src/components/form/Switch/Switch.stories.tsx +++ b/packages/react/src/components/form/Switch/Switch.stories.tsx @@ -16,7 +16,7 @@ export const Preview: Story = { children: 'Switch', disabled: false, readOnly: false, - size: 'medium', + size: 'md', position: 'left', description: '', }, diff --git a/packages/react/src/components/form/Switch/Switch.tsx b/packages/react/src/components/form/Switch/Switch.tsx index 2d86916866..04e976193c 100644 --- a/packages/react/src/components/form/Switch/Switch.tsx +++ b/packages/react/src/components/form/Switch/Switch.tsx @@ -33,7 +33,7 @@ export const Switch = forwardRef( const { inputProps, descriptionId, - size = 'medium', + size = 'md', readOnly, } = useSwitch(props);