cr changes

mondaycom · Jun 9, 2024 · 70e8c2e · 70e8c2e
1 parent 15b2d21
commit 70e8c2e
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 12 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);
@@ -40,12 +40,19 @@
     cursor: not-allowed;
   }
 
+  &.medium {
+    --toggle-width: 41px;
+    --toggle-height: 24px;
+    &::after {
+      --circle-size: 18px;
+    }
+  }
+
   &.small {
-    height: 16px;
-    width: 28px;
+    --toggle-width: 28px;
+    --toggle-height: 16px;
     &::after {
-      width: 12px;
-      height: 12px;
+      --circle-size: 12px;
       top: calc(50% - 6px);
       left: 14px;
     }

diff --git a/packages/core/src/components/Toggle/MockToggle.tsx b/packages/core/src/components/Toggle/MockToggle.tsx
@@ -6,6 +6,7 @@ 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;
@@ -30,11 +31,10 @@ export const MockToggle: FC<MockToggleProps> = ({
   <>
     {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,
-        [styles.small]: size === "small"
+        [styles.disabled]: disabled
       })}
       aria-hidden="true"
       data-testid={getTestId(ComponentDefaultTestId.TOGGLE)}

diff --git a/packages/core/src/components/Toggle/__stories__/Toggle.stories.tsx b/packages/core/src/components/Toggle/__stories__/Toggle.stories.tsx
@@ -53,7 +53,7 @@ export const States: Story = {
 export const Size: Story = {
   render: () => (
     <MultipleStoryElementsWrapper className="monday-storybook-toggle_row">
-      <Toggle />
+      <Toggle size="medium" />
       <Toggle size="small" />
     </MultipleStoryElementsWrapper>
   ),