diff --git a/components/input/index.jsx b/components/input/index.jsx
index 8a948020..a9793dce 100644
--- 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 (
{ this.renderInput() }
+ { this.props.icon ?
: null }
{ this.props.label ?
: null }
{ this.props.error ?
{this.props.error} : null }
diff --git a/components/input/input.md b/components/input/input.md
index 95513157..db123c7c 100644
--- 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
index dfc322d3..d0e9c15e 100644
--- 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,24 +48,23 @@ $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;
}
@@ -55,7 +72,7 @@ $input-text-error-color: unquote("rgb(222, 50, 38)") !default;
.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
index 69a99d8a..654ae53c 100644
--- a/spec/components/input.jsx
+++ b/spec/components/input.jsx
@@ -9,10 +9,12 @@ export default React.createClass({
);
}