[Select] Changes the default input based on variant prop (#17304)

mui · Sep 4, 2019 · fdc7de2 · fdc7de2
1 parent f4769d0
commit fdc7de2
Show file tree

Hide file tree

Showing 8 changed files with 181 additions and 54 deletions.
diff --git a/docs/pages/api/select.md b/docs/pages/api/select.md
@@ -29,8 +29,9 @@ You can learn more about the difference by [reading our guide](/guides/minimizin
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">displayEmpty</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, a value is displayed even if no items are selected.<br>In order to display a meaningful value, a function should be passed to the `renderValue` prop which returns the value to be displayed when no items are selected. You can only use it when the `native` prop is `false` (default). |
 | <span class="prop-name">IconComponent</span> | <span class="prop-type">elementType</span> | <span class="prop-default">ArrowDropDownIcon</span> | The icon that displays the arrow. |
-| <span class="prop-name">input</span> | <span class="prop-type">element</span> | <span class="prop-default">&lt;Input /></span> | An `Input` element; does not have to be a material-ui specific `Input`. |
+| <span class="prop-name">input</span> | <span class="prop-type">element</span> |  | An `Input` element; does not have to be a material-ui specific `Input`. |
 | <span class="prop-name">inputProps</span> | <span class="prop-type">object</span> |  | [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes) applied to the `input` element. When `native` is `true`, the attributes are applied on the `select` element. |
+| <span class="prop-name">labelWidth</span> | <span class="prop-type">number</span> | <span class="prop-default">0</span> | The label width to be used on OutlinedInput. This prop is required when the `variant` prop is `outlined`. |
 | <span class="prop-name">MenuProps</span> | <span class="prop-type">object</span> |  | Props applied to the [`Menu`](/api/menu/) element. |
 | <span class="prop-name">multiple</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If true, `value` must be an array and the menu will support multiple selections. |
 | <span class="prop-name">native</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | If `true`, the component will be using a native `select` element. |
@@ -41,7 +42,7 @@ You can learn more about the difference by [reading our guide](/guides/minimizin
 | <span class="prop-name">renderValue</span> | <span class="prop-type">func</span> |  | Render the selected value. You can only use it when the `native` prop is `false` (default).<br><br>**Signature:**<br>`function(value: any) => ReactElement`<br>*value:* The `value` provided to the component. |
 | <span class="prop-name">SelectDisplayProps</span> | <span class="prop-type">object</span> |  | Props applied to the clickable div element. |
 | <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The input value. This prop is required when the `native` prop is `false` (default). |
-| <span class="prop-name">variant</span> | <span class="prop-type">'standard'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;'filled'</span> |  | The variant to use. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'standard'<br>&#124;&nbsp;'outlined'<br>&#124;&nbsp;'filled'</span> | <span class="prop-default">'standard'</span> | The variant to use. |
 
 The `ref` is forwarded to the root element.
 

diff --git a/docs/src/pages/components/selects/NativeSelects.js b/docs/src/pages/components/selects/NativeSelects.js
@@ -1,8 +1,5 @@
 import 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 FilledInput from '@material-ui/core/FilledInput';
 import InputLabel from '@material-ui/core/InputLabel';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import FormControl from '@material-ui/core/FormControl';
@@ -67,7 +64,10 @@ export default function NativeSelects() {
         <NativeSelect
           value={state.age}
           onChange={handleChange('age')}
-          input={<Input name="age" id="age-native-helper" />}
+          inputProps={{
+            name: 'age',
+            id: 'age-native-helper',
+          }}
         >
           <option value="" />
           <option value={10}>Ten</option>
@@ -98,7 +98,10 @@ export default function NativeSelects() {
         <NativeSelect
           value={state.age}
           onChange={handleChange('age')}
-          input={<Input name="age" id="age-native-label-placeholder" />}
+          inputProps={{
+            name: 'age',
+            id: 'age-native-label-placeholder',
+          }}
         >
           <option value="">None</option>
           <option value={10}>Ten</option>
@@ -112,7 +115,10 @@ export default function NativeSelects() {
         <NativeSelect
           value={state.name}
           onChange={handleChange('name')}
-          input={<Input name="name" id="name-native-disabled" />}
+          inputProps={{
+            name: 'name',
+            id: 'name-native-disabled',
+          }}
         >
           <option value="" />
           <optgroup label="Author">
@@ -131,7 +137,9 @@ export default function NativeSelects() {
           value={state.name}
           onChange={handleChange('name')}
           name="name"
-          input={<Input id="name-native-error" />}
+          inputProps={{
+            id: 'name-native-error',
+          }}
         >
           <option value="" />
           <optgroup label="Author">
@@ -146,7 +154,13 @@ export default function NativeSelects() {
       </FormControl>
       <FormControl className={classes.formControl}>
         <InputLabel htmlFor="uncontrolled-native">Name</InputLabel>
-        <NativeSelect defaultValue={30} input={<Input name="name" id="uncontrolled-native" />}>
+        <NativeSelect
+          defaultValue={30}
+          inputProps={{
+            name: 'name',
+            id: 'uncontrolled-native',
+          }}
+        >
           <option value="" />
           <option value={10}>Ten</option>
           <option value={20}>Twenty</option>
@@ -197,9 +211,11 @@ export default function NativeSelects() {
           native
           value={state.age}
           onChange={handleChange('age')}
-          input={
-            <OutlinedInput name="age" labelWidth={labelWidth} id="outlined-age-native-simple" />
-          }
+          labelWidth={labelWidth}
+          inputProps={{
+            name: 'age',
+            id: 'outlined-age-native-simple',
+          }}
         >
           <option value="" />
           <option value={10}>Ten</option>
@@ -213,7 +229,10 @@ export default function NativeSelects() {
           native
           value={state.age}
           onChange={handleChange('age')}
-          input={<FilledInput name="age" id="filled-age-native-simple" />}
+          inputProps={{
+            name: 'age',
+            id: 'filled-age-native-simple',
+          }}
         >
           <option value="" />
           <option value={10}>Ten</option>

diff --git a/docs/src/pages/components/selects/NativeSelects.tsx b/docs/src/pages/components/selects/NativeSelects.tsx
@@ -1,8 +1,5 @@
 import 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 FilledInput from '@material-ui/core/FilledInput';
 import InputLabel from '@material-ui/core/InputLabel';
 import FormHelperText from '@material-ui/core/FormHelperText';
 import FormControl from '@material-ui/core/FormControl';
@@ -71,7 +68,10 @@ export default function NativeSelects() {
         <NativeSelect
           value={state.age}
           onChange={handleChange('age')}
-          input={<Input name="age" id="age-native-helper" />}
+          inputProps={{
+            name: 'age',
+            id: 'age-native-helper',
+          }}
         >
           <option value="" />
           <option value={10}>Ten</option>
@@ -102,7 +102,10 @@ export default function NativeSelects() {
         <NativeSelect
           value={state.age}
           onChange={handleChange('age')}
-          input={<Input name="age" id="age-native-label-placeholder" />}
+          inputProps={{
+            name: 'age',
+            id: 'age-native-label-placeholder',
+          }}
         >
           <option value="">None</option>
           <option value={10}>Ten</option>
@@ -116,7 +119,10 @@ export default function NativeSelects() {
         <NativeSelect
           value={state.name}
           onChange={handleChange('name')}
-          input={<Input name="name" id="name-native-disabled" />}
+          inputProps={{
+            name: 'name',
+            id: 'name-native-disabled',
+          }}
         >
           <option value="" />
           <optgroup label="Author">
@@ -135,7 +141,9 @@ export default function NativeSelects() {
           value={state.name}
           onChange={handleChange('name')}
           name="name"
-          input={<Input id="name-native-error" />}
+          inputProps={{
+            id: 'name-native-error',
+          }}
         >
           <option value="" />
           <optgroup label="Author">
@@ -150,7 +158,13 @@ export default function NativeSelects() {
       </FormControl>
       <FormControl className={classes.formControl}>
         <InputLabel htmlFor="uncontrolled-native">Name</InputLabel>
-        <NativeSelect defaultValue={30} input={<Input name="name" id="uncontrolled-native" />}>
+        <NativeSelect
+          defaultValue={30}
+          inputProps={{
+            name: 'name',
+            id: 'uncontrolled-native',
+          }}
+        >
           <option value="" />
           <option value={10}>Ten</option>
           <option value={20}>Twenty</option>
@@ -201,9 +215,11 @@ export default function NativeSelects() {
           native
           value={state.age}
           onChange={handleChange('age')}
-          input={
-            <OutlinedInput name="age" labelWidth={labelWidth} id="outlined-age-native-simple" />
-          }
+          labelWidth={labelWidth}
+          inputProps={{
+            name: 'age',
+            id: 'outlined-age-native-simple',
+          }}
         >
           <option value="" />
           <option value={10}>Ten</option>
@@ -217,7 +233,10 @@ export default function NativeSelects() {
           native
           value={state.age}
           onChange={handleChange('age')}
-          input={<FilledInput name="age" id="filled-age-native-simple" />}
+          inputProps={{
+            name: 'age',
+            id: 'filled-age-native-simple',
+          }}
         >
           <option value="" />
           <option value={10}>Ten</option>

diff --git a/docs/src/pages/components/selects/SimpleSelect.js b/docs/src/pages/components/selects/SimpleSelect.js
@@ -1,8 +1,5 @@
 import 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 FilledInput from '@material-ui/core/FilledInput';
 import InputLabel from '@material-ui/core/InputLabel';
 import MenuItem from '@material-ui/core/MenuItem';
 import FormHelperText from '@material-ui/core/FormHelperText';
@@ -65,7 +62,10 @@ export default function SimpleSelect() {
         <Select
           value={values.age}
           onChange={handleChange}
-          input={<Input name="age" id="age-helper" />}
+          inputProps={{
+            name: 'age',
+            id: 'age-helper',
+          }}
         >
           <MenuItem value="">
             <em>None</em>
@@ -100,7 +100,10 @@ export default function SimpleSelect() {
         <Select
           value={values.age}
           onChange={handleChange}
-          input={<Input name="age" id="age-label-placeholder" />}
+          inputProps={{
+            name: 'age',
+            id: 'age-label-placeholder',
+          }}
           displayEmpty
           name="age"
           className={classes.selectEmpty}
@@ -119,7 +122,10 @@ export default function SimpleSelect() {
         <Select
           value={values.name}
           onChange={handleChange}
-          input={<Input name="name" id="name-disabled" />}
+          inputProps={{
+            name: 'name',
+            id: 'name-disabled',
+          }}
         >
           <MenuItem value="">
             <em>None</em>
@@ -137,7 +143,9 @@ export default function SimpleSelect() {
           onChange={handleChange}
           name="name"
           renderValue={value => `⚠️  - ${value}`}
-          input={<Input id="name-error" />}
+          inputProps={{
+            id: 'name-error',
+          }}
         >
           <MenuItem value="">
             <em>None</em>
@@ -153,7 +161,11 @@ export default function SimpleSelect() {
         <Select
           value={values.name}
           onChange={handleChange}
-          input={<Input name="name" id="name-readonly" readOnly />}
+          inputProps={{
+            name: 'name',
+            id: 'name-readonly',
+            readOnly: true,
+          }}
         >
           <MenuItem value="">
             <em>None</em>
@@ -169,7 +181,10 @@ export default function SimpleSelect() {
         <Select
           value={values.age}
           onChange={handleChange}
-          input={<Input name="age" id="age-auto-width" />}
+          inputProps={{
+            name: 'age',
+            id: 'age-auto-width',
+          }}
           autoWidth
         >
           <MenuItem value="">
@@ -225,7 +240,11 @@ export default function SimpleSelect() {
         <Select
           value={values.age}
           onChange={handleChange}
-          input={<OutlinedInput labelWidth={labelWidth} name="age" id="outlined-age-simple" />}
+          labelWidth={labelWidth}
+          inputProps={{
+            name: 'age',
+            id: 'outlined-age-simple',
+          }}
         >
           <MenuItem value="">
             <em>None</em>
@@ -240,7 +259,10 @@ export default function SimpleSelect() {
         <Select
           value={values.age}
           onChange={handleChange}
-          input={<FilledInput name="age" id="filled-age-simple" />}
+          inputProps={{
+            name: 'age',
+            id: 'filled-age-simple',
+          }}
         >
           <MenuItem value="">
             <em>None</em>