[Autocomplete] Improve icons display

docs/pages/api/autocomplete.md

@@ -87,6 +87,7 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">inputRoot</span> | <span class="prop-name">.MuiAutocomplete-inputRoot</span> | Styles applied to the Input element.
 | <span class="prop-name">input</span> | <span class="prop-name">.MuiAutocomplete-input</span> | Styles applied to the input element.
 | <span class="prop-name">inputFocused</span> | <span class="prop-name">.MuiAutocomplete-inputFocused</span> | Styles applied to the input element if tag focused.
+| <span class="prop-name">endAdornment</span> | <span class="prop-name">.MuiAutocomplete-endAdornment</span> | Styles applied to the endAdornment element.
 | <span class="prop-name">clearIndicator</span> | <span class="prop-name">.MuiAutocomplete-clearIndicator</span> | Styles applied to the clear indictator.
 | <span class="prop-name">clearIndicatorDirty</span> | <span class="prop-name">.MuiAutocomplete-clearIndicatorDirty</span> | Styles applied to the clear indictator if the input is dirty.
 | <span class="prop-name">popupIndicator</span> | <span class="prop-name">.MuiAutocomplete-popupIndicator</span> | Styles applied to the popup indictator.

docs/pages/api/filled-input.md

@@ -76,7 +76,6 @@ Any other props supplied will be provided to the root element ([InputBase](/api/
 | <span class="prop-name">input</span> | <span class="prop-name">.MuiFilledInput-input</span> | Styles applied to the `input` element.
 | <span class="prop-name">inputMarginDense</span> | <span class="prop-name">.MuiFilledInput-inputMarginDense</span> | Styles applied to the `input` element if `margin="dense"`.
 | <span class="prop-name">inputHiddenLabel</span> | <span class="prop-name">.MuiFilledInput-inputHiddenLabel</span> | Styles applied to the `input` if in `<FormControl hiddenLabel />`.
-| <span class="prop-name">inputSelect</span> | <span class="prop-name">.MuiFilledInput-inputSelect</span> | Styles applied to the `input` element if `select={true}`.
 | <span class="prop-name">inputMultiline</span> | <span class="prop-name">.MuiFilledInput-inputMultiline</span> | Styles applied to the `input` element if `multiline={true}`.
 | <span class="prop-name">inputAdornedStart</span> | <span class="prop-name">.MuiFilledInput-inputAdornedStart</span> | Styles applied to the `input` element if `startAdornment` is provided.
 | <span class="prop-name">inputAdornedEnd</span> | <span class="prop-name">.MuiFilledInput-inputAdornedEnd</span> | Styles applied to the `input` element if `endAdornment` is provided.

docs/pages/api/input-base.md

@@ -49,7 +49,6 @@ It contains a load of style reset and some state logic.
 | <span class="prop-name">required</span> | <span class="prop-type">bool</span> |  | If `true`, the `input` element will be required. |
 | <span class="prop-name">rows</span> | <span class="prop-type">string<br>&#124;&nbsp;number</span> |  | Number of rows to display when multiline option is set to true. |
 | <span class="prop-name">rowsMax</span> | <span class="prop-type">string<br>&#124;&nbsp;number</span> |  | Maximum number of rows to display when multiline option is set to true. |
-| <span class="prop-name">select</span> | <span class="prop-type">bool</span> | <span class="prop-default">false</span> | Should be `true` when the component hosts a select. |
 | <span class="prop-name">startAdornment</span> | <span class="prop-type">node</span> |  | Start `InputAdornment` for this component. |
 | <span class="prop-name">type</span> | <span class="prop-type">string</span> | <span class="prop-default">'text'</span> | Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types). |
 | <span class="prop-name">value</span> | <span class="prop-type">any</span> |  | The value of the `input` element, required for a controlled component. |
@@ -78,7 +77,6 @@ Any other props supplied will be provided to the root element (native element).
 | <span class="prop-name">fullWidth</span> | <span class="prop-name">.MuiInputBase-fullWidth</span> | Styles applied to the root element if `fullWidth={true}`.
 | <span class="prop-name">input</span> | <span class="prop-name">.MuiInputBase-input</span> | Styles applied to the `input` element.
 | <span class="prop-name">inputMarginDense</span> | <span class="prop-name">.MuiInputBase-inputMarginDense</span> | Styles applied to the `input` element if `margin="dense"`.
-| <span class="prop-name">inputSelect</span> | <span class="prop-name">.MuiInputBase-inputSelect</span> | Styles applied to the `input` element if `select={true}`.
 | <span class="prop-name">inputMultiline</span> | <span class="prop-name">.MuiInputBase-inputMultiline</span> | Styles applied to the `input` element if `multiline={true}`.
 | <span class="prop-name">inputTypeSearch</span> | <span class="prop-name">.MuiInputBase-inputTypeSearch</span> | Styles applied to the `input` element if `type="search"`.
 | <span class="prop-name">inputAdornedStart</span> | <span class="prop-name">.MuiInputBase-inputAdornedStart</span> | Styles applied to the `input` element if `startAdornment` is provided.

docs/pages/api/outlined-input.md

@@ -76,7 +76,6 @@ Any other props supplied will be provided to the root element ([InputBase](/api/
 | <span class="prop-name">notchedOutline</span> | <span class="prop-name">.MuiOutlinedInput-notchedOutline</span> | Styles applied to the `NotchedOutline` element.
 | <span class="prop-name">input</span> | <span class="prop-name">.MuiOutlinedInput-input</span> | Styles applied to the `input` element.
 | <span class="prop-name">inputMarginDense</span> | <span class="prop-name">.MuiOutlinedInput-inputMarginDense</span> | Styles applied to the `input` element if `margin="dense"`.
-| <span class="prop-name">inputSelect</span> | <span class="prop-name">.MuiOutlinedInput-inputSelect</span> | Styles applied to the `input` element if `select={true}`.
 | <span class="prop-name">inputMultiline</span> | <span class="prop-name">.MuiOutlinedInput-inputMultiline</span> | Styles applied to the `input` element if `multiline={true}`.
 | <span class="prop-name">inputAdornedStart</span> | <span class="prop-name">.MuiOutlinedInput-inputAdornedStart</span> | Styles applied to the `input` element if `startAdornment` is provided.
 | <span class="prop-name">inputAdornedEnd</span> | <span class="prop-name">.MuiOutlinedInput-inputAdornedEnd</span> | Styles applied to the `input` element if `endAdornment` is provided.

docs/src/pages/components/text-fields/InputAdornments.js

@@ -141,6 +141,7 @@ export default function InputAdornments() {
                   aria-label="toggle password visibility"
                   onClick={handleClickShowPassword}
                   onMouseDown={handleMouseDownPassword}
+                  edge="end"
                 >
                   {values.showPassword ? <Visibility /> : <VisibilityOff />}
                 </IconButton>
@@ -195,6 +196,7 @@ export default function InputAdornments() {
                   aria-label="toggle password visibility"
                   onClick={handleClickShowPassword}
                   onMouseDown={handleMouseDownPassword}
+                  edge="end"
                 >
                   {values.showPassword ? <Visibility /> : <VisibilityOff />}
                 </IconButton>

docs/src/pages/components/text-fields/InputAdornments.tsx

@@ -151,6 +151,7 @@ export default function InputAdornments() {
                   aria-label="toggle password visibility"
                   onClick={handleClickShowPassword}
                   onMouseDown={handleMouseDownPassword}
+                  edge="end"
                 >
                   {values.showPassword ? <Visibility /> : <VisibilityOff />}
                 </IconButton>
@@ -205,6 +206,7 @@ export default function InputAdornments() {
                   aria-label="toggle password visibility"
                   onClick={handleClickShowPassword}
                   onMouseDown={handleMouseDownPassword}
+                  edge="end"
                 >
                   {values.showPassword ? <Visibility /> : <VisibilityOff />}
                 </IconButton>

packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts

@@ -134,6 +134,7 @@ export type AutocompleteClassKey =
   | 'inputRoot'
   | 'input'
   | 'inputFocused'
+  | 'endAdornment'
   | 'clearIndicator'
   | 'clearIndicatorDirty'
   | 'popupIndicator'

packages/material-ui-lab/src/Autocomplete/Autocomplete.js

@@ -24,22 +24,38 @@ export const styles = theme => ({
   focused: {},
   /* Styles applied to the tag elements, e.g. the chips. */
   tag: {
-    margin: theme.spacing(0.5),
+    margin: 3,
   },
   /* Styles applied to the Input element. */
   inputRoot: {
     flexWrap: 'wrap',
+    paddingRight: 62,
+    '& $input:not(:first-child)': {
+      paddingLeft: 4,
+    },
     '&[class*="MuiOutlinedInput-root"]': {
       padding: 8,
+      paddingRight: 62,
       '& $input': {
-        padding: '10.5px 6px',
+        padding: '10.5px 4px',
+      },
+      '& $input:first-child': {
+        paddingLeft: 6,
+      },
+      '& $endAdornment': {
+        right: 7,
       },
     },
     '&[class*="MuiFilledInput-root"]': {
-      paddingTop: 21,
+      paddingTop: 19,
+      paddingLeft: 8,
       '& $input': {
+        paddingLeft: 4,
         paddingTop: 10,
       },
+      '& $endAdornment': {
+        right: 7,
+      },
     },
   },
   /* Styles applied to the input element. */
@@ -54,6 +70,13 @@ export const styles = theme => ({
   inputFocused: {
     opacity: 1,
   },
+  /* Styles applied to the endAdornment element. */
+  endAdornment: {
+    // We use a position absolute to support wrapping tags.
+    position: 'absolute',
+    right: 0,
+    top: 'calc(50% - 13px)', // Center vertically
+  },
   /* Styles applied to the clear indictator. */
   clearIndicator: {
     marginRight: -2,
@@ -302,7 +325,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
             className: classes.inputRoot,
             startAdornment,
             endAdornment: (
-              <React.Fragment>
+              <div className={classes.endAdornment}>
                 {disableClearable || disabled ? null : (
                   <IconButton
                     {...getClearProps()}
@@ -329,7 +352,7 @@ const Autocomplete = React.forwardRef(function Autocomplete(props, ref) {
                     {popupIcon}
                   </IconButton>
                 )}
-              </React.Fragment>
+              </div>
             ),
           },
           inputProps: {

packages/material-ui/src/FilledInput/FilledInput.js

@@ -133,10 +133,6 @@ export const styles = theme => {
         paddingBottom: 11,
       },
     },
-    /* Styles applied to the `input` element if `select={true}`. */
-    inputSelect: {
-      paddingRight: 24,
-    },
     /* Styles applied to the `input` element if `multiline={true}`. */
     inputMultiline: {
       padding: 0,

packages/material-ui/src/InputBase/InputBase.js

@@ -133,10 +133,6 @@ export const styles = theme => {
     inputMarginDense: {
       paddingTop: 4 - 1,
     },
-    /* Styles applied to the `input` element if `select={true}`. */
-    inputSelect: {
-      paddingRight: 24,
-    },
     /* Styles applied to the `input` element if `multiline={true}`. */
     inputMultiline: {
       height: 'auto',
@@ -196,7 +192,6 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
     renderSuffix,
     rows,
     rowsMax,
-    select = false,
     startAdornment,
     type = 'text',
     value: valueProp,
@@ -451,7 +446,6 @@ const InputBase = React.forwardRef(function InputBase(props, ref) {
               [classes.disabled]: fcs.disabled,
               [classes.inputTypeSearch]: type === 'search',
               [classes.inputMultiline]: multiline,
-              [classes.inputSelect]: select,
               [classes.inputMarginDense]: fcs.margin === 'dense',
               [classes.inputHiddenLabel]: fcs.hiddenLabel,
               [classes.inputAdornedStart]: startAdornment,
@@ -606,10 +600,6 @@ InputBase.propTypes = {
    * Maximum number of rows to display when multiline option is set to true.
    */
   rowsMax: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  /**
-   * Should be `true` when the component hosts a select.
-   */
-  select: PropTypes.bool,
   /**
    * Start `InputAdornment` for this component.
    */

packages/material-ui/src/NativeSelect/NativeSelect.js

@@ -52,16 +52,22 @@ export const styles = theme => ({
     textOverflow: 'ellipsis',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
+    '&$filled': {
+      paddingRight: 24,
+    },
+    '&$outlined': {
+      paddingRight: 24,
+    },
   },
   /* Pseudo-class applied to the select component `disabled` class. */
   disabled: {},
   /* Styles applied to the icon component. */
   icon: {
     // We use a position absolute over a flexbox in order to forward the pointer events
-    // to the input.
+    // to the input and to support wrapping tags..
     position: 'absolute',
     right: 0,
-    top: 'calc(50% - 12px)', // Center vertically
+    top: 'calc(50% - 13px)', // Center vertically
     color: theme.palette.action.active,
     pointerEvents: 'none', // Don't block pointer events on the select under the icon.
   },
@@ -105,7 +111,6 @@ const NativeSelect = React.forwardRef(function NativeSelect(props, ref) {
     // Most of the logic is implemented in `NativeSelectInput`.
     // The `Select` component is a simple API wrapper to expose something better to play with.
     inputComponent: NativeSelectInput,
-    select: true,
     inputProps: {
       children,
       classes,

packages/material-ui/src/OutlinedInput/OutlinedInput.d.ts

@@ -20,7 +20,6 @@ export type OutlinedInputClassKey =
   | 'notchedOutline'
   | 'input'
   | 'inputMarginDense'
-  | 'inputSelect'
   | 'inputMultiline'
   | 'inputAdornedStart'
   | 'inputAdornedEnd';

packages/material-ui/src/OutlinedInput/OutlinedInput.js

@@ -83,10 +83,6 @@ export const styles = theme => {
       paddingTop: 10.5,
       paddingBottom: 10.5,
     },
-    /* Styles applied to the `input` element if `select={true}`. */
-    inputSelect: {
-      paddingRight: 24,
-    },
     /* Styles applied to the `input` element if `multiline={true}`. */
     inputMultiline: {
       padding: 0,

packages/material-ui/src/Select/Select.js

@@ -25,6 +25,7 @@ const Select = React.forwardRef(function Select(props, ref) {
     input,
     inputProps,
     labelId,
+    labelWidth = 0,
     MenuProps,
     multiple = false,
     native = false,
@@ -34,7 +35,6 @@ const Select = React.forwardRef(function Select(props, ref) {
     renderValue,
     SelectDisplayProps,
     variant: variantProps = 'standard',
-    labelWidth = 0,
     ...other
   } = props;
 
@@ -61,7 +61,6 @@ const Select = React.forwardRef(function Select(props, ref) {
     // Most of the logic is implemented in `SelectInput`.
     // The `Select` component is a simple API wrapper to expose something better to play with.
     inputComponent,
-    select: true,
     inputProps: {
       children,
       IconComponent,

packages/material-ui/src/Select/SelectInput.js

@@ -33,9 +33,9 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
     defaultValue,
     disabled,
     displayEmpty,
-    labelId,
     IconComponent,
     inputRef: inputRefProp,
+    labelId,
     MenuProps = {},
     multiple,
     name,