fix(form): MenuItemSwitch spacing styles

Closes #1126
mlaursen · Apr 23, 2021 · 8ac8299 · 8ac8299
1 parent 9315eff
commit 8ac8299
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 15 deletions.
diff --git a/packages/form/src/menu/MenuItemInputToggle.tsx b/packages/form/src/menu/MenuItemInputToggle.tsx
@@ -196,7 +196,7 @@ export const MenuItemInputToggle = forwardRef<
         onCheckedChange(!checked, event);
       }}
       ref={ref}
-      className={cn(styles(), className)}
+      className={cn(styles({ switch: type === "switch" }), className)}
       tabIndex={tabIndex}
       leftAddon={leftAddon}
       leftAddonType={leftAddonType}

diff --git a/packages/form/src/menu/__tests__/__snapshots__/MenuItemInputToggle.tsx.snap b/packages/form/src/menu/__tests__/__snapshots__/MenuItemInputToggle.tsx.snap
@@ -93,13 +93,13 @@ exports[`MenuItemInputToggle should render correctly 3`] = `
 exports[`MenuItemInputToggle should render correctly 4`] = `
 <li
   aria-checked="false"
-  class="rmd-list-item rmd-list-item--medium rmd-list-item--clickable rmd-input-toggle-menu-item"
+  class="rmd-list-item rmd-list-item--medium rmd-list-item--clickable rmd-input-toggle-menu-item rmd-input-toggle-menu-item--switch"
   id="menu-id-4"
   role="menuitemcheckbox"
   tabindex="-1"
 >
   <span
-    class="rmd-switch"
+    class="rmd-switch rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before"
   >
     <span
       class="rmd-switch__ball"
@@ -206,13 +206,13 @@ exports[`MenuItemInputToggle should render correctly 7`] = `
 exports[`MenuItemInputToggle should render correctly 8`] = `
 <li
   aria-checked="false"
-  class="rmd-list-item rmd-list-item--medium rmd-list-item--clickable rmd-input-toggle-menu-item"
+  class="rmd-list-item rmd-list-item--medium rmd-list-item--clickable rmd-input-toggle-menu-item rmd-input-toggle-menu-item--switch"
   id="menu-id-4"
   role="menuitemcheckbox"
   tabindex="-1"
 >
   <span
-    class="rmd-switch"
+    class="rmd-switch rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before"
   >
     <span
       class="rmd-switch__ball"
@@ -319,7 +319,7 @@ exports[`MenuItemInputToggle should render correctly 11`] = `
 exports[`MenuItemInputToggle should render correctly 12`] = `
 <li
   aria-checked="false"
-  class="rmd-list-item rmd-list-item--medium rmd-list-item--clickable rmd-input-toggle-menu-item"
+  class="rmd-list-item rmd-list-item--medium rmd-list-item--clickable rmd-input-toggle-menu-item rmd-input-toggle-menu-item--switch"
   id="menu-id-4"
   role="menuitemcheckbox"
   tabindex="-1"
@@ -330,7 +330,7 @@ exports[`MenuItemInputToggle should render correctly 12`] = `
     Switch
   </span>
   <span
-    class="rmd-switch"
+    class="rmd-switch rmd-icon--after rmd-list-item__addon"
   >
     <span
       class="rmd-switch__ball"
@@ -453,13 +453,13 @@ exports[`MenuItemInputToggle should render correctly 15`] = `
 exports[`MenuItemInputToggle should render correctly 16`] = `
 <li
   aria-checked="false"
-  class="rmd-list-item rmd-list-item--extra-large rmd-list-item--clickable rmd-input-toggle-menu-item"
+  class="rmd-list-item rmd-list-item--extra-large rmd-list-item--clickable rmd-input-toggle-menu-item rmd-input-toggle-menu-item--switch"
   id="menu-id-4"
   role="menuitemcheckbox"
   tabindex="-1"
 >
   <span
-    class="rmd-switch"
+    class="rmd-switch rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before"
   >
     <span
       class="rmd-switch__ball"

diff --git a/packages/form/src/menu/__tests__/__snapshots__/MenuItemSwitch.tsx.snap b/packages/form/src/menu/__tests__/__snapshots__/MenuItemSwitch.tsx.snap
@@ -3,13 +3,13 @@
 exports[`MenuItemSwitch should update the state and close the menu once clicked 1`] = `
 <li
   aria-checked="false"
-  class="rmd-list-item rmd-list-item--medium rmd-list-item--clickable rmd-input-toggle-menu-item"
+  class="rmd-list-item rmd-list-item--medium rmd-list-item--clickable rmd-input-toggle-menu-item rmd-input-toggle-menu-item--switch"
   id="menu-id-1"
   role="menuitemcheckbox"
   tabindex="-1"
 >
   <span
-    class="rmd-switch"
+    class="rmd-switch rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before"
   >
     <span
       class="rmd-switch__ball"
@@ -26,13 +26,13 @@ exports[`MenuItemSwitch should update the state and close the menu once clicked
 exports[`MenuItemSwitch should update the state and close the menu once clicked 2`] = `
 <li
   aria-checked="true"
-  class="rmd-list-item rmd-list-item--medium rmd-list-item--clickable rmd-input-toggle-menu-item"
+  class="rmd-list-item rmd-list-item--medium rmd-list-item--clickable rmd-input-toggle-menu-item rmd-input-toggle-menu-item--switch"
   id="menu-id-1"
   role="menuitemcheckbox"
   tabindex="-1"
 >
   <span
-    class="rmd-switch"
+    class="rmd-switch rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before"
   >
     <span
       class="rmd-switch__ball rmd-switch__ball--checked"

diff --git a/packages/form/src/toggle/SwitchTrack.tsx b/packages/form/src/toggle/SwitchTrack.tsx
@@ -66,7 +66,7 @@ export const SwitchTrack = forwardRef<HTMLInputElement, SwitchTrackProps>(
     return (
       <span
         {...containerProps}
-        className={cn(styles(), containerProps?.className)}
+        className={cn(styles(), className, containerProps?.className)}
       >
         {id && (
           <>
@@ -75,7 +75,7 @@ export const SwitchTrack = forwardRef<HTMLInputElement, SwitchTrackProps>(
               id={id}
               ref={ref}
               type="checkbox"
-              className={cn(styles("input"), className)}
+              className={cn(styles("input"))}
               disabled={disabled}
             />
             <label

diff --git a/packages/form/src/toggle/_mixins.scss b/packages/form/src/toggle/_mixins.scss
@@ -370,6 +370,11 @@
   .rmd-input-toggle-menu-item {
     // shrink the checkbox/radio icon size to just be an icon
     @include rmd-button-theme-update-var(icon-size, rmd-icon-theme-var(size));
+
+    &--switch {
+      // this makes the spacing correct between the switch and the text
+      @include rmd-icon-theme-update-var(size, $rmd-switch-track-width);
+    }
   }
 
   .rmd-switch-container {