diff --git a/client/src/app/demo/components-demo-page.js b/client/src/app/demo/components-demo-page.js index 0cf3aee0..e5fb3b7d 100644 --- a/client/src/app/demo/components-demo-page.js +++ b/client/src/app/demo/components-demo-page.js @@ -35,13 +35,13 @@ let DemoPage = React.createClass({ { title: 'Input', render: ( - + ) }, { title: 'Input wrapped in a label', render: ( - + ) }, { diff --git a/client/src/core-components/input.js b/client/src/core-components/input.js index ce652a31..66b497d0 100644 --- a/client/src/core-components/input.js +++ b/client/src/core-components/input.js @@ -13,7 +13,8 @@ const Input = React.createClass({ inputType: React.PropTypes.string, password: React.PropTypes.bool, required: React.PropTypes.bool, - icon: React.PropTypes.string + icon: React.PropTypes.string, + error: React.PropTypes.string }, getDefaultProps() { @@ -28,10 +29,21 @@ const Input = React.createClass({ {this.props.label} {this.renderIcon()} + {this.renderError()} ); }, + renderError() { + let error = null; + + if (this.props.error){ + error = {this.props.error} ; + } + + return error; + }, + renderIcon() { let icon = null; @@ -57,6 +69,7 @@ const Input = React.createClass({ let classes = { 'input': true, 'input_with-icon': (this.props.icon), + 'input_with-error': (this.props.error), ['input_' + this.props.inputType]: true, [this.props.className]: (this.props.className) diff --git a/client/src/core-components/input.scss b/client/src/core-components/input.scss index c952fd45..dfd7be3a 100644 --- a/client/src/core-components/input.scss +++ b/client/src/core-components/input.scss @@ -42,13 +42,26 @@ position: absolute; margin: 1px; padding: 8px 12px; + border-bottom-left-radius: 3px; + border-top-left-radius: 3px; background-color: #eee; } .input__text { - border-bottom-left-radius: 0; - border-top-left-radius: 0; padding-left: 40px; } } + + &_with-error { + .input__error { + color: red; + font-size: $font-size--sm; + display: block; + position: absolute; + } + .input__text { + border: 1px solid red; + } + } + } \ No newline at end of file