From 0a12adfd09421eea6d2e6ad78655bee836fc3321 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 15 Dec 2015 22:56:20 +0100 Subject: [PATCH 1/2] [TextField] Fix wrong errorText position --- src/TextField/TextField.jsx | 60 ++++++++++++++++++++++++++----------- 1 file changed, 42 insertions(+), 18 deletions(-) diff --git a/src/TextField/TextField.jsx b/src/TextField/TextField.jsx index fc61a19457a347..b3fd7b16d8ae8a 100644 --- 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 ? ( + textareaStyle={styles.textarea} /> ) : ( : null} + {this.props.underlineShow ? + : + null + } {errorTextElement} ); @@ -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.'); } From f3ab5816326e986d4a4b0531b3e71179c411b6f7 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 15 Dec 2015 23:06:15 +0100 Subject: [PATCH 2/2] [SelectField] Fix wrong errorText position --- .../pages/components/select-fields.jsx | 18 ++++- src/drop-down-icon.jsx | 23 +++--- src/select-field.jsx | 74 +++++++------------ 3 files changed, 56 insertions(+), 59 deletions(-) diff --git a/docs/src/app/components/pages/components/select-fields.jsx b/docs/src/app/components/pages/components/select-fields.jsx index 42b87114eebc95..f223fe6e4f8fc8 100644 --- 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} />

+ menuItems={menuItems} />
+
+
diff --git a/src/drop-down-icon.jsx b/src/drop-down-icon.jsx index 06320c9e3aa0f2..60467eefc05124 100644 --- 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 ( -
+
- {this.props.iconLigature} - {this.props.children} + + {iconLigature} + + {children}
-
+ onItemTap={this._onMenuItemClick} + /> +
); }, diff --git a/src/select-field.jsx b/src/select-field.jsx index 3cf1e30c37d74d..af53e228b0eaad 100644 --- 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 ( - - + + ); },