feat(toggle): add small variant (#2167)

mondaycom · Jun 10, 2024 · 6491d27 · 6491d27
1 parent 58a057b
commit 6491d27
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 17 deletions.
diff --git a/packages/core/src/components/Toggle/MockToggle.module.scss b/packages/core/src/components/Toggle/MockToggle.module.scss
@@ -5,17 +5,17 @@
   transition: background-color var(--motion-productive-medium) var(--motion-timing-transition);
   margin: 0 var(--spacing-small);
   position: relative;
-  height: 24px;
-  width: 41px;
+  height: var(--toggle-height);
+  width: var(--toggle-width);
   cursor: pointer;
   border-radius: 100px !important;
 
   &::after {
     background-color: var(--primary-background-color);
     content: " ";
     position: absolute;
-    width: 18px;
-    height: 18px;
+    width: var(--circle-size);
+    height: var(--circle-size);
     border-radius: 50%;
     top: calc(50% - 18px / 2);
     transition: left var(--motion-productive-medium) var(--motion-timing-transition);
@@ -39,4 +39,27 @@
     opacity: var(--disabled-component-opacity);
     cursor: not-allowed;
   }
+
+  &.medium {
+    --toggle-width: 41px;
+    --toggle-height: 24px;
+    &::after {
+      --circle-size: 18px;
+    }
+  }
+
+  &.small {
+    --toggle-width: 28px;
+    --toggle-height: 16px;
+    &::after {
+      --circle-size: 12px;
+      top: calc(50% - 6px);
+      left: 14px;
+    }
+    &.notSelected {
+      &::after {
+        left: 2px;
+      }
+    }
+  }
 }
diff --git a/packages/core/src/components/Toggle/MockToggle.tsx b/packages/core/src/components/Toggle/MockToggle.tsx
@@ -5,6 +5,8 @@ import VibeComponentProps from "../../types/VibeComponentProps";
 import styles from "./MockToggle.module.scss";
 import { getTestId } from "../../tests/test-ids-utils";
 import { ComponentDefaultTestId } from "../../tests/constants";
+import { Sizes } from "./Toggle.types";
+import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 
 export interface MockToggleProps extends VibeComponentProps {
   areLabelsHidden?: boolean;
@@ -13,6 +15,7 @@ export interface MockToggleProps extends VibeComponentProps {
   onOverrideText?: string;
   selectedClassName?: string;
   disabled: boolean;
+  size?: Sizes;
 }
 
 export const MockToggle: FC<MockToggleProps> = ({
@@ -22,12 +25,13 @@ export const MockToggle: FC<MockToggleProps> = ({
   onOverrideText,
   className,
   selectedClassName,
-  disabled
+  disabled,
+  size = "medium"
 }) => (
   <>
     {areLabelsHidden ? null : <ToggleText disabled={disabled}>{offOverrideText}</ToggleText>}
     <div
-      className={cx(styles.toggle, className, {
+      className={cx(styles.toggle, getStyle(styles, size), className, {
         [cx(styles.selected, selectedClassName)]: checked,
         [styles.notSelected]: !checked,
         [styles.disabled]: disabled

diff --git a/packages/core/src/components/Toggle/Toggle.tsx b/packages/core/src/components/Toggle/Toggle.tsx
@@ -7,6 +7,7 @@ import { backwardCompatibilityForProperties } from "../../helpers/backwardCompat
 import { VibeComponent, VibeComponentProps } from "../../types";
 import styles from "./Toggle.module.scss";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
+import { Sizes } from "./Toggle.types";
 
 export interface ToggleProps extends VibeComponentProps {
   /**
@@ -32,6 +33,7 @@ export interface ToggleProps extends VibeComponentProps {
   offOverrideText?: string;
   ariaLabel?: string;
   ariaControls?: string;
+  size?: Sizes;
 }
 
 const Toggle: VibeComponent<ToggleProps, HTMLInputElement> = forwardRef(
@@ -55,6 +57,7 @@ const Toggle: VibeComponent<ToggleProps, HTMLInputElement> = forwardRef(
       areLabelsHidden = false,
       onOverrideText = "On",
       offOverrideText = "Off",
+      size = "medium",
       "data-testid": dataTestId
     },
     ref
@@ -87,6 +90,7 @@ const Toggle: VibeComponent<ToggleProps, HTMLInputElement> = forwardRef(
           disabled={overrideDisabled}
           className={overrideClassName}
           selectedClassName={toggleSelectedClassName}
+          size={size}
         />
       </Switch>
     );

diff --git a/packages/core/src/components/Toggle/Toggle.types.ts b/packages/core/src/components/Toggle/Toggle.types.ts
@@ -0,0 +1 @@
+export type Sizes = "small" | "medium";
diff --git a/packages/core/src/components/Toggle/__stories__/Toggle.mdx b/packages/core/src/components/Toggle/__stories__/Toggle.mdx
@@ -55,6 +55,12 @@ Allow users to turn an single option on or off. They are usually used to activat
 
 <Canvas of={ToggleStories.States} />
 
+### Size
+
+Toggle appear in 2 sizes: small and medium.
+
+<Canvas of={ToggleStories.Size} />
+
 ### Disabled
 
 <Canvas of={ToggleStories.Disabled} />

diff --git a/packages/core/src/components/Toggle/__stories__/Toggle.stories.scss b/packages/core/src/components/Toggle/__stories__/Toggle.stories.scss
@@ -10,6 +10,6 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    column-gap: 25px;
+    column-gap: 30px;
   }
 }
diff --git a/packages/core/src/components/Toggle/__stories__/Toggle.stories.tsx b/packages/core/src/components/Toggle/__stories__/Toggle.stories.tsx
@@ -50,6 +50,22 @@ export const States: Story = {
   }
 };
 
+export const Size: Story = {
+  render: () => (
+    <MultipleStoryElementsWrapper className="monday-storybook-toggle_row">
+      <Toggle size="medium" />
+      <Toggle size="small" />
+    </MultipleStoryElementsWrapper>
+  ),
+  parameters: {
+    docs: {
+      liveEdit: {
+        scope: { MultipleStoryElementsWrapper }
+      }
+    }
+  }
+};
+
 export const Disabled: Story = {
   render: () => (
     <MultipleStoryElementsWrapper className="monday-storybook-toggle_column">

diff --git a/packages/core/src/components/Toggle/__tests__/__snapshots__/Toggle.snapshot.test.js.snap b/packages/core/src/components/Toggle/__tests__/__snapshots__/Toggle.snapshot.test.js.snap
@@ -22,7 +22,7 @@ exports[`Toggle renders correctly renders correctly when disabled 1`] = `
   </span>
   <div
     aria-hidden="true"
-    className="toggle selected disabled"
+    className="toggle medium selected disabled"
     data-testid="toggle"
   />
   <span
@@ -50,7 +50,7 @@ exports[`Toggle renders correctly renders correctly when labels are hidden 1`] =
   />
   <div
     aria-hidden="true"
-    className="toggle selected"
+    className="toggle medium selected"
     data-testid="toggle"
   />
 </label>
@@ -78,7 +78,7 @@ exports[`Toggle renders correctly renders correctly when selection defined by de
   </span>
   <div
     aria-hidden="true"
-    className="toggle dummy-class-name notSelected"
+    className="toggle medium dummy-class-name notSelected"
     data-testid="toggle"
   />
   <span
@@ -112,7 +112,7 @@ exports[`Toggle renders correctly renders correctly when selection defined by de
   </span>
   <div
     aria-hidden="true"
-    className="toggle dummy-class-name selected"
+    className="toggle medium dummy-class-name selected"
     data-testid="toggle"
   />
   <span
@@ -146,7 +146,7 @@ exports[`Toggle renders correctly renders correctly when selection defined by is
   </span>
   <div
     aria-hidden="true"
-    className="toggle dummy-class-name notSelected"
+    className="toggle medium dummy-class-name notSelected"
     data-testid="toggle"
   />
   <span
@@ -180,7 +180,7 @@ exports[`Toggle renders correctly renders correctly when selection defined by is
   </span>
   <div
     aria-hidden="true"
-    className="toggle dummy-class-name selected"
+    className="toggle medium dummy-class-name selected"
     data-testid="toggle"
   />
   <span
@@ -215,7 +215,7 @@ exports[`Toggle renders correctly renders correctly with aria controls 1`] = `
   </span>
   <div
     aria-hidden="true"
-    className="toggle selected"
+    className="toggle medium selected"
     data-testid="toggle"
   />
   <span
@@ -249,7 +249,7 @@ exports[`Toggle renders correctly renders correctly with empty props 1`] = `
   </span>
   <div
     aria-hidden="true"
-    className="toggle selected"
+    className="toggle medium selected"
     data-testid="toggle"
   />
   <span
@@ -283,7 +283,7 @@ exports[`Toggle renders correctly renders correctly with not default offOverride
   </span>
   <div
     aria-hidden="true"
-    className="toggle selected"
+    className="toggle medium selected"
     data-testid="toggle"
   />
   <span
@@ -317,7 +317,7 @@ exports[`Toggle renders correctly renders correctly with not default onOverrideT
   </span>
   <div
     aria-hidden="true"
-    className="toggle selected"
+    className="toggle medium selected"
     data-testid="toggle"
   />
   <span