[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
mui · Apr 7, 2019 · 37bb12b · 37bb12b
1 parent 9c12eeb
commit 37bb12b
Show file tree

Hide file tree

Showing 9 changed files with 9 additions and 18 deletions.
diff --git 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() {
         <Select
           classes={classes}
           styles={selectStyles}
-          textFieldProps={{
+          TextFieldProps={{
             label: 'Label',
             InputLabelProps: {
               shrink: true,

diff --git a/docs/src/pages/demos/autocomplete/IntegrationReactSelect.tsx b/docs/src/pages/demos/autocomplete/IntegrationReactSelect.tsx
@@ -75,6 +75,7 @@ const useStyles = makeStyles((theme: Theme) =>
     input: {
       display: 'flex',
       padding: 0,
+      height: 'auto',
     },
     valueContainer: {
       display: 'flex',
@@ -147,7 +148,7 @@ function Control(props: ControlProps<OptionType>) {
           ...props.innerProps,
         },
       }}
-      {...props.selectProps.textFieldProps}
+      {...props.selectProps.TextFieldProps}
     />
   );
 }
@@ -265,7 +266,7 @@ function IntegrationReactSelect() {
         <Select
           classes={classes}
           styles={selectStyles}
-          textFieldProps={{
+          TextFieldProps={{
             label: 'Label',
             InputLabelProps: {
               shrink: true,

diff --git a/packages/material-ui/src/Input/Input.d.ts b/packages/material-ui/src/Input/Input.d.ts
@@ -18,7 +18,6 @@ export type InputClassKey =
   | 'input'
   | 'inputMarginDense'
   | 'inputMultiline'
-  | 'inputType'
   | 'inputTypeSearch';
 
 declare const Input: React.ComponentType<InputProps>;

diff --git 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
@@ -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
@@ -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
@@ -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
@@ -71,7 +71,6 @@ This property accepts the following keys:
 | <span class="prop-name">input</span> | Styles applied to the `input` element.
 | <span class="prop-name">inputMarginDense</span> | Styles applied to the `input` element if `margin="dense"`.
 | <span class="prop-name">inputMultiline</span> | Styles applied to the `input` element if `multiline={true}`.
-| <span class="prop-name">inputType</span> | Styles applied to the `input` element if `type` is not "text"`.
 | <span class="prop-name">inputTypeSearch</span> | Styles applied to the `input` element if `type="search"`.
 | <span class="prop-name">inputAdornedStart</span> | Styles applied to the `input` element if `startAdornment` is provided.
 | <span class="prop-name">inputAdornedEnd</span> | Styles applied to the `input` element if `endAdornment` is provided.

diff --git a/pages/api/input.md b/pages/api/input.md
@@ -68,7 +68,6 @@ This property accepts the following keys:
 | <span class="prop-name">input</span> | Styles applied to the `input` element.
 | <span class="prop-name">inputMarginDense</span> | Styles applied to the `input` element if `margin="dense"`.
 | <span class="prop-name">inputMultiline</span> | Styles applied to the `input` element if `multiline={true}`.
-| <span class="prop-name">inputType</span> | Styles applied to the `input` element if `type` is not "text"`.
 | <span class="prop-name">inputTypeSearch</span> | Styles applied to the `input` element if `type="search"`.
 
 Have a look at [overriding with classes](/customization/overrides/#overriding-with-classes) section