Merge pull request #2539 from oliviertassinari/field-fix-error

[SelectField][TextField] Fix error styling issue
mui · Dec 16, 2015 · e8b29ea · e8b29ea
2 parents 58a9ec4 + f3ab581
commit e8b29ea
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 77 deletions.
diff --git a/docs/src/app/components/pages/components/select-fields.jsx b/docs/src/app/components/pages/components/select-fields.jsx
@@ -15,6 +15,7 @@ const SelectFieldsPage = React.createClass({
     return {
       selectValue: undefined,
       selectValue2: 1,
+      selectValue3: '1',
       selectValueLinkValue: 4,
       selectValueLinkValue2: 3,
     };
@@ -23,7 +24,7 @@ const SelectFieldsPage = React.createClass({
   getStyles() {
     let styles = {
       textfield: {
-        marginTop: 24,
+        marginBottom: 24,
       },
     };
 
@@ -252,7 +253,6 @@ const SelectFieldsPage = React.createClass({
               menuItems={arbitraryArrayMenuItems} /><br/>
             <SelectField
               floatingLabelText="With default value"
-              style={styles.textfield}
               value={this.state.selectValue2}
               valueMember="id"
               displayMember="name"
@@ -262,12 +262,22 @@ const SelectFieldsPage = React.createClass({
               floatingLabelText="Disabled"
               disabled={true}
               value={'4'}
-              style={styles.textfield}
               menuItems={menuItems} /><br/>
             <SelectField
               value={this.state.selectValue}
               onChange={this._handleSelectValueChange.bind(null, 'selectValue')}
-              menuItems={menuItems} />
+              menuItems={menuItems} /><br/>
+            <SelectField
+              floatingLabelText="With default value"
+              value={this.state.selectValue3}
+              onChange={this._handleSelectValueChange.bind(null, 'selectValue3')}
+              menuItems={menuItems}
+              errorText="This is always wrong" /><br/>
+            <SelectField
+              value={this.state.selectValue3}
+              onChange={this._handleSelectValueChange.bind(null, 'selectValue3')}
+              menuItems={menuItems}
+              errorText="This is always wrong" /><br/>
           </ClearFix>
         </CodeExample>
       </ComponentDoc>

diff --git a/src/TextField/TextField.jsx b/src/TextField/TextField.jsx
@@ -9,6 +9,8 @@ import DefaultRawTheme from '../styles/raw-themes/light-raw-theme';
 import ThemeManager from '../styles/theme-manager';
 import ContextPure from '../mixins/context-pure';
 import TextFieldUnderline from './TextFieldUnderline';
+import warning from 'warning';
+
 /**
  * Check if a value is valid to be displayed inside an input.
  *
@@ -170,7 +172,7 @@ const TextField = React.createClass({
       },
       error: {
         position: 'relative',
-        bottom: 5,
+        bottom: 2,
         fontSize: 12,
         lineHeight: '12px',
         color: errorColor,
@@ -198,7 +200,7 @@ const TextField = React.createClass({
       },
     };
 
-    styles.error = this.mergeAndPrefix(styles.error, props.errorStyle);
+    styles.error = this.mergeStyles(styles.error, props.errorStyle);
 
     styles.floatingLabel = this.mergeStyles(styles.hint, {
       lineHeight: '22px',
@@ -233,15 +235,29 @@ const TextField = React.createClass({
     if (props.floatingLabelText) {
       styles.hint.opacity = 0;
       styles.input.boxSizing = 'border-box';
-      if (this.state.isFocused && !this.state.hasValue) styles.hint.opacity = 1;
+
+      if (this.state.isFocused && !this.state.hasValue) {
+        styles.hint.opacity = 1;
+      }
+
+      if (!props.multiLine) {
+        styles.input.marginTop = 14;
+      }
+
+      if (this.state.errorText) {
+        styles.error.bottom = styles.error.fontSize + 3;
+      }
     }
 
     if (props.style && props.style.height) {
       styles.hint.lineHeight = props.style.height;
     }
 
-    if (this.state.errorText && this.state.isFocused) styles.floatingLabel.color = styles.error.color;
-    if (props.floatingLabelText && !props.multiLine) styles.input.marginTop = 14;
+    if (this.state.errorText) {
+      if (this.state.isFocused) {
+        styles.floatingLabel.color = styles.error.color;
+      }
+    }
 
     return styles;
   },
@@ -316,8 +332,7 @@ const TextField = React.createClass({
           ...this.props.children.props,
           style: this.mergeStyles(inputStyle, this.props.children.props.style),
         });
-    }
-    else {
+    } else {
       inputElement = multiLine ? (
         <EnhancedTextarea
           {...other}
@@ -326,7 +341,7 @@ const TextField = React.createClass({
           rows={rows}
           rowsMax={rowsMax}
           onHeightChange={this._handleTextAreaHeightChange}
-          textareaStyle={this.mergeAndPrefix(styles.textarea)} />
+          textareaStyle={styles.textarea} />
       ) : (
         <input
           {...other}
@@ -341,16 +356,19 @@ const TextField = React.createClass({
         {floatingLabelTextElement}
         {hintTextElement}
         {inputElement}
-        {this.props.underlineShow ? <TextFieldUnderline
-          disabled={disabled}
-          disabledStyle={underlineDisabledStyle}
-          error={this.state.errorText ? true : false}
-          errorStyle={errorStyle}
-          focus={this.state.isFocused}
-          focusStyle={underlineFocusStyle}
-          muiTheme={this.state.muiTheme}
-          style={underlineStyle}
-        /> : null}
+        {this.props.underlineShow ?
+          <TextFieldUnderline
+            disabled={disabled}
+            disabledStyle={underlineDisabledStyle}
+            error={this.state.errorText ? true : false}
+            errorStyle={errorStyle}
+            focus={this.state.isFocused}
+            focusStyle={underlineFocusStyle}
+            muiTheme={this.state.muiTheme}
+            style={underlineStyle}
+          /> :
+          null
+        }
         {errorTextElement}
       </div>
     );
@@ -373,6 +391,8 @@ const TextField = React.createClass({
   },
 
   setErrorText(newErrorText) {
+    warning(false, 'setErrorText() method is deprectated. Use the errorText property instead.');
+
     if (process.env.NODE_ENV !== 'production' && this.props.hasOwnProperty('errorText')) {
       console.error('Cannot call TextField.setErrorText when errorText is defined as a property.');
     }
@@ -382,6 +402,10 @@ const TextField = React.createClass({
   },
 
   setValue(newValue) {
+    warning(false,
+      `setValue() method is deprectated. Use the defaultValue property instead.
+      Or use this the TextField as a controlled component with the value property.`);
+
     if (process.env.NODE_ENV !== 'production' && this._isControlled()) {
       console.error('Cannot call TextField.setValue when value or valueLink is defined as a property.');
     }

diff --git a/src/drop-down-icon.jsx b/src/drop-down-icon.jsx
@@ -97,25 +97,29 @@ const DropDownIcon = React.createClass({
   },
 
   render() {
-    let {
+    const {
       style,
       children,
       menuItems,
       closeOnMenuItemTouchTap,
       iconStyle,
+      iconLigature,
       iconClassName,
       ...other,
     } = this.props;
 
-    let styles = this.getStyles();
+    const styles = this.getStyles();
 
     return (
-      <div {...other} style={this.prepareStyles(styles.root, this.props.style)}>
+      <div {...other} style={this.prepareStyles(styles.root, style)}>
           <div onTouchTap={this._onControlClick}>
-              <FontIcon
-                className={iconClassName}
-                style={iconStyle}>{this.props.iconLigature}</FontIcon>
-              {this.props.children}
+            <FontIcon
+              className={iconClassName}
+              style={iconStyle}
+            >
+              {iconLigature}
+            </FontIcon>
+            {children}
           </div>
           <Menu
             ref="menuItems"
@@ -124,8 +128,9 @@ const DropDownIcon = React.createClass({
             menuItemStyle={styles.menuItem}
             hideable={true}
             visible={this.state.open}
-            onItemTap={this._onMenuItemClick} />
-        </div>
+            onItemTap={this._onMenuItemClick}
+          />
+      </div>
     );
   },
 

diff --git a/src/select-field.jsx b/src/select-field.jsx
@@ -37,7 +37,6 @@ const SelectField = React.createClass({
     hintText: React.PropTypes.node,
     iconStyle: React.PropTypes.object,
     id: React.PropTypes.string,
-    inputStyle: React.PropTypes.object,
     labelMember: React.PropTypes.string,
     labelStyle: React.PropTypes.object,
     menuItemStyle: React.PropTypes.object,
@@ -91,15 +90,7 @@ const SelectField = React.createClass({
   },
 
   getStyles() {
-    let styles = {
-      root: {
-        position: 'relative',
-        width: '100%',
-        fontSize: 16,
-        height:48,
-        overflow:'hidden',
-        display:'block',
-      },
+    const styles = {
       label: {
         paddingLeft: 0,
         top: -4,
@@ -111,20 +102,13 @@ const SelectField = React.createClass({
       hideDropDownUnderline: {
         borderTop: 'none',
       },
-      underline: {
-        bottom:8,
-      },
-      input: {
-        verticalAlign:'top',
-      },
-      error: {},
-      floatingLabel: {},
     };
 
     if (this.props.floatingLabelText) {
       styles.icon.top = 22;
-      styles.label.top = 8;
+      styles.label.top = 6;
     }
+
     return styles;
   },
 
@@ -152,34 +136,32 @@ const SelectField = React.createClass({
       ...other,
     } = this.props;
 
-    const textFieldProps = {
-      style: this.mergeAndPrefix(styles.input, style),
-      floatingLabelText: floatingLabelText,
-      floatingLabelStyle: this.mergeAndPrefix(styles.floatingLabel, floatingLabelStyle),
-      hintText: (!hintText && !floatingLabelText) ? ' ' : hintText,
-      fullWidth: fullWidth,
-      errorText: errorText,
-      underlineStyle: this.mergeAndPrefix(styles.underline, underlineStyle),
-      errorStyle: this.mergeAndPrefix(styles.error, errorStyle),
-      onFocus: onFocus,
-      onBlur: onBlur,
-      underlineDisabledStyle,
-      underlineFocusStyle,
-    };
-
-    const dropDownMenuProps = {
-      menuItems: menuItems,
-      disabled: disabled,
-      style: this.mergeAndPrefix(styles.root, selectFieldRoot),
-      labelStyle: this.mergeAndPrefix(styles.label, labelStyle),
-      iconStyle: this.mergeAndPrefix(styles.icon, iconStyle),
-      underlineStyle: this.mergeAndPrefix(styles.hideDropDownUnderline),
-      autoWidth: false,
-      labelMember: labelMember,
-    };
     return (
-      <TextField {...textFieldProps}>
-        <DropDownMenu {...dropDownMenuProps} {...other} />
+      <TextField
+        style={style}
+        floatingLabelText={floatingLabelText}
+        floatingLabelStyle={floatingLabelStyle}
+        hintText={(!hintText && !floatingLabelText) ? ' ' : hintText}
+        fullWidth={fullWidth}
+        errorText={errorText}
+        underlineStyle={underlineStyle}
+        errorStyle={errorStyle}
+        onFocus={onFocus}
+        onBlur={onBlur}
+        underlineDisabledStyle={underlineDisabledStyle}
+        underlineFocusStyle={underlineFocusStyle}
+      >
+        <DropDownMenu
+          menuItems={menuItems}
+          disabled={disabled}
+          style={selectFieldRoot}
+          labelStyle={this.mergeStyles(styles.label, labelStyle)}
+          iconStyle={this.mergeStyles(styles.icon, iconStyle)}
+          underlineStyle={styles.hideDropDownUnderline}
+          autoWidth={false}
+          labelMember={labelMember}
+          {...other}
+        />
       </TextField>
     );
   },