From 893d9f71afac78bd8b89cdebf855ba0cb44b7496 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 23 Nov 2019 22:13:23 +0100 Subject: [PATCH] [Autocomplete] Improve icons display --- docs/pages/api/autocomplete.md | 1 + docs/pages/api/filled-input.md | 1 - docs/pages/api/input-base.md | 2 -- docs/pages/api/outlined-input.md | 1 - .../components/text-fields/InputAdornments.js | 2 ++ .../text-fields/InputAdornments.tsx | 2 ++ .../src/Autocomplete/Autocomplete.d.ts | 1 + .../src/Autocomplete/Autocomplete.js | 33 ++++++++++++++++--- .../src/FilledInput/FilledInput.js | 4 --- .../material-ui/src/InputBase/InputBase.js | 10 ------ .../src/NativeSelect/NativeSelect.js | 9 +++-- .../src/OutlinedInput/OutlinedInput.d.ts | 1 - .../src/OutlinedInput/OutlinedInput.js | 4 --- packages/material-ui/src/Select/Select.js | 3 +- .../material-ui/src/Select/SelectInput.js | 2 +- 15 files changed, 43 insertions(+), 33 deletions(-) diff --git a/docs/pages/api/autocomplete.md b/docs/pages/api/autocomplete.md index ca21fa3cd69988..50c2b2c3a755bb 100644 --- a/docs/pages/api/autocomplete.md +++ b/docs/pages/api/autocomplete.md @@ -87,6 +87,7 @@ Any other props supplied will be provided to the root element (native element). | inputRoot | .MuiAutocomplete-inputRoot | Styles applied to the Input element. | input | .MuiAutocomplete-input | Styles applied to the input element. | inputFocused | .MuiAutocomplete-inputFocused | Styles applied to the input element if tag focused. +| endAdornment | .MuiAutocomplete-endAdornment | Styles applied to the endAdornment element. | clearIndicator | .MuiAutocomplete-clearIndicator | Styles applied to the clear indictator. | clearIndicatorDirty | .MuiAutocomplete-clearIndicatorDirty | Styles applied to the clear indictator if the input is dirty. | popupIndicator | .MuiAutocomplete-popupIndicator | Styles applied to the popup indictator. diff --git a/docs/pages/api/filled-input.md b/docs/pages/api/filled-input.md index f2e9d6a5dc2ec4..9744fcbaba5a44 100644 --- a/docs/pages/api/filled-input.md +++ b/docs/pages/api/filled-input.md @@ -76,7 +76,6 @@ Any other props supplied will be provided to the root element ([InputBase](/api/ | input | .MuiFilledInput-input | Styles applied to the `input` element. | inputMarginDense | .MuiFilledInput-inputMarginDense | Styles applied to the `input` element if `margin="dense"`. | inputHiddenLabel | .MuiFilledInput-inputHiddenLabel | Styles applied to the `input` if in ``. -| inputSelect | .MuiFilledInput-inputSelect | Styles applied to the `input` element if `select={true}`. | inputMultiline | .MuiFilledInput-inputMultiline | Styles applied to the `input` element if `multiline={true}`. | inputAdornedStart | .MuiFilledInput-inputAdornedStart | Styles applied to the `input` element if `startAdornment` is provided. | inputAdornedEnd | .MuiFilledInput-inputAdornedEnd | Styles applied to the `input` element if `endAdornment` is provided. diff --git a/docs/pages/api/input-base.md b/docs/pages/api/input-base.md index cb8beb49b66843..25f809048f63bc 100644 --- a/docs/pages/api/input-base.md +++ b/docs/pages/api/input-base.md @@ -49,7 +49,6 @@ It contains a load of style reset and some state logic. | required | bool | | If `true`, the `input` element will be required. | | rows | string
| number | | Number of rows to display when multiline option is set to true. | | rowsMax | string
| number | | Maximum number of rows to display when multiline option is set to true. | -| select | bool | false | Should be `true` when the component hosts a select. | | startAdornment | node | | Start `InputAdornment` for this component. | | type | string | 'text' | 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). | | value | any | | 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). | fullWidth | .MuiInputBase-fullWidth | Styles applied to the root element if `fullWidth={true}`. | input | .MuiInputBase-input | Styles applied to the `input` element. | inputMarginDense | .MuiInputBase-inputMarginDense | Styles applied to the `input` element if `margin="dense"`. -| inputSelect | .MuiInputBase-inputSelect | Styles applied to the `input` element if `select={true}`. | inputMultiline | .MuiInputBase-inputMultiline | Styles applied to the `input` element if `multiline={true}`. | inputTypeSearch | .MuiInputBase-inputTypeSearch | Styles applied to the `input` element if `type="search"`. | inputAdornedStart | .MuiInputBase-inputAdornedStart | Styles applied to the `input` element if `startAdornment` is provided. diff --git a/docs/pages/api/outlined-input.md b/docs/pages/api/outlined-input.md index 50c92a17140f94..7b842b286d357e 100644 --- a/docs/pages/api/outlined-input.md +++ b/docs/pages/api/outlined-input.md @@ -76,7 +76,6 @@ Any other props supplied will be provided to the root element ([InputBase](/api/ | notchedOutline | .MuiOutlinedInput-notchedOutline | Styles applied to the `NotchedOutline` element. | input | .MuiOutlinedInput-input | Styles applied to the `input` element. | inputMarginDense | .MuiOutlinedInput-inputMarginDense | Styles applied to the `input` element if `margin="dense"`. -| inputSelect | .MuiOutlinedInput-inputSelect | Styles applied to the `input` element if `select={true}`. | inputMultiline | .MuiOutlinedInput-inputMultiline | Styles applied to the `input` element if `multiline={true}`. | inputAdornedStart | .MuiOutlinedInput-inputAdornedStart | Styles applied to the `input` element if `startAdornment` is provided. | inputAdornedEnd | .MuiOutlinedInput-inputAdornedEnd | Styles applied to the `input` element if `endAdornment` is provided. diff --git a/docs/src/pages/components/text-fields/InputAdornments.js b/docs/src/pages/components/text-fields/InputAdornments.js index f8efb3efe2f838..3067025bd05222 100644 --- a/docs/src/pages/components/text-fields/InputAdornments.js +++ b/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 ? : } @@ -195,6 +196,7 @@ export default function InputAdornments() { aria-label="toggle password visibility" onClick={handleClickShowPassword} onMouseDown={handleMouseDownPassword} + edge="end" > {values.showPassword ? : } diff --git a/docs/src/pages/components/text-fields/InputAdornments.tsx b/docs/src/pages/components/text-fields/InputAdornments.tsx index 3a828a9380ddc7..7b5c4b09976145 100644 --- a/docs/src/pages/components/text-fields/InputAdornments.tsx +++ b/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 ? : } @@ -205,6 +206,7 @@ export default function InputAdornments() { aria-label="toggle password visibility" onClick={handleClickShowPassword} onMouseDown={handleMouseDownPassword} + edge="end" > {values.showPassword ? : } diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts index 9295ef9735a6e1..2e5882f7bc4f8b 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.d.ts @@ -134,6 +134,7 @@ export type AutocompleteClassKey = | 'inputRoot' | 'input' | 'inputFocused' + | 'endAdornment' | 'clearIndicator' | 'clearIndicatorDirty' | 'popupIndicator' diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.js index 22556a9e390908..2137d69036a77c 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.js +++ b/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% - 14px)', // 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: ( - +
{disableClearable || disabled ? null : ( )} - +
), }, inputProps: { diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js index c2eed812504f6b..d9ba768220301d 100644 --- a/packages/material-ui/src/FilledInput/FilledInput.js +++ b/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, diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js index fa142c669a79e8..1dc5ebb30884cd 100644 --- a/packages/material-ui/src/InputBase/InputBase.js +++ b/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. */ diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js index 6c94a71a98a73b..15fbf5ca6af957 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelect.js +++ b/packages/material-ui/src/NativeSelect/NativeSelect.js @@ -52,13 +52,19 @@ 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 @@ -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, diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.d.ts b/packages/material-ui/src/OutlinedInput/OutlinedInput.d.ts index eb2da9c7ae7913..a05549f52484ea 100644 --- a/packages/material-ui/src/OutlinedInput/OutlinedInput.d.ts +++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.d.ts @@ -20,7 +20,6 @@ export type OutlinedInputClassKey = | 'notchedOutline' | 'input' | 'inputMarginDense' - | 'inputSelect' | 'inputMultiline' | 'inputAdornedStart' | 'inputAdornedEnd'; diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js index 669786587bf5af..9855e4fef540e8 100644 --- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js +++ b/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, diff --git a/packages/material-ui/src/Select/Select.js b/packages/material-ui/src/Select/Select.js index df92490cff0efc..ccb1a733f6d49b 100644 --- a/packages/material-ui/src/Select/Select.js +++ b/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, diff --git a/packages/material-ui/src/Select/SelectInput.js b/packages/material-ui/src/Select/SelectInput.js index dacf3cf85d82ac..8afedfc125a1df 100644 --- a/packages/material-ui/src/Select/SelectInput.js +++ b/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,