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.
+
+ Use bsSize
to change the size of inputs. It also works with addons and most other options.
+
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 }