component: Add indeterminate state icon and show checkmark for the co…

…mbination of disabled + checked (#3008)

<!--- TITLE FORMAT: "component: short description", e.g. "k8s: add pod
log reader" -->

### Description
#### Indeterminate state
When adding an indeterminate state to the checkbox, it would default to
the MUI styles which looked off. Now the indeterminate state looks in
line with the rest of the states.

##### Before
<img width="47" alt="image"
src="https://github.com/lyft/clutch/assets/107066142/431ea56c-200d-42f4-be8d-68927e0cddea">

##### After
<img width="47" alt="image"
src="https://github.com/lyft/clutch/assets/107066142/cfaccea1-3155-4d54-a713-7d31808b35d1">

#### Disabled + checked

Also, the combination of disabled + checked shows the checkmark in
white, this is especially useful to indicate that either the selected
item was successfully affected by a user-driven action, or that an item
was successfully preselected from a form.

##### Before
<img width="46" alt="image"
src="https://github.com/lyft/clutch/assets/107066142/ba111f78-6900-478b-84e1-4ccd6eec70eb">

##### After
<img width="45" alt="image"
src="https://github.com/lyft/clutch/assets/107066142/c9b0d373-cf2e-459e-9a0f-6c0a05b3a49a">

### Testing Performed
I tested the component by using it in an internal UI.

frontend/packages/core/src/Input/checkbox.tsx

@@ -1,5 +1,6 @@
 import * as React from "react";
 import CheckIcon from "@mui/icons-material/Check";
+import HorizontalRuleIcon from "@mui/icons-material/HorizontalRule";
 import type { CheckboxProps as MuiCheckboxProps, Theme } from "@mui/material";
 import {
   alpha,
@@ -26,7 +27,7 @@ const StyledCheckbox = styled(MuiCheckbox)(({ theme }: { theme: Theme }) => ({
   "&:active": {
     background: theme.palette.primary[300],
   },
-  "&.Mui-checked": {
+  "&.Mui-checked, &.MuiCheckbox-indeterminate": {
     color: theme.palette.contrastColor,
     "&:hover": {
       background: theme.palette.primary[100],
@@ -35,7 +36,6 @@ const StyledCheckbox = styled(MuiCheckbox)(({ theme }: { theme: Theme }) => ({
       background: theme.palette.primary[300],
     },
     "&.Mui-disabled": {
-      color: theme.palette.secondary[200],
       ".MuiIconButton-label": {
         color: alpha(theme.palette.secondary[900], 0.38),
       },
@@ -84,10 +84,19 @@ const SelectedIcon = styled("div")<StyledIconProps>(
 );
 
 export interface CheckboxProps
-  extends Pick<MuiCheckboxProps, "checked" | "disabled" | "name" | "onChange" | "size"> {}
+  extends Pick<
+    MuiCheckboxProps,
+    "checked" | "disabled" | "indeterminate" | "name" | "onChange" | "size"
+  > {}
 
 // TODO (sperry): add 16px size variant
-const Checkbox: React.FC<CheckboxProps> = ({ checked, disabled = false, size, ...props }) => {
+const Checkbox: React.FC<CheckboxProps> = ({
+  checked,
+  disabled = false,
+  indeterminate,
+  size,
+  ...props
+}) => {
   let sizePx;
   switch (size) {
     case "small":
@@ -100,13 +109,19 @@ const Checkbox: React.FC<CheckboxProps> = ({ checked, disabled = false, size, ..
   return (
     <StyledCheckbox
       checked={checked}
+      indeterminate={indeterminate}
       size={size}
       icon={<Icon $disabled={disabled} $size={sizePx} />}
       checkedIcon={
         <SelectedIcon $disabled={disabled} $size={sizePx}>
           <CheckIcon />
         </SelectedIcon>
       }
+      indeterminateIcon={
+        <SelectedIcon $disabled={disabled} $size={sizePx}>
+          <HorizontalRuleIcon />
+        </SelectedIcon>
+      }
       {...props}
       disabled={disabled}
     />