feat: adding size property to the Switch component

project44 · Jul 1, 2024 · 65e0439 · 65e0439
1 parent 5eccf54
commit 65e0439
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 6 deletions.
diff --git a/.changeset/poor-singers-dress.md b/.changeset/poor-singers-dress.md
@@ -0,0 +1,6 @@
+---
+'website': minor
+'@project44-manifest/react': minor
+---
+
+switch component size property
diff --git a/apps/website/docs/inputs/switch.mdx b/apps/website/docs/inputs/switch.mdx
@@ -21,6 +21,16 @@ Pass in a `string` as a child to render a label for the switch.
 <Switch>Label</Switch>
 ```
 
+## Size
+
+### Small
+
+Set the component size to `small`
+
+```jsx live
+<Switch size="small">Label</Switch>
+```
+
 ### Controlled
 
 A switch's state can be controlled by a parent React component by setting the `isSelected` prop and

diff --git a/packages/react/src/components/Switch/Switch.styles.ts b/packages/react/src/components/Switch/Switch.styles.ts
@@ -18,21 +18,19 @@ export const useStyles = css({
     color: '$palette-white',
     cursor: 'pointer',
     display: 'inline-flex',
-    height: pxToRem(24),
     margin: 0,
     padding: 0,
     position: 'relative',
-    width: pxToRem(44),
+    transition: 'background 200ms cubic-bezier(0.4, 0.14, 0.3, 1) 0ms',
   },
 
   '.manifest-switch__indicator': {
     backgroundColor: '$palette-white',
     borderRadius: '$full',
     display: 'block',
-    size: pxToRem(18),
     transform: 'translateX(3px)',
-    transition: '$transform',
     willChange: 'transform',
+    transition: 'transform 200ms cubic-bezier(0.4, 0.14, 0.3, 1) 0ms',
   },
 
   '.manifest-switch__input': {
@@ -52,6 +50,26 @@ export const useStyles = css({
   },
 
   variants: {
+    size: {
+      medium: {
+        '.manifest-switch__control': {
+          height: pxToRem(24),
+          width: pxToRem(44),
+        },
+        '.manifest-switch__indicator': {
+          size: pxToRem(18),
+        },
+      },
+      small: {
+        '.manifest-switch__control': {
+          height: pxToRem(16),
+          width: pxToRem(30),
+        },
+        '.manifest-switch__indicator': {
+          size: pxToRem(12),
+        },
+      },
+    },
     isChecked: {
       true: {
         $$switchBackgroundColor: '$colors$primary-default',
@@ -113,5 +131,18 @@ export const useStyles = css({
         $$switchBackgroundColor: '$colors$primary-active',
       },
     },
+    {
+      isChecked: true,
+      size: 'small',
+      css: {
+        '.manifest-switch__indicator': {
+          transform: 'translateX(15px)',
+        },
+      },
+    },
   ],
+
+  defaultVariants: {
+    size: 'medium',
+  },
 });
diff --git a/packages/react/src/components/Switch/Switch.tsx b/packages/react/src/components/Switch/Switch.tsx
@@ -12,8 +12,18 @@ import { Typography } from '../Typography';
 import { useStyles } from './Switch.styles';
 
 export type SwitchElement = 'label';
-export type SwitchOptions<T extends As = SwitchElement> = AriaSwitchProps & Options<T> & StyleProps;
 export type SwitchProps<T extends As = SwitchElement> = Props<SwitchOptions<T>>;
+export interface SwitchOptions<T extends As = SwitchElement>
+  extends AriaSwitchProps,
+    Options<T>,
+    StyleProps {
+  /**
+   * The size of the component
+   *
+   * @default medium
+   */
+  size?: 'medium' | 'small';
+}
 
 export const Switch = createComponent<SwitchOptions>((props, forwardedRef) => {
   const {
@@ -23,6 +33,7 @@ export const Switch = createComponent<SwitchOptions>((props, forwardedRef) => {
     className: classNameProp,
     css,
     isDisabled,
+    size = 'medium',
   } = props;
 
   const inputRef = React.useRef<HTMLInputElement>(null);
@@ -38,6 +49,7 @@ export const Switch = createComponent<SwitchOptions>((props, forwardedRef) => {
 
   const { className } = useStyles({
     css,
+    size,
     isChecked,
     isDisabled,
     isFocusVisible,
@@ -49,6 +61,7 @@ export const Switch = createComponent<SwitchOptions>((props, forwardedRef) => {
     'manifest-switch': true,
     'manifest-switch--checked': isChecked,
     'manifest-switch--disabled': isDisabled,
+    [`manifest-switch--${size}`]: size,
   });
 
   return (
@@ -64,7 +77,10 @@ export const Switch = createComponent<SwitchOptions>((props, forwardedRef) => {
       </div>
 
       {children && (
-        <Typography className="manifest-switch__text" variant="subtext">
+        <Typography
+          className="manifest-switch__text"
+          variant={size === 'small' ? 'caption' : 'subtext'}
+        >
           {children}
         </Typography>
       )}

diff --git a/packages/react/src/components/Switch/story/Switch.stories.tsx b/packages/react/src/components/Switch/story/Switch.stories.tsx
@@ -15,6 +15,13 @@ Default.args = {
   children: 'Switch',
 };
 
+export const Small = Template.bind({});
+
+Small.args = {
+  children: 'Switch',
+  size: 'small',
+};
+
 export const Disabled = Template.bind({});
 
 Disabled.args = {