From c53edec77c630c29d9350ce7ecc91ae3074d4bc2 Mon Sep 17 00:00:00 2001 From: Thomas Guillory Date: Tue, 3 Nov 2015 14:04:30 +0100 Subject: [PATCH 1/2] Use 'em' to size TextField elements relatively to fontSize Currently TextField is using fixed pixel values to size the different elements composing the component. However, if one wants to change the size of the component to fit a given design, it's hard to achieve as there is many sizings to manually set. This commit is a proposal to size the inner parts of the component relatively to the fontSize property of its root element, so it's the only property the user needs to touch. --- .../pages/components/text-fields.jsx | 6 +++ .../components/raw-code/text-fields-code.txt | 6 +++ src/text-field.jsx | 46 ++++++++++--------- 3 files changed, 37 insertions(+), 21 deletions(-) diff --git a/docs/src/app/components/pages/components/text-fields.jsx b/docs/src/app/components/pages/components/text-fields.jsx index 658a3287830c4d..7e24af5813bf3e 100644 --- a/docs/src/app/components/pages/components/text-fields.jsx +++ b/docs/src/app/components/pages/components/text-fields.jsx @@ -389,6 +389,12 @@ let TextFieldsPage = React.createClass({ hintText="Password Field" floatingLabelText="Password" type="password" />
+
diff --git a/docs/src/app/components/raw-code/text-fields-code.txt b/docs/src/app/components/raw-code/text-fields-code.txt index 294f1a77e6a57f..de334cbd512287 100644 --- a/docs/src/app/components/raw-code/text-fields-code.txt +++ b/docs/src/app/components/raw-code/text-fields-code.txt @@ -114,3 +114,9 @@ hintText="Password Field" floatingLabelText="Password" type="password" /> + diff --git a/src/text-field.jsx b/src/text-field.jsx index 076bd537104ef0..6cefe0aa747f0b 100644 --- a/src/text-field.jsx +++ b/src/text-field.jsx @@ -155,10 +155,10 @@ const TextField = React.createClass({ let styles = { root: { - fontSize: 16, - lineHeight: '24px', - width: props.fullWidth ? '100%' : 256, - height: (props.rows - 1) * 24 + (props.floatingLabelText ? 72 : 48), + fontSize: this._getFontSize(), + lineHeight: '1.5em', + width: props.fullWidth ? '100%' : '16em', + height: (props.rows - 1) * 1.5 + (props.floatingLabelText ? 4.5 : 3) + 'em', display: 'inline-block', position: 'relative', backgroundColor: backgroundColor, @@ -167,19 +167,19 @@ const TextField = React.createClass({ }, error: { position: 'relative', - bottom: 5, - fontSize: 12, - lineHeight: '12px', + bottom: '0.417em', + fontSize: '0.75em', + lineHeight: '1em', color: errorColor, transition: Transitions.easeOut(), }, hint: { position: 'absolute', - lineHeight: '22px', + lineHeight: '1.375em', opacity: 1, color: hintColor, transition: Transitions.easeOut(), - bottom: 12, + bottom: '0.545em', }, input: { tapHighlightColor: 'rgba(0,0,0,0)', @@ -198,7 +198,7 @@ const TextField = React.createClass({ borderBottom: 'solid 1px ' + borderColor, position: 'absolute', width: '100%', - bottom: 8, + bottom: '0.5em', margin: 0, MozBoxSizing: 'content-box', boxSizing: 'content-box', @@ -210,7 +210,7 @@ const TextField = React.createClass({ overflow: 'hidden', userSelect: 'none', cursor: 'default', - bottom: 8, + bottom: '0.5em', borderBottom: 'dotted 2px ' + disabledTextColor, }, underlineFocus: { @@ -226,8 +226,8 @@ const TextField = React.createClass({ styles.underlineAfter = this.mergeAndPrefix(styles.underlineAfter, props.underlineDisabledStyle); styles.floatingLabel = this.mergeStyles(styles.hint, { - lineHeight: '22px', - top: 38, + lineHeight: '1.375em', + top: '2.375em', bottom: 'none', opacity: 1, zIndex: 1, // Needed to display label above Chrome's autocomplete field background @@ -236,8 +236,8 @@ const TextField = React.createClass({ }); styles.textarea = this.mergeStyles(styles.input, { - marginTop: props.floatingLabelText ? 36 : 12, - marginBottom: props.floatingLabelText ? -36 : -12, + marginTop: props.floatingLabelText ? '2.25em' : '0.75em', + marginBottom: props.floatingLabelText ? '-2.25em' : '-0.75em', boxSizing: 'border-box', font: 'inherit', }); @@ -246,13 +246,13 @@ const TextField = React.createClass({ if (this.state.isFocused) { styles.floatingLabel.color = focusColor; - styles.floatingLabel.transform = 'perspective(1px) scale(0.75) translate3d(2px, -28px, 0)'; + styles.floatingLabel.transform = 'perspective(1px) scale(0.75) translate3d(0.125em, -1.75em, 0)'; styles.focusUnderline.transform = 'scaleX(1)'; } if (this.state.hasValue) { styles.floatingLabel.color = ColorManipulator.fade(props.disabled ? disabledTextColor : floatingLabelColor, 0.5); - styles.floatingLabel.transform = 'perspective(1px) scale(0.75) translate3d(2px, -28px, 0)'; + styles.floatingLabel.transform = 'perspective(1px) scale(0.75) translate3d(0.125em, -1.75em, 0)'; styles.hint.opacity = 0; } @@ -267,7 +267,7 @@ const TextField = React.createClass({ } if (this.state.errorText && this.state.isFocused) styles.floatingLabel.color = styles.error.color; - if (props.floatingLabelText && !props.multiLine) styles.input.marginTop = 14; + if (props.floatingLabelText && !props.multiLine) styles.input.marginTop = '0.875em'; if (this.state.errorText) { styles.focusUnderline.borderColor = styles.error.color; @@ -416,6 +416,10 @@ const TextField = React.createClass({ } }, + _getFontSize() { + return this.props.style && this.props.style.fontSize ? this.props.style.fontSize : 16; + }, + _getRef() { return this.props.ref ? this.props.ref : 'input'; }, @@ -448,9 +452,9 @@ const TextField = React.createClass({ }, _handleTextAreaHeightChange(e, height) { - let newHeight = height + 24; - if (this.props.floatingLabelText) newHeight += 24; - ReactDOM.findDOMNode(this).style.height = newHeight + 'px'; + let newHeight = (height / this._getFontSize()) + 1.5; + if (this.props.floatingLabelText) newHeight += 1.5; + ReactDOM.findDOMNode(this).style.height = newHeight + 'em'; }, _isControlled() { From 580feaa5d945e53cbec6572efc45d173be0e3eeb Mon Sep 17 00:00:00 2001 From: Thomas Guillory Date: Mon, 9 Nov 2015 21:52:47 +0100 Subject: [PATCH 2/2] Add a warning message if user uses a non-integer fontSize --- src/text-field.jsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/src/text-field.jsx b/src/text-field.jsx index 6cefe0aa747f0b..647f6415047fd7 100644 --- a/src/text-field.jsx +++ b/src/text-field.jsx @@ -8,6 +8,7 @@ const EnhancedTextarea = require('./enhanced-textarea'); const DefaultRawTheme = require('./styles/raw-themes/light-raw-theme'); const ThemeManager = require('./styles/theme-manager'); const ContextPure = require('./mixins/context-pure'); +const warning = require('warning'); /** * Check if a value is valid to be displayed inside an input. @@ -417,7 +418,14 @@ const TextField = React.createClass({ }, _getFontSize() { - return this.props.style && this.props.style.fontSize ? this.props.style.fontSize : 16; + if (this.props.style && this.props.style.fontSize) { + if (process.env.NODE_ENV !== 'production') { + warning(typeof this.props.style.fontSize === 'number', + 'style.fontSize property does not support non-integer values'); + } + return this.props.style.fontSize; + } + return 16; }, _getRef() {