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({ ) : 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 ? ( -
+
{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( + + ); + + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group')); + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group-sm')); + + instance = ReactTestUtils.renderIntoDocument( + + ); + + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group')); + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group-lg')); + }); + it('renders btn-group', function() { var instance = ReactTestUtils.renderIntoDocument( !} />