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] Simplify some demos #19608

Merged
merged 10 commits into from
Mar 4, 2020
Merged

[docs] Simplify some demos #19608

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
cd27851
Remove redundant upload button examples
mbrookes Jan 5, 2020
fe70b8c
selection control consistency
mbrookes Jan 5, 2020
d17c53b
f
mbrookes Jan 5, 2020
1ad50d9
Simplify read group demo
mbrookes Jan 5, 2020
bc1a8c8
Fix Radio label position demo
mbrookes Jan 5, 2020
fadb4e8
Slider - improve markdown
mbrookes Jan 5, 2020
d03170d
label disabled continuous slider
mbrookes Jan 5, 2020
f8d86f9
Break up discrete slider demos
mbrookes Jan 6, 2020
ffd8d3c
prettier
mbrookes Feb 7, 2020
cd10d65
lint
mbrookes Feb 7, 2020
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
22 changes: 0 additions & 22 deletions docs/src/pages/components/buttons/UploadButtons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,28 +32,6 @@ export default function UploadButtons() {
Upload
</Button>
</label>
<input
accept="image/*"
className={classes.input}
id="text-button-file"
multiple
type="file"
/>
<label htmlFor="text-button-file">
<Button component="span">Upload</Button>
</label>
<input
accept="image/*"
className={classes.input}
id="outlined-button-file"
multiple
type="file"
/>
<label htmlFor="outlined-button-file">
<Button variant="outlined" component="span">
Upload
</Button>
</label>
<input accept="image/*" className={classes.input} id="icon-button-file" type="file" />
<label htmlFor="icon-button-file">
<IconButton color="primary" aria-label="upload picture" component="span">
Expand Down
22 changes: 0 additions & 22 deletions docs/src/pages/components/buttons/UploadButtons.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,28 +34,6 @@ export default function UploadButtons() {
Upload
</Button>
</label>
<input
accept="image/*"
className={classes.input}
id="text-button-file"
multiple
type="file"
/>
<label htmlFor="text-button-file">
<Button component="span">Upload</Button>
</label>
<input
accept="image/*"
className={classes.input}
id="outlined-button-file"
multiple
type="file"
/>
<label htmlFor="outlined-button-file">
<Button variant="outlined" component="span">
Upload
</Button>
</label>
<input accept="image/*" className={classes.input} id="icon-button-file" type="file" />
<label htmlFor="icon-button-file">
<IconButton color="primary" aria-label="upload picture" component="span">
Expand Down
6 changes: 5 additions & 1 deletion docs/src/pages/components/checkboxes/checkboxes.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,13 @@ If you have multiple options appearing in a list,
you can preserve space by using checkboxes instead of on/off switches.
If you have a single option, avoid using a checkbox and use an on/off switch instead.

## Basic checkboxes

{{"demo": "pages/components/checkboxes/Checkboxes.js"}}

`Checkbox` can also be used with a label description thanks to the `FormControlLabel` component.
## Checkbox with FormControlLabel

`Checkbox` can be provided with a label thanks to the `FormControlLabel` component.

{{"demo": "pages/components/checkboxes/CheckboxLabels.js"}}

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/radio-buttons/FormControlLabelPosition.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';

export default function FormControlLabelPosition() {
const [value, setValue] = React.useState('female');
const [value, setValue] = React.useState('top');

const handleChange = event => {
setValue(event.target.value);
Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/radio-buttons/FormControlLabelPosition.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';

export default function FormControlLabelPosition() {
const [value, setValue] = React.useState('female');
const [value, setValue] = React.useState('top');

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setValue((event.target as HTMLInputElement).value);
Expand Down
65 changes: 9 additions & 56 deletions docs/src/pages/components/radio-buttons/RadioButtonsGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,73 +1,26 @@
import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';

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

export default function RadioButtonsGroup() {
const classes = useStyles();
const [value, setValue] = React.useState('female');

const handleChange = event => {
setValue(event.target.value);
};

return (
<div>
<FormControl component="fieldset" className={classes.formControl}>
<FormLabel component="legend">Gender</FormLabel>
<RadioGroup aria-label="gender" name="gender1" value={value} onChange={handleChange}>
<FormControlLabel value="female" control={<Radio />} label="Female" />
<FormControlLabel value="male" control={<Radio />} label="Male" />
<FormControlLabel value="other" control={<Radio />} label="Other" />
<FormControlLabel
value="disabled"
disabled
control={<Radio />}
label="(Disabled option)"
/>
</RadioGroup>
</FormControl>
<FormControl component="fieldset" className={classes.formControl}>
<FormLabel component="legend">Gender</FormLabel>
<RadioGroup aria-label="gender" name="gender2" value={value} onChange={handleChange}>
<FormControlLabel
value="female"
control={<Radio color="primary" />}
label="Female"
labelPlacement="start"
/>
<FormControlLabel
value="male"
control={<Radio color="primary" />}
label="Male"
labelPlacement="start"
/>
<FormControlLabel
value="other"
control={<Radio color="primary" />}
label="Other"
labelPlacement="start"
/>
<FormControlLabel
value="disabled"
disabled
control={<Radio />}
label="(Disabled option)"
labelPlacement="start"
/>
</RadioGroup>
<FormHelperText>labelPlacement start</FormHelperText>
</FormControl>
</div>
<FormControl component="fieldset">
<FormLabel component="legend">Gender</FormLabel>
<RadioGroup aria-label="gender" name="gender1" value={value} onChange={handleChange}>
<FormControlLabel value="female" control={<Radio />} label="Female" />
<FormControlLabel value="male" control={<Radio />} label="Male" />
<FormControlLabel value="other" control={<Radio />} label="Other" />
<FormControlLabel value="disabled" disabled control={<Radio />} label="(Disabled option)" />
</RadioGroup>
</FormControl>
);
}
67 changes: 9 additions & 58 deletions docs/src/pages/components/radio-buttons/RadioButtonsGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,75 +1,26 @@
import React from 'react';
import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
import Radio from '@material-ui/core/Radio';
import RadioGroup from '@material-ui/core/RadioGroup';
import FormHelperText from '@material-ui/core/FormHelperText';
import FormControlLabel from '@material-ui/core/FormControlLabel';
import FormControl from '@material-ui/core/FormControl';
import FormLabel from '@material-ui/core/FormLabel';

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

export default function RadioButtonsGroup() {
const classes = useStyles();
const [value, setValue] = React.useState('female');

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setValue((event.target as HTMLInputElement).value);
};

return (
<div>
<FormControl component="fieldset" className={classes.formControl}>
<FormLabel component="legend">Gender</FormLabel>
<RadioGroup aria-label="gender" name="gender1" value={value} onChange={handleChange}>
<FormControlLabel value="female" control={<Radio />} label="Female" />
<FormControlLabel value="male" control={<Radio />} label="Male" />
<FormControlLabel value="other" control={<Radio />} label="Other" />
<FormControlLabel
value="disabled"
disabled
control={<Radio />}
label="(Disabled option)"
/>
</RadioGroup>
</FormControl>
<FormControl component="fieldset" className={classes.formControl}>
<FormLabel component="legend">Gender</FormLabel>
<RadioGroup aria-label="gender" name="gender2" value={value} onChange={handleChange}>
<FormControlLabel
value="female"
control={<Radio color="primary" />}
label="Female"
labelPlacement="start"
/>
<FormControlLabel
value="male"
control={<Radio color="primary" />}
label="Male"
labelPlacement="start"
/>
<FormControlLabel
value="other"
control={<Radio color="primary" />}
label="Other"
labelPlacement="start"
/>
<FormControlLabel
value="disabled"
disabled
control={<Radio />}
label="(Disabled option)"
labelPlacement="start"
/>
</RadioGroup>
<FormHelperText>labelPlacement start</FormHelperText>
</FormControl>
</div>
<FormControl component="fieldset">
<FormLabel component="legend">Gender</FormLabel>
<RadioGroup aria-label="gender" name="gender1" value={value} onChange={handleChange}>
<FormControlLabel value="female" control={<Radio />} label="Female" />
<FormControlLabel value="male" control={<Radio />} label="Male" />
<FormControlLabel value="other" control={<Radio />} label="Other" />
<FormControlLabel value="disabled" disabled control={<Radio />} label="(Disabled option)" />
</RadioGroup>
</FormControl>
);
}
6 changes: 4 additions & 2 deletions docs/src/pages/components/radio-buttons/radio-buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,15 @@ If available options can be collapsed, consider using a dropdown menu because it

Radio buttons should have the most commonly used option selected by default.

## RadioGroup

`RadioGroup` is a helpful wrapper used to group `Radio` components that provides an easier API, and proper keyboard accessibility to the group.

{{"demo": "pages/components/radio-buttons/RadioButtonsGroup.js"}}

## Standalone Radio Buttons
## Standalone radio buttons

`Radio` can also be used standalone, without the wrapper.
`Radio` can also be used standalone, without the RadioGroup wrapper.

{{"demo": "pages/components/radio-buttons/RadioButtons.js"}}

Expand Down
5 changes: 4 additions & 1 deletion docs/src/pages/components/slider/ContinuousSlider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,10 @@ export default function ContinuousSlider() {
<VolumeUp />
</Grid>
</Grid>
<Slider disabled defaultValue={30} aria-labelledby="continuous-slider" />
<Typography id="disabled-slider" gutterBottom>
Disabled slider
</Typography>
<Slider disabled defaultValue={30} aria-labelledby="disabled-slider" />
</div>
);
}
5 changes: 4 additions & 1 deletion docs/src/pages/components/slider/ContinuousSlider.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,10 @@ export default function ContinuousSlider() {
<VolumeUp />
</Grid>
</Grid>
<Slider disabled defaultValue={30} aria-labelledby="continuous-slider" />
<Typography id="disabled-slider" gutterBottom>
Disabled slider
</Typography>
<Slider disabled defaultValue={30} aria-labelledby="disabled-slider" />
</div>
);
}
Loading