Update FormControl variant in docs and regressions

mui · Mar 8, 2021 · 713d4cf · 713d4cf
1 parent e5925d1
commit 713d4cf
Show file tree

Hide file tree

Showing 18 changed files with 64 additions and 31 deletions.
diff --git a/docs/src/pages/components/checkboxes/CheckboxesGroup.js b/docs/src/pages/components/checkboxes/CheckboxesGroup.js
@@ -36,7 +36,11 @@ export default function CheckboxesGroup() {
 
   return (
     <div className={classes.root}>
-      <FormControl component="fieldset" className={classes.formControl}>
+      <FormControl
+        component="fieldset"
+        className={classes.formControl}
+        variant="standard"
+      >
         <FormLabel component="legend">Assign responsibility</FormLabel>
         <FormGroup>
           <FormControlLabel
@@ -65,6 +69,7 @@ export default function CheckboxesGroup() {
         error={error}
         component="fieldset"
         className={classes.formControl}
+        variant="standard"
       >
         <FormLabel component="legend">Pick two</FormLabel>
         <FormGroup>

diff --git a/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx b/docs/src/pages/components/checkboxes/CheckboxesGroup.tsx
@@ -38,7 +38,11 @@ export default function CheckboxesGroup() {
 
   return (
     <div className={classes.root}>
-      <FormControl component="fieldset" className={classes.formControl}>
+      <FormControl
+        component="fieldset"
+        className={classes.formControl}
+        variant="standard"
+      >
         <FormLabel component="legend">Assign responsibility</FormLabel>
         <FormGroup>
           <FormControlLabel
@@ -67,6 +71,7 @@ export default function CheckboxesGroup() {
         error={error}
         component="fieldset"
         className={classes.formControl}
+        variant="standard"
       >
         <FormLabel component="legend">Pick two</FormLabel>
         <FormGroup>

diff --git a/docs/src/pages/components/radio-buttons/ErrorRadios.js b/docs/src/pages/components/radio-buttons/ErrorRadios.js
@@ -47,6 +47,7 @@ export default function ErrorRadios() {
   return (
     <form onSubmit={handleSubmit}>
       <FormControl
+        variant="standard"
         component="fieldset"
         error={error}
         className={classes.formControl}

diff --git a/docs/src/pages/components/radio-buttons/ErrorRadios.tsx b/docs/src/pages/components/radio-buttons/ErrorRadios.tsx
@@ -47,6 +47,7 @@ export default function ErrorRadios() {
   return (
     <form onSubmit={handleSubmit}>
       <FormControl
+        variant="standard"
         component="fieldset"
         error={error}
         className={classes.formControl}

diff --git a/docs/src/pages/components/selects/NativeSelect.js b/docs/src/pages/components/selects/NativeSelect.js
@@ -16,7 +16,9 @@ export default function NativeSelectDemo() {
   return (
     <div className={classes.root}>
       <FormControl fullWidth>
-        <InputLabel htmlFor="uncontrolled-native">Age</InputLabel>
+        <InputLabel variant="standard" htmlFor="uncontrolled-native">
+          Age
+        </InputLabel>
         <NativeSelect
           defaultValue={30}
           inputProps={{

diff --git a/docs/src/pages/components/selects/NativeSelect.tsx b/docs/src/pages/components/selects/NativeSelect.tsx
@@ -16,7 +16,9 @@ export default function NativeSelectDemo() {
   return (
     <div className={classes.root}>
       <FormControl fullWidth>
-        <InputLabel htmlFor="uncontrolled-native">Age</InputLabel>
+        <InputLabel variant="standard" htmlFor="uncontrolled-native">
+          Age
+        </InputLabel>
         <NativeSelect
           defaultValue={30}
           inputProps={{

diff --git a/docs/src/pages/components/switches/SwitchesGroup.js b/docs/src/pages/components/switches/SwitchesGroup.js
@@ -21,7 +21,7 @@ export default function SwitchesGroup() {
   };
 
   return (
-    <FormControl component="fieldset">
+    <FormControl component="fieldset" variant="standard">
       <FormLabel component="legend">Assign responsibility</FormLabel>
       <FormGroup>
         <FormControlLabel

diff --git a/docs/src/pages/components/switches/SwitchesGroup.tsx b/docs/src/pages/components/switches/SwitchesGroup.tsx
@@ -21,7 +21,7 @@ export default function SwitchesGroup() {
   };
 
   return (
-    <FormControl component="fieldset">
+    <FormControl component="fieldset" variant="standard">
       <FormLabel component="legend">Assign responsibility</FormLabel>
       <FormGroup>
         <FormControlLabel

diff --git a/docs/src/pages/components/text-fields/CustomizedInputs.js b/docs/src/pages/components/text-fields/CustomizedInputs.js
@@ -113,7 +113,7 @@ export default function CustomizedInputs() {
         gap: 2,
       }}
     >
-      <FormControl>
+      <FormControl variant="standard">
         <InputLabel shrink htmlFor="bootstrap-input">
           Bootstrap
         </InputLabel>

diff --git a/docs/src/pages/components/text-fields/CustomizedInputs.tsx b/docs/src/pages/components/text-fields/CustomizedInputs.tsx
@@ -117,7 +117,7 @@ export default function CustomizedInputs() {
         gap: 2,
       }}
     >
-      <FormControl>
+      <FormControl variant="standard">
         <InputLabel shrink htmlFor="bootstrap-input">
           Bootstrap
         </InputLabel>

diff --git a/docs/src/pages/components/text-fields/FormattedInputs.js b/docs/src/pages/components/text-fields/FormattedInputs.js
@@ -99,7 +99,7 @@ export default function FormattedInputs() {
 
   return (
     <div className={classes.root}>
-      <FormControl>
+      <FormControl variant="standard">
         <InputLabel htmlFor="formatted-text-mask-input">react-text-mask</InputLabel>
         <Input
           value={values.textmask}

diff --git a/docs/src/pages/components/text-fields/FormattedInputs.tsx b/docs/src/pages/components/text-fields/FormattedInputs.tsx
@@ -110,7 +110,7 @@ export default function FormattedInputs() {
 
   return (
     <div className={classes.root}>
-      <FormControl>
+      <FormControl variant="standard">
         <InputLabel htmlFor="formatted-text-mask-input">react-text-mask</InputLabel>
         <Input
           value={values.textmask}

diff --git a/docs/src/pages/components/text-fields/InputAdornments.js b/docs/src/pages/components/text-fields/InputAdornments.js
@@ -107,7 +107,7 @@ export default function InputAdornments() {
             label="Password"
           />
         </FormControl>
-        <FormControl fullWidth className={classes.margin} variant="outlined">
+        <FormControl fullWidth className={classes.margin}>
           <InputLabel htmlFor="outlined-adornment-amount">Amount</InputLabel>
           <OutlinedInput
             id="outlined-adornment-amount"
@@ -189,6 +189,7 @@ export default function InputAdornments() {
           variant="standard"
         />
         <FormControl
+          variant="standard"
           className={clsx(classes.margin, classes.withoutLabel, classes.textField)}
         >
           <Input
@@ -203,7 +204,10 @@ export default function InputAdornments() {
           />
           <FormHelperText id="standard-weight-helper-text">Weight</FormHelperText>
         </FormControl>
-        <FormControl className={clsx(classes.margin, classes.textField)}>
+        <FormControl
+          className={clsx(classes.margin, classes.textField)}
+          variant="standard"
+        >
           <InputLabel htmlFor="standard-adornment-password">Password</InputLabel>
           <Input
             id="standard-adornment-password"
@@ -223,7 +227,7 @@ export default function InputAdornments() {
             }
           />
         </FormControl>
-        <FormControl fullWidth className={classes.margin}>
+        <FormControl fullWidth className={classes.margin} variant="standard">
           <InputLabel htmlFor="standard-adornment-amount">Amount</InputLabel>
           <Input
             id="standard-adornment-amount"

diff --git a/docs/src/pages/components/text-fields/InputAdornments.tsx b/docs/src/pages/components/text-fields/InputAdornments.tsx
@@ -104,7 +104,7 @@ export default function InputAdornments() {
             type={values.showPassword ? 'text' : 'password'}
             value={values.password}
             onChange={handleChange('password')}
-            endAdornment={
+            endAdornment={(
               <InputAdornment position="end">
                 <IconButton
                   aria-label="toggle password visibility"
@@ -115,11 +115,11 @@ export default function InputAdornments() {
                   {values.showPassword ? <Visibility /> : <VisibilityOff />}
                 </IconButton>
               </InputAdornment>
-            }
+            )}
             label="Password"
           />
         </FormControl>
-        <FormControl fullWidth className={classes.margin} variant="outlined">
+        <FormControl fullWidth className={classes.margin}>
           <InputLabel htmlFor="outlined-adornment-amount">Amount</InputLabel>
           <OutlinedInput
             id="outlined-adornment-amount"
@@ -166,7 +166,7 @@ export default function InputAdornments() {
             type={values.showPassword ? 'text' : 'password'}
             value={values.password}
             onChange={handleChange('password')}
-            endAdornment={
+            endAdornment={(
               <InputAdornment position="end">
                 <IconButton
                   aria-label="toggle password visibility"
@@ -177,7 +177,7 @@ export default function InputAdornments() {
                   {values.showPassword ? <Visibility /> : <VisibilityOff />}
                 </IconButton>
               </InputAdornment>
-            }
+            )}
           />
         </FormControl>
         <FormControl fullWidth className={classes.margin} variant="filled">
@@ -201,6 +201,7 @@ export default function InputAdornments() {
           variant="standard"
         />
         <FormControl
+          variant="standard"
           className={clsx(classes.margin, classes.withoutLabel, classes.textField)}
         >
           <Input
@@ -215,14 +216,17 @@ export default function InputAdornments() {
           />
           <FormHelperText id="standard-weight-helper-text">Weight</FormHelperText>
         </FormControl>
-        <FormControl className={clsx(classes.margin, classes.textField)}>
+        <FormControl
+          className={clsx(classes.margin, classes.textField)}
+          variant="standard"
+        >
           <InputLabel htmlFor="standard-adornment-password">Password</InputLabel>
           <Input
             id="standard-adornment-password"
             type={values.showPassword ? 'text' : 'password'}
             value={values.password}
             onChange={handleChange('password')}
-            endAdornment={
+            endAdornment={(
               <InputAdornment position="end">
                 <IconButton
                   aria-label="toggle password visibility"
@@ -232,10 +236,10 @@ export default function InputAdornments() {
                   {values.showPassword ? <Visibility /> : <VisibilityOff />}
                 </IconButton>
               </InputAdornment>
-            }
+            )}
           />
         </FormControl>
-        <FormControl fullWidth className={classes.margin}>
+        <FormControl fullWidth className={classes.margin} variant="standard">
           <InputLabel htmlFor="standard-adornment-amount">Amount</InputLabel>
           <Input
             id="standard-adornment-amount"

diff --git a/docs/src/pages/components/text-fields/InputWithIcon.js b/docs/src/pages/components/text-fields/InputWithIcon.js
@@ -19,7 +19,7 @@ export default function InputWithIcon() {
 
   return (
     <div>
-      <FormControl className={classes.margin}>
+      <FormControl className={classes.margin} variant="standard">
         <InputLabel htmlFor="input-with-icon-adornment">
           With a start adornment
         </InputLabel>

diff --git a/docs/src/pages/components/text-fields/InputWithIcon.tsx b/docs/src/pages/components/text-fields/InputWithIcon.tsx
@@ -21,17 +21,17 @@ export default function InputWithIcon() {
 
   return (
     <div>
-      <FormControl className={classes.margin}>
+      <FormControl className={classes.margin} variant="standard">
         <InputLabel htmlFor="input-with-icon-adornment">
           With a start adornment
         </InputLabel>
         <Input
           id="input-with-icon-adornment"
-          startAdornment={
+          startAdornment={(
             <InputAdornment position="start">
               <AccountCircle />
             </InputAdornment>
-          }
+          )}
         />
       </FormControl>
       <TextField

diff --git a/packages/material-ui/src/TablePagination/TablePagination.js b/packages/material-ui/src/TablePagination/TablePagination.js
@@ -132,11 +132,14 @@ const TablePagination = React.forwardRef(function TablePagination(props, ref) {
 
         {rowsPerPageOptions.length > 1 && (
           <Select
+            variant="standard"
             classes={{
               select: classes.select,
               icon: classes.selectIcon,
             }}
-            input={<InputBase className={clsx(classes.input, classes.selectRoot)} />}
+            input={
+              <InputBase variant="outlined" className={clsx(classes.input, classes.selectRoot)} />
+            }
             value={rowsPerPage}
             onChange={onRowsPerPageChange}
             id={selectId}

diff --git a/test/regressions/tests/Select/SelectAlignment.js b/test/regressions/tests/Select/SelectAlignment.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Input from '@material-ui/core/Input';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
 import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormHelperText from '@material-ui/core/FormHelperText';
@@ -11,7 +11,13 @@ export default function SelectAlignment() {
     <div>
       <FormControl>
         <InputLabel htmlFor="age1">Age</InputLabel>
-        <Select value="" input={<Input name="age1" id="age1" />}>
+        <Select
+          value=""
+          label="Age"
+          id="age1"
+          fullWidth
+          input={<OutlinedInput name="age1" label="year" id="age1" />}
+        >
           <MenuItem value="">
             <em>None</em>
           </MenuItem>
@@ -20,7 +26,7 @@ export default function SelectAlignment() {
       </FormControl>
       <FormControl>
         <InputLabel htmlFor="age2">year</InputLabel>
-        <Select value={10} input={<Input name="year" id="age2" />}>
+        <Select value={10} input={<OutlinedInput label="year" name="year" id="age2" />}>
           <MenuItem value="">
             <em>None</em>
           </MenuItem>
@@ -29,7 +35,7 @@ export default function SelectAlignment() {
       </FormControl>
       <FormControl>
         <InputLabel htmlFor="name-input">Name</InputLabel>
-        <Input id="name-input" />
+        <OutlinedInput id="name-input" />
         <FormHelperText>Alignment with an input</FormHelperText>
       </FormControl>
     </div>