Merge pull request #371 from KerenChandran/dev

Added hint attribute to input field.

components/input/Input.jsx

@@ -10,6 +10,7 @@ class Input extends React.Component {
     disabled: React.PropTypes.bool,
     error: React.PropTypes.node,
     floating: React.PropTypes.bool,
+    hint: React.PropTypes.string,
     icon: React.PropTypes.any,
     label: React.PropTypes.string,
     maxLength: React.PropTypes.number,
@@ -25,6 +26,7 @@ class Input extends React.Component {
 
   static defaultProps = {
     className: '',
+    hint: '',
     disabled: false,
     floating: true,
     multiline: false,
@@ -45,7 +47,7 @@ class Input extends React.Component {
   }
 
   render () {
-    const { children, disabled, error, floating, icon,
+    const { children, disabled, error, floating, hint, icon,
             label: labelText, maxLength, multiline, type, value, ...others} = this.props;
     const length = maxLength && value ? value.length : 0;
     const labelClassName = ClassNames(style.label, {[style.fixed]: !floating});
@@ -77,6 +79,7 @@ class Input extends React.Component {
         {icon ? <FontIcon className={style.icon} value={icon} /> : null}
         <span className={style.bar}></span>
         {labelText ? <label className={labelClassName}>{labelText}</label> : null}
+        {hint ? <span className={style.hint}>{hint}</span> : null}
         {error ? <span className={style.error}>{error}</span> : null}
         {maxLength ? <span className={style.counter}>{length}/{maxLength}</span> : null}
         {children}

components/input/_config.scss

@@ -16,3 +16,4 @@ $input-icon-font-size: 2.4 * $unit;
 $input-icon-size: 2 * $input-icon-font-size;
 $input-icon-offset: 1.6 * $unit;
 $input-chevron-offset: .8 * $unit;
+$input-hint-opacity: 1 !default;

components/input/readme.md

@@ -20,6 +20,7 @@ class InputTest extends React.Component {
         <Input type='text' label='Disabled field' disabled />
         <Input type='email' label='Email address' icon='email' value={this.state.email} onChange={this.handleChange.bind(this, 'email')} />
         <Input type='tel' label='Phone' name='phone' icon='phone' value={this.state.phone} onChange={this.handleChange.bind(this, 'phone')} />
+        <Input type='text' value={this.state.withHintCustomIcon} label='With Hint Text Icon' hint='Hint Text' onChange={this.handleChange.bind(this, 'withHintCustomIcon')} icon={<span>J</span>} />
       </section>
     );
   }
@@ -33,6 +34,7 @@ class InputTest extends React.Component {
 | `className`     | `String`        |`''`              | Sets a class name to give custom styles.|
 | `disabled`      | `Boolean`       | `false`         | If true, component will be disabled.|
 | `error`         | `String`        |                 | Give an error string to display under the field.|
+| `hint`      | `String`        |`''`             | The text string to use for hint text element.|
 | `icon`         | `String`        |                 | Name of an icon to use as a label for the input.|
 | `floating`     | `Boolean`       | `true`         | Indicates if the label is floating in the input field or not.|
 | `label`         | `String`        |             | The text string to use for the floating label element.|

components/input/style.scss

@@ -40,6 +40,9 @@
     ~ .label:not(.fixed) {
       color: $input-text-highlight-color;
     }
+    ~ .hint {
+      opacity: $input-hint-opacity;
+    }
     ~ .icon {
       color: $input-text-highlight-color;
     }
@@ -50,7 +53,7 @@
       font-size: $input-label-font-size;
     }
   }
-  &.filled ~ .label.fixed {
+  &.filled ~ .label.fixed, &.filled ~ .hint {
     display: none;
   }
 }
@@ -66,6 +69,23 @@
   transition-timing-function: $animation-curve-default;
   transition-duration: $animation-duration;
   transition-property: top, font-size, color;
+  &.fixed ~ .hint {
+    display: none
+  }
+}
+
+.hint {
+  position: absolute;
+  top: $input-padding + (1.5 * $input-field-padding);
+  left: 0;
+  font-size: $input-field-font-size;
+  line-height: $input-field-font-size;
+  color: $input-text-label-color;
+  pointer-events: none;
+  opacity: 0;
+  transition-timing-function: $animation-curve-default;
+  transition-duration: $animation-duration;
+  transition-property: opacity;
 }
 
 .bar {

spec/components/input.jsx

@@ -6,7 +6,9 @@ class InputTest extends React.Component {
     normal: 'Tony Stark',
     fixedLabel: '',
     withIcon: '',
-    withCustomIcon: ''
+    withCustomIcon: '',
+    withHintCustomIcon: '',
+    multilineHint: 'Long Description here'
   };
 
   handleChange = (name, value) => {
@@ -26,9 +28,11 @@ class InputTest extends React.Component {
         />
         <Input type='email' value={this.state.fixedLabel} label='Label fixed' floating={false} onChange={this.handleChange.bind(this, 'fixedLabel')} />
         <Input type='text' value='Read only' readOnly label='Phone Number' />
+        <Input type='email' value={this.state.multilineHint} label='Description' hint='Enter Description' multiline onChange={this.handleChange.bind(this, 'multilineHint')} />
         <Input type='text' label='Disabled field' disabled />
         <Input type='tel' value={this.state.withIcon} label='With icon' onChange={this.handleChange.bind(this, 'withIcon')} icon='phone' />
         <Input type='tel' value={this.state.withCustomIcon} label='With custom icon' onChange={this.handleChange.bind(this, 'withCustomIcon')} icon={<span>P</span>} />
+        <Input type='text' value={this.state.withHintCustomIcon} label='With Hint Text Icon' hint='Hint Text' onChange={this.handleChange.bind(this, 'withHintCustomIcon')} icon={<span>J</span>} />
       </section>
     );
   }