[TextField] Support adornment full width

docs/src/pages/demos/text-fields/InputAdornments.js

@@ -1,6 +1,7 @@
 /* eslint-disable flowtype/require-valid-file-annotation */
 
 import React from 'react';
+import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import { withStyles } from 'material-ui/styles';
 import IconButton from 'material-ui/IconButton';
@@ -17,6 +18,9 @@ const styles = theme => ({
   formControl: {
     margin: theme.spacing.unit,
   },
+  withoutLabel: {
+    marginTop: theme.spacing.unit * 3,
+  },
 });
 
 class InputAdornments extends React.Component {
@@ -44,7 +48,7 @@ class InputAdornments extends React.Component {
 
     return (
       <div className={classes.root}>
-        <FormControl className={classes.formControl}>
+        <FormControl fullWidth className={classes.formControl}>
           <InputLabel htmlFor="amount">Amount</InputLabel>
           <Input
             id="amount"
@@ -53,15 +57,14 @@ class InputAdornments extends React.Component {
             startAdornment={<InputAdornment position="start">$</InputAdornment>}
           />
         </FormControl>
-        <FormControl className={classes.formControl}>
-          <InputLabel htmlFor="weight">Weight</InputLabel>
+        <FormControl className={classNames(classes.formControl, classes.withoutLabel)}>
           <Input
             id="weight"
             value={this.state.weight}
             onChange={this.handleChange('weight')}
             endAdornment={<InputAdornment position="end">Kg</InputAdornment>}
           />
-          <FormHelperText>Some important helper text</FormHelperText>
+          <FormHelperText>Weight</FormHelperText>
         </FormControl>
         <FormControl className={classes.formControl}>
           <InputLabel htmlFor="password">Password</InputLabel>

src/Input/Input.js

@@ -64,7 +64,8 @@ export const styles = (theme: Object) => {
   return {
     root: {
       // Mimics the default input display property used by browsers for an input.
-      display: 'inline-block',
+      display: 'inline-flex',
+      alignItems: 'baseline',
       position: 'relative',
       fontFamily: theme.typography.fontFamily,
       color: theme.palette.input.inputText,
@@ -140,10 +141,6 @@ export const styles = (theme: Object) => {
         '&:focus::-ms-input-placeholder': placeholderVisible, // Edge
       },
     },
-    inputAdorned: {
-      display: 'inline-block',
-      width: 'auto',
-    },
     inputDense: {
       paddingTop: theme.spacing.unit / 2,
     },
@@ -526,7 +523,6 @@ class Input extends React.Component<ProvidedProps & Props, State> {
         [classes.inputSearch]: type === 'search',
         [classes.inputMultiline]: multiline,
         [classes.inputDense]: margin === 'dense',
-        [classes.inputAdorned]: startAdornment || endAdornment,
       },
       inputPropsClassName,
     );

src/Input/Input.spec.js

@@ -381,6 +381,7 @@ describe('<Input />', () => {
       it(`is false for value ${value}`, () => {
         assert.strictEqual(isDirty({ value }), false);
       });
+
       it(`is false for SSR defaultValue ${value}`, () => {
         assert.strictEqual(isDirty({ defaultValue: value }, true), false);
       });
@@ -403,24 +404,13 @@ describe('<Input />', () => {
 
       assert.strictEqual(wrapper.childAt(0).type(), InputAdornment);
     });
+
     it('should render adornment after input', () => {
       const wrapper = shallow(
         <Input endAdornment={<InputAdornment position="end">$</InputAdornment>} />,
       );
 
       assert.strictEqual(wrapper.childAt(1).type(), InputAdornment);
     });
-    it('child input should have adorned classes', () => {
-      const wrapper = shallow(
-        <Input endAdornment={<InputAdornment position="end">$</InputAdornment>} />,
-      );
-
-      assert.strictEqual(wrapper.childAt(0).hasClass(classes.inputAdorned), true);
-    });
-    it('child input should have unadorned classes', () => {
-      const wrapper = shallow(<Input />);
-
-      assert.strictEqual(wrapper.childAt(0).hasClass(classes.inputAdorned), false);
-    });
   });
 });

src/Input/InputAdornment.js

@@ -8,7 +8,6 @@ import withStyles from '../styles/withStyles';
 
 export const styles = (theme: Object) => ({
   root: {
-    display: 'inline-block',
     'label + div > &': {
       marginTop: -theme.spacing.unit * 2,
     },

src/Select/Select.js

@@ -12,6 +12,7 @@ import { isMuiElement } from '../utils/reactHelpers';
 export const styles = (theme: Object) => ({
   root: {
     position: 'relative',
+    width: '100%',
   },
   select: {
     '-moz-appearance': 'none', // Remove Firefox custom style