feat(Switch): add shorthand sizes (#2027)

digdir · May 16, 2024 · bd5160b · bd5160b
1 parent 9c52938
commit bd5160b
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 14 deletions.
diff --git 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
@@ -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
@@ -33,7 +33,7 @@ export const Switch = forwardRef<HTMLInputElement, SwitchProps>(
     const {
       inputProps,
       descriptionId,
-      size = 'medium',
+      size = 'md',
       readOnly,
     } = useSwitch(props);