[Checkbox] Component and Hook

Fix test Fix doc wording Add tests for indeterminate prop Fix prop diff Update based on discussions Update demos Add conditional unmounting to CheckboxIndicator Avoid passing keepMounted prop to element Update docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.js Co-authored-by: Danilo Leal <[email protected]> Signed-off-by: atomiks <[email protected]> Update docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.js Co-authored-by: Danilo Leal <[email protected]> Signed-off-by: atomiks <[email protected]> Update docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.js Co-authored-by: Danilo Leal <[email protected]> Signed-off-by: atomiks <[email protected]> Update docs/data/base/components/checkbox/UnstyledCheckboxIntroduction/tailwind/index.tsx Co-authored-by: Danilo Leal <[email protected]> Signed-off-by: atomiks <[email protected]> Update docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.js Co-authored-by: Danilo Leal <[email protected]> Signed-off-by: atomiks <[email protected]> Update docs/data/base/components/checkbox/checkbox.md Co-authored-by: Danilo Leal <[email protected]> Signed-off-by: atomiks <[email protected]> Use 24px size Fix formatting Remove planned from Checkbox Generate API docs and sync with Switch Simplify types Use undefined fallback due to defaults Remove unused file Remove unused colors Simplify API Resolve styling inconsistencies Remove unused inputRef prop Revert otherProps spread location Remove unused colors i18n Try deleting tests Add back CheckboxIndicator tests Bifurcate Checkbox tests Bifurcate Checkbox tests Bifurcate Checkbox tests Bifurcate Checkbox tests Bifurcate Checkbox tests Bifurcate Checkbox tests Bifurcate Checkbox tests Bifurcate Checkbox tests Try deleting Button test Skip tests rerun Reuse variable Update Rerun docs generation Use describeConformance Update tests Update docs
mui · Mar 20, 2024 · 97147b4 · 97147b4
1 parent d34fab9
commit 97147b4
Show file tree

Hide file tree

Showing 42 changed files with 2,414 additions and 32 deletions.
diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.js b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.js
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { Checkbox as BaseCheckbox } from '@mui/base/Checkbox';
+import HorizontalRule from '@mui/icons-material/HorizontalRule';
+
+export default function UnstyledCheckboxIndeterminate() {
+  return (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <Checkbox aria-label="Indeterminate checkbox" indeterminate>
+        <Indicator>
+          <HorizontalRuleIcon />
+        </Indicator>
+      </Checkbox>
+      <Checkbox aria-label="Indeterminate disabled checkbox" indeterminate disabled>
+        <Indicator>
+          <HorizontalRuleIcon />
+        </Indicator>
+      </Checkbox>
+    </div>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+const grey = {
+  100: '#E5EAF2',
+};
+
+const Checkbox = styled(BaseCheckbox)(
+  ({ theme }) => `
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border-radius: 4px;
+    border: 2px solid ${blue[600]};
+    background: none;
+    transition-property: background, border-color;
+    transition-duration: 0.15s;
+    outline: none;
+
+    &[data-disabled] {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${theme.palette.mode === 'dark' ? blue[800] : blue[400]};
+      outline-offset: 2px;
+    }
+
+    &[data-state='checked'],
+    &[data-state='mixed'] {
+      border-color: transparent;
+      background: ${blue[600]};
+    }
+  `,
+);
+
+const HorizontalRuleIcon = styled(HorizontalRule)`
+  height: 100%;
+  width: 100%;
+`;
+
+const Indicator = styled(BaseCheckbox.Indicator)`
+  color: ${grey[100]};
+  height: 100%;
+  display: inline-block;
+  visibility: hidden;
+
+  &[data-state='checked'],
+  &[data-state='mixed'] {
+    visibility: visible;
+  }
+`;
diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.tsx b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.tsx
@@ -0,0 +1,78 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { Checkbox as BaseCheckbox } from '@mui/base/Checkbox';
+import HorizontalRule from '@mui/icons-material/HorizontalRule';
+
+export default function UnstyledCheckboxIndeterminate() {
+  return (
+    <div style={{ display: 'flex', gap: 12 }}>
+      <Checkbox aria-label="Indeterminate checkbox" indeterminate>
+        <Indicator>
+          <HorizontalRuleIcon />
+        </Indicator>
+      </Checkbox>
+      <Checkbox aria-label="Indeterminate disabled checkbox" indeterminate disabled>
+        <Indicator>
+          <HorizontalRuleIcon />
+        </Indicator>
+      </Checkbox>
+    </div>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+const grey = {
+  100: '#E5EAF2',
+};
+
+const Checkbox = styled(BaseCheckbox)(
+  ({ theme }) => `
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border-radius: 4px;
+    border: 2px solid ${blue[600]};
+    background: none;
+    transition-property: background, border-color;
+    transition-duration: 0.15s;
+    outline: none;
+
+    &[data-disabled] {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${theme.palette.mode === 'dark' ? blue[800] : blue[400]};
+      outline-offset: 2px;
+    }
+
+    &[data-state='checked'],
+    &[data-state='mixed'] {
+      border-color: transparent;
+      background: ${blue[600]};
+    }
+  `,
+);
+
+const HorizontalRuleIcon = styled(HorizontalRule)`
+  height: 100%;
+  width: 100%;
+`;
+
+const Indicator = styled(BaseCheckbox.Indicator)`
+  color: ${grey[100]};
+  height: 100%;
+  display: inline-block;
+  visibility: hidden;
+
+  &[data-state='checked'],
+  &[data-state='mixed'] {
+    visibility: visible;
+  }
+`;
diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.tsx.preview b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminate.tsx.preview
@@ -0,0 +1,10 @@
+<Checkbox aria-label="Indeterminate checkbox" indeterminate>
+  <Indicator>
+    <HorizontalRuleIcon />
+  </Indicator>
+</Checkbox>
+<Checkbox aria-label="Indeterminate disabled checkbox" indeterminate disabled>
+  <Indicator>
+    <HorizontalRuleIcon />
+  </Indicator>
+</Checkbox>
diff --git a/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.js b/docs/data/base/components/checkbox/UnstyledCheckboxIndeterminateGroup.js
@@ -0,0 +1,157 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import { Checkbox as BaseCheckbox } from '@mui/base/Checkbox';
+import HorizontalRule from '@mui/icons-material/HorizontalRule';
+import Check from '@mui/icons-material/Check';
+
+const colors = ['Red', 'Green', 'Blue'];
+
+export default function UnstyledCheckboxIndeterminateGroup() {
+  const [checkedValues, setCheckedValues] = React.useState([false, true, false]);
+
+  const isChecked = checkedValues.every((value) => value);
+  const isIndeterminate = checkedValues.some((value) => value) && !isChecked;
+
+  const id = React.useId();
+
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column' }}>
+      <ListRoot>
+        <Checkbox
+          id={id}
+          aria-controls={colors.map((color) => `${id}-${color}`).join(' ')}
+          indeterminate={isIndeterminate}
+          checked={isChecked}
+          onChange={(event) => {
+            const checked = event.target.checked;
+            setCheckedValues([checked, checked, checked]);
+          }}
+        >
+          <Indicator>
+            {isIndeterminate ? <HorizontalRuleIcon /> : <CheckIcon />}
+          </Indicator>
+        </Checkbox>
+        <Label htmlFor={id} onMouseDown={(e) => e.preventDefault()}>
+          Colors
+        </Label>
+      </ListRoot>
+      <List>
+        {colors.map((color, index) => (
+          <ListItem key={color}>
+            <Checkbox
+              id={`${id}-${color}`}
+              checked={checkedValues[index]}
+              onChange={(event) => {
+                const newCheckedValues = [...checkedValues];
+                newCheckedValues[index] = event.target.checked;
+                setCheckedValues(newCheckedValues);
+              }}
+            >
+              <Indicator>
+                <CheckIcon />
+              </Indicator>
+            </Checkbox>
+            <Label
+              htmlFor={`${id}-${color}`}
+              onMouseDown={(e) => e.preventDefault()}
+            >
+              {color}
+            </Label>
+          </ListItem>
+        ))}
+      </List>
+    </div>
+  );
+}
+
+const blue = {
+  400: '#3399FF',
+  600: '#0072E6',
+  800: '#004C99',
+};
+
+const grey = {
+  100: '#E5EAF2',
+  400: '#B0B8C4',
+  800: '#303740',
+};
+
+const Checkbox = styled(BaseCheckbox)(
+  ({ theme }) => `
+    width: 24px;
+    height: 24px;
+    padding: 0;
+    border-radius: 4px;
+    border: 2px solid ${blue[600]};
+    background: none;
+    transition-property: background, border-color;
+    transition-duration: 0.15s;
+    outline: none;
+
+    &[data-disabled] {
+      opacity: 0.4;
+      cursor: not-allowed;
+    }
+
+    &:focus-visible {
+      outline: 2px solid ${theme.palette.mode === 'dark' ? blue[800] : blue[400]};
+      outline-offset: 2px;
+    }
+
+    &[data-state="checked"], &[data-state="mixed"] {
+      border-color: transparent;
+      background: ${blue[600]};
+    }
+  `,
+);
+
+const HorizontalRuleIcon = styled(HorizontalRule)`
+  height: 100%;
+  width: 100%;
+`;
+
+const CheckIcon = styled(Check)`
+  height: 100%;
+  width: 100%;
+`;
+
+const Indicator = styled(BaseCheckbox.Indicator)`
+  height: 100%;
+  display: inline-block;
+  visibility: hidden;
+  color: ${grey[100]};
+
+  &[data-state='checked'],
+  &[data-state='mixed'] {
+    visibility: visible;
+  }
+`;
+
+const ListRoot = styled('div')`
+  display: flex;
+  align-items: center;
+  margin-bottom: 8px;
+`;
+
+const List = styled('ul')`
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  margin-left: 32px;
+`;
+
+const ListItem = styled('li')`
+  display: flex;
+  align-items: center;
+
+  &:not(:last-child) {
+    margin-bottom: 8px;
+  }
+`;
+
+const Label = styled('label')(
+  ({ theme }) => `
+    padding-left: 8px;
+    color: ${theme.palette.mode === 'dark' ? grey[400] : grey[800]};
+  `,
+);