Skip to content

Commit aa2c552

Browse files
mlaursenmlaursen
committed
fix(form): MenuItemCheckbox added missing indeterminate state
Closes #1186
1 parent fc4dcd9 commit aa2c552

File tree

8 files changed

+54
-23
lines changed

8 files changed

+54
-23
lines changed

‎packages/form/src/menu/MenuItemCheckbox.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
import React, { forwardRef } from "react";
22
import { useIcon } from "@react-md/icon";
3+
4+
import { IndeterminateCheckboxProps } from "../toggle/Checkbox";
35
import {
46
BaseMenuItemInputToggleProps,
57
MenuItemInputToggle,
68
} from "./MenuItemInputToggle";
79

810
/** @remarks \@since 2.8.0 */
9-
export type MenuItemCheckboxProps = BaseMenuItemInputToggleProps;
11+
export interface MenuItemCheckboxProps
12+
extends BaseMenuItemInputToggleProps,
13+
IndeterminateCheckboxProps {}
1014

1115
/**
1216
* This is a simple wrapper for the {@link MenuItemInputToggle} component to

‎packages/form/src/menu/MenuItemInputToggle.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ import {
1313
SimpleListItemProps,
1414
} from "@react-md/list";
1515
import { bem } from "@react-md/utils";
16+
17+
import { IndeterminateCheckboxProps } from "../toggle/Checkbox";
1618
import { InputToggleIcon } from "../toggle/InputToggleIcon";
1719
import { SwitchTrack } from "../toggle/SwitchTrack";
1820

@@ -114,6 +116,13 @@ export interface MenuItemInputToggleProps extends BaseMenuItemInputToggleProps {
114116
type: "checkbox" | "radio" | "switch";
115117
}
116118

119+
/** @remarks \@since 2.8.5 */
120+
export type StrictMenuItemInputToggleProps = BaseMenuItemInputToggleProps &
121+
(
122+
| ({ type: "checkbox" } & IndeterminateCheckboxProps)
123+
| { type: "radio" | "switch"; indeterminate?: never }
124+
);
125+
117126
/**
118127
* This is a low-level component that should probably not be used externally and
119128
* instead the `MenuItemCheckbox`, `MenuItemRadio`, or `MenuItemSwitch` should
@@ -126,7 +135,7 @@ export interface MenuItemInputToggleProps extends BaseMenuItemInputToggleProps {
126135
*/
127136
export const MenuItemInputToggle = forwardRef<
128137
HTMLLIElement,
129-
MenuItemInputToggleProps
138+
StrictMenuItemInputToggleProps
130139
>(function MenuItemInputToggle(
131140
{
132141
children,
@@ -142,6 +151,7 @@ export const MenuItemInputToggle = forwardRef<
142151
onCheckedChange,
143152
disabled = false,
144153
className,
154+
indeterminate = false,
145155
...props
146156
},
147157
ref
@@ -157,6 +167,7 @@ export const MenuItemInputToggle = forwardRef<
157167
disabled={disabled}
158168
overlay
159169
checked={checked}
170+
indeterminate={indeterminate}
160171
>
161172
{icon}
162173
</InputToggleIcon>

‎packages/form/src/menu/__tests__/__snapshots__/MenuItemCheckbox.tsx.snap‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ exports[`MenuItemCheckbox should update the state and close the menu once clicke
99
tabindex="-1"
1010
>
1111
<span
12-
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
12+
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
1313
>
1414
<span
1515
class="rmd-toggle__icon rmd-toggle__icon--overlay"
@@ -39,7 +39,7 @@ exports[`MenuItemCheckbox should update the state and close the menu once clicke
3939
tabindex="-1"
4040
>
4141
<span
42-
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
42+
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
4343
>
4444
<span
4545
class="rmd-toggle__icon rmd-toggle__icon--overlay rmd-toggle__icon--checked"

‎packages/form/src/menu/__tests__/__snapshots__/MenuItemInputToggle.tsx.snap‎

Lines changed: 12 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ exports[`MenuItemInputToggle should render correctly 1`] = `
99
tabindex="-1"
1010
>
1111
<span
12-
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
12+
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
1313
>
1414
<span
1515
class="rmd-toggle__icon rmd-toggle__icon--overlay"
@@ -39,7 +39,7 @@ exports[`MenuItemInputToggle should render correctly 2`] = `
3939
tabindex="-1"
4040
>
4141
<span
42-
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
42+
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
4343
>
4444
<span
4545
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`] = `
6969
tabindex="-1"
7070
>
7171
<span
72-
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
72+
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
7373
>
7474
<span
7575
class="rmd-toggle__icon rmd-toggle__icon--circle rmd-toggle__icon--overlay"
@@ -122,7 +122,7 @@ exports[`MenuItemInputToggle should render correctly 5`] = `
122122
tabindex="-1"
123123
>
124124
<span
125-
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
125+
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
126126
>
127127
<span
128128
class="rmd-toggle__icon rmd-toggle__icon--overlay rmd-toggle__icon--checked"
@@ -152,7 +152,7 @@ exports[`MenuItemInputToggle should render correctly 6`] = `
152152
tabindex="-1"
153153
>
154154
<span
155-
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
155+
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
156156
>
157157
<span
158158
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`] = `
182182
tabindex="-1"
183183
>
184184
<span
185-
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
185+
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
186186
>
187187
<span
188188
class="rmd-toggle__icon rmd-toggle__icon--circle rmd-toggle__icon--overlay"
@@ -240,7 +240,7 @@ exports[`MenuItemInputToggle should render correctly 9`] = `
240240
Checkbox
241241
</span>
242242
<span
243-
class="rmd-icon--after rmd-list-item__addon rmd-toggle"
243+
class="rmd-icon--after rmd-list-item__addon rmd-toggle rmd-input-toggle-menu-item__toggle"
244244
>
245245
<span
246246
class="rmd-toggle__icon rmd-toggle__icon--overlay rmd-toggle__icon--checked"
@@ -270,7 +270,7 @@ exports[`MenuItemInputToggle should render correctly 10`] = `
270270
Radio 1
271271
</span>
272272
<span
273-
class="rmd-icon--after rmd-list-item__addon rmd-toggle"
273+
class="rmd-icon--after rmd-list-item__addon rmd-toggle rmd-input-toggle-menu-item__toggle"
274274
>
275275
<span
276276
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`] = `
300300
Radio 2
301301
</span>
302302
<span
303-
class="rmd-icon--after rmd-list-item__addon rmd-toggle"
303+
class="rmd-icon--after rmd-list-item__addon rmd-toggle rmd-input-toggle-menu-item__toggle"
304304
>
305305
<span
306306
class="rmd-toggle__icon rmd-toggle__icon--circle rmd-toggle__icon--overlay"
@@ -348,7 +348,7 @@ exports[`MenuItemInputToggle should render correctly 13`] = `
348348
tabindex="-1"
349349
>
350350
<span
351-
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
351+
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
352352
>
353353
<span
354354
class="rmd-toggle__icon rmd-toggle__icon--overlay rmd-toggle__icon--checked"
@@ -385,7 +385,7 @@ exports[`MenuItemInputToggle should render correctly 14`] = `
385385
tabindex="-1"
386386
>
387387
<span
388-
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
388+
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
389389
>
390390
<span
391391
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`] = `
422422
tabindex="-1"
423423
>
424424
<span
425-
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
425+
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
426426
>
427427
<span
428428
class="rmd-toggle__icon rmd-toggle__icon--circle rmd-toggle__icon--overlay"

‎packages/form/src/menu/__tests__/__snapshots__/MenuItemRadio.tsx.snap‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ exports[`MenuItemRadio should update the state and close the menu once clicked 1
99
tabindex="-1"
1010
>
1111
<span
12-
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
12+
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
1313
>
1414
<span
1515
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
3939
tabindex="-1"
4040
>
4141
<span
42-
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
42+
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
4343
>
4444
<span
4545
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
6969
tabindex="-1"
7070
>
7171
<span
72-
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
72+
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
7373
>
7474
<span
7575
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
9999
tabindex="-1"
100100
>
101101
<span
102-
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle"
102+
class="rmd-icon--before rmd-list-item__addon rmd-list-item__addon--before rmd-toggle rmd-input-toggle-menu-item__toggle"
103103
>
104104
<span
105105
class="rmd-toggle__icon rmd-toggle__icon--circle rmd-toggle__icon--overlay rmd-toggle__icon--checked"

‎packages/form/src/toggle/Checkbox.tsx‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@ import { useIcon } from "@react-md/icon";
33

44
import { InputToggle, InputToggleProps } from "./InputToggle";
55

6-
export interface CheckboxProps extends InputToggleProps {
6+
/** @remarks \@since 2.8.5 */
7+
export interface IndeterminateCheckboxProps {
78
/**
89
* If the indeterminate prop is enabled, the this prop must be a
910
* space-delimited string of **all** the checkboxes that it controls.
@@ -19,6 +20,10 @@ export interface CheckboxProps extends InputToggleProps {
1920
indeterminate?: boolean;
2021
}
2122

23+
export interface CheckboxProps
24+
extends InputToggleProps,
25+
IndeterminateCheckboxProps {}
26+
2227
/**
2328
* The `Checkbox` component is just a wrapper for the `InputToggle` that
2429
* defaults to reasonable defaults for a checkbox input.

‎packages/form/src/toggle/InputToggleIcon.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ export const InputToggleIcon = forwardRef<
5353
...props
5454
}: InputToggleIconProps,
5555
ref
56-
): ReactElement | null {
56+
): ReactElement {
5757
return (
5858
<span
5959
{...props}
@@ -63,8 +63,9 @@ export const InputToggleIcon = forwardRef<
6363
circle,
6464
disabled,
6565
overlay,
66-
checked,
66+
checked: !indeterminate && checked,
6767
indeterminate,
68+
"indeterminate-checked": checked && indeterminate,
6869
}),
6970
className
7071
)}

‎packages/form/src/toggle/_mixins.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,6 +170,16 @@
170170
opacity: 0;
171171
}
172172
}
173+
174+
&--indeterminate-checked {
175+
@if $rmd-toggle-active-color != $rmd-toggle-inactive-color {
176+
@include rmd-icon-theme-update-var(color, $rmd-toggle-active-color);
177+
}
178+
179+
&::after {
180+
opacity: 1;
181+
}
182+
}
173183
}
174184

175185
/// Updates the checkbox and radio components to have a dense theme by updating

0 commit comments

Comments
 (0)