From 71ff26434d6452dc2b414f5497a58a07a796f22c Mon Sep 17 00:00:00 2001
From: Matthew Scott <scott@fundinggates.com>
Date: Wed, 25 Feb 2015 23:30:51 -0600
Subject: [PATCH] [added] bsSize prop to Input, supporting input groups

This allows for specifying a size, such as 'small' or 'large', such as:

    <Input
      type="text"
      placeholder="Search"
      bsSize="small"
      buttonAfter={<Button><Glyphicon glyph="search" /></Button>}
      />

(Input groups are enabled whenever these props have values:
addonBefore, addonAfter, buttonBefore, or buttonAfter)

This maps to the "input-group-sm" and "input-group-lg" classes as documented here:
http://getbootstrap.com/components/#input-groups-sizing
---
 src/Input.jsx      | 10 +++++++++-
 test/InputSpec.jsx | 16 ++++++++++++++++
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/Input.jsx b/src/Input.jsx
index 85231c093f..91f11dd954 100644
--- a/src/Input.jsx
+++ b/src/Input.jsx
@@ -4,6 +4,7 @@ var classSet = require('./utils/classSet');
 var Button = require('./Button');
 
 var Input = React.createClass({
+
   propTypes: {
     type: React.PropTypes.string,
     label: React.PropTypes.node,
@@ -12,6 +13,7 @@ var Input = React.createClass({
     addonAfter: React.PropTypes.node,
     buttonBefore: React.PropTypes.node,
     buttonAfter: React.PropTypes.node,
+    bsSize: React.PropTypes.oneOf(['small', 'medium', 'large']),
     bsStyle: function(props) {
       if (props.type === 'submit') {
         // Return early if `type=submit` as the `Button` component
@@ -140,8 +142,14 @@ var Input = React.createClass({
       </span>
     ) : null;
 
+    var inputGroupClassName;
+    switch (this.props.bsSize) {
+      case 'small': inputGroupClassName = 'input-group-sm'; break;
+      case 'large': inputGroupClassName = 'input-group-lg'; break;
+    }
+
     return addonBefore || addonAfter || buttonBefore || buttonAfter ? (
-      <div className="input-group" key="input-group">
+      <div className={joinClasses(inputGroupClassName, 'input-group')} key="input-group">
         {addonBefore}
         {buttonBefore}
         {children}
diff --git a/test/InputSpec.jsx b/test/InputSpec.jsx
index 4303a0ab64..e3155f1e2c 100644
--- a/test/InputSpec.jsx
+++ b/test/InputSpec.jsx
@@ -123,6 +123,22 @@ describe('Input', function () {
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group-addon'));
   });
 
+  it('renders input-group with sm or lg class name when bsSize is small or large', function () {
+    var instance = ReactTestUtils.renderIntoDocument(
+      <Input addonBefore="$" bsSize="small" />
+    );
+
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group'));
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group-sm'));
+
+    instance = ReactTestUtils.renderIntoDocument(
+      <Input addonBefore="$" bsSize="large" />
+    );
+
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group'));
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group-lg'));
+  });
+
   it('renders btn-group', function() {
     var instance = ReactTestUtils.renderIntoDocument(
       <Input buttonAfter={<Button>!</Button>} />