[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}
  >