Merge pull request #3646 from Dashlane/feature/text-field-floating-la…

…bel-shrink [TextField] Add floatingLabelFixed property
mui · Mar 10, 2016 · 04e81b1 · 04e81b1
2 parents f586c23 + edb8ad9
commit 04e81b1
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/docs/src/app/components/pages/components/TextField/ExampleSimple.jsx b/docs/src/app/components/pages/components/TextField/ExampleSimple.jsx
@@ -18,6 +18,11 @@ const TextFieldExampleSimple = () => (
       hintText="Hint Text"
       floatingLabelText="Floating Label Text"
     /><br />
+    <TextField
+      hintText="Hint Text"
+      floatingLabelText="Fixed Floating Label Text"
+      floatingLabelFixed={true}
+    /><br />
     <TextField
       hintText="Password Field"
       floatingLabelText="Password"

diff --git a/src/TextField/TextField.jsx b/src/TextField/TextField.jsx
@@ -142,6 +142,11 @@ const TextField = React.createClass({
      */
     errorText: React.PropTypes.node,
 
+    /**
+     * If true, the floating label will float even when there is no value.
+     */
+    floatingLabelFixed: React.PropTypes.bool,
+
     /**
      * The style object to use to override floating label styles.
      */
@@ -404,6 +409,7 @@ const TextField = React.createClass({
       disabled,
       errorStyle,
       errorText,
+      floatingLabelFixed,
       floatingLabelText,
       fullWidth,
       hintText,
@@ -443,7 +449,7 @@ const TextField = React.createClass({
         muiTheme={this.state.muiTheme}
         style={Object.assign(styles.floatingLabel, this.props.floatingLabelStyle)}
         htmlFor={inputId}
-        shrink={this.state.hasValue || this.state.isFocused}
+        shrink={this.state.hasValue || this.state.isFocused || floatingLabelFixed}
         disabled={disabled}
       >
         {floatingLabelText}
@@ -501,7 +507,8 @@ const TextField = React.createClass({
         {hintText ?
           <TextFieldHint
             muiTheme={this.state.muiTheme}
-            show={!(this.state.hasValue || (floatingLabelText && !this.state.isFocused))}
+            show={!(this.state.hasValue || (floatingLabelText && !this.state.isFocused)) ||
+                  (!this.state.hasValue && floatingLabelText && floatingLabelFixed && !this.state.isFocused)}
             style={hintStyle}
             text={hintText}
           /> :