[added] FormGroup/Input bsSize now propgates correctly as form-group-…

…\* classes
kyletsang · May 7, 2015 · 4cd5845 · 4cd5845
1 parent 3068158
commit 4cd5845
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 1 deletion.
diff --git a/docs/examples/InputSizes.js b/docs/examples/InputSizes.js
@@ -0,0 +1,9 @@
+const inputSizeInstance = (
+  <form>
+    <Input type='text' bsSize="large" placeholder='Large text' />
+    <Input type='text' bsSize="medium" placeholder='Normal text' />
+    <Input type='text' bsSize="small" placeholder='Small text' />
+  </form>
+);
+
+React.render(inputSizeInstance, mountNode);
diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js
@@ -561,6 +561,9 @@ const ComponentsPage = React.createClass({
                   <p>Use <code>addonBefore</code> and <code>addonAfter</code> for normal addons, <code>buttonBefore</code> and <code>buttonAfter</code> for button addons.
                   Exotic configurations may require some css on your side.</p>
                   <ReactPlayground codeText={Samples.InputAddons} />
+                  <h2 id='input-sizes'>Sizes</h2>
+                  <p>Use <code>bsSize</code> to change the size of inputs. It also works with addons and most other options.</p>
+                  <ReactPlayground codeText={Samples.InputSizes} />
                   <h2 id='input-validation'>Validation</h2>
                   <p>Set <code>bsStyle</code> to one of <code>success</code>, <code>warning</code> or <code>error</code>.
                   Add <code>hasFeedback</code> to show glyphicon. Glyphicon may need additional styling if there is an add-on or no label.</p>

diff --git a/docs/src/Samples.js b/docs/src/Samples.js
@@ -84,6 +84,7 @@ export default {
   Input:                         require('fs').readFileSync(__dirname + '/../examples/Input.js', 'utf8'),
   InputTypes:                    require('fs').readFileSync(__dirname + '/../examples/InputTypes.js', 'utf8'),
   InputAddons:                   require('fs').readFileSync(__dirname + '/../examples/InputAddons.js', 'utf8'),
+  InputSizes:                    require('fs').readFileSync(__dirname + '/../examples/InputSizes.js', 'utf8'),
   InputValidation:               require('fs').readFileSync(__dirname + '/../examples/InputValidation.js', 'utf8'),
   InputHorizontal:               require('fs').readFileSync(__dirname + '/../examples/InputHorizontal.js', 'utf8'),
   InputWrapper:                  require('fs').readFileSync(__dirname + '/../examples/InputWrapper.js', 'utf8')

diff --git a/src/FormGroup.js b/src/FormGroup.js
@@ -28,7 +28,13 @@ FormGroup.defaultProps = {
 FormGroup.propTypes = {
   standalone: React.PropTypes.bool,
   hasFeedback: React.PropTypes.bool,
-  bsSize: React.PropTypes.oneOf(['small', 'medium', 'large']),
+  bsSize (props) {
+    if (props.standalone) {
+      return new Error('bsSize will not be used when `standalone` is set.');
+    }
+
+    return React.PropTypes.oneOf(['small', 'medium', 'large']).apply(null, arguments);
+  },
   bsStyle: React.PropTypes.oneOf(['success', 'warning', 'error']),
   groupClassName: React.PropTypes.string
 };

diff --git a/test/FormGroupSpec.js b/test/FormGroupSpec.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import FormGroup from '../src/FormGroup';
+import {shouldWarn} from './helpers';
 
 describe('FormGroup', function() {
   it('renders children', function() {
@@ -45,6 +46,14 @@ describe('FormGroup', function() {
     assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'form-group-lg'));
   });
 
+  it('throws warning about bsSize when standalone', function () {
+    ReactTestUtils.renderIntoDocument(
+      <FormGroup standalone bsSize="large" />
+    );
+
+    shouldWarn('Failed propType: bsSize');
+  });
+
   it('renders no form-group class when standalone', function() {
     let instance = ReactTestUtils.renderIntoDocument(
       <FormGroup standalone>
@@ -55,6 +64,15 @@ describe('FormGroup', function() {
     assert.equal(ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'form-group').length, 0);
   });
 
+  it('renders no form-group-* class when standalone', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <FormGroup standalone bsSize="large" />
+    );
+
+    assert.equal(ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'form-group').length, 0);
+    assert.equal(ReactTestUtils.scryRenderedDOMComponentsWithClass(instance, 'form-group-lg').length, 0);
+  });
+
   [{
     className: 'has-feedback',
     props: { hasFeedback: true }