diff --git a/src/FormGroup.js b/src/FormGroup.js index 9e6eeb0725..f117c902c2 100644 --- a/src/FormGroup.js +++ b/src/FormGroup.js @@ -5,6 +5,8 @@ class FormGroup extends React.Component { render() { let classes = { 'form-group': !this.props.standalone, + 'form-group-lg': !this.props.standalone && this.props.bsSize === 'large', + 'form-group-sm': !this.props.standalone && this.props.bsSize === 'small', 'has-feedback': this.props.hasFeedback, 'has-success': this.props.bsStyle === 'success', 'has-warning': this.props.bsStyle === 'warning', @@ -26,6 +28,7 @@ FormGroup.defaultProps = { FormGroup.propTypes = { standalone: React.PropTypes.bool, hasFeedback: React.PropTypes.bool, + bsSize: React.PropTypes.oneOf(['small', 'medium', 'large']), bsStyle: React.PropTypes.oneOf(['success', 'warning', 'error']), groupClassName: React.PropTypes.string }; diff --git a/test/FormGroupSpec.js b/test/FormGroupSpec.js index 66aca130b6..c4aa006901 100644 --- a/test/FormGroupSpec.js +++ b/test/FormGroupSpec.js @@ -25,6 +25,26 @@ describe('FormGroup', function() { assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-group')); }); + it('renders form-group with sm or lg class when bsSize is small or large', function () { + let instance = ReactTestUtils.renderIntoDocument( + + + + ); + + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-group')); + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-group-sm')); + + instance = ReactTestUtils.renderIntoDocument( + + + + ); + + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-group')); + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-group-lg')); + }); + it('renders no form-group class when standalone', function() { let instance = ReactTestUtils.renderIntoDocument( diff --git a/test/InputSpec.js b/test/InputSpec.js index 7074404355..ed1cbf6467 100644 --- a/test/InputSpec.js +++ b/test/InputSpec.js @@ -127,6 +127,22 @@ describe('Input', function () { assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group-addon')); }); + it('renders form-group with sm or lg class when bsSize is small or large', function () { + let instance = ReactTestUtils.renderIntoDocument( + + ); + + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-group')); + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-group-sm')); + + instance = ReactTestUtils.renderIntoDocument( + + ); + + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-group')); + assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-group-lg')); + }); + it('renders input-group with sm or lg class name when bsSize is small or large', function () { let instance = ReactTestUtils.renderIntoDocument(