From 4cd58455547e630b12ffd2fcea5da022e25de59c Mon Sep 17 00:00:00 2001 From: Arno Fortelny Date: Thu, 7 May 2015 18:21:36 -0400 Subject: [PATCH] [added] FormGroup/Input bsSize now propgates correctly as form-group-\* classes --- docs/examples/InputSizes.js | 9 +++++++++ docs/src/ComponentsPage.js | 3 +++ docs/src/Samples.js | 1 + src/FormGroup.js | 8 +++++++- test/FormGroupSpec.js | 18 ++++++++++++++++++ 5 files changed, 38 insertions(+), 1 deletion(-) create mode 100644 docs/examples/InputSizes.js diff --git a/docs/examples/InputSizes.js b/docs/examples/InputSizes.js new file mode 100644 index 0000000000..a36ffaedae --- /dev/null +++ b/docs/examples/InputSizes.js @@ -0,0 +1,9 @@ +const inputSizeInstance = ( +
+ + + +
+); + +React.render(inputSizeInstance, mountNode); diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js index ba2dbde570..4382c9805b 100644 --- a/docs/src/ComponentsPage.js +++ b/docs/src/ComponentsPage.js @@ -561,6 +561,9 @@ const ComponentsPage = React.createClass({

Use addonBefore and addonAfter for normal addons, buttonBefore and buttonAfter for button addons. Exotic configurations may require some css on your side.

+

Sizes

+

Use bsSize to change the size of inputs. It also works with addons and most other options.

+

Validation

Set bsStyle to one of success, warning or error. Add hasFeedback to show glyphicon. Glyphicon may need additional styling if there is an add-on or no label.

diff --git a/docs/src/Samples.js b/docs/src/Samples.js index 004fe581d7..d4821d9d10 100644 --- 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 index f117c902c2..fd2e33ccd5 100644 --- 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 index c4aa006901..f705e3945a 100644 --- 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( + + ); + + shouldWarn('Failed propType: bsSize'); + }); + it('renders no form-group class when standalone', function() { let instance = ReactTestUtils.renderIntoDocument( @@ -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( + + ); + + 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 }