From 37bb12bd7f45d588e9b51fc99c3678e1b8d607ae Mon Sep 17 00:00:00 2001 From: Gautam Pahuja <32642691+gautam-relayr@users.noreply.github.com> Date: Sun, 7 Apr 2019 10:24:37 +0200 Subject: [PATCH] [TextField] Fix height inconsistency (#15217) * Fix TextField height inconsistency * Update docs * update TS spec and docs * Ran prettier * Ran docs:typescript:formatted * fix the CI * different strategy * different strategy --- .../pages/demos/autocomplete/IntegrationReactSelect.js | 5 +++-- .../pages/demos/autocomplete/IntegrationReactSelect.tsx | 5 +++-- packages/material-ui/src/Input/Input.d.ts | 1 - packages/material-ui/src/Input/Input.js | 2 -- packages/material-ui/src/InputBase/InputBase.d.ts | 1 - packages/material-ui/src/InputBase/InputBase.js | 9 +++------ packages/material-ui/src/NativeSelect/NativeSelect.js | 2 -- pages/api/input-base.md | 1 - pages/api/input.md | 1 - 9 files changed, 9 insertions(+), 18 deletions(-) diff --git a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js index d2c680a71f32eb..df0b8f18b9596f 100644 --- a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js +++ b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.js @@ -61,6 +61,7 @@ const useStyles = makeStyles(theme => ({ input: { display: 'flex', padding: 0, + height: 'auto', }, valueContainer: { display: 'flex', @@ -130,7 +131,7 @@ function Control(props) { ...props.innerProps, }, }} - {...props.selectProps.textFieldProps} + {...props.selectProps.TextFieldProps} /> ); } @@ -248,7 +249,7 @@ function IntegrationReactSelect() { ; diff --git a/packages/material-ui/src/Input/Input.js b/packages/material-ui/src/Input/Input.js index c2505709bb825f..4a85d2e31472bb 100644 --- a/packages/material-ui/src/Input/Input.js +++ b/packages/material-ui/src/Input/Input.js @@ -85,8 +85,6 @@ export const styles = theme => { inputMarginDense: {}, /* Styles applied to the `input` element if `multiline={true}`. */ inputMultiline: {}, - /* Styles applied to the `input` element if `type` is not "text"`. */ - inputType: {}, /* Styles applied to the `input` element if `type="search"`. */ inputTypeSearch: {}, }; diff --git a/packages/material-ui/src/InputBase/InputBase.d.ts b/packages/material-ui/src/InputBase/InputBase.d.ts index 3db2798fbe0a8e..b51283bd63dfaf 100644 --- a/packages/material-ui/src/InputBase/InputBase.d.ts +++ b/packages/material-ui/src/InputBase/InputBase.d.ts @@ -72,7 +72,6 @@ export type InputBaseClassKey = | 'input' | 'inputMarginDense' | 'inputMultiline' - | 'inputType' | 'inputTypeSearch' | 'inputAdornedStart' | 'inputAdornedEnd'; diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js index abfb3b82975cb9..4c8ad6f4b62f86 100644 --- a/packages/material-ui/src/InputBase/InputBase.js +++ b/packages/material-ui/src/InputBase/InputBase.js @@ -76,6 +76,7 @@ export const styles = theme => { border: 0, boxSizing: 'content-box', background: 'none', + height: '1.1875em', // Reset (19px), match the native input line-height margin: 0, // Reset for Safari // Remove grey highlight WebkitTapHighlightColor: 'transparent', @@ -119,14 +120,11 @@ export const styles = theme => { }, /* Styles applied to the `input` element if `multiline={true}`. */ inputMultiline: { + height: 'auto', + minHeight: '1.1875em', // Reset (19px), match the native input line-height resize: 'none', padding: 0, }, - /* Styles applied to the `input` element if `type` is not "text"`. */ - inputType: { - // type="date" or type="time", etc. have specific styles we need to reset. - height: '1.1875em', // Reset (19px), match the native input line-height - }, /* Styles applied to the `input` element if `type="search"`. */ inputTypeSearch: { // Improve type search style. @@ -352,7 +350,6 @@ class InputBase extends React.Component { classes.input, { [classes.disabled]: fcs.disabled, - [classes.inputType]: type !== 'text', [classes.inputTypeSearch]: type === 'search', [classes.inputMultiline]: multiline, [classes.inputMarginDense]: fcs.margin === 'dense', diff --git a/packages/material-ui/src/NativeSelect/NativeSelect.js b/packages/material-ui/src/NativeSelect/NativeSelect.js index bce1fc020142f5..b8988a9ff36e9b 100644 --- a/packages/material-ui/src/NativeSelect/NativeSelect.js +++ b/packages/material-ui/src/NativeSelect/NativeSelect.js @@ -24,7 +24,6 @@ export const styles = theme => ({ userSelect: 'none', paddingRight: 32, borderRadius: 0, // Reset - height: '1.1875em', // Reset (19px), match the native input line-height width: 'calc(100% - 32px)', minWidth: 16, // So it doesn't collapse. cursor: 'pointer', @@ -64,7 +63,6 @@ export const styles = theme => ({ textOverflow: 'ellipsis', whiteSpace: 'nowrap', overflow: 'hidden', - minHeight: '1.1875em', // Reset (19px), match the native input line-height }, /* Styles applied to the `Input` component `disabled` class. */ disabled: {}, diff --git a/pages/api/input-base.md b/pages/api/input-base.md index 22fff9f30222da..f624e5a200c649 100644 --- a/pages/api/input-base.md +++ b/pages/api/input-base.md @@ -71,7 +71,6 @@ This property accepts the following keys: | input | Styles applied to the `input` element. | inputMarginDense | Styles applied to the `input` element if `margin="dense"`. | inputMultiline | Styles applied to the `input` element if `multiline={true}`. -| inputType | Styles applied to the `input` element if `type` is not "text"`. | inputTypeSearch | Styles applied to the `input` element if `type="search"`. | inputAdornedStart | Styles applied to the `input` element if `startAdornment` is provided. | inputAdornedEnd | Styles applied to the `input` element if `endAdornment` is provided. diff --git a/pages/api/input.md b/pages/api/input.md index 92bbb519f68be5..257dcdd406d593 100644 --- a/pages/api/input.md +++ b/pages/api/input.md @@ -68,7 +68,6 @@ This property accepts the following keys: | input | Styles applied to the `input` element. | inputMarginDense | Styles applied to the `input` element if `margin="dense"`. | inputMultiline | Styles applied to the `input` element if `multiline={true}`. -| inputType | Styles applied to the `input` element if `type` is not "text"`. | inputTypeSearch | Styles applied to the `input` element if `type="search"`. Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section