fix(form): MenuItemCheckbox added missing indeterminate state

Closes #1186
mlaursen · Jul 3, 2021 · aa2c552 · aa2c552
1 parent fc4dcd9
commit aa2c552
Show file tree

Hide file tree

Showing 8 changed files with 54 additions and 23 deletions.
diff --git a/packages/form/src/menu/MenuItemCheckbox.tsx b/packages/form/src/menu/MenuItemCheckbox.tsx
@@ -1,12 +1,16 @@
 import React, { forwardRef } from "react";
 import { useIcon } from "@react-md/icon";
+
+import { IndeterminateCheckboxProps } from "../toggle/Checkbox";
 import {
   BaseMenuItemInputToggleProps,
   MenuItemInputToggle,
 } from "./MenuItemInputToggle";
 
 /** @remarks \@since 2.8.0 */
-export type MenuItemCheckboxProps = BaseMenuItemInputToggleProps;
+export interface MenuItemCheckboxProps
+  extends BaseMenuItemInputToggleProps,
+    IndeterminateCheckboxProps {}
 
 /**
  * This is a simple wrapper for the {@link MenuItemInputToggle} component to

diff --git a/packages/form/src/menu/MenuItemInputToggle.tsx b/packages/form/src/menu/MenuItemInputToggle.tsx
@@ -13,6 +13,8 @@ import {
   SimpleListItemProps,
 } from "@react-md/list";
 import { bem } from "@react-md/utils";
+
+import { IndeterminateCheckboxProps } from "../toggle/Checkbox";
 import { InputToggleIcon } from "../toggle/InputToggleIcon";
 import { SwitchTrack } from "../toggle/SwitchTrack";
 
@@ -114,6 +116,13 @@ export interface MenuItemInputToggleProps extends BaseMenuItemInputToggleProps {
   type: "checkbox" | "radio" | "switch";
 }
 
+/** @remarks \@since 2.8.5 */
+export type StrictMenuItemInputToggleProps = BaseMenuItemInputToggleProps &
+  (
+    | ({ type: "checkbox" } & IndeterminateCheckboxProps)
+    | { type: "radio" | "switch"; indeterminate?: never }
+  );
+
 /**
  * This is a low-level component that should probably not be used externally and
  * instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should
@@ -126,7 +135,7 @@ export interface MenuItemInputToggleProps extends BaseMenuItemInputToggleProps {
  */
 export const MenuItemInputToggle = forwardRef<
   HTMLLIElement,
-  MenuItemInputToggleProps
+  StrictMenuItemInputToggleProps
 >(function MenuItemInputToggle(
   {
     children,
@@ -142,6 +151,7 @@ export const MenuItemInputToggle = forwardRef<
     onCheckedChange,
     disabled = false,
     className,
+    indeterminate = false,
     ...props
   },
   ref
@@ -157,6 +167,7 @@ export const MenuItemInputToggle = forwardRef<
           disabled={disabled}
           overlay
           checked={checked}
+          indeterminate={indeterminate}
         >
           {icon}
         </InputToggleIcon>

diff --git a/packages/form/src/menu/__tests__/__snapshots__/MenuItemCheckbox.tsx.snap b/packages/form/src/menu/__tests__/__snapshots__/MenuItemCheckbox.tsx.snap
@@ -9,7 +9,7 @@ exports[`MenuItemCheckbox should update the state and close the menu once clicke
   tabindex="-1"
 >
   <span
-    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
+    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
   >
     <span
       class="rmd-toggle__icon rmd-toggle__icon--overlay"
@@ -39,7 +39,7 @@ exports[`MenuItemCheckbox should update the state and close the menu once clicke
   tabindex="-1"
 >
   <span
-    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
+    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
   >
     <span
       class="rmd-toggle__icon rmd-toggle__icon--overlay rmd-toggle__icon--checked"

diff --git a/packages/form/src/menu/__tests__/__snapshots__/MenuItemInputToggle.tsx.snap b/packages/form/src/menu/__tests__/__snapshots__/MenuItemInputToggle.tsx.snap
@@ -9,7 +9,7 @@ exports[`MenuItemInputToggle should render correctly 1`] = `
   tabindex="-1"
 >
   <span
-    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
+    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
   >
     <span
       class="rmd-toggle__icon rmd-toggle__icon--overlay"
@@ -39,7 +39,7 @@ exports[`MenuItemInputToggle should render correctly 2`] = `
   tabindex="-1"
 >
   <span
-    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
+    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
   >
     <span
       class="rmd-toggle__icon rmd-toggle__icon--circle rmd-toggle__icon--overlay rmd-toggle__icon--checked"
@@ -69,7 +69,7 @@ exports[`MenuItemInputToggle should render correctly 3`] = `
   tabindex="-1"
 >
   <span
-    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
+    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
   >
     <span
       class="rmd-toggle__icon rmd-toggle__icon--circle rmd-toggle__icon--overlay"
@@ -122,7 +122,7 @@ exports[`MenuItemInputToggle should render correctly 5`] = `
   tabindex="-1"
 >
   <span
-    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
+    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
   >
     <span
       class="rmd-toggle__icon rmd-toggle__icon--overlay rmd-toggle__icon--checked"
@@ -152,7 +152,7 @@ exports[`MenuItemInputToggle should render correctly 6`] = `
   tabindex="-1"
 >
   <span
-    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
+    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
   >
     <span
       class="rmd-toggle__icon rmd-toggle__icon--circle rmd-toggle__icon--overlay rmd-toggle__icon--checked"
@@ -182,7 +182,7 @@ exports[`MenuItemInputToggle should render correctly 7`] = `
   tabindex="-1"
 >
   <span
-    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
+    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
   >
     <span
       class="rmd-toggle__icon rmd-toggle__icon--circle rmd-toggle__icon--overlay"
@@ -240,7 +240,7 @@ exports[`MenuItemInputToggle should render correctly 9`] = `
     Checkbox
   </span>
   <span
-    class="rmd-icon--after rmd-list-item__addon rmd-toggle"
+    class="rmd-icon--after rmd-list-item__addon rmd-toggle rmd-input-toggle-menu-item__toggle"
   >
     <span
       class="rmd-toggle__icon rmd-toggle__icon--overlay rmd-toggle__icon--checked"
@@ -270,7 +270,7 @@ exports[`MenuItemInputToggle should render correctly 10`] = `
     Radio 1
   </span>
   <span
-    class="rmd-icon--after rmd-list-item__addon rmd-toggle"
+    class="rmd-icon--after rmd-list-item__addon rmd-toggle rmd-input-toggle-menu-item__toggle"
   >
     <span
       class="rmd-toggle__icon rmd-toggle__icon--circle rmd-toggle__icon--overlay rmd-toggle__icon--checked"
@@ -300,7 +300,7 @@ exports[`MenuItemInputToggle should render correctly 11`] = `
     Radio 2
   </span>
   <span
-    class="rmd-icon--after rmd-list-item__addon rmd-toggle"
+    class="rmd-icon--after rmd-list-item__addon rmd-toggle rmd-input-toggle-menu-item__toggle"
   >
     <span
       class="rmd-toggle__icon rmd-toggle__icon--circle rmd-toggle__icon--overlay"
@@ -348,7 +348,7 @@ exports[`MenuItemInputToggle should render correctly 13`] = `
   tabindex="-1"
 >
   <span
-    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
+    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
   >
     <span
       class="rmd-toggle__icon rmd-toggle__icon--overlay rmd-toggle__icon--checked"
@@ -385,7 +385,7 @@ exports[`MenuItemInputToggle should render correctly 14`] = `
   tabindex="-1"
 >
   <span
-    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
+    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
   >
     <span
       class="rmd-toggle__icon rmd-toggle__icon--circle rmd-toggle__icon--overlay rmd-toggle__icon--checked"
@@ -422,7 +422,7 @@ exports[`MenuItemInputToggle should render correctly 15`] = `
   tabindex="-1"
 >
   <span
-    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
+    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
   >
     <span
       class="rmd-toggle__icon rmd-toggle__icon--circle rmd-toggle__icon--overlay"

diff --git a/packages/form/src/menu/__tests__/__snapshots__/MenuItemRadio.tsx.snap b/packages/form/src/menu/__tests__/__snapshots__/MenuItemRadio.tsx.snap
@@ -9,7 +9,7 @@ exports[`MenuItemRadio should update the state and close the menu once clicked 1
   tabindex="-1"
 >
   <span
-    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
+    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
   >
     <span
       class="rmd-toggle__icon rmd-toggle__icon--circle rmd-toggle__icon--overlay rmd-toggle__icon--checked"
@@ -39,7 +39,7 @@ exports[`MenuItemRadio should update the state and close the menu once clicked 2
   tabindex="-1"
 >
   <span
-    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
+    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
   >
     <span
       class="rmd-toggle__icon rmd-toggle__icon--circle rmd-toggle__icon--overlay"
@@ -69,7 +69,7 @@ exports[`MenuItemRadio should update the state and close the menu once clicked 3
   tabindex="-1"
 >
   <span
-    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
+    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
   >
     <span
       class="rmd-toggle__icon rmd-toggle__icon--circle rmd-toggle__icon--overlay"
@@ -99,7 +99,7 @@ exports[`MenuItemRadio should update the state and close the menu once clicked 4
   tabindex="-1"
 >
   <span
-    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
+    class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
   >
     <span
       class="rmd-toggle__icon rmd-toggle__icon--circle rmd-toggle__icon--overlay rmd-toggle__icon--checked"

diff --git a/packages/form/src/toggle/Checkbox.tsx b/packages/form/src/toggle/Checkbox.tsx
@@ -3,7 +3,8 @@ import { useIcon } from "@react-md/icon";
 
 import { InputToggle, InputToggleProps } from "./InputToggle";
 
-export interface CheckboxProps extends InputToggleProps {
+/** @remarks \@since 2.8.5 */
+export interface IndeterminateCheckboxProps {
   /**
    * If the indeterminate prop is enabled, the this prop must be a
    * space-delimited string of **all** the checkboxes that it controls.
@@ -19,6 +20,10 @@ export interface CheckboxProps extends InputToggleProps {
   indeterminate?: boolean;
 }
 
+export interface CheckboxProps
+  extends InputToggleProps,
+    IndeterminateCheckboxProps {}
+
 /**
  * The `Checkbox` component is just a wrapper for the `InputToggle` that
  * defaults to reasonable defaults for a checkbox input.

diff --git a/packages/form/src/toggle/InputToggleIcon.tsx b/packages/form/src/toggle/InputToggleIcon.tsx
@@ -53,7 +53,7 @@ export const InputToggleIcon = forwardRef<
     ...props
   }: InputToggleIconProps,
   ref
-): ReactElement | null {
+): ReactElement {
   return (
     <span
       {...props}
@@ -63,8 +63,9 @@ export const InputToggleIcon = forwardRef<
           circle,
           disabled,
           overlay,
-          checked,
+          checked: !indeterminate && checked,
           indeterminate,
+          "indeterminate-checked": checked && indeterminate,
         }),
         className
       )}

diff --git a/packages/form/src/toggle/_mixins.scss b/packages/form/src/toggle/_mixins.scss
@@ -170,6 +170,16 @@
       opacity: 0;
     }
   }
+
+  &--indeterminate-checked {
+    @if $rmd-toggle-active-color != $rmd-toggle-inactive-color {
+      @include rmd-icon-theme-update-var(color, $rmd-toggle-active-color);
+    }
+
+    &::after {
+      opacity: 1;
+    }
+  }
 }
 
 /// Updates the checkbox and radio components to have a dense theme by updating