Input bsSize now propgates correctly for css form-group-\*

ashokbugude · May 7, 2015 · 3068158 · 3068158
1 parent af4c0a0
commit 3068158
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 0 deletions.
diff --git 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
@@ -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(
+      <FormGroup bsSize="small">
+        <span />
+      </FormGroup>
+    );
+
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-group'));
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-group-sm'));
+
+    instance = ReactTestUtils.renderIntoDocument(
+      <FormGroup bsSize="large">
+        <span />
+      </FormGroup>
+    );
+
+    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(
       <FormGroup standalone>

diff --git 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(
+      <Input bsSize="small" />
+    );
+
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-group'));
+    assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-group-sm'));
+
+    instance = ReactTestUtils.renderIntoDocument(
+      <Input bsSize="large" />
+    );
+
+    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(
       <Input addonBefore="$" bsSize="small" />