fix(ui): add missing indeterminate icon to Checkbox component
The custom Checkbox used Lucide Square/SquareCheck for unchecked/checked states but had no indeterminateIcon, so MUI fell back to its default 24px Material icon. This caused a visible size mismatch and row height jitter in the bulk-select header of monitor tables. Add SquareMinus from lucide-react at the same size (16px) and strokeWidth (1.5) as the existing icons, and extend the checked color rule to also cover the indeterminate state.
This commit is contained in:
1 parent
bec5ef09cb
commit
9cee2eebd0
1 file changed
+8
-2
@@ -1,7 +1,7 @@
|
||||
import { forwardRef } from "react";
|
||||
import Checkbox from "@mui/material/Checkbox";
|
||||
import type { CheckboxProps } from "@mui/material/Checkbox";
|
||||
import { Square, SquareCheck } from "lucide-react";
|
||||
import { Square, SquareCheck, SquareMinus } from "lucide-react";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
|
||||
type CheckboxInputProps = CheckboxProps & {
|
||||
@@ -34,9 +34,15 @@ export const CheckboxInput = forwardRef<HTMLInputElement, CheckboxInputProps>(
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
}
|
||||
indeterminateIcon={
|
||||
<SquareMinus
|
||||
size={16}
|
||||
strokeWidth={1.5}
|
||||
/>
|
||||
}
|
||||
sx={{
|
||||
color: theme.palette.text.secondary,
|
||||
"&.Mui-checked": {
|
||||
"&.Mui-checked, &.MuiCheckbox-indeterminate": {
|
||||
color: theme.palette.primary.main,
|
||||
},
|
||||
"&:hover": { backgroundColor: "transparent" },
|
||||
|
||||
Reference in new issue
Block a user