From b688014c0857112b03273f0f73ef3545099c537a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andre=CC=81=20Ligne=CC=81?= <andre.ligne@gmail.com>
Date: Wed, 5 Aug 2015 19:00:55 +0200
Subject: [PATCH] [added] custom feedback icons for Input

- Added a new prop on Input named feedbackIcon
- Added tests for ensuring Glyphicons as default
- Added tests for rendering the feedbackIcon

This allows for passing custom icons that may be
used instead of the default Glyphicons when an
Input is having feedback.
---
 src/InputBase.js  | 25 +++++++++++++---------
 test/InputSpec.js | 53 +++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 68 insertions(+), 10 deletions(-)

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 ? (
-      <span className={classNames(classes)} key="icon" />
-    ) : null;
+      switch (this.props.bsStyle) {
+        case 'success': return <Glyphicon formControlFeedback glyph="ok" key="icon" />;
+        case 'warning': return <Glyphicon formControlFeedback glyph="warning-sign" key="icon" />;
+        case 'error': return <Glyphicon formControlFeedback glyph="remove" key="icon" />;
+        default: return <span className="form-control-feedback" key="icon" />;
+      }
+    } 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(
+        <Input hasFeedback={true} bsStyle="success" />
+      );
+
+      assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon'));
+      assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'glyphicon-ok'));
+    });
+
+    it('renders warning feedback as Glyphicon', function () {
+      let instance = ReactTestUtils.renderIntoDocument(
+        <Input hasFeedback={true} bsStyle="warning" />
+      );
+
+      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(
+        <Input hasFeedback={true} bsStyle="error" />
+      );
+
+      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 = <Glyphicon glyph="star" />;
+
+        let instance = ReactTestUtils.renderIntoDocument(
+            <Input feedbackIcon={customIcon} hasFeedback={true} bsStyle="success" />
+        );
+
+        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 = <Glyphicon glyph="star" />;
+
+        let instance = ReactTestUtils.renderIntoDocument(
+            <Input feedbackIcon={customIcon} hasFeedback={true} bsStyle="success" />
+        );
+
+        assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-control-feedback'));
+      });
+    });
+  });
 });