From 429a8872442a87c2909d5a2e722b81bfcd758a45 Mon Sep 17 00:00:00 2001 From: duganbrett <44508924+duganbrett@users.noreply.github.com> Date: Fri, 29 Jan 2021 16:56:23 -0700 Subject: [PATCH 01/13] [TextField] Migrate NativeSelect to emotion --- docs/pages/api-docs/native-select.json | 5 +- .../api-docs/native-select/native-select.json | 1 + .../src/NativeSelect/NativeSelect.d.ts | 8 +- .../src/NativeSelect/NativeSelect.js | 19 ++- .../src/NativeSelect/NativeSelect.test.js | 14 +- .../src/NativeSelect/NativeSelectInput.d.ts | 3 + .../src/NativeSelect/NativeSelectInput.js | 137 ++++++++++++++---- .../NativeSelect/NativeSelectInput.test.js | 5 +- .../material-ui/src/NativeSelect/index.d.ts | 2 + .../material-ui/src/NativeSelect/index.js | 2 + .../src/NativeSelect/nativeSelectClasses.d.ts | 7 + .../src/NativeSelect/nativeSelectClasses.js | 21 +++ 12 files changed, 181 insertions(+), 43 deletions(-) create mode 100644 packages/material-ui/src/NativeSelect/nativeSelectClasses.d.ts create mode 100644 packages/material-ui/src/NativeSelect/nativeSelectClasses.js diff --git a/docs/pages/api-docs/native-select.json b/docs/pages/api-docs/native-select.json index 1e6df9459fada5..244365ede022ba 100644 --- a/docs/pages/api-docs/native-select.json +++ b/docs/pages/api-docs/native-select.json @@ -1,11 +1,12 @@ { "props": { "children": { "type": { "name": "node" } }, - "classes": { "type": { "name": "object" } }, + "classes": { "type": { "name": "object" }, "default": "{}" }, "IconComponent": { "type": { "name": "elementType" }, "default": "ArrowDropDownIcon" }, "input": { "type": { "name": "element" }, "default": "" }, "inputProps": { "type": { "name": "object" } }, "onChange": { "type": { "name": "func" } }, + "sx": { "type": { "name": "object" } }, "value": { "type": { "name": "any" } }, "variant": { "type": { @@ -37,6 +38,6 @@ "filename": "/packages/material-ui/src/NativeSelect/NativeSelect.js", "inheritance": { "component": "Input", "pathname": "/api/input/" }, "demos": "", - "styledComponent": false, + "styledComponent": true, "cssComponent": false } diff --git a/docs/translations/api-docs/native-select/native-select.json b/docs/translations/api-docs/native-select/native-select.json index b303222f1c7269..eb51c78befe586 100644 --- a/docs/translations/api-docs/native-select/native-select.json +++ b/docs/translations/api-docs/native-select/native-select.json @@ -7,6 +7,7 @@ "input": "An Input element; does not have to be a material-ui specific Input.", "inputProps": "<a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Attributes">Attributes</a> applied to the select element.", "onChange": "Callback fired when a menu item is selected.

Signature:
function(event: object) => void
event: The event source of the callback. You can pull out the new value by accessing event.target.value (string).", + "sx": "The system prop that allows defining system overrides as well as additional CSS styles. See the `sx` page for more details.", "value": "The input value. The DOM API casts this to a string.", "variant": "The variant to use." }, diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.d.ts b/packages/material-ui/src/NativeSelect/NativeSelect.d.ts index fc2102f5edaadc..cc4d959e3dde68 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelect.d.ts +++ b/packages/material-ui/src/NativeSelect/NativeSelect.d.ts @@ -1,5 +1,6 @@ import * as React from 'react'; -import { InternalStandardProps as StandardProps } from '..'; +import { SxProps } from '@material-ui/system'; +import { InternalStandardProps as StandardProps, Theme } from '..'; import { InputProps } from '../Input'; import { NativeSelectInputProps } from './NativeSelectInput'; @@ -12,6 +13,7 @@ export interface NativeSelectProps children?: React.ReactNode; /** * Override or extend the styles applied to the component. + * @default {} */ classes?: { /** Styles applied to the select component `root` class. */ @@ -58,6 +60,10 @@ export interface NativeSelectProps * You can pull out the new value by accessing `event.target.value` (string). */ onChange?: NativeSelectInputProps['onChange']; + /** + * The system prop that allows defining system overrides as well as additional CSS styles. + */ + sx?: SxProps; /** * The `input` value. The DOM API casts this to a string. */ diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js index 6e62ec6eaa7fc9..695c152924fab6 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelect.js +++ b/packages/material-ui/src/NativeSelect/NativeSelect.js @@ -1,12 +1,16 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import NativeSelectInput from './NativeSelectInput'; -import withStyles from '../styles/withStyles'; import formControlState from '../FormControl/formControlState'; import useFormControl from '../FormControl/useFormControl'; import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown'; import Input from '../Input'; +import useThemeProps from '../styles/useThemeProps'; +/* + TODO: v5 Remove styles function once Select component is migrated + to emotion +*/ export const styles = (theme) => ({ /* Styles applied to the select component `root` class. */ root: {}, @@ -108,10 +112,11 @@ const defaultInput = ; /** * An alternative to ` {props.multiple ? null : ( - + )} ); diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.test.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.test.js index 4d2044aa7e5249..563a5ce7f9e105 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelectInput.test.js +++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.test.js @@ -1,7 +1,7 @@ import * as React from 'react'; import { expect } from 'chai'; import { spy } from 'sinon'; -import { createMount, describeConformance, createClientRender } from 'test/utils'; +import { createMount, describeConformanceV5, createClientRender } from 'test/utils'; import NativeSelectInput from './NativeSelectInput'; describe('', () => { @@ -25,10 +25,11 @@ describe('', () => { ], }; - describeConformance( {}} />, () => ({ + describeConformanceV5( {}} />, () => ({ mount, only: ['refForwarding'], refInstanceof: window.HTMLSelectElement, + muiName: 'MuiNativeSelectInput', })); it('should render a native select', () => { diff --git a/packages/material-ui/src/NativeSelect/index.d.ts b/packages/material-ui/src/NativeSelect/index.d.ts index b98e687a6d6fa1..026e02bdf5c8a9 100644 --- a/packages/material-ui/src/NativeSelect/index.d.ts +++ b/packages/material-ui/src/NativeSelect/index.d.ts @@ -1,2 +1,4 @@ export { default } from './NativeSelect'; export * from './NativeSelect'; +export { default as nativeSelectClasses } from './nativeSelectClasses'; +export * from './nativeSelectClasses'; diff --git a/packages/material-ui/src/NativeSelect/index.js b/packages/material-ui/src/NativeSelect/index.js index e2f92130f3481e..1377cb53267a13 100644 --- a/packages/material-ui/src/NativeSelect/index.js +++ b/packages/material-ui/src/NativeSelect/index.js @@ -1 +1,3 @@ export { default } from './NativeSelect'; +export { default as nativeSelectClasses } from './nativeSelectClasses'; +export * from './nativeSelectClasses'; diff --git a/packages/material-ui/src/NativeSelect/nativeSelectClasses.d.ts b/packages/material-ui/src/NativeSelect/nativeSelectClasses.d.ts new file mode 100644 index 00000000000000..8f484a275c2fd0 --- /dev/null +++ b/packages/material-ui/src/NativeSelect/nativeSelectClasses.d.ts @@ -0,0 +1,7 @@ +import { NativeSelectClassKey } from './NativeSelect'; + +declare const nativeSelectClasses: Record; + +export function getNativeSelectUtilityClasses(slot: string): string; + +export default nativeSelectClasses; diff --git a/packages/material-ui/src/NativeSelect/nativeSelectClasses.js b/packages/material-ui/src/NativeSelect/nativeSelectClasses.js new file mode 100644 index 00000000000000..f11810e5537c91 --- /dev/null +++ b/packages/material-ui/src/NativeSelect/nativeSelectClasses.js @@ -0,0 +1,21 @@ +import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; + +export function getNativeSelectUtilitiyClasses(slot) { + return generateUtilityClass('MuiSelect', slot); +} + +const nativeSelectClasses = generateUtilityClasses('MuiSelect', [ + 'root', + 'select', + 'filled', + 'outlined', + 'selectMenu', + 'disabled', + 'icon', + 'iconOpen', + 'iconFilled', + 'iconOutlined', + 'nativeInput', +]); + +export default nativeSelectClasses; From a0bd515789034663b18d6150675d64d46bd7177a Mon Sep 17 00:00:00 2001 From: duganbrett <44508924+duganbrett@users.noreply.github.com> Date: Sat, 30 Jan 2021 09:10:20 -0700 Subject: [PATCH 02/13] Fixed overrides and ignore tests. --- packages/material-ui/src/NativeSelect/NativeSelect.test.js | 2 +- packages/material-ui/src/NativeSelect/NativeSelectInput.js | 5 +++-- 2 files changed, 4 insertions(+), 3 deletions(-) diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.test.js b/packages/material-ui/src/NativeSelect/NativeSelect.test.js index 0e79ded6d53128..51365ab737014d 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelect.test.js +++ b/packages/material-ui/src/NativeSelect/NativeSelect.test.js @@ -26,7 +26,7 @@ describe('', () => { mount, refInstanceof: window.HTMLDivElement, muiName: 'MuiNativeSelect', - skip: ['componentProp', 'componentsProp', 'rootClass'], + skip: ['componentProp', 'componentsProp', 'rootClass', 'themeVariants', 'themeStyleOverrides'], })); it('should render a native select', () => { diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js index c8ffd2a16ac27b..9f8542b310d941 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js +++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js @@ -10,14 +10,15 @@ import experimentalStyled from '../styles/experimentalStyled'; const overridesResolver = (props, styles) => { const { styleProps } = props; return deepmerge(styles.root, { - ...(!styleProps.disableUnderline && styles.underline), + ...styles.select, + ...styles[styleProps.variant] }); }; const iconOverridesResolver = (props, styles) => { const { styleProps } = props; return deepmerge(styles.icon, { - ...(!styleProps.variant && styles[`icon${capitalize(styleProps.variant)}`]), + ...(styleProps.variant && styles[`icon${capitalize(styleProps.variant)}`]), }); }; From 32991236a5ca12d5b9a00f664215743c35fdd277 Mon Sep 17 00:00:00 2001 From: duganbrett <44508924+duganbrett@users.noreply.github.com> Date: Sat, 30 Jan 2021 10:02:13 -0700 Subject: [PATCH 03/13] Fixed formatting --- packages/material-ui/src/NativeSelect/NativeSelectInput.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js index 9f8542b310d941..fa5779e86058fa 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js +++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js @@ -11,7 +11,7 @@ const overridesResolver = (props, styles) => { const { styleProps } = props; return deepmerge(styles.root, { ...styles.select, - ...styles[styleProps.variant] + ...styles[styleProps.variant], }); }; From 871870ed24fceaf43e96082bd2f0e574847a69d6 Mon Sep 17 00:00:00 2001 From: duganbrett <44508924+duganbrett@users.noreply.github.com> Date: Sat, 30 Jan 2021 10:14:28 -0700 Subject: [PATCH 04/13] Fix component name --- packages/material-ui/src/NativeSelect/nativeSelectClasses.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/NativeSelect/nativeSelectClasses.js b/packages/material-ui/src/NativeSelect/nativeSelectClasses.js index f11810e5537c91..70cfb0a4434ee9 100644 --- a/packages/material-ui/src/NativeSelect/nativeSelectClasses.js +++ b/packages/material-ui/src/NativeSelect/nativeSelectClasses.js @@ -1,10 +1,10 @@ import { generateUtilityClass, generateUtilityClasses } from '@material-ui/unstyled'; export function getNativeSelectUtilitiyClasses(slot) { - return generateUtilityClass('MuiSelect', slot); + return generateUtilityClass('MuiNativeSelect', slot); } -const nativeSelectClasses = generateUtilityClasses('MuiSelect', [ +const nativeSelectClasses = generateUtilityClasses('MuiNativeSelect', [ 'root', 'select', 'filled', From 12d3570d22429c899ffbecf2fd403ae7112f9b5f Mon Sep 17 00:00:00 2001 From: duganbrett <44508924+duganbrett@users.noreply.github.com> Date: Sat, 30 Jan 2021 10:53:36 -0700 Subject: [PATCH 05/13] Fix overrideResolvers and prepare for compatibility with Select --- .../src/NativeSelect/NativeSelectInput.js | 46 +++++++++++++------ 1 file changed, 32 insertions(+), 14 deletions(-) diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js index fa5779e86058fa..ad5b50300ff6e7 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js +++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js @@ -7,7 +7,7 @@ import capitalize from '../utils/capitalize'; import { getNativeSelectUtilitiyClasses } from './nativeSelectClasses'; import experimentalStyled from '../styles/experimentalStyled'; -const overridesResolver = (props, styles) => { +export const overridesResolver = (props, styles) => { const { styleProps } = props; return deepmerge(styles.root, { ...styles.select, @@ -15,10 +15,11 @@ const overridesResolver = (props, styles) => { }); }; -const iconOverridesResolver = (props, styles) => { +export const iconOverridesResolver = (props, styles) => { const { styleProps } = props; return deepmerge(styles.icon, { ...(styleProps.variant && styles[`icon${capitalize(styleProps.variant)}`]), + ...(styleProps.open && styles.iconOpen) }); }; @@ -33,11 +34,8 @@ const useUtilityClasses = (styleProps) => { return composeClasses(slots, getNativeSelectUtilitiyClasses, classes); }; -const SelectRoot = experimentalStyled( - 'select', - {}, - { name: 'MuiNativeSelect', slot: 'Root', overridesResolver }, -)(({ styleProps, theme }) => ({ + +export const rootStyles = ({ styleProps, theme }) => ({ MozAppearance: 'none', // Reset WebkitAppearance: 'none', // Reset // When interacting quickly, the text can end up selected. @@ -80,13 +78,16 @@ const SelectRoot = experimentalStyled( paddingRight: 32, }, }), -})); + ...(styleProps.selectMenu && { + height: 'auto', // Resets for multpile select with chips + minHeight: '1.4375em', // Required for select\text-field height consistency + textOverflow: 'ellipsis', + whiteSpace: 'nowrap', + overflow: 'hidden', + }), +}) -const IconRoot = experimentalStyled( - 'svg', - {}, - { name: 'MuiNativeSelect', slot: 'Icon', overridesResolver: iconOverridesResolver }, -)(({ styleProps, theme }) => ({ +export const iconStyles = ({ styleProps, theme }) => ({ // We use a position absolute over a flexbox in order to forward the pointer events // to the input and to support wrapping tags.. position: 'absolute', @@ -97,13 +98,29 @@ const IconRoot = experimentalStyled( '&.Mui-disabled': { color: theme.palette.action.disabled, }, + ...(styleProps.open && { + right: 7, + }), ...(styleProps.variant === 'filled' && { right: 7, }), ...(styleProps.variant === 'outlined' && { right: 7, }), -})); + +}); + +const SelectRoot = experimentalStyled( + 'select', + {}, + { name: 'MuiNativeSelect', slot: 'Root', overridesResolver }, +)(rootStyles); + +const IconRoot = experimentalStyled( + 'svg', + {}, + { name: 'MuiNativeSelect', slot: 'Icon', overridesResolver: iconOverridesResolver }, +)(iconStyles); /** * @ignore - internal component. @@ -113,6 +130,7 @@ const NativeSelectInput = React.forwardRef(function NativeSelectInput(props, ref const styleProps = { ...props, + disabled, variant, }; From 54eb6e3d133a24bab044a3b47ea1a142d0975880 Mon Sep 17 00:00:00 2001 From: duganbrett <44508924+duganbrett@users.noreply.github.com> Date: Sat, 30 Jan 2021 11:24:56 -0700 Subject: [PATCH 06/13] Formattins fix --- .../material-ui/src/NativeSelect/NativeSelectInput.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js index ad5b50300ff6e7..db81dcf09e4a07 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js +++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js @@ -19,7 +19,7 @@ export const iconOverridesResolver = (props, styles) => { const { styleProps } = props; return deepmerge(styles.icon, { ...(styleProps.variant && styles[`icon${capitalize(styleProps.variant)}`]), - ...(styleProps.open && styles.iconOpen) + ...(styleProps.open && styles.iconOpen), }); }; @@ -34,7 +34,6 @@ const useUtilityClasses = (styleProps) => { return composeClasses(slots, getNativeSelectUtilitiyClasses, classes); }; - export const rootStyles = ({ styleProps, theme }) => ({ MozAppearance: 'none', // Reset WebkitAppearance: 'none', // Reset @@ -78,14 +77,14 @@ export const rootStyles = ({ styleProps, theme }) => ({ paddingRight: 32, }, }), - ...(styleProps.selectMenu && { + ...(styleProps.selectMenu && { height: 'auto', // Resets for multpile select with chips minHeight: '1.4375em', // Required for select\text-field height consistency textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden', }), -}) +}); export const iconStyles = ({ styleProps, theme }) => ({ // We use a position absolute over a flexbox in order to forward the pointer events @@ -107,7 +106,6 @@ export const iconStyles = ({ styleProps, theme }) => ({ ...(styleProps.variant === 'outlined' && { right: 7, }), - }); const SelectRoot = experimentalStyled( From f3a296623165d8913f5ec52519fbb6ea00ce9527 Mon Sep 17 00:00:00 2001 From: duganbrett <44508924+duganbrett@users.noreply.github.com> Date: Sat, 30 Jan 2021 13:22:22 -0700 Subject: [PATCH 07/13] rerun ci From ab9ffd5df31c6fd9ef0786955926cd77e4502341 Mon Sep 17 00:00:00 2001 From: duganbrett <44508924+duganbrett@users.noreply.github.com> Date: Sat, 30 Jan 2021 13:37:32 -0700 Subject: [PATCH 08/13] rerun ci From e09f6419437920880211c07729e75a78bf3929ee Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 7 Apr 2021 13:18:48 +0200 Subject: [PATCH 09/13] misc fixes --- docs/pages/api-docs/native-select.json | 2 +- .../src/NativeSelect/NativeSelect.d.ts | 1 - .../src/NativeSelect/NativeSelect.js | 4 +- .../src/NativeSelect/NativeSelectInput.js | 49 ++++++++----------- 4 files changed, 23 insertions(+), 33 deletions(-) diff --git a/docs/pages/api-docs/native-select.json b/docs/pages/api-docs/native-select.json index 244365ede022ba..328c6493e2cda1 100644 --- a/docs/pages/api-docs/native-select.json +++ b/docs/pages/api-docs/native-select.json @@ -1,7 +1,7 @@ { "props": { "children": { "type": { "name": "node" } }, - "classes": { "type": { "name": "object" }, "default": "{}" }, + "classes": { "type": { "name": "object" } }, "IconComponent": { "type": { "name": "elementType" }, "default": "ArrowDropDownIcon" }, "input": { "type": { "name": "element" }, "default": "" }, "inputProps": { "type": { "name": "object" } }, diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.d.ts b/packages/material-ui/src/NativeSelect/NativeSelect.d.ts index cc4d959e3dde68..494b7132d4527e 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelect.d.ts +++ b/packages/material-ui/src/NativeSelect/NativeSelect.d.ts @@ -13,7 +13,6 @@ export interface NativeSelectProps children?: React.ReactNode; /** * Override or extend the styles applied to the component. - * @default {} */ classes?: { /** Styles applied to the select component `root` class. */ diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js index 695c152924fab6..450a24ddde6f2a 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelect.js +++ b/packages/material-ui/src/NativeSelect/NativeSelect.js @@ -116,7 +116,7 @@ const NativeSelect = React.forwardRef(function NativeSelect(inProps, ref) { const props = useThemeProps({ name: 'MuiNativeSelect', props: inProps }); const { children, - classes = {}, + classes, IconComponent = ArrowDropDownIcon, input = defaultInput, inputProps, @@ -145,7 +145,6 @@ const NativeSelect = React.forwardRef(function NativeSelect(inProps, ref) { ...(input ? input.props.inputProps : {}), }, ref, - classes, ...other, }); }); @@ -162,7 +161,6 @@ NativeSelect.propTypes = { children: PropTypes.node, /** * Override or extend the styles applied to the component. - * @default {} */ classes: PropTypes.object, /** diff --git a/packages/material-ui/src/NativeSelect/NativeSelectInput.js b/packages/material-ui/src/NativeSelect/NativeSelectInput.js index db81dcf09e4a07..88b5b64eeb03a2 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelectInput.js +++ b/packages/material-ui/src/NativeSelect/NativeSelectInput.js @@ -4,7 +4,7 @@ import clsx from 'clsx'; import { refType, deepmerge } from '@material-ui/utils'; import { unstable_composeClasses as composeClasses } from '@material-ui/unstyled'; import capitalize from '../utils/capitalize'; -import { getNativeSelectUtilitiyClasses } from './nativeSelectClasses'; +import nativeSelectClasses, { getNativeSelectUtilitiyClasses } from './nativeSelectClasses'; import experimentalStyled from '../styles/experimentalStyled'; export const overridesResolver = (props, styles) => { @@ -12,29 +12,30 @@ export const overridesResolver = (props, styles) => { return deepmerge(styles.root, { ...styles.select, ...styles[styleProps.variant], - }); -}; - -export const iconOverridesResolver = (props, styles) => { - const { styleProps } = props; - return deepmerge(styles.icon, { - ...(styleProps.variant && styles[`icon${capitalize(styleProps.variant)}`]), - ...(styleProps.open && styles.iconOpen), + [`& .${nativeSelectClasses.icon}`]: { + ...styles.icon, + ...(styleProps.variant && styles[`icon${capitalize(styleProps.variant)}`]), + ...(styleProps.open && styles.iconOpen), + } }); }; const useUtilityClasses = (styleProps) => { - const { classes, variant, disabled } = styleProps; + const { classes, variant, disabled, open } = styleProps; const slots = { root: ['root', 'select', variant, disabled && disabled], - icon: ['icon', `icon${capitalize(variant)}`, disabled && disabled], + icon: ['icon', `icon${capitalize(variant)}`, open && 'iconOpen', disabled && disabled], }; return composeClasses(slots, getNativeSelectUtilitiyClasses, classes); }; -export const rootStyles = ({ styleProps, theme }) => ({ +const SelectRoot = experimentalStyled( + 'select', + {}, + { name: 'MuiNativeSelect', slot: 'Root', overridesResolver }, +)(({ styleProps, theme }) => ({ MozAppearance: 'none', // Reset WebkitAppearance: 'none', // Reset // When interacting quickly, the text can end up selected. @@ -84,9 +85,13 @@ export const rootStyles = ({ styleProps, theme }) => ({ whiteSpace: 'nowrap', overflow: 'hidden', }), -}); +})); -export const iconStyles = ({ styleProps, theme }) => ({ +const IconRoot = experimentalStyled( + 'svg', + {}, + { name: 'MuiNativeSelect', slot: 'Icon' }, +)(({ styleProps, theme }) => ({ // We use a position absolute over a flexbox in order to forward the pointer events // to the input and to support wrapping tags.. position: 'absolute', @@ -106,19 +111,7 @@ export const iconStyles = ({ styleProps, theme }) => ({ ...(styleProps.variant === 'outlined' && { right: 7, }), -}); - -const SelectRoot = experimentalStyled( - 'select', - {}, - { name: 'MuiNativeSelect', slot: 'Root', overridesResolver }, -)(rootStyles); - -const IconRoot = experimentalStyled( - 'svg', - {}, - { name: 'MuiNativeSelect', slot: 'Icon', overridesResolver: iconOverridesResolver }, -)(iconStyles); +})); /** * @ignore - internal component. @@ -159,7 +152,7 @@ NativeSelectInput.propTypes = { * Override or extend the styles applied to the component. * See [CSS API](#css) below for more details. */ - classes: PropTypes.object.isRequired, + classes: PropTypes.object, /** * The CSS class name of the select element. */ From e80316cf2dc03a8144d7900afb9745396e2baca7 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 7 Apr 2021 13:37:17 +0200 Subject: [PATCH 10/13] move styles to Select --- .../src/NativeSelect/NativeSelect.js | 101 ------------------ .../src/NativeSelect/NativeSelectInput.js | 2 +- packages/material-ui/src/Select/Select.js | 98 ++++++++++++++++- 3 files changed, 97 insertions(+), 104 deletions(-) diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js index 450a24ddde6f2a..518bdc42b82c85 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelect.js +++ b/packages/material-ui/src/NativeSelect/NativeSelect.js @@ -7,107 +7,6 @@ import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown'; import Input from '../Input'; import useThemeProps from '../styles/useThemeProps'; -/* - TODO: v5 Remove styles function once Select component is migrated - to emotion -*/ -export const styles = (theme) => ({ - /* Styles applied to the select component `root` class. */ - root: {}, - /* Styles applied to the select component `select` class. */ - select: { - '-moz-appearance': 'none', // Reset - '-webkit-appearance': 'none', // Reset - // When interacting quickly, the text can end up selected. - // Native select can't be selected either. - userSelect: 'none', - borderRadius: 0, // Reset - minWidth: 16, // So it doesn't collapse. - cursor: 'pointer', - '&:focus': { - // Show that it's not an text input - backgroundColor: - theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.05)' : 'rgba(255, 255, 255, 0.05)', - borderRadius: 0, // Reset Chrome style - }, - // Remove IE11 arrow - '&::-ms-expand': { - display: 'none', - }, - '&$disabled': { - cursor: 'default', - }, - '&[multiple]': { - height: 'auto', - }, - '&:not([multiple]) option, &:not([multiple]) optgroup': { - backgroundColor: theme.palette.background.paper, - }, - // Bump specificity to allow extending custom inputs - '&&': { - paddingRight: 24, - }, - }, - /* Styles applied to the select component if `variant="filled"`. */ - filled: { - '&&': { - paddingRight: 32, - }, - }, - /* Styles applied to the select component if `variant="outlined"`. */ - outlined: { - borderRadius: theme.shape.borderRadius, - '&&': { - paddingRight: 32, - }, - }, - /* Styles applied to the select component `selectMenu` class. */ - selectMenu: { - height: 'auto', // Resets for multpile select with chips - minHeight: '1.4375em', // Required for select\text-field height consistency - textOverflow: 'ellipsis', - whiteSpace: 'nowrap', - overflow: 'hidden', - }, - /* 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 and to support wrapping tags.. - position: 'absolute', - right: 0, - top: 'calc(50% - 12px)', // Center vertically - pointerEvents: 'none', // Don't block pointer events on the select under the icon. - color: theme.palette.action.active, - '&$disabled': { - color: theme.palette.action.disabled, - }, - }, - /* Styles applied to the icon component if the popup is open. */ - iconOpen: { - transform: 'rotate(180deg)', - }, - /* Styles applied to the icon component if `variant="filled"`. */ - iconFilled: { - right: 7, - }, - /* Styles applied to the icon component if `variant="outlined"`. */ - iconOutlined: { - right: 7, - }, - /* Styles applied to the underlying native input component. */ - nativeInput: { - bottom: 0, - left: 0, - position: 'absolute', - opacity: 0, - pointerEvents: 'none', - width: '100%', - boxSizing: 'border-box', - }, -}); - const defaultInput = ; /** * An alternative to `; /** * An alternative to `