New property 'icon'

react-toolbox · Oct 12, 2015 · d516ff2 · d516ff2
1 parent e3f1c25
commit d516ff2
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 17 deletions.
diff --git a/components/input/index.jsx b/components/input/index.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import PureRenderMixin from 'react-addons-pure-render-mixin';
 import style from './style.scss';
+import FontIcon from '../font_icon';
 
 export default React.createClass({
   mixins: [PureRenderMixin],
@@ -12,6 +13,7 @@ export default React.createClass({
     disabled: React.PropTypes.bool,
     error: React.PropTypes.string,
     floating: React.PropTypes.bool,
+    icon: React.PropTypes.string,
     label: React.PropTypes.string,
     multiline: React.PropTypes.bool,
     onBlur: React.PropTypes.func,
@@ -73,16 +75,19 @@ export default React.createClass({
 
   render () {
     let className = style.root;
-    let labelClassName = style.label;
     if (this.props.error) className += ` ${style.errored}`;
     if (this.props.disabled) className += ` ${style.disabled}`;
     if (this.props.className) className += ` ${this.props.className}`;
     if (this.props.type === 'hidden') className += ` ${style.hidden}`;
+    if (this.props.icon) className += ` ${style.with_icon}`;
+
+    let labelClassName = style.label;
     if (!this.props.floating) labelClassName += ` ${style.fixed}`;
 
     return (
       <div data-react-toolbox='input' className={className}>
         { this.renderInput() }
+        { this.props.icon ? <FontIcon className={style.icon} value={this.props.icon} /> : null }
         <span className={style.bar}></span>
         { this.props.label ? <label className={labelClassName}>{this.props.label}</label> : null }
         { this.props.error ? <span className={style.error}>{this.props.error}</span> : null }

diff --git a/components/input/input.md b/components/input/input.md
@@ -17,6 +17,7 @@ var Input = require('react-toolbox/components/input');
 | **error**         | String        |                 | Sets the error string.|
 | **label**         | String        |                 | The text string to use for the floating label element.|
 | **multiline**     | Boolean       | false           | If true, a textarea element will be rendered. The textarea also grows and shrinks according to the number of lines.|
+| **icon**          | String        |                 | Icon String key.|
 | **onBlur**        | Function      |                 | Callback function that is fired when components is blured.|
 | **onChange**      | Function      |                 | Callback function that is fired when the components's value changes.|
 | **onFocus**       | Function      |                 | Callback function that is fired when components is focused.|

diff --git a/components/input/style.scss b/components/input/style.scss
@@ -1,6 +1,5 @@
 @import "../variables";
 @import "../mixins";
-
 $input-padding: 2 * $unit;
 $input-field-height: 1.6 * $unit;
 $input-field-padding: .8 * $unit;
@@ -14,10 +13,29 @@ $input-text-highlight-color: unquote("rgb(#{$color-primary})") !default;
 $input-text-disabled-color: $input-text-bottom-border-color !default;
 $input-text-disabled-text-color: $input-text-label-color !default;
 $input-text-error-color: unquote("rgb(222, 50, 38)") !default;
+$input-icon-font-size: 2.4 * $unit;
+$input-icon-size: 2 * $input-icon-font-size;
 
 .root {
   position: relative;
   padding: $input-padding 0;
+  &.with_icon {
+    margin-left: $input-icon-size;
+  }
+}
+
+.icon {
+  position: absolute;
+  top: $offset ;
+  left: -$input-icon-size;
+  display: block;
+  width: $input-icon-size;
+  height: $input-icon-size;
+  font-size: $input-icon-font-size !important;
+  line-height: $input-icon-size !important;
+  color: $input-text-label-color;
+  text-align: center;
+  transition: color $animation-duration $animation-curve-default;
 }
 
 .input {
@@ -30,32 +48,31 @@ $input-text-error-color: unquote("rgb(222, 50, 38)") !default;
   border: 0;
   border-bottom: 1px solid $input-text-bottom-border-color;
   outline: none;
-
   &:focus {
     ~ .bar:before, ~ .bar:after {
       width: 50%;
     }
-
     ~ .label:not(.fixed) {
       color: $input-text-highlight-color;
     }
+    ~ .icon {
+      color: $input-text-highlight-color;
+    }
   }
-
   &:focus, &.filled {
     ~ .label:not(.fixed) {
       top: $input-focus-label-top;
       font-size: $input-label-font-size;
     }
   }
-
   &.filled ~ .label.fixed {
     display: none;
   }
 }
 
 .label {
   position: absolute;
-  top: $input-padding + $input-field-padding;
+  top: $input-padding + (1.5 * $input-field-padding);
   left: 0;
   font-size: $input-field-font-size;
   line-height: $input-field-font-size;
@@ -70,7 +87,6 @@ $input-text-error-color: unquote("rgb(222, 50, 38)") !default;
   position: relative;
   display: block;
   width: 100%;
-
   &:before, &:after {
     @include material-animation-default();
     position: absolute;
@@ -81,11 +97,9 @@ $input-text-error-color: unquote("rgb(222, 50, 38)") !default;
     background-color: $input-text-highlight-color;
     transition-property: width, background-color;
   }
-
   &:before {
     left: 50%;
   }
-
   &:after {
     right: 50%;
   }
@@ -104,15 +118,12 @@ $input-text-error-color: unquote("rgb(222, 50, 38)") !default;
 
 .errored {
   padding-bottom: 0;
-
   > .input {
     border-bottom-color: $input-text-error-color;
-
     &:focus {
       ~ .label:not(.fixed) {
         color: $input-text-error-color;
       }
-
       ~ .bar:before, ~ .bar:after {
         background-color: $input-text-error-color;
       }

diff --git a/spec/components/input.jsx b/spec/components/input.jsx
@@ -9,10 +9,12 @@ export default React.createClass({
       <section>
         <h5>Inputs</h5>
         <p>lorem ipsum...</p>
-        <Input type="text" label="Firstname" icon="bookmark" />
-        <Input type="email" label="Label fixed" icon="bookmark" floating={false} />
-        <Input type="text" label="Phone Number" icon="bookmark" />
-        <Input type="text" label="Disabled field" disabled />
+        <Input type='text' label='Firstname' />
+        <Input type='email' label='Label fixed' floating={false} />
+        <Input type='text' label='Phone Number' />
+        <Input type='text' label='Disabled field' disabled />
+        <Input type='tel' label='With icon' icon='phone' />
+        <Input type='email' label='With icon' icon='email' />
       </section>
     );
   }