[core] Batch small changes (#20111)

mui · Mar 16, 2020 · 836b11e · 836b11e
1 parent 294760f
commit 836b11e
Show file tree

Hide file tree

Showing 40 changed files with 174 additions and 281 deletions.
diff --git a/docs/pages/api-docs/checkbox.md b/docs/pages/api-docs/checkbox.md
@@ -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.
 

diff --git a/docs/pages/api-docs/switch.md b/docs/pages/api-docs/switch.md
@@ -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.
 

diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -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: {

diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js
@@ -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,
     },

diff --git a/docs/src/pages/components/autocomplete/autocomplete.md b/docs/src/pages/components/autocomplete/autocomplete.md
@@ -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.

diff --git a/docs/src/pages/components/checkboxes/CheckboxLabels.js b/docs/src/pages/components/checkboxes/CheckboxLabels.js
@@ -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"

diff --git a/docs/src/pages/components/checkboxes/CheckboxLabels.tsx b/docs/src/pages/components/checkboxes/CheckboxLabels.tsx
@@ -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"

diff --git a/docs/src/pages/components/checkboxes/Checkboxes.js b/docs/src/pages/components/checkboxes/Checkboxes.js
@@ -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>

diff --git a/docs/src/pages/components/checkboxes/Checkboxes.tsx b/docs/src/pages/components/checkboxes/Checkboxes.tsx
@@ -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>

diff --git a/docs/src/pages/components/checkboxes/CheckboxesGroup.js b/docs/src/pages/components/checkboxes/CheckboxesGroup.js
@@ -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;
@@ -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>
@@ -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>

diff --git a/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx b/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx
@@ -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;
@@ -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>
@@ -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>