[docs] Use input element when possible

A follow-up on mui#20052
oliviertassinari · Mar 14, 2020 · cbd55f0 · cbd55f0
1 parent 804433e
commit cbd55f0
Show file tree

Hide file tree

Showing 26 changed files with 154 additions and 265 deletions.
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>

diff --git a/docs/src/pages/components/chips/ChipsPlayground.js b/docs/src/pages/components/chips/ChipsPlayground.js
@@ -33,11 +33,10 @@ function ChipsPlayground(props) {
     size: 'medium',
   });
 
-  const handleChange = key => event => {
-    const value = event.target.value;
+  const handleChange = event => {
     setState(state => ({
       ...state,
-      [key]: value,
+      [event.target.name]: event.target.value,
     }));
   };
 
@@ -131,7 +130,7 @@ function ChipsPlayground(props) {
                 name="variant"
                 aria-label="variant"
                 value={variant}
-                onChange={handleChange('variant')}
+                onChange={handleChange}
               >
                 <FormControlLabel value="default" control={<Radio />} label="default" />
                 <FormControlLabel value="outlined" control={<Radio />} label="outlined" />
@@ -141,13 +140,7 @@ function ChipsPlayground(props) {
           <Grid item xs={12} md={6}>
             <FormControl component="fieldset">
               <FormLabel>color</FormLabel>
-              <RadioGroup
-                row
-                name="color"
-                aria-label="color"
-                value={color}
-                onChange={handleChange('color')}
-              >
+              <RadioGroup row name="color" aria-label="color" value={color} onChange={handleChange}>
                 <FormControlLabel value="default" control={<Radio />} label="default" />
                 <FormControlLabel value="primary" control={<Radio />} label="primary" />
                 <FormControlLabel value="secondary" control={<Radio />} label="secondary" />
@@ -157,13 +150,7 @@ function ChipsPlayground(props) {
           <Grid item xs={12} md={6}>
             <FormControl component="fieldset">
               <FormLabel>size</FormLabel>
-              <RadioGroup
-                row
-                name="sizet"
-                aria-label="size"
-                value={size}
-                onChange={handleChange('size')}
-              >
+              <RadioGroup row name="size" aria-label="size" value={size} onChange={handleChange}>
                 <FormControlLabel value="medium" control={<Radio />} label="medium" />
                 <FormControlLabel value="small" control={<Radio />} label="small" />
               </RadioGroup>
@@ -172,13 +159,7 @@ function ChipsPlayground(props) {
           <Grid item xs={12} md={6}>
             <FormControl component="fieldset">
               <FormLabel>icon</FormLabel>
-              <RadioGroup
-                row
-                name="icon"
-                aria-label="icon"
-                value={icon}
-                onChange={handleChange('icon')}
-              >
+              <RadioGroup row name="icon" aria-label="icon" value={icon} onChange={handleChange}>
                 <FormControlLabel value="none" control={<Radio />} label="none" />
                 <FormControlLabel value="icon" control={<Radio />} label="icon" />
               </RadioGroup>
@@ -192,7 +173,7 @@ function ChipsPlayground(props) {
                 name="avatar"
                 aria-label="avatar"
                 value={avatar}
-                onChange={handleChange('avatar')}
+                onChange={handleChange}
               >
                 <FormControlLabel value="none" control={<Radio />} label="none" />
                 <FormControlLabel value="letter" control={<Radio />} label="letter" />
@@ -208,7 +189,7 @@ function ChipsPlayground(props) {
                 name="onDelete"
                 aria-label="on delete"
                 value={onDelete}
-                onChange={handleChange('onDelete')}
+                onChange={handleChange}
               >
                 <FormControlLabel value="none" control={<Radio />} label="none" />
                 <FormControlLabel value="default" control={<Radio />} label="default" />