diff --git a/src/InputBase.js b/src/InputBase.js
index c552a7a6ab..6293c37d51 100644
--- a/src/InputBase.js
+++ b/src/InputBase.js
@@ -1,6 +1,7 @@
import React from 'react';
import classNames from 'classnames';
import FormGroup from './FormGroup';
+import Glyphicon from './Glyphicon';
class InputBase extends React.Component {
getInputDOMNode() {
@@ -91,17 +92,20 @@ class InputBase extends React.Component {
}
renderIcon() {
- let classes = {
- 'glyphicon': true,
- 'form-control-feedback': true,
- 'glyphicon-ok': this.props.bsStyle === 'success',
- 'glyphicon-warning-sign': this.props.bsStyle === 'warning',
- 'glyphicon-remove': this.props.bsStyle === 'error'
- };
+ if (this.props.hasFeedback) {
+ if (this.props.feedbackIcon) {
+ return React.cloneElement(this.props.feedbackIcon, { formControlFeedback: true });
+ }
- return this.props.hasFeedback ? (
-
- ) : null;
+ switch (this.props.bsStyle) {
+ case 'success': return ;
+ case 'warning': return ;
+ case 'error': return ;
+ default: return ;
+ }
+ } else {
+ return null;
+ }
}
renderHelp() {
@@ -214,6 +218,7 @@ InputBase.propTypes = {
bsSize: React.PropTypes.oneOf(['small', 'medium', 'large']),
bsStyle: React.PropTypes.oneOf(['success', 'warning', 'error']),
hasFeedback: React.PropTypes.bool,
+ feedbackIcon: React.PropTypes.node,
id: React.PropTypes.string,
groupClassName: React.PropTypes.string,
wrapperClassName: React.PropTypes.string,
diff --git a/test/InputSpec.js b/test/InputSpec.js
index f4bf29c622..340e50df44 100644
--- a/test/InputSpec.js
+++ b/test/InputSpec.js
@@ -4,6 +4,7 @@ import Input from '../src/Input';
import Button from '../src/Button';
import DropdownButton from '../src/DropdownButton';
import MenuItem from '../src/MenuItem';
+import Glyphicon from '../src/Glyphicon';
import {shouldWarn} from './helpers';
describe('Input', function () {
@@ -279,4 +280,56 @@ describe('Input', function () {
let node = React.findDOMNode(ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'input'));
assert.isNotNull(node.getAttribute('disabled'));
});
+
+ context('when Input listens to feedback', function () {
+ it('renders success feedback as Glyphicon', function () {
+ let instance = ReactTestUtils.renderIntoDocument(
+
+ );
+
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon'));
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon-ok'));
+ });
+
+ it('renders warning feedback as Glyphicon', function () {
+ let instance = ReactTestUtils.renderIntoDocument(
+
+ );
+
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon'));
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon-warning-sign'));
+ });
+
+ it('renders error feedback as Glyphicon', function () {
+ let instance = ReactTestUtils.renderIntoDocument(
+
+ );
+
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon'));
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon-remove'));
+ });
+
+ context('when using feedbackIcon', function () {
+ it('uses the feedbackIcon', function () {
+ let customIcon = ;
+
+ let instance = ReactTestUtils.renderIntoDocument(
+
+ );
+
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon'));
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon-star'));
+ });
+
+ it('adds the .form-control-feedback class for Glyphicons', function () {
+ let customIcon = ;
+
+ let instance = ReactTestUtils.renderIntoDocument(
+
+ );
+
+ assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-control-feedback'));
+ });
+ });
+ });
});