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

CHANGELOG.md

@@ -1280,7 +1280,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" />
@@ -1289,6 +1289,26 @@ Big thanks to the 34 contributors who made this release possible. Here are some
   +<TextField value="Outlined" />
   ```
 
+- [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" />
+  ```
+
 - [Autocomplete] Remove `debug` in favor of `open` and dev tools (#23377) @eps1lon
   There are a couple of simpler alternatives: `open={true}`, Chrome devtools ["Emulate focused"](https://twitter.com/sulco/status/1305841873945272321), or React devtools props.
 

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

@@ -27,7 +27,7 @@
         "name": "enum",
         "description": "'filled'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;'standard'"
       },
-      "default": "'standard'"
+      "default": "'outlined'"
     }
   },
   "name": "Select",
@@ -51,7 +51,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": false,
   "cssComponent": false

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>

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>

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}

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}

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

@@ -56,11 +56,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"
@@ -77,7 +77,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

@@ -65,11 +65,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"
@@ -86,7 +86,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 as string[]).join(', ')}
           MenuProps={MenuProps}
         >

docs/src/pages/components/selects/MultipleSelectChip.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';
@@ -74,7 +74,7 @@ export default function MultipleSelectChip() {
           multiple
           value={personName}
           onChange={handleChange}
-          input={<Input id="select-multiple-chip" />}
+          input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
           renderValue={(selected) => (
             <div className={classes.chips}>
               {selected.map((value) => (

docs/src/pages/components/selects/MultipleSelectChip.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';
@@ -76,7 +76,7 @@ export default function MultipleSelectChip() {
           multiple
           value={personName}
           onChange={handleChange}
-          input={<Input id="select-multiple-chip" />}
+          input={<OutlinedInput id="select-multiple-chip" label="Chip" />}
           renderValue={(selected) => (
             <div className={classes.chips}>
               {(selected as string[]).map((value) => (

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

@@ -50,6 +50,7 @@ export default function MultipleSelectNative() {
           native
           value={personName}
           onChange={handleChangeMultiple}
+          label="Native"
           inputProps={{
             id: 'select-multiple-native',
           }}