[FilledInput] Fix disableUnderline property (#13719)

* [InputBase] Remove props capturing of disableUnderline * [FilledInput] Add conditional logic to remove underline in filled input * Update FilledInput.js * Update FilledInput.js * let's merge
mui · Nov 28, 2018 · 53e44d5 · 53e44d5
1 parent 2ce70f0
commit 53e44d5
Show file tree

Hide file tree

Showing 8 changed files with 31 additions and 16 deletions.
diff --git a/packages/material-ui/src/FilledInput/FilledInput.d.ts b/packages/material-ui/src/FilledInput/FilledInput.d.ts
@@ -2,7 +2,9 @@ import * as React from 'react';
 import { StandardProps, PropTypes } from '..';
 import { InputBaseProps } from '../InputBase';
 
-export interface FilledInputProps extends StandardProps<InputBaseProps, FilledInputClassKey> {}
+export interface FilledInputProps extends StandardProps<InputBaseProps, FilledInputClassKey> {
+  disableUnderline?: boolean;
+}
 
 export type FilledInputClassKey =
   | 'root'

diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js
@@ -124,13 +124,15 @@ export const styles = theme => {
 };
 
 function FilledInput(props) {
-  const { classes, ...other } = props;
+  const { disableUnderline, classes, ...other } = props;
 
   return (
     <InputBase
       classes={{
         ...classes,
-        root: classNames(classes.root, classes.underline, {}),
+        root: classNames(classes.root, {
+          [classes.underline]: !disableUnderline,
+        }),
         underline: null,
       }}
       {...other}
@@ -167,6 +169,10 @@ FilledInput.propTypes = {
    * If `true`, the input will be disabled.
    */
   disabled: PropTypes.bool,
+  /**
+   * If `true`, the input will not have an underline.
+   */
+  disableUnderline: PropTypes.bool,
   /**
    * End `InputAdornment` for this component.
    */

diff --git a/packages/material-ui/src/FilledInput/FilledInput.test.js b/packages/material-ui/src/FilledInput/FilledInput.test.js
@@ -1,18 +1,32 @@
 import React from 'react';
 import { assert } from 'chai';
-import { createShallow } from '@material-ui/core/test-utils';
+import { createMount, createShallow, getClasses } from '@material-ui/core/test-utils';
 import InputBase from '../InputBase';
 import FilledInput from './FilledInput';
 
 describe('<FilledInput />', () => {
+  let classes;
   let shallow;
+  let mount;
 
   before(() => {
     shallow = createShallow({ untilSelector: 'FilledInput' });
+    mount = createMount();
+    classes = getClasses(<FilledInput />);
+  });
+
+  after(() => {
+    mount.cleanUp();
   });
 
   it('should render a <div />', () => {
     const wrapper = shallow(<FilledInput />);
     assert.strictEqual(wrapper.type(), InputBase);
+    assert.include(wrapper.props().classes.root, classes.underline);
+  });
+
+  it('should disable the underline', () => {
+    const wrapper = shallow(<FilledInput disableUnderline />);
+    assert.notInclude(wrapper.props().classes.root, classes.underline);
   });
 });
diff --git a/packages/material-ui/src/Input/Input.d.ts b/packages/material-ui/src/Input/Input.d.ts
@@ -2,7 +2,9 @@ import * as React from 'react';
 import { StandardProps, PropTypes } from '..';
 import { InputBaseProps } from '../InputBase';
 
-export interface InputProps extends StandardProps<InputBaseProps, InputClassKey> {}
+export interface InputProps extends StandardProps<InputBaseProps, InputClassKey> {
+  disableUnderline?: boolean;
+}
 
 export type InputClassKey =
   | 'root'

diff --git a/packages/material-ui/src/InputBase/InputBase.js b/packages/material-ui/src/InputBase/InputBase.js
@@ -278,7 +278,6 @@ class InputBase extends React.Component {
       className: classNameProp,
       defaultValue,
       disabled,
-      disableUnderline,
       endAdornment,
       error,
       fullWidth,

diff --git a/packages/material-ui/src/InputBase/InputBase.test.js b/packages/material-ui/src/InputBase/InputBase.test.js
@@ -97,15 +97,6 @@ describe('<InputBase />', () => {
     });
   });
 
-  it('should disable the underline', () => {
-    const wrapper = mount(<InputBase disableUnderline />);
-    const input = wrapper.find('input');
-    assert.strictEqual(findOutermostIntrinsic(wrapper).hasClass(classes.inkbar), false);
-    assert.strictEqual(input.name(), 'input');
-    assert.strictEqual(input.hasClass(classes.input), true);
-    assert.strictEqual(input.hasClass(classes.underline), false);
-  });
-
   it('should fire event callbacks', () => {
     const events = ['onChange', 'onFocus', 'onBlur', 'onKeyUp', 'onKeyDown'];
     const handlers = events.reduce((result, n) => {

diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js
@@ -99,7 +99,7 @@ function OutlinedInput(props) {
       )}
       classes={{
         ...classes,
-        root: classNames(classes.root, classes.underline, {}),
+        root: classNames(classes.root, classes.underline),
         notchedOutline: null,
       }}
       {...other}

diff --git a/pages/api/filled-input.md b/pages/api/filled-input.md
@@ -24,6 +24,7 @@ import FilledInput from '@material-ui/core/FilledInput';
 | <span class="prop-name">className</span> | <span class="prop-type">string</span> |   | The CSS class name of the wrapper element. |
 | <span class="prop-name">defaultValue</span> | <span class="prop-type">union:&nbsp;string&nbsp;&#124;<br>&nbsp;number<br></span> |   | The default input value, useful when not controlling the component. |
 | <span class="prop-name">disabled</span> | <span class="prop-type">bool</span> |   | If `true`, the input will be disabled. |
+| <span class="prop-name">disableUnderline</span> | <span class="prop-type">bool</span> |   | If `true`, the input will not have an underline. |
 | <span class="prop-name">endAdornment</span> | <span class="prop-type">node</span> |   | End `InputAdornment` for this component. |
 | <span class="prop-name">error</span> | <span class="prop-type">bool</span> |   | If `true`, the input will indicate an error. This is normally obtained via context from FormControl. |
 | <span class="prop-name">fullWidth</span> | <span class="prop-type">bool</span> |   | If `true`, the input will take up the full width of its container. |