Skip to content

Commit

Permalink
fix(form): MenuItemSwitch spacing styles
Browse files Browse the repository at this point in the history
Closes #1126
  • Loading branch information
mlaursen committed Apr 23, 2021
1 parent 9315eff commit 8ac8299
Show file tree
Hide file tree
Showing 5 changed files with 20 additions and 15 deletions.
2 changes: 1 addition & 1 deletion packages/form/src/menu/MenuItemInputToggle.tsx
Expand Up @@ -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}
Expand Down
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand All @@ -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"
Expand Down Expand Up @@ -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"
Expand Down
Expand Up @@ -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"
Expand All @@ -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"
Expand Down
4 changes: 2 additions & 2 deletions packages/form/src/toggle/SwitchTrack.tsx
Expand Up @@ -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 && (
<>
Expand All @@ -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
Expand Down
5 changes: 5 additions & 0 deletions packages/form/src/toggle/_mixins.scss
Expand Up @@ -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 {
Expand Down

0 comments on commit 8ac8299

Please sign in to comment.