From 1fa9a0a58d77bfce097cca17f9bfb2fc1f9b9e5f Mon Sep 17 00:00:00 2001
From: Roman Rott <roman.rott@gmail.com>
Date: Sun, 9 Oct 2016 14:37:43 +0300
Subject: [PATCH] Updated to show hint on input if lable is empty

---
 components/input/Input.js                                   | 2 +-
 components/input/theme.scss                                 | 6 +++++-
 .../layout/main/modules/examples/input_example_1.txt        | 3 ++-
 3 files changed, 8 insertions(+), 3 deletions(-)

diff --git a/components/input/Input.js b/components/input/Input.js
index 4038bef5..9b8dd929 100644
--- a/components/input/Input.js
+++ b/components/input/Input.js
@@ -184,7 +184,7 @@ const factory = (FontIcon) => {
                 {required ? <span className={theme.required}> * </span> : null}
               </label>
             : null}
-          {hint ? <span className={theme.hint}>{hint}</span> : null}
+          {hint ? <span hidden={labelText} className={theme.hint}>{hint}</span> : null}
           {error ? <span className={theme.error}>{error}</span> : null}
           {maxLength ? <span className={theme.counter}>{length}/{maxLength}</span> : null}
           {children}
diff --git a/components/input/theme.scss b/components/input/theme.scss
index b6b6c813..9e29b9b4 100644
--- a/components/input/theme.scss
+++ b/components/input/theme.scss
@@ -46,6 +46,7 @@
       color: $input-text-required-color;
     }
     ~ .hint {
+      display: block;
       opacity: $input-hint-opacity;
     }
     ~ .icon {
@@ -57,6 +58,9 @@
       top: $input-focus-label-top;
       font-size: $input-label-font-size;
     }
+    &.filled ~ .hint {
+      opacity: 0;
+    }
   }
   &.filled ~ .label.fixed, &.filled ~ .hint {
     display: none;
@@ -87,7 +91,7 @@
   line-height: $input-field-font-size;
   color: $input-text-label-color;
   pointer-events: none;
-  opacity: 0;
+  opacity: $input-hint-opacity;
   transition-timing-function: $animation-curve-default;
   transition-duration: $animation-duration;
   transition-property: opacity;
diff --git a/docs/app/components/layout/main/modules/examples/input_example_1.txt b/docs/app/components/layout/main/modules/examples/input_example_1.txt
index d4a89a62..70327ee9 100644
--- a/docs/app/components/layout/main/modules/examples/input_example_1.txt
+++ b/docs/app/components/layout/main/modules/examples/input_example_1.txt
@@ -1,5 +1,5 @@
 class InputTest extends React.Component {
-  state = { name: '', phone: '', multiline: '', email: '', hint: '' };
+  state = { name: '', phone: '', multiline: '', email: '', hint: '', label: '' };
 
   handleChange = (name, value) => {
     this.setState({...this.state, [name]: value});
@@ -9,6 +9,7 @@ class InputTest extends React.Component {
     return (
       <section>
         <Input type='text' label='Name' name='name' value={this.state.name} onChange={this.handleChange.bind(this, 'name')} maxLength={16} />
+        <Input type='text' hint='With Hint, no label' name='name' value={this.state.label} onChange={this.handleChange.bind(this, 'label')} maxLength={16} />
         <Input type='text' label='Disabled field' disabled />
         <Input type='text' multiline label='Multiline' maxLength={20} value={this.state.multiline} onChange={this.handleChange.bind(this, 'multiline')} />
         <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />