Skip to content

Commit

Permalink
[material-ui][Checkbox] Convert to support CSS extraction (#41957)
Browse files Browse the repository at this point in the history
  • Loading branch information
@lhilgert9
lhilgert9 committed Apr 22, 2024
1 parent 7114689 commit 09630ee
Show file tree
Hide file tree
Showing 3 changed files with 210 additions and 28 deletions.
79 changes: 79 additions & 0 deletions apps/pigment-css-next-app/src/app/material-ui/react-checkbox/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
'use client';
import * as React from 'react';
import CheckboxLabels from '../../../../../../docs/data/material/components/checkboxes/CheckboxLabels';
import CheckboxesComponent from '../../../../../../docs/data/material/components/checkboxes/Checkboxes';
import CheckboxesGroup from '../../../../../../docs/data/material/components/checkboxes/CheckboxesGroup';
import ColorCheckboxes from '../../../../../../docs/data/material/components/checkboxes/ColorCheckboxes';
import ControlledCheckbox from '../../../../../../docs/data/material/components/checkboxes/ControlledCheckbox';
import CustomizedCheckbox from '../../../../../../docs/data/material/components/checkboxes/CustomizedCheckbox';
import FormControlLabelPosition from '../../../../../../docs/data/material/components/checkboxes/FormControlLabelPosition';
import IconCheckboxes from '../../../../../../docs/data/material/components/checkboxes/IconCheckboxes';
import IndeterminateCheckbox from '../../../../../../docs/data/material/components/checkboxes/IndeterminateCheckbox';
import SizeCheckboxes from '../../../../../../docs/data/material/components/checkboxes/SizeCheckboxes';

export default function Checkboxes() {
return (
<React.Fragment>
<section>
<h2> Checkbox Labels</h2>
<div className="demo-container">
<CheckboxLabels />
</div>
</section>
<section>
<h2> Checkboxes</h2>
<div className="demo-container">
<CheckboxesComponent />
</div>
</section>
<section>
<h2> Checkboxes Group</h2>
<div className="demo-container">
<CheckboxesGroup />
</div>
</section>
<section>
<h2> Color Checkboxes</h2>
<div className="demo-container">
<ColorCheckboxes />
</div>
</section>
<section>
<h2> Controlled Checkbox</h2>
<div className="demo-container">
<ControlledCheckbox />
</div>
</section>
<section>
<h2> Customized Checkbox</h2>
<div className="demo-container">
<CustomizedCheckbox />
</div>
</section>
<section>
<h2> Form Control Label Position</h2>
<div className="demo-container">
<FormControlLabelPosition />
</div>
</section>
<section>
<h2> Icon Checkboxes</h2>
<div className="demo-container">
<IconCheckboxes />
</div>
</section>
<section>
<h2> Indeterminate Checkbox</h2>
<div className="demo-container">
<IndeterminateCheckbox />
</div>
</section>
<section>
<h2> Size Checkboxes</h2>
<div className="demo-container">
<SizeCheckboxes />
</div>
</section>
</React.Fragment>
);
}
80 changes: 80 additions & 0 deletions apps/pigment-css-vite-app/src/pages/material-ui/react-checkbox.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
import * as React from 'react';
import MaterialUILayout from '../../Layout';
import CheckboxLabels from '../../../../../docs/data/material/components/checkboxes/CheckboxLabels.tsx';
import CheckboxesComponent from '../../../../../docs/data/material/components/checkboxes/Checkboxes.tsx';
import CheckboxesGroup from '../../../../../docs/data/material/components/checkboxes/CheckboxesGroup.tsx';
import ColorCheckboxes from '../../../../../docs/data/material/components/checkboxes/ColorCheckboxes.tsx';
import ControlledCheckbox from '../../../../../docs/data/material/components/checkboxes/ControlledCheckbox.tsx';
import CustomizedCheckbox from '../../../../../docs/data/material/components/checkboxes/CustomizedCheckbox.tsx';
import FormControlLabelPosition from '../../../../../docs/data/material/components/checkboxes/FormControlLabelPosition.tsx';
import IconCheckboxes from '../../../../../docs/data/material/components/checkboxes/IconCheckboxes.tsx';
import IndeterminateCheckbox from '../../../../../docs/data/material/components/checkboxes/IndeterminateCheckbox.tsx';
import SizeCheckboxes from '../../../../../docs/data/material/components/checkboxes/SizeCheckboxes.tsx';

export default function Checkboxes() {
return (
<MaterialUILayout>
<h1>Checkboxes</h1>
<section>
<h2> Checkbox Labels</h2>
<div className="demo-container">
<CheckboxLabels />
</div>
</section>
<section>
<h2> Checkboxes</h2>
<div className="demo-container">
<CheckboxesComponent />
</div>
</section>
<section>
<h2> Checkboxes Group</h2>
<div className="demo-container">
<CheckboxesGroup />
</div>
</section>
<section>
<h2> Color Checkboxes</h2>
<div className="demo-container">
<ColorCheckboxes />
</div>
</section>
<section>
<h2> Controlled Checkbox</h2>
<div className="demo-container">
<ControlledCheckbox />
</div>
</section>
<section>
<h2> Customized Checkbox</h2>
<div className="demo-container">
<CustomizedCheckbox />
</div>
</section>
<section>
<h2> Form Control Label Position</h2>
<div className="demo-container">
<FormControlLabelPosition />
</div>
</section>
<section>
<h2> Icon Checkboxes</h2>
<div className="demo-container">
<IconCheckboxes />
</div>
</section>
<section>
<h2> Indeterminate Checkbox</h2>
<div className="demo-container">
<IndeterminateCheckbox />
</div>
</section>
<section>
<h2> Size Checkboxes</h2>
<div className="demo-container">
<SizeCheckboxes />
</div>
</section>
</MaterialUILayout>
);
}
79 changes: 51 additions & 28 deletions packages/mui-material/src/Checkbox/Checkbox.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,11 @@ import CheckBoxOutlineBlankIcon from '../internal/svg-icons/CheckBoxOutlineBlank
import CheckBoxIcon from '../internal/svg-icons/CheckBox';
import IndeterminateCheckBoxIcon from '../internal/svg-icons/IndeterminateCheckBox';
import capitalize from '../utils/capitalize';
import useThemeProps from '../styles/useThemeProps';
import styled, { rootShouldForwardProp } from '../styles/styled';
import rootShouldForwardProp from '../styles/rootShouldForwardProp';
import checkboxClasses, { getCheckboxUtilityClass } from './checkboxClasses';
import { createUseThemeProps, styled } from '../zero-styled';

const useThemeProps = createUseThemeProps('MuiCheckbox');

const useUtilityClasses = (ownerState) => {
const { classes, indeterminate, color, size } = ownerState;
Expand Down Expand Up @@ -48,36 +50,57 @@ const CheckboxRoot = styled(SwitchBase, {
ownerState.color !== 'default' && styles[`color${capitalize(ownerState.color)}`],
];
},
})(({ theme, ownerState }) => ({
})(({ theme }) => ({
color: (theme.vars || theme).palette.text.secondary,
...(!ownerState.disableRipple && {
'&:hover': {
backgroundColor: theme.vars
? `rgba(${
ownerState.color === 'default'
? theme.vars.palette.action.activeChannel
: theme.vars.palette[ownerState.color].mainChannel
} / ${theme.vars.palette.action.hoverOpacity})`
: alpha(
ownerState.color === 'default'
? theme.palette.action.active
: theme.palette[ownerState.color].main,
theme.palette.action.hoverOpacity,
),
// Reset on touch devices, it doesn't add specificity
'@media (hover: none)': {
backgroundColor: 'transparent',
variants: [
{
props: { color: 'default', disableRipple: false },
style: {
'&:hover': {
backgroundColor: theme.vars
? `rgba(${theme.vars.palette.action.activeChannel} / ${theme.vars.palette.action.hoverOpacity})`
: alpha(theme.palette.action.active, theme.palette.action.hoverOpacity),
},
},
},
}),
...(ownerState.color !== 'default' && {
[`&.${checkboxClasses.checked}, &.${checkboxClasses.indeterminate}`]: {
color: (theme.vars || theme).palette[ownerState.color].main,
},
[`&.${checkboxClasses.disabled}`]: {
color: (theme.vars || theme).palette.action.disabled,
...Object.entries(theme.palette)
.filter(([, palette]) => palette.main)
.map(([color]) => ({
props: { color, disableRipple: false },
style: {
'&:hover': {
backgroundColor: theme.vars
? `rgba(${theme.vars.palette[color].mainChannel} / ${theme.vars.palette.action.hoverOpacity})`
: alpha(theme.palette[color].main, theme.palette.action.hoverOpacity),
},
},
})),
...Object.entries(theme.palette)
.filter(([, palette]) => palette.main)
.map(([color]) => ({
props: { color },
style: {
[`&.${checkboxClasses.checked}, &.${checkboxClasses.indeterminate}`]: {
color: (theme.vars || theme).palette[color].main,
},
[`&.${checkboxClasses.disabled}`]: {
color: (theme.vars || theme).palette.action.disabled,
},
},
})),
{
// Should be last to override other colors
props: { disableRipple: false },
style: {
// Reset on touch devices, it doesn't add specificity
'&:hover': {
'@media (hover: none)': {
backgroundColor: 'transparent',
},
},
},
},
}),
],
}));

const defaultCheckedIcon = <CheckBoxIcon />;
Expand Down

0 comments on commit 09630ee

Please sign in to comment.