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

[Select] Add labelId to implement proper labelling #17892

Merged
merged 6 commits into from Oct 24, 2019
Merged

[Select] Add labelId to implement proper labelling #17892

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
ad1e770
[Select] Add labelId to implement proper labelling
eps1lon Oct 15, 2019
16ea4d5
Apply to other demos
eps1lon Oct 15, 2019
099d9a0
Add a11y docs
eps1lon Oct 15, 2019
12c4848
Fix hidden input having an id
eps1lon Oct 20, 2019
d296f6e
Add api docs
eps1lon Oct 20, 2019
c5b1f66
Fix missing label
eps1lon Oct 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
1 change: 1 addition & 0 deletions docs/pages/api/select.md
View file
Open in desktop
Expand Up @@ -31,6 +31,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| <span class="prop-name">IconComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">ArrowDropDownIcon</span> | The icon that displays the arrow. |
| <span class="prop-name">input</span> | <span class="prop-type">element</span> | | An `Input` element; does not have to be a material-ui specific `Input`. |
| <span class="prop-name">inputProps</span> | <span class="prop-type">object</span> | | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. When `native` is `true`, the attributes are applied on the `select` element. |
| <span class="prop-name">labelId</span> | <span class="prop-type">string</span> | | The idea of an element that acts as an additional label. The Select will be labelled by the additional label and the selected value. |
| <span class="prop-name">labelWidth</span> | <span class="prop-type">number</span> | <span class="prop-default">0</span> | The label width to be used on OutlinedInput. This prop is required when the `variant` prop is `outlined`. |
| <span class="prop-name">MenuProps</span> | <span class="prop-type">object</span> | | Props applied to the [`Menu`](/api/menu/) element. |
| <span class="prop-name">multiple</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If true, `value` must be an array and the menu will support multiple selections. |
Expand Down
8 changes: 3 additions & 5 deletions docs/src/pages/components/selects/ControlledOpenSelect.js
View file
Open in desktop
Expand Up @@ -40,17 +40,15 @@ export default function ControlledOpenSelect() {
Open the select
</Button>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="demo-controlled-open-select">Age</InputLabel>
<InputLabel id="demo-controlled-open-select-label">Age</InputLabel>
<Select
labelId="demo-controlled-open-select-label"
id="demo-controlled-open-select"
open={open}
onClose={handleClose}
onOpen={handleOpen}
value={age}
onChange={handleChange}
inputProps={{
name: 'age',
id: 'demo-controlled-open-select',
}}
>
<MenuItem value="">
<em>None</em>
Expand Down
8 changes: 3 additions & 5 deletions docs/src/pages/components/selects/ControlledOpenSelect.tsx
View file
Open in desktop
Expand Up @@ -42,17 +42,15 @@ export default function ControlledOpenSelect() {
Open the select
</Button>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="demo-controlled-open-select">Age</InputLabel>
<InputLabel id="demo-controlled-open-select-label">Age</InputLabel>
<Select
labelId="demo-controlled-open-select-label"
id="demo-controlled-open-select"
open={open}
onClose={handleClose}
onOpen={handleOpen}
value={age}
onChange={handleChange}
inputProps={{
name: 'age',
id: 'demo-controlled-open-select',
}}
>
<MenuItem value="">
<em>None</em>
Expand Down
15 changes: 9 additions & 6 deletions docs/src/pages/components/selects/CustomizedSelects.js
View file
Open in desktop
Expand Up @@ -61,15 +61,17 @@ export default function CustomizedSelects() {
return (
<form className={classes.root} autoComplete="off">
<FormControl className={classes.margin}>
<InputLabel htmlFor="age-customized-input">Age</InputLabel>
<BootstrapInput id="age-customized-input" />
<InputLabel htmlFor="demo-customized-textbox">Age</InputLabel>
<BootstrapInput id="demo-customized-textbox" />
</FormControl>
<FormControl className={classes.margin}>
<InputLabel htmlFor="age-customized-select">Age</InputLabel>
<InputLabel id="demo-customized-select-label">Age</InputLabel>
<Select
labelId="demo-customized-select-label"
id="demo-customized-select"
value={age}
onChange={handleChange}
input={<BootstrapInput name="age" id="age-customized-select" />}
input={<BootstrapInput />}
>
<MenuItem value="">
<em>None</em>
Expand All @@ -80,11 +82,12 @@ export default function CustomizedSelects() {
</Select>
</FormControl>
<FormControl className={classes.margin}>
<InputLabel htmlFor="age-customized-native-simple">Age</InputLabel>
<InputLabel htmlFor="demo-customized-select-native">Age</InputLabel>
<NativeSelect
id="demo-customized-select-native"
value={age}
onChange={handleChange}
input={<BootstrapInput name="age" id="age-customized-native-simple" />}
input={<BootstrapInput />}
>
<option value="" />
<option value={10}>Ten</option>
Expand Down
15 changes: 9 additions & 6 deletions docs/src/pages/components/selects/CustomizedSelects.tsx
View file
Open in desktop
Expand Up @@ -65,15 +65,17 @@ export default function CustomizedSelects() {
return (
<form className={classes.root} autoComplete="off">
<FormControl className={classes.margin}>
<InputLabel htmlFor="age-customized-input">Age</InputLabel>
<BootstrapInput id="age-customized-input" />
<InputLabel htmlFor="demo-customized-textbox">Age</InputLabel>
<BootstrapInput id="demo-customized-textbox" />
</FormControl>
<FormControl className={classes.margin}>
<InputLabel htmlFor="age-customized-select">Age</InputLabel>
<InputLabel id="demo-customized-select-label">Age</InputLabel>
<Select
labelId="demo-customized-select-label"
id="demo-customized-select"
value={age}
onChange={handleChange}
input={<BootstrapInput name="age" id="age-customized-select" />}
input={<BootstrapInput />}
>
<MenuItem value="">
<em>None</em>
Expand All @@ -84,11 +86,12 @@ export default function CustomizedSelects() {
</Select>
</FormControl>
<FormControl className={classes.margin}>
<InputLabel htmlFor="age-customized-native-simple">Age</InputLabel>
<InputLabel htmlFor="demo-customized-select-native">Age</InputLabel>
<NativeSelect
id="demo-customized-select-native"
value={age}
onChange={handleChange}
input={<BootstrapInput name="age" id="age-customized-native-simple" />}
input={<BootstrapInput />}
>
<option value="" />
<option value={10}>Ten</option>
Expand Down
34 changes: 17 additions & 17 deletions docs/src/pages/components/selects/DialogSelect.js
View file
Open in desktop
Expand Up @@ -24,37 +24,35 @@ const useStyles = makeStyles(theme => ({

export default function DialogSelect() {
const classes = useStyles();
const [state, setState] = React.useState({
open: false,
age: '',
});
const [open, setOpen] = React.useState(false);
const [age, setAge] = React.useState('');

const handleChange = name => event => {
setState({ ...state, [name]: Number(event.target.value) || '' });
const handleChange = event => {
setAge(Number(event.target.value) || '');
};

const handleClickOpen = () => {
setState({ ...state, open: true });
setOpen(true);
};

const handleClose = () => {
setState({ ...state, open: false });
setOpen(false);
};

return (
<div>
<Button onClick={handleClickOpen}>Open select dialog</Button>
<Dialog disableBackdropClick disableEscapeKeyDown open={state.open} onClose={handleClose}>
<Dialog disableBackdropClick disableEscapeKeyDown open={open} onClose={handleClose}>
<DialogTitle>Fill the form</DialogTitle>
<DialogContent>
<form className={classes.container}>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="age-native-simple">Age</InputLabel>
<InputLabel htmlFor="demo-dialog-native">Age</InputLabel>
<Select
native
value={state.age}
onChange={handleChange('age')}
input={<Input id="age-native-simple" />}
value={age}
onChange={handleChange}
input={<Input id="demo-dialog-native" />}
>
<option value="" />
<option value={10}>Ten</option>
Expand All @@ -63,11 +61,13 @@ export default function DialogSelect() {
</Select>
</FormControl>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="age-simple">Age</InputLabel>
<InputLabel id="demo-dialog-select-label">Age</InputLabel>
<Select
value={state.age}
onChange={handleChange('age')}
input={<Input id="age-simple" />}
labelId="demo-dialog-select-label"
id="demo-dialog-select"
value={age}
onChange={handleChange}
input={<Input />}
>
<MenuItem value="">
<em>None</em>
Expand Down
36 changes: 17 additions & 19 deletions docs/src/pages/components/selects/DialogSelect.tsx
View file
Open in desktop
Expand Up @@ -26,39 +26,35 @@ const useStyles = makeStyles((theme: Theme) =>

export default function DialogSelect() {
const classes = useStyles();
const [state, setState] = React.useState({
open: false,
age: '',
});
const [open, setOpen] = React.useState(false);
const [age, setAge] = React.useState<number | string>('');

const handleChange = (name: keyof typeof state) => (
event: React.ChangeEvent<{ value: unknown }>,
) => {
setState({ ...state, [name]: Number(event.target.value) || '' });
const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
setAge(Number(event.target.value) || '');
};

const handleClickOpen = () => {
setState({ ...state, open: true });
setOpen(true);
};

const handleClose = () => {
setState({ ...state, open: false });
setOpen(false);
};

return (
<div>
<Button onClick={handleClickOpen}>Open select dialog</Button>
<Dialog disableBackdropClick disableEscapeKeyDown open={state.open} onClose={handleClose}>
<Dialog disableBackdropClick disableEscapeKeyDown open={open} onClose={handleClose}>
<DialogTitle>Fill the form</DialogTitle>
<DialogContent>
<form className={classes.container}>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="age-native-simple">Age</InputLabel>
<InputLabel htmlFor="demo-dialog-native">Age</InputLabel>
<Select
native
value={state.age}
onChange={handleChange('age')}
input={<Input id="age-native-simple" />}
value={age}
onChange={handleChange}
input={<Input id="demo-dialog-native" />}
>
<option value="" />
<option value={10}>Ten</option>
Expand All @@ -67,11 +63,13 @@ export default function DialogSelect() {
</Select>
</FormControl>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="age-simple">Age</InputLabel>
<InputLabel id="demo-dialog-select-label">Age</InputLabel>
<Select
value={state.age}
onChange={handleChange('age')}
input={<Input id="age-simple" />}
labelId="demo-dialog-select-label"
id="demo-dialog-select"
value={age}
onChange={handleChange}
input={<Input />}
>
<MenuItem value="">
<em>None</em>
Expand Down
18 changes: 12 additions & 6 deletions docs/src/pages/components/selects/MultipleSelect.js
View file
Open in desktop
Expand Up @@ -88,12 +88,14 @@ export default function MultipleSelect() {
return (
<div className={classes.root}>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="select-multiple">Name</InputLabel>
<InputLabel id="demo-mutiple-name-label">Name</InputLabel>
<Select
labelId="demo-mutiple-name-label"
id="demo-mutiple-name"
multiple
value={personName}
onChange={handleChange}
input={<Input id="select-multiple" />}
input={<Input />}
MenuProps={MenuProps}
>
{names.map(name => (
Expand All @@ -104,12 +106,14 @@ export default function MultipleSelect() {
</Select>
</FormControl>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="select-multiple-checkbox">Tag</InputLabel>
<InputLabel id="demo-mutiple-checkbox-label">Tag</InputLabel>
<Select
labelId="demo-mutiple-checkbox-label"
id="demo-mutiple-checkbox"
multiple
value={personName}
onChange={handleChange}
input={<Input id="select-multiple-checkbox" />}
input={<Input />}
renderValue={selected => selected.join(', ')}
MenuProps={MenuProps}
>
Expand All @@ -122,8 +126,10 @@ export default function MultipleSelect() {
</Select>
</FormControl>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="select-multiple-chip">Chip</InputLabel>
<InputLabel id="demo-mutiple-chip-label">Chip</InputLabel>
<Select
labelId="demo-mutiple-chip-label"
id="demo-mutiple-chip"
multiple
value={personName}
onChange={handleChange}
Expand All @@ -150,7 +156,7 @@ export default function MultipleSelect() {
displayEmpty
value={personName}
onChange={handleChange}
input={<Input id="select-multiple-placeholder" />}
input={<Input />}
renderValue={selected => {
if (selected.length === 0) {
return <em>Placeholder</em>;
Expand Down
18 changes: 12 additions & 6 deletions docs/src/pages/components/selects/MultipleSelect.tsx
View file
Open in desktop
Expand Up @@ -90,12 +90,14 @@ export default function MultipleSelect() {
return (
<div className={classes.root}>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="select-multiple">Name</InputLabel>
<InputLabel id="demo-mutiple-name-label">Name</InputLabel>
<Select
labelId="demo-mutiple-name-label"
id="demo-mutiple-name"
multiple
value={personName}
onChange={handleChange}
input={<Input id="select-multiple" />}
input={<Input />}
MenuProps={MenuProps}
>
{names.map(name => (
Expand All @@ -106,12 +108,14 @@ export default function MultipleSelect() {
</Select>
</FormControl>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="select-multiple-checkbox">Tag</InputLabel>
<InputLabel id="demo-mutiple-checkbox-label">Tag</InputLabel>
<Select
labelId="demo-mutiple-checkbox-label"
id="demo-mutiple-checkbox"
multiple
value={personName}
onChange={handleChange}
input={<Input id="select-multiple-checkbox" />}
input={<Input />}
renderValue={selected => (selected as string[]).join(', ')}
MenuProps={MenuProps}
>
Expand All @@ -124,8 +128,10 @@ export default function MultipleSelect() {
</Select>
</FormControl>
<FormControl className={classes.formControl}>
<InputLabel htmlFor="select-multiple-chip">Chip</InputLabel>
<InputLabel id="demo-mutiple-chip-label">Chip</InputLabel>
<Select
labelId="demo-mutiple-chip-label"
id="demo-mutiple-chip"
multiple
value={personName}
onChange={handleChange}
Expand All @@ -152,7 +158,7 @@ export default function MultipleSelect() {
displayEmpty
value={personName}
onChange={handleChange}
input={<Input id="select-multiple-placeholder" />}
input={<Input />}
renderValue={selected => {
if ((selected as string[]).length === 0) {
return <em>Placeholder</em>;
Expand Down