Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[docs] Migrate Checkbox demos to emotion #25394

Merged
merged 13 commits into from
Mar 18, 2021
Merged

[docs] Migrate Checkbox demos to emotion #25394

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
509b250
docs: Migrate indeterminate checkbox demo to emotion
vicasas Mar 17, 2021
85d64d2
docs: Migrate label checkbox demo to emotion
vicasas Mar 17, 2021
18125b7
docs: Migrate form group checkbox demo to emotion
vicasas Mar 17, 2021
06966c2
docs: Migrate customized checkbox demo to emotion
vicasas Mar 17, 2021
b5f9577
Fix focusVisible
vicasas Mar 18, 2021
456d145
Fix disabled style
vicasas Mar 18, 2021
de23ef6
use the default color and change the prop order to match the DOM
oliviertassinari Mar 18, 2021
c0db640
Use the default color
oliviertassinari Mar 18, 2021
5dec35d
Logical order
oliviertassinari Mar 18, 2021
0958872
3 is important
oliviertassinari Mar 18, 2021
55a299d
I have seen @dtasson raise question about this point
oliviertassinari Mar 18, 2021
0a8ca2e
Fix language
oliviertassinari Mar 18, 2021
6e51db9
breakdown the demo into smaller chunks
oliviertassinari Mar 18, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 6 additions & 7 deletions docs/src/pages/components/checkboxes/CheckboxLabels.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { experimentalStyled as styled } from '@material-ui/core/styles';
import { green } from '@material-ui/core/colors';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
Expand All @@ -9,15 +9,14 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox';
import Favorite from '@material-ui/icons/Favorite';
import FavoriteBorder from '@material-ui/icons/FavoriteBorder';

const GreenCheckbox = withStyles({
root: {
const GreenCheckbox = styled((props) => <Checkbox color="default" {...props} />)(
() => ({
color: green[400],
'&$checked': {
'&.Mui-checked': {
color: green[600],
},
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);
}),
);

export default function CheckboxLabels() {
const [state, setState] = React.useState({
Expand Down
17 changes: 8 additions & 9 deletions docs/src/pages/components/checkboxes/CheckboxLabels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import { experimentalStyled as styled } from '@material-ui/core/styles';
import { green } from '@material-ui/core/colors';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
Expand All @@ -9,15 +9,14 @@ import CheckBoxIcon from '@material-ui/icons/CheckBox';
import Favorite from '@material-ui/icons/Favorite';
import FavoriteBorder from '@material-ui/icons/FavoriteBorder';

const GreenCheckbox = withStyles({
root: {
color: green[400],
'&$checked': {
color: green[600],
},
const GreenCheckbox = styled((props: CheckboxProps) => (
<Checkbox color="default" {...props} />
))(() => ({
color: green[400],
'&.Mui-checked': {
color: green[600],
},
checked: {},
})((props: CheckboxProps) => <Checkbox color="default" {...props} />);
}));

export default function CheckboxLabels() {
const [state, setState] = React.useState({
Expand Down
25 changes: 5 additions & 20 deletions docs/src/pages/components/checkboxes/CheckboxesGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,23 +1,13 @@
import * as React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import FormLabel from '@material-ui/core/FormLabel';
import FormControl from '@material-ui/core/FormControl';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormHelperText from '@material-ui/core/FormHelperText';
import Checkbox from '@material-ui/core/Checkbox';

const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
},
formControl: {
margin: theme.spacing(3),
},
}));

export default function CheckboxesGroup() {
const classes = useStyles();
const [state, setState] = React.useState({
gilad: true,
jason: false,
Expand All @@ -35,8 +25,8 @@ export default function CheckboxesGroup() {
const error = [gilad, jason, antoine].filter((v) => v).length !== 2;

return (
<div className={classes.root}>
<FormControl component="fieldset" className={classes.formControl}>
<Box sx={{ display: 'flex' }}>
<FormControl sx={{ m: 3 }} component="fieldset">
<FormLabel component="legend">Assign responsibility</FormLabel>
<FormGroup>
<FormControlLabel
Expand All @@ -60,12 +50,7 @@ export default function CheckboxesGroup() {
</FormGroup>
<FormHelperText>Be careful</FormHelperText>
</FormControl>
<FormControl
required
error={error}
component="fieldset"
className={classes.formControl}
>
<FormControl required error={error} component="fieldset" sx={{ m: 3 }}>
<FormLabel component="legend">Pick two</FormLabel>
<FormGroup>
<FormControlLabel
Expand All @@ -89,6 +74,6 @@ export default function CheckboxesGroup() {
</FormGroup>
<FormHelperText>You can display an error</FormHelperText>
</FormControl>
</div>
</Box>
);
}
27 changes: 5 additions & 22 deletions docs/src/pages/components/checkboxes/CheckboxesGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,25 +1,13 @@
import * as React from 'react';
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
import Box from '@material-ui/core/Box';
import FormLabel from '@material-ui/core/FormLabel';
import FormControl from '@material-ui/core/FormControl';
import FormGroup from '@material-ui/core/FormGroup';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormHelperText from '@material-ui/core/FormHelperText';
import Checkbox from '@material-ui/core/Checkbox';

const useStyles = makeStyles((theme: Theme) =>
createStyles({
root: {
display: 'flex',
},
formControl: {
margin: theme.spacing(3),
},
}),
);

export default function CheckboxesGroup() {
const classes = useStyles();
const [state, setState] = React.useState({
gilad: true,
jason: false,
Expand All @@ -37,8 +25,8 @@ export default function CheckboxesGroup() {
const error = [gilad, jason, antoine].filter((v) => v).length !== 2;

return (
<div className={classes.root}>
<FormControl component="fieldset" className={classes.formControl}>
<Box sx={{ display: 'flex' }}>
<FormControl sx={{ m: 3 }} component="fieldset">
<FormLabel component="legend">Assign responsibility</FormLabel>
<FormGroup>
<FormControlLabel
Expand All @@ -62,12 +50,7 @@ export default function CheckboxesGroup() {
</FormGroup>
<FormHelperText>Be careful</FormHelperText>
</FormControl>
<FormControl
required
error={error}
component="fieldset"
className={classes.formControl}
>
<FormControl required error={error} component="fieldset" sx={{ m: 3 }}>
<FormLabel component="legend">Pick two</FormLabel>
<FormGroup>
<FormControlLabel
Expand All @@ -91,6 +74,6 @@ export default function CheckboxesGroup() {
</FormGroup>
<FormHelperText>You can display an error</FormHelperText>
</FormControl>
</div>
</Box>
);
}
81 changes: 37 additions & 44 deletions docs/src/pages/components/checkboxes/CustomizedCheckbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,56 @@
import * as React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import { experimentalStyled as styled } from '@material-ui/core/styles';
import Checkbox from '@material-ui/core/Checkbox';

const useStyles = makeStyles({
root: {
'&:hover': {
backgroundColor: 'transparent',
},
const Icon = styled('span')({
borderRadius: 3,
width: 16,
height: 16,
boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
backgroundColor: '#f5f8fa',
backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
'.root.Mui-focusVisible &': {
outline: '2px auto rgba(19,124,189,.6)',
outlineOffset: 2,
},
icon: {
borderRadius: 3,
'input:hover ~ &': {
backgroundColor: '#ebf1f5',
},
'input:disabled ~ &': {
boxShadow: 'none',
background: 'rgba(206,217,224,.5)',
},
});

const CheckedIcon = styled(Icon)({
backgroundColor: '#137cbd',
backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
'&:before': {
display: 'block',
width: 16,
height: 16,
boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
backgroundColor: '#f5f8fa',
backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
'$root.Mui-focusVisible &': {
outline: '2px auto rgba(19,124,189,.6)',
outlineOffset: 2,
},
'input:hover ~ &': {
backgroundColor: '#ebf1f5',
},
'input:disabled ~ &': {
boxShadow: 'none',
background: 'rgba(206,217,224,.5)',
},
backgroundImage:
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
" fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
"1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
content: '""',
},
checkedIcon: {
backgroundColor: '#137cbd',
backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
'&:before': {
display: 'block',
width: 16,
height: 16,
backgroundImage:
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
" fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
"1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
content: '""',
},
'input:hover ~ &': {
backgroundColor: '#106ba3',
},
'input:hover ~ &': {
backgroundColor: '#106ba3',
},
});

// Inspired by blueprintjs
function StyledCheckbox(props) {
const classes = useStyles();

return (
<Checkbox
className={classes.root}
sx={{
'&:hover': { bgcolor: 'transparent' },
}}
disableRipple
color="default"
checkedIcon={<span className={clsx(classes.icon, classes.checkedIcon)} />}
icon={<span className={classes.icon} />}
checkedIcon={<CheckedIcon />}
icon={<Icon />}
inputProps={{ 'aria-label': 'decorative checkbox' }}
{...props}
/>
Expand Down
81 changes: 37 additions & 44 deletions docs/src/pages/components/checkboxes/CustomizedCheckbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,63 +1,56 @@
import * as React from 'react';
import clsx from 'clsx';
import { makeStyles } from '@material-ui/core/styles';
import { experimentalStyled as styled } from '@material-ui/core/styles';
import Checkbox, { CheckboxProps } from '@material-ui/core/Checkbox';

const useStyles = makeStyles({
root: {
'&:hover': {
backgroundColor: 'transparent',
},
const Icon = styled('span')({
borderRadius: 3,
width: 16,
height: 16,
boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
backgroundColor: '#f5f8fa',
backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
'.root.Mui-focusVisible &': {
outline: '2px auto rgba(19,124,189,.6)',
outlineOffset: 2,
},
icon: {
borderRadius: 3,
'input:hover ~ &': {
backgroundColor: '#ebf1f5',
},
'input:disabled ~ &': {
vicasas marked this conversation as resolved.
Show resolved Hide resolved
boxShadow: 'none',
background: 'rgba(206,217,224,.5)',
},
});

const CheckedIcon = styled(Icon)({
backgroundColor: '#137cbd',
backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
'&:before': {
display: 'block',
width: 16,
height: 16,
boxShadow: 'inset 0 0 0 1px rgba(16,22,26,.2), inset 0 -1px 0 rgba(16,22,26,.1)',
backgroundColor: '#f5f8fa',
backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.8),hsla(0,0%,100%,0))',
'$root.Mui-focusVisible &': {
outline: '2px auto rgba(19,124,189,.6)',
outlineOffset: 2,
},
'input:hover ~ &': {
backgroundColor: '#ebf1f5',
},
'input:disabled ~ &': {
boxShadow: 'none',
background: 'rgba(206,217,224,.5)',
},
backgroundImage:
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
" fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
"1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
content: '""',
},
checkedIcon: {
backgroundColor: '#137cbd',
backgroundImage: 'linear-gradient(180deg,hsla(0,0%,100%,.1),hsla(0,0%,100%,0))',
'&:before': {
display: 'block',
width: 16,
height: 16,
backgroundImage:
"url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath" +
" fill-rule='evenodd' clip-rule='evenodd' d='M12 5c-.28 0-.53.11-.71.29L7 9.59l-2.29-2.3a1.003 " +
"1.003 0 00-1.42 1.42l3 3c.18.18.43.29.71.29s.53-.11.71-.29l5-5A1.003 1.003 0 0012 5z' fill='%23fff'/%3E%3C/svg%3E\")",
content: '""',
},
'input:hover ~ &': {
backgroundColor: '#106ba3',
},
'input:hover ~ &': {
backgroundColor: '#106ba3',
},
});

// Inspired by blueprintjs
function StyledCheckbox(props: CheckboxProps) {
const classes = useStyles();

return (
<Checkbox
className={classes.root}
sx={{
'&:hover': { bgcolor: 'transparent' },
}}
disableRipple
color="default"
checkedIcon={<span className={clsx(classes.icon, classes.checkedIcon)} />}
icon={<span className={classes.icon} />}
checkedIcon={<CheckedIcon />}
icon={<Icon />}
inputProps={{ 'aria-label': 'decorative checkbox' }}
{...props}
/>
Expand Down
Loading