Skip to content

Commit

Permalink
[docs] Migrate Checkbox demos to emotion (#25394)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vicasas
vicasas authored Mar 18, 2021
1 parent fca2ddf commit ea2bd5a
Show file tree
Hide file tree
Showing 21 changed files with 321 additions and 477 deletions.
103 changes: 3 additions & 100 deletions docs/src/pages/components/checkboxes/CheckboxLabels.js
View file
Original file line number Diff line number Diff line change
@@ -1,117 +1,20 @@
import * as React from 'react';
import { withStyles } 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';
import Checkbox from '@material-ui/core/Checkbox';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
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],
},
},
checked: {},
})((props) => <Checkbox color="default" {...props} />);

export default function CheckboxLabels() {
const [state, setState] = React.useState({
checkedA: true,
checkedB: true,
checkedF: true,
checkedG: true,
});

const handleChange = (event) => {
setState({
...state,
[event.target.name]: event.target.checked,
});
};

return (
<FormGroup row>
<FormGroup>
<FormControlLabel
control={
<Checkbox
checked={state.checkedA}
onChange={handleChange}
name="checkedA"
/>
}
control={<Checkbox defaultChecked name="checkedA" />}
label="Secondary"
/>
<FormControlLabel
control={
<Checkbox
checked={state.checkedB}
onChange={handleChange}
name="checkedB"
color="primary"
/>
}
label="Primary"
/>
<FormControlLabel
control={<Checkbox name="checkedC" />}
label="Uncontrolled"
/>
<FormControlLabel
disabled
control={<Checkbox name="checkedD" />}
control={<Checkbox name="checkedB" />}
label="Disabled"
/>
<FormControlLabel
disabled
control={<Checkbox checked name="checkedE" />}
label="Disabled"
/>
<FormControlLabel
control={
<Checkbox
checked={state.checkedF}
onChange={handleChange}
name="checkedF"
indeterminate
/>
}
label="Indeterminate"
/>
<FormControlLabel
control={
<GreenCheckbox
checked={state.checkedG}
onChange={handleChange}
name="checkedG"
/>
}
label="Custom color"
/>
<FormControlLabel
control={
<Checkbox
icon={<FavoriteBorder />}
checkedIcon={<Favorite />}
name="checkedH"
/>
}
label="Custom icon"
/>
<FormControlLabel
control={
<Checkbox
icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
checkedIcon={<CheckBoxIcon fontSize="small" />}
name="checkedI"
/>
}
label="Custom size"
/>
</FormGroup>
);
}
105 changes: 4 additions & 101 deletions docs/src/pages/components/checkboxes/CheckboxLabels.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,117 +1,20 @@
import * as React from 'react';
import { withStyles } 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';
import Checkbox, { CheckboxProps } from '@material-ui/core/Checkbox';
import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
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],
},
},
checked: {},
})((props: CheckboxProps) => <Checkbox color="default" {...props} />);
import Checkbox from '@material-ui/core/Checkbox';

export default function CheckboxLabels() {
const [state, setState] = React.useState({
checkedA: true,
checkedB: true,
checkedF: true,
checkedG: true,
});

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setState({
...state,
[event.target.name]: event.target.checked,
});
};

return (
<FormGroup row>
<FormGroup>
<FormControlLabel
control={
<Checkbox
checked={state.checkedA}
onChange={handleChange}
name="checkedA"
/>
}
control={<Checkbox defaultChecked name="checkedA" />}
label="Secondary"
/>
<FormControlLabel
control={
<Checkbox
checked={state.checkedB}
onChange={handleChange}
name="checkedB"
color="primary"
/>
}
label="Primary"
/>
<FormControlLabel
control={<Checkbox name="checkedC" />}
label="Uncontrolled"
/>
<FormControlLabel
disabled
control={<Checkbox name="checkedD" />}
control={<Checkbox name="checkedB" />}
label="Disabled"
/>
<FormControlLabel
disabled
control={<Checkbox checked name="checkedE" />}
label="Disabled"
/>
<FormControlLabel
control={
<Checkbox
checked={state.checkedF}
onChange={handleChange}
name="checkedF"
indeterminate
/>
}
label="Indeterminate"
/>
<FormControlLabel
control={
<GreenCheckbox
checked={state.checkedG}
onChange={handleChange}
name="checkedG"
/>
}
label="Custom color"
/>
<FormControlLabel
control={
<Checkbox
icon={<FavoriteBorder />}
checkedIcon={<Favorite />}
name="checkedH"
/>
}
label="Custom icon"
/>
<FormControlLabel
control={
<Checkbox
icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
checkedIcon={<CheckBoxIcon fontSize="small" />}
name="checkedI"
/>
}
label="Custom size"
/>
</FormGroup>
);
}
48 changes: 3 additions & 45 deletions docs/src/pages/components/checkboxes/Checkboxes.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,57 +2,15 @@ import * as React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

export default function Checkboxes() {
const [checked, setChecked] = React.useState(true);

const handleChange = (event) => {
setChecked(event.target.checked);
};

return (
<div>
<Checkbox
checked={checked}
onChange={handleChange}
inputProps={{ 'aria-label': 'primary checkbox' }}
/>
<Checkbox
defaultChecked
color="primary"
inputProps={{ 'aria-label': 'secondary checkbox' }}
/>
<Checkbox
inputProps={{
'aria-label': 'uncontrolled-checkbox',
}}
/>
<Checkbox defaultChecked inputProps={{ 'aria-label': 'checked checkbox' }} />
<Checkbox inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />
<Checkbox disabled inputProps={{ 'aria-label': 'disabled checkbox' }} />
<Checkbox
disabled
checked
inputProps={{
'aria-label': 'disabled checked checkbox',
}}
/>
<Checkbox
defaultChecked
indeterminate
inputProps={{
'aria-label': 'indeterminate checkbox',
}}
/>
<Checkbox
defaultChecked
color="default"
inputProps={{
'aria-label': 'checkbox with default color',
}}
/>
<Checkbox
defaultChecked
size="small"
inputProps={{
'aria-label': 'checkbox with small size',
}}
inputProps={{ 'aria-label': 'disabled checked checkbox' }}
/>
</div>
);
Expand Down
48 changes: 3 additions & 45 deletions docs/src/pages/components/checkboxes/Checkboxes.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,57 +2,15 @@ import * as React from 'react';
import Checkbox from '@material-ui/core/Checkbox';

export default function Checkboxes() {
const [checked, setChecked] = React.useState(true);

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setChecked(event.target.checked);
};

return (
<div>
<Checkbox
checked={checked}
onChange={handleChange}
inputProps={{ 'aria-label': 'primary checkbox' }}
/>
<Checkbox
defaultChecked
color="primary"
inputProps={{ 'aria-label': 'secondary checkbox' }}
/>
<Checkbox
inputProps={{
'aria-label': 'uncontrolled-checkbox',
}}
/>
<Checkbox defaultChecked inputProps={{ 'aria-label': 'checked checkbox' }} />
<Checkbox inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />
<Checkbox disabled inputProps={{ 'aria-label': 'disabled checkbox' }} />
<Checkbox
disabled
checked
inputProps={{
'aria-label': 'disabled checked checkbox',
}}
/>
<Checkbox
defaultChecked
indeterminate
inputProps={{
'aria-label': 'indeterminate checkbox',
}}
/>
<Checkbox
defaultChecked
color="default"
inputProps={{
'aria-label': 'checkbox with default color',
}}
/>
<Checkbox
defaultChecked
size="small"
inputProps={{
'aria-label': 'checkbox with small size',
}}
inputProps={{ 'aria-label': 'disabled checked checkbox' }}
/>
</div>
);
Expand Down
Loading

0 comments on commit ea2bd5a

Please sign in to comment.