[Select][FormControl] Make outlined variant the default one

CHANGELOG.md

@@ -1,5 +1,29 @@
 ### [Versions](https://material-ui.com/versions/)
 
+## HEAD
+
+### Breaking changes
+
+- [Select] Change default variant from standard to outlined (#24895) @petyosi
+  Standard has been removed from the Material Design guidelines. [This codemod](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod#variant-prop) will automatically update your code.
+
+  ```diff
+  -<Select value="Standard" />
+  -<Select value="Outlined" variant="outlined" />
+  +<Select value="Standard" variant="standard" />
+  +<Select value="Outlined" />
+  ```
+
+- [FormControl] Change default variant from standard to outlined (#24895) @petyosi
+  Standard has been removed from the Material Design guidelines. [This codemod](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod#variant-prop) will automatically update your code.
+
+  ```diff
+  -<FormControl value="Standard" />
+  -<FormControl value="Outlined" variant="outlined" />
+  +<FormControl value="Standard" variant="standard" />
+  +<FormControl value="Outlined" />
+  ```
+
 ## 5.0.0-alpha.30
 
 <!-- generated comparing v5.0.0-alpha.29..next -->
@@ -1569,7 +1593,7 @@ Big thanks to the 34 contributors who made this release possible. Here are some
 #### Breaking changes
 
 - [TextField] Change default variant from standard to outlined (#23503) @mbrookes
-  Standard has been removed from the Material Design guidelines. [This codemod](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod#textfield-variant-prop) will automatically update your code.
+  Standard has been removed from the Material Design guidelines. [This codemod](https://github.com/mui-org/material-ui/tree/next/packages/material-ui-codemod#variant-prop) will automatically update your code.
 
   ```diff
   -<TextField value="Standard" />

docs/pages/api-docs/form-control.json

@@ -36,7 +36,7 @@
         "name": "enum",
         "description": "'filled'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;'standard'"
       },
-      "default": "'standard'"
+      "default": "'outlined'"
     }
   },
   "name": "FormControl",

docs/pages/api-docs/select.json

@@ -28,7 +28,7 @@
         "name": "enum",
         "description": "'filled'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;'standard'"
       },
-      "default": "'standard'"
+      "default": "'outlined'"
     }
   },
   "name": "Select",
@@ -52,7 +52,7 @@
   "spread": true,
   "forwardsRefTo": "HTMLDivElement",
   "filename": "/packages/material-ui/src/Select/Select.js",
-  "inheritance": { "component": "Input", "pathname": "/api/input/" },
+  "inheritance": { "component": "OutlinedInput", "pathname": "/api/outlined-input/" },
   "demos": "<ul><li><a href=\"/components/selects/\">Selects</a></li></ul>",
   "styledComponent": true,
   "cssComponent": false

docs/src/pages/components/checkboxes/CheckboxesGroup.js

@@ -26,7 +26,7 @@ export default function CheckboxesGroup() {
 
   return (
     <Box sx={{ display: 'flex' }}>
-      <FormControl sx={{ m: 3 }} component="fieldset">
+      <FormControl sx={{ m: 3 }} component="fieldset" variant="standard">
         <FormLabel component="legend">Assign responsibility</FormLabel>
         <FormGroup>
           <FormControlLabel
@@ -50,7 +50,13 @@ export default function CheckboxesGroup() {
         </FormGroup>
         <FormHelperText>Be careful</FormHelperText>
       </FormControl>
-      <FormControl required error={error} component="fieldset" sx={{ m: 3 }}>
+      <FormControl
+        required
+        error={error}
+        component="fieldset"
+        sx={{ m: 3 }}
+        variant="standard"
+      >
         <FormLabel component="legend">Pick two</FormLabel>
         <FormGroup>
           <FormControlLabel

docs/src/pages/components/checkboxes/CheckboxesGroup.tsx

@@ -26,7 +26,7 @@ export default function CheckboxesGroup() {
 
   return (
     <Box sx={{ display: 'flex' }}>
-      <FormControl sx={{ m: 3 }} component="fieldset">
+      <FormControl sx={{ m: 3 }} component="fieldset" variant="standard">
         <FormLabel component="legend">Assign responsibility</FormLabel>
         <FormGroup>
           <FormControlLabel
@@ -50,7 +50,13 @@ export default function CheckboxesGroup() {
         </FormGroup>
         <FormHelperText>Be careful</FormHelperText>
       </FormControl>
-      <FormControl required error={error} component="fieldset" sx={{ m: 3 }}>
+      <FormControl
+        required
+        error={error}
+        component="fieldset"
+        sx={{ m: 3 }}
+        variant="standard"
+      >
         <FormLabel component="legend">Pick two</FormLabel>
         <FormGroup>
           <FormControlLabel

docs/src/pages/components/popover/AnchorPlayground.js

@@ -191,7 +191,7 @@ function AnchorPlayground() {
           </FormControl>
         </Grid>
         <Grid item xs={12} sm={6}>
-          <FormControl>
+          <FormControl variant="standard">
             <InputLabel htmlFor="position-top">anchorPosition.top</InputLabel>
             <Input
               id="position-top"
@@ -201,7 +201,7 @@ function AnchorPlayground() {
             />
           </FormControl>
           &nbsp;
-          <FormControl>
+          <FormControl variant="standard">
             <InputLabel htmlFor="position-left">anchorPosition.left</InputLabel>
             <Input
               id="position-left"

docs/src/pages/components/radio-buttons/ErrorRadios.js

@@ -35,7 +35,12 @@ export default function ErrorRadios() {
 
   return (
     <form onSubmit={handleSubmit}>
-      <FormControl sx={{ m: 3 }} component="fieldset" error={error}>
+      <FormControl
+        sx={{ m: 3 }}
+        component="fieldset"
+        error={error}
+        variant="standard"
+      >
         <FormLabel component="legend">Pop quiz: Material-UI is...</FormLabel>
         <RadioGroup
           aria-label="quiz"

docs/src/pages/components/radio-buttons/ErrorRadios.tsx

@@ -35,7 +35,12 @@ export default function ErrorRadios() {
 
   return (
     <form onSubmit={handleSubmit}>
-      <FormControl sx={{ m: 3 }} component="fieldset" error={error}>
+      <FormControl
+        sx={{ m: 3 }}
+        component="fieldset"
+        error={error}
+        variant="standard"
+      >
         <FormLabel component="legend">Pop quiz: Material-UI is...</FormLabel>
         <RadioGroup
           aria-label="quiz"

docs/src/pages/components/selects/BasicSelect.js

@@ -27,6 +27,7 @@ export default function BasicSelect() {
           labelId="demo-simple-select-label"
           id="demo-simple-select"
           value={age}
+          label="Age"
           onChange={handleChange}
         >
           <MenuItem value={10}>Ten</MenuItem>

docs/src/pages/components/selects/BasicSelect.tsx

@@ -27,6 +27,7 @@ export default function BasicSelect() {
           labelId="demo-simple-select-label"
           id="demo-simple-select"
           value={age}
+          label="Age"
           onChange={handleChange}
         >
           <MenuItem value={10}>Ten</MenuItem>

docs/src/pages/components/selects/ControlledOpenSelect.js

@@ -48,6 +48,7 @@ export default function ControlledOpenSelect() {
           onClose={handleClose}
           onOpen={handleOpen}
           value={age}
+          label="Age"
           onChange={handleChange}
         >
           <MenuItem value="">

docs/src/pages/components/selects/ControlledOpenSelect.tsx

@@ -50,6 +50,7 @@ export default function ControlledOpenSelect() {
           onClose={handleClose}
           onOpen={handleOpen}
           value={age}
+          label="Age"
           onChange={handleChange}
         >
           <MenuItem value="">

docs/src/pages/components/selects/CustomizedSelects.js

@@ -54,11 +54,11 @@ export default function CustomizedSelects() {
   };
   return (
     <div>
-      <FormControl className={classes.margin}>
+      <FormControl className={classes.margin} variant="standard">
         <InputLabel htmlFor="demo-customized-textbox">Age</InputLabel>
         <BootstrapInput id="demo-customized-textbox" />
       </FormControl>
-      <FormControl className={classes.margin}>
+      <FormControl className={classes.margin} variant="standard">
         <InputLabel id="demo-customized-select-label">Age</InputLabel>
         <Select
           labelId="demo-customized-select-label"
@@ -75,7 +75,7 @@ export default function CustomizedSelects() {
           <MenuItem value={30}>Thirty</MenuItem>
         </Select>
       </FormControl>
-      <FormControl className={classes.margin}>
+      <FormControl className={classes.margin} variant="standard">
         <InputLabel htmlFor="demo-customized-select-native">Age</InputLabel>
         <NativeSelect
           id="demo-customized-select-native"

docs/src/pages/components/selects/CustomizedSelects.tsx

@@ -61,11 +61,11 @@ export default function CustomizedSelects() {
   };
   return (
     <div>
-      <FormControl className={classes.margin}>
+      <FormControl className={classes.margin} variant="standard">
         <InputLabel htmlFor="demo-customized-textbox">Age</InputLabel>
         <BootstrapInput id="demo-customized-textbox" />
       </FormControl>
-      <FormControl className={classes.margin}>
+      <FormControl className={classes.margin} variant="standard">
         <InputLabel id="demo-customized-select-label">Age</InputLabel>
         <Select
           labelId="demo-customized-select-label"
@@ -82,7 +82,7 @@ export default function CustomizedSelects() {
           <MenuItem value={30}>Thirty</MenuItem>
         </Select>
       </FormControl>
-      <FormControl className={classes.margin}>
+      <FormControl className={classes.margin} variant="standard">
         <InputLabel htmlFor="demo-customized-select-native">Age</InputLabel>
         <NativeSelect
           id="demo-customized-select-native"

docs/src/pages/components/selects/DialogSelect.js

@@ -6,7 +6,7 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import InputLabel from '@material-ui/core/InputLabel';
-import Input from '@material-ui/core/Input';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
@@ -54,7 +54,7 @@ export default function DialogSelect() {
                 native
                 value={age}
                 onChange={handleChange}
-                input={<Input id="demo-dialog-native" />}
+                input={<OutlinedInput label="Age" id="demo-dialog-native" />}
               >
                 <option aria-label="None" value="" />
                 <option value={10}>Ten</option>
@@ -69,7 +69,7 @@ export default function DialogSelect() {
                 id="demo-dialog-select"
                 value={age}
                 onChange={handleChange}
-                input={<Input />}
+                input={<OutlinedInput label="Age" />}
               >
                 <MenuItem value="">
                   <em>None</em>

docs/src/pages/components/selects/DialogSelect.tsx

@@ -6,7 +6,7 @@ import DialogActions from '@material-ui/core/DialogActions';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import InputLabel from '@material-ui/core/InputLabel';
-import Input from '@material-ui/core/Input';
+import OutlinedInput from '@material-ui/core/OutlinedInput';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormControl from '@material-ui/core/FormControl';
 import Select from '@material-ui/core/Select';
@@ -56,7 +56,7 @@ export default function DialogSelect() {
                 native
                 value={age}
                 onChange={handleChange}
-                input={<Input id="demo-dialog-native" />}
+                input={<OutlinedInput label="Age" id="demo-dialog-native" />}
               >
                 <option aria-label="None" value="" />
                 <option value={10}>Ten</option>
@@ -71,7 +71,7 @@ export default function DialogSelect() {
                 id="demo-dialog-select"
                 value={age}
                 onChange={handleChange}
-                input={<Input />}
+                input={<OutlinedInput label="Age" />}
               >
                 <MenuItem value="">
                   <em>None</em>

docs/src/pages/components/selects/GroupedSelect.js

@@ -20,7 +20,7 @@ export default function GroupedSelect() {
     <div>
       <FormControl className={classes.formControl}>
         <InputLabel htmlFor="grouped-native-select">Grouping</InputLabel>
-        <Select native defaultValue="" id="grouped-native-select">
+        <Select native defaultValue="" id="grouped-native-select" label="Grouping">
           <option aria-label="None" value="" />
           <optgroup label="Category 1">
             <option value={1}>Option 1</option>
@@ -34,7 +34,7 @@ export default function GroupedSelect() {
       </FormControl>
       <FormControl className={classes.formControl}>
         <InputLabel htmlFor="grouped-select">Grouping</InputLabel>
-        <Select defaultValue="" id="grouped-select">
+        <Select defaultValue="" id="grouped-select" label="Grouping">
           <MenuItem value="">
             <em>None</em>
           </MenuItem>

docs/src/pages/components/selects/GroupedSelect.tsx

@@ -22,7 +22,7 @@ export default function GroupedSelect() {
     <div>
       <FormControl className={classes.formControl}>
         <InputLabel htmlFor="grouped-native-select">Grouping</InputLabel>
-        <Select native defaultValue="" id="grouped-native-select">
+        <Select native defaultValue="" id="grouped-native-select" label="Grouping">
           <option aria-label="None" value="" />
           <optgroup label="Category 1">
             <option value={1}>Option 1</option>
@@ -36,7 +36,7 @@ export default function GroupedSelect() {
       </FormControl>
       <FormControl className={classes.formControl}>
         <InputLabel htmlFor="grouped-select">Grouping</InputLabel>
-        <Select defaultValue="" id="grouped-select">
+        <Select defaultValue="" id="grouped-select" label="Grouping">
           <MenuItem value="">
             <em>None</em>
           </MenuItem>

docs/src/pages/components/selects/MultipleSelect.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles, useTheme } from '@material-ui/core/styles';
-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 FormControl from '@material-ui/core/FormControl';
@@ -66,7 +66,7 @@ export default function MultipleSelect() {
           multiple
           value={personName}
           onChange={handleChange}
-          input={<Input />}
+          input={<OutlinedInput label="Name" />}
           MenuProps={MenuProps}
         >
           {names.map((name) => (

docs/src/pages/components/selects/MultipleSelect.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createStyles, makeStyles, Theme, useTheme } from '@material-ui/core/styles';
-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 FormControl from '@material-ui/core/FormControl';
@@ -68,7 +68,7 @@ export default function MultipleSelect() {
           multiple
           value={personName}
           onChange={handleChange}
-          input={<Input />}
+          input={<OutlinedInput label="Name" />}
           MenuProps={MenuProps}
         >
           {names.map((name) => (

docs/src/pages/components/selects/MultipleSelectCheckmarks.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-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 FormControl from '@material-ui/core/FormControl';
@@ -58,7 +58,7 @@ export default function MultipleSelectCheckmarks() {
           multiple
           value={personName}
           onChange={handleChange}
-          input={<Input />}
+          input={<OutlinedInput label="Tag" />}
           renderValue={(selected) => selected.join(', ')}
           MenuProps={MenuProps}
         >

docs/src/pages/components/selects/MultipleSelectCheckmarks.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
-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 FormControl from '@material-ui/core/FormControl';
@@ -60,7 +60,7 @@ export default function MultipleSelectCheckmarks() {
           multiple
           value={personName}
           onChange={handleChange}
-          input={<Input />}
+          input={<OutlinedInput label="Tag" />}
           renderValue={(selected) => selected.join(', ')}
           MenuProps={MenuProps}
         >