[Select] Follow spec with placement of dropdown icon (#17303)

docs/pages/api/native-select.md

@@ -50,7 +50,9 @@ Any other props supplied will be provided to the root element ([Input](/api/inpu
 | <span class="prop-name">outlined</span> | <span class="prop-name">MuiNativeSelect-outlined</span> | Styles applied to the select component if `variant="outlined"`.
 | <span class="prop-name">selectMenu</span> | <span class="prop-name">MuiNativeSelect-selectMenu</span> | Styles applied to the select component `selectMenu` class.
 | <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the select component `disabled` class.
-| <span class="prop-name">icon</span> | <span class="prop-name">MuiNativeSelect-icon</span> | Styles applied to the select component `icon` class.
+| <span class="prop-name">icon</span> | <span class="prop-name">MuiNativeSelect-icon</span> | Styles applied to the icon component.
+| <span class="prop-name">iconFilled</span> | <span class="prop-name">MuiNativeSelect-iconFilled</span> | Styles applied to the icon component if `variant="filled"`.
+| <span class="prop-name">iconOutlined</span> | <span class="prop-name">MuiNativeSelect-iconOutlined</span> | Styles applied to the icon component if `variant="outlined"`.
 
 You can override the style of the component thanks to one of these customization points:
 

docs/pages/api/select.md

@@ -60,7 +60,9 @@ Any other props supplied will be provided to the root element ([Input](/api/inpu
 | <span class="prop-name">outlined</span> | <span class="prop-name">MuiSelect-outlined</span> | Styles applied to the select component if `variant="outlined"`.
 | <span class="prop-name">selectMenu</span> | <span class="prop-name">MuiSelect-selectMenu</span> | Styles applied to the select component `selectMenu` class.
 | <span class="prop-name">disabled</span> | <span class="prop-name">Mui-disabled</span> | Pseudo-class applied to the select component `disabled` class.
-| <span class="prop-name">icon</span> | <span class="prop-name">MuiSelect-icon</span> | Styles applied to the select component `icon` class.
+| <span class="prop-name">icon</span> | <span class="prop-name">MuiSelect-icon</span> | Styles applied to the icon component.
+| <span class="prop-name">iconFilled</span> | <span class="prop-name">MuiSelect-iconFilled</span> | Styles applied to the icon component if `variant="filled"`.
+| <span class="prop-name">iconOutlined</span> | <span class="prop-name">MuiSelect-iconOutlined</span> | Styles applied to the icon component if `variant="outlined"`.
 
 You can override the style of the component thanks to one of these customization points:
 

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

@@ -15,11 +15,13 @@ export interface NativeSelectProps
 export type NativeSelectClassKey =
   | 'root'
   | 'select'
+  | 'filled'
+  | 'outlined'
   | 'selectMenu'
   | 'disabled'
   | 'icon'
-  | 'filled'
-  | 'outlined';
+  | 'iconFilled'
+  | 'iconOutlined';
 
 declare const NativeSelect: React.ComponentType<NativeSelectProps>;
 

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

@@ -55,7 +55,7 @@ export const styles = theme => ({
   },
   /* Pseudo-class applied to the select component `disabled` class. */
   disabled: {},
-  /* Styles applied to the select component `icon` class. */
+  /* 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.
@@ -65,6 +65,14 @@ export const styles = theme => ({
     color: theme.palette.action.active,
     pointerEvents: 'none', // Don't block pointer events on the select under the icon.
   },
+  /* Styles applied to the icon component if `variant="filled"`. */
+  iconFilled: {
+    right: 7,
+  },
+  /* Styles applied to the icon component if `variant="outlined"`. */
+  iconOutlined: {
+    right: 7,
+  },
 });
 
 const defaultInput = <Input />;

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

@@ -2,22 +2,30 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import { refType } from '@material-ui/utils';
+import { capitalize } from '../utils/helpers';
 
 /**
  * @ignore - internal component.
  */
 const NativeSelectInput = React.forwardRef(function NativeSelectInput(props, ref) {
-  const { classes, className, disabled, IconComponent, inputRef, variant, ...other } = props;
+  const {
+    classes,
+    className,
+    disabled,
+    IconComponent,
+    inputRef,
+    variant = 'standard',
+    ...other
+  } = props;
 
   return (
     <React.Fragment>
       <select
         className={clsx(
           classes.root, // TODO v5: merge root and select
           classes.select,
+          classes[variant],
           {
-            [classes.filled]: variant === 'filled',
-            [classes.outlined]: variant === 'outlined',
             [classes.disabled]: disabled,
           },
           className,
@@ -26,7 +34,9 @@ const NativeSelectInput = React.forwardRef(function NativeSelectInput(props, ref
         ref={inputRef || ref}
         {...other}
       />
-      {props.multiple ? null : <IconComponent className={classes.icon} />}
+      {props.multiple ? null : (
+        <IconComponent className={clsx(classes.icon, classes[`icon${capitalize(variant)}`])} />
+      )}
     </React.Fragment>
   );
 });

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

@@ -26,11 +26,13 @@ export interface SelectProps
 export type SelectClassKey =
   | 'root'
   | 'select'
+  | 'filled'
+  | 'outlined'
   | 'selectMenu'
   | 'disabled'
   | 'icon'
-  | 'filled'
-  | 'outlined';
+  | 'iconFilled'
+  | 'iconOutlined';
 
 declare const Select: React.ComponentType<SelectProps>;
 

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

@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import warning from 'warning';
+import { capitalize } from '../utils/helpers';
 import { refType } from '@material-ui/utils';
 import Menu from '../Menu/Menu';
 import { isFilled } from '../InputBase/utils';
@@ -49,7 +50,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
     tabIndex: tabIndexProp,
     type = 'hidden',
     value,
-    variant,
+    variant = 'standard',
     ...other
   } = props;
 
@@ -261,10 +262,9 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
           classes.root, // TODO v5: merge root and select
           classes.select,
           classes.selectMenu,
+          classes[variant],
           {
             [classes.disabled]: disabled,
-            [classes.filled]: variant === 'filled',
-            [classes.outlined]: variant === 'outlined',
           },
           className,
         )}
@@ -299,7 +299,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         autoFocus={autoFocus}
         {...other}
       />
-      <IconComponent className={classes.icon} />
+      <IconComponent className={clsx(classes.icon, classes[`icon${capitalize(variant)}`])} />
       <Menu
         id={`menu-${name || ''}`}
         anchorEl={displayRef.current}