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

[core] Batch small changes #20111

Merged
merged 7 commits into from
Mar 16, 2020
Merged

[core] Batch small changes #20111

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7a7ea70
[core] Uniformize pseudo-classes syntax
oliviertassinari Mar 14, 2020
b194f0b
[Autocomplete] Provide more context on the use cases
oliviertassinari Mar 14, 2020
74fab3b
[test] Remove dead method
oliviertassinari Mar 14, 2020
64b584b
[docs] Use input element when possible
oliviertassinari Mar 14, 2020
cd4ab7a
[core] Use light for the ternary
oliviertassinari Mar 14, 2020
45a549b
[Checkbox] Document the default value's prop value
oliviertassinari Mar 14, 2020
700d550
Revert "[test] Remove dead method"
oliviertassinari Mar 15, 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
2 changes: 1 addition & 1 deletion docs/pages/api-docs/checkbox.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| <span class="prop-name">required</span> | <span class="prop-type">bool</span> | | If `true`, the `input` element will be required. |
| <span class="prop-name">size</span> | <span class="prop-type">'small'<br>&#124;&nbsp;'medium'</span> | <span class="prop-default">'medium'</span> | The size of the checkbox. `small` is equivalent to the dense checkbox styling. |
| <span class="prop-name">type</span> | <span class="prop-type">string</span> | | The input component prop `type`. |
| <span class="prop-name">value</span> | <span class="prop-type">any</span> | | The value of the component. The DOM API casts this to a string. |
| <span class="prop-name">value</span> | <span class="prop-type">any</span> | | The value of the component. The DOM API casts this to a string. The browser uses "on" as the default value. |

The `ref` is forwarded to the root element.

Expand Down
2 changes: 1 addition & 1 deletion docs/pages/api-docs/switch.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ You can learn more about the difference by [reading this guide](/guides/minimizi
| <span class="prop-name">required</span> | <span class="prop-type">bool</span> | | If `true`, the `input` element will be required. |
| <span class="prop-name">size</span> | <span class="prop-type">'small'<br>&#124;&nbsp;'medium'</span> | <span class="prop-default">'medium'</span> | The size of the switch. `small` is equivalent to the dense switch styling. |
| <span class="prop-name">type</span> | <span class="prop-type">string</span> | | The input component prop `type`. |
| <span class="prop-name">value</span> | <span class="prop-type">any</span> | | The value of the component. The DOM API casts this to a string. |
| <span class="prop-name">value</span> | <span class="prop-type">any</span> | | The value of the component. The DOM API casts this to a string. The browser uses "on" as the default value. |

The `ref` is forwarded to the root element.

Expand Down
4 changes: 2 additions & 2 deletions docs/src/modules/components/AppFrame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,8 +112,8 @@ const styles = theme => ({
},
},
appBar: {
color: theme.palette.type === 'dark' ? '#fff' : null,
backgroundColor: theme.palette.type === 'dark' ? theme.palette.background.level2 : null,
color: theme.palette.type === 'light' ? null : '#fff',
backgroundColor: theme.palette.type === 'light' ? null : theme.palette.background.level2,
transition: theme.transitions.create('width'),
},
language: {
Expand Down
2 changes: 1 addition & 1 deletion docs/src/modules/components/MarkdownElement.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -139,7 +139,7 @@ const styles = theme => ({
padding: '2px 6px',
color: theme.palette.text.primary,
backgroundColor:
theme.palette.type === 'dark' ? 'rgba(255,229,100,0.2)' : 'rgba(255,229,100,0.1)',
theme.palette.type === 'light' ? 'rgba(255, 229, 100, 0.1)' : 'rgba(255, 229, 100, 0.2)',
fontSize: 14,
borderRadius: 2,
},
Expand Down
2 changes: 2 additions & 0 deletions docs/src/pages/components/autocomplete/autocomplete.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ The widget is useful for setting the value of a single-line textbox in one of tw
1. The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name: [combo box](#combo-box).
2. The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., a search field may suggest similar or previous searches to save the user time: [free solo](#free-solo).

It's meant to be an improved version of the "react-select" and "downshift" packages.

## Combo box

The value must be chosen from a predefined set of allowed values.
Expand Down
22 changes: 10 additions & 12 deletions docs/src/pages/components/checkboxes/CheckboxLabels.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,56 +28,54 @@ export default function CheckboxLabels() {
});

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

return (
<FormGroup row>
<FormControlLabel
control={<Checkbox checked={state.checkedA} onChange={handleChange} value="checkedA" />}
control={<Checkbox checked={state.checkedA} onChange={handleChange} name="checkedA" />}
label="Secondary"
/>
<FormControlLabel
control={
<Checkbox
checked={state.checkedB}
onChange={handleChange}
value="checkedB"
name="checkedB"
color="primary"
/>
}
label="Primary"
/>
<FormControlLabel control={<Checkbox value="checkedC" />} label="Uncontrolled" />
<FormControlLabel disabled control={<Checkbox value="checkedD" />} label="Disabled" />
<FormControlLabel disabled control={<Checkbox checked value="checkedE" />} label="Disabled" />
<FormControlLabel control={<Checkbox name="checkedC" />} label="Uncontrolled" />
<FormControlLabel disabled control={<Checkbox name="checkedD" />} label="Disabled" />
<FormControlLabel disabled control={<Checkbox checked name="checkedE" />} label="Disabled" />
<FormControlLabel
control={
<Checkbox
checked={state.checkedF}
onChange={handleChange}
value="checkedF"
name="checkedF"
indeterminate
/>
}
label="Indeterminate"
/>
<FormControlLabel
control={
<GreenCheckbox checked={state.checkedG} onChange={handleChange} value="checkedG" />
}
control={<GreenCheckbox checked={state.checkedG} onChange={handleChange} name="checkedG" />}
label="Custom color"
/>
<FormControlLabel
control={<Checkbox icon={<FavoriteBorder />} checkedIcon={<Favorite />} value="checkedH" />}
control={<Checkbox icon={<FavoriteBorder />} checkedIcon={<Favorite />} name="checkedH" />}
label="Custom icon"
/>
<FormControlLabel
control={
<Checkbox
icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
checkedIcon={<CheckBoxIcon fontSize="small" />}
value="checkedI"
name="checkedI"
/>
}
label="Custom size"
Expand Down
22 changes: 10 additions & 12 deletions docs/src/pages/components/checkboxes/CheckboxLabels.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,56 +28,54 @@ export default function CheckboxLabels() {
});

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

return (
<FormGroup row>
<FormControlLabel
control={<Checkbox checked={state.checkedA} onChange={handleChange} value="checkedA" />}
control={<Checkbox checked={state.checkedA} onChange={handleChange} name="checkedA" />}
label="Secondary"
/>
<FormControlLabel
control={
<Checkbox
checked={state.checkedB}
onChange={handleChange}
value="checkedB"
name="checkedB"
color="primary"
/>
}
label="Primary"
/>
<FormControlLabel control={<Checkbox value="checkedC" />} label="Uncontrolled" />
<FormControlLabel disabled control={<Checkbox value="checkedD" />} label="Disabled" />
<FormControlLabel disabled control={<Checkbox checked value="checkedE" />} label="Disabled" />
<FormControlLabel control={<Checkbox name="checkedC" />} label="Uncontrolled" />
<FormControlLabel disabled control={<Checkbox name="checkedD" />} label="Disabled" />
<FormControlLabel disabled control={<Checkbox checked name="checkedE" />} label="Disabled" />
<FormControlLabel
control={
<Checkbox
checked={state.checkedF}
onChange={handleChange}
value="checkedF"
name="checkedF"
indeterminate
/>
}
label="Indeterminate"
/>
<FormControlLabel
control={
<GreenCheckbox checked={state.checkedG} onChange={handleChange} value="checkedG" />
}
control={<GreenCheckbox checked={state.checkedG} onChange={handleChange} name="checkedG" />}
label="Custom color"
/>
<FormControlLabel
control={<Checkbox icon={<FavoriteBorder />} checkedIcon={<Favorite />} value="checkedH" />}
control={<Checkbox icon={<FavoriteBorder />} checkedIcon={<Favorite />} name="checkedH" />}
label="Custom icon"
/>
<FormControlLabel
control={
<Checkbox
icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
checkedIcon={<CheckBoxIcon fontSize="small" />}
value="checkedI"
name="checkedI"
/>
}
label="Custom size"
Expand Down
16 changes: 3 additions & 13 deletions docs/src/pages/components/checkboxes/Checkboxes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,39 +13,29 @@ export default function Checkboxes() {
<Checkbox
checked={checked}
onChange={handleChange}
value="primary"
inputProps={{ 'aria-label': 'primary checkbox' }}
/>
<Checkbox
defaultChecked
value="secondary"
color="primary"
inputProps={{ 'aria-label': 'secondary checkbox' }}
/>
<Checkbox value="uncontrolled" inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />
<Checkbox disabled value="disabled" inputProps={{ 'aria-label': 'disabled checkbox' }} />
<Checkbox
disabled
checked
value="disabled checked"
inputProps={{ 'aria-label': 'disabled 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
value="indeterminate"
indeterminate
inputProps={{ 'aria-label': 'indeterminate checkbox' }}
/>
<Checkbox
defaultChecked
color="default"
value="default"
inputProps={{ 'aria-label': 'checkbox with default color' }}
/>
<Checkbox
defaultChecked
size="small"
value="small"
inputProps={{ 'aria-label': 'checkbox with small size' }}
/>
</div>
Expand Down
16 changes: 3 additions & 13 deletions docs/src/pages/components/checkboxes/Checkboxes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,39 +13,29 @@ export default function Checkboxes() {
<Checkbox
checked={checked}
onChange={handleChange}
value="primary"
inputProps={{ 'aria-label': 'primary checkbox' }}
/>
<Checkbox
defaultChecked
value="secondary"
color="primary"
inputProps={{ 'aria-label': 'secondary checkbox' }}
/>
<Checkbox value="uncontrolled" inputProps={{ 'aria-label': 'uncontrolled-checkbox' }} />
<Checkbox disabled value="disabled" inputProps={{ 'aria-label': 'disabled checkbox' }} />
<Checkbox
disabled
checked
value="disabled checked"
inputProps={{ 'aria-label': 'disabled 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
value="indeterminate"
indeterminate
inputProps={{ 'aria-label': 'indeterminate checkbox' }}
/>
<Checkbox
defaultChecked
color="default"
value="default"
inputProps={{ 'aria-label': 'checkbox with default color' }}
/>
<Checkbox
defaultChecked
size="small"
value="small"
inputProps={{ 'aria-label': 'checkbox with small size' }}
/>
</div>
Expand Down
14 changes: 7 additions & 7 deletions docs/src/pages/components/checkboxes/CheckboxesGroup.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ export default function CheckboxesGroup() {
});

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

const { gilad, jason, antoine } = state;
Expand All @@ -37,15 +37,15 @@ export default function CheckboxesGroup() {
<FormLabel component="legend">Assign responsibility</FormLabel>
<FormGroup>
<FormControlLabel
control={<Checkbox checked={gilad} onChange={handleChange} value="gilad" />}
control={<Checkbox checked={gilad} onChange={handleChange} name="gilad" />}
label="Gilad Gray"
/>
<FormControlLabel
control={<Checkbox checked={jason} onChange={handleChange} value="jason" />}
control={<Checkbox checked={jason} onChange={handleChange} name="jason" />}
label="Jason Killian"
/>
<FormControlLabel
control={<Checkbox checked={antoine} onChange={handleChange} value="antoine" />}
control={<Checkbox checked={antoine} onChange={handleChange} name="antoine" />}
label="Antoine Llorca"
/>
</FormGroup>
Expand All @@ -55,15 +55,15 @@ export default function CheckboxesGroup() {
<FormLabel component="legend">Pick two</FormLabel>
<FormGroup>
<FormControlLabel
control={<Checkbox checked={gilad} onChange={handleChange} value="gilad" />}
control={<Checkbox checked={gilad} onChange={handleChange} name="gilad" />}
label="Gilad Gray"
/>
<FormControlLabel
control={<Checkbox checked={jason} onChange={handleChange} value="jason" />}
control={<Checkbox checked={jason} onChange={handleChange} name="jason" />}
label="Jason Killian"
/>
<FormControlLabel
control={<Checkbox checked={antoine} onChange={handleChange} value="antoine" />}
control={<Checkbox checked={antoine} onChange={handleChange} name="antoine" />}
label="Antoine Llorca"
/>
</FormGroup>
Expand Down
14 changes: 7 additions & 7 deletions docs/src/pages/components/checkboxes/CheckboxesGroup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ export default function CheckboxesGroup() {
});

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

const { gilad, jason, antoine } = state;
Expand All @@ -39,15 +39,15 @@ export default function CheckboxesGroup() {
<FormLabel component="legend">Assign responsibility</FormLabel>
<FormGroup>
<FormControlLabel
control={<Checkbox checked={gilad} onChange={handleChange} value="gilad" />}
control={<Checkbox checked={gilad} onChange={handleChange} name="gilad" />}
label="Gilad Gray"
/>
<FormControlLabel
control={<Checkbox checked={jason} onChange={handleChange} value="jason" />}
control={<Checkbox checked={jason} onChange={handleChange} name="jason" />}
label="Jason Killian"
/>
<FormControlLabel
control={<Checkbox checked={antoine} onChange={handleChange} value="antoine" />}
control={<Checkbox checked={antoine} onChange={handleChange} name="antoine" />}
label="Antoine Llorca"
/>
</FormGroup>
Expand All @@ -57,15 +57,15 @@ export default function CheckboxesGroup() {
<FormLabel component="legend">Pick two</FormLabel>
<FormGroup>
<FormControlLabel
control={<Checkbox checked={gilad} onChange={handleChange} value="gilad" />}
control={<Checkbox checked={gilad} onChange={handleChange} name="gilad" />}
label="Gilad Gray"
/>
<FormControlLabel
control={<Checkbox checked={jason} onChange={handleChange} value="jason" />}
control={<Checkbox checked={jason} onChange={handleChange} name="jason" />}
label="Jason Killian"
/>
<FormControlLabel
control={<Checkbox checked={antoine} onChange={handleChange} value="antoine" />}
control={<Checkbox checked={antoine} onChange={handleChange} name="antoine" />}
label="Antoine Llorca"
/>
</FormGroup>
Expand Down
Loading