diff --git a/docs/examples/ButtonGroupBlock.js b/docs/examples/ButtonGroupBlock.js new file mode 100644 index 0000000000..5ae4feca1e --- /dev/null +++ b/docs/examples/ButtonGroupBlock.js @@ -0,0 +1,8 @@ +const buttonGroupInstance = ( + + + + +); + +React.render(buttonGroupInstance, mountNode); diff --git a/docs/src/ComponentsPage.js b/docs/src/ComponentsPage.js index 863e71b78d..50d3a6756e 100644 --- a/docs/src/ComponentsPage.js +++ b/docs/src/ComponentsPage.js @@ -127,6 +127,9 @@ const ComponentsPage = React.createClass({ className='text-danger'>Split button dropdowns are not supported here.

Just add vertical to the {''}.

+
+

Moreover, you can have buttons be block level elements so they take the full width of their container, just add block to the {''}, in addition to the vertical you just added.

+

Justified button groups

Make a group of buttons stretch at equal sizes to span the entire width of its parent. Also works with button dropdowns within the button group.

diff --git a/docs/src/Samples.js b/docs/src/Samples.js index b15e400a85..712023984e 100644 --- a/docs/src/Samples.js +++ b/docs/src/Samples.js @@ -14,6 +14,7 @@ export default { ButtonGroupNested: require('fs').readFileSync(__dirname + '/../examples/ButtonGroupNested.js', 'utf8'), ButtonGroupVertical: require('fs').readFileSync(__dirname + '/../examples/ButtonGroupVertical.js', 'utf8'), ButtonGroupJustified: require('fs').readFileSync(__dirname + '/../examples/ButtonGroupJustified.js', 'utf8'), + ButtonGroupBlock: require('fs').readFileSync(__dirname + '/../examples/ButtonGroupBlock.js', 'utf8'), DropdownButtonBasic: require('fs').readFileSync(__dirname + '/../examples/DropdownButtonBasic.js', 'utf8'), SplitButtonBasic: require('fs').readFileSync(__dirname + '/../examples/SplitButtonBasic.js', 'utf8'), DropdownButtonSizes: require('fs').readFileSync(__dirname + '/../examples/DropdownButtonSizes.js', 'utf8'), diff --git a/src/ButtonGroup.js b/src/ButtonGroup.js index 1492ae7bce..c82a31771c 100644 --- a/src/ButtonGroup.js +++ b/src/ButtonGroup.js @@ -1,13 +1,22 @@ import React from 'react'; import classNames from 'classnames'; import BootstrapMixin from './BootstrapMixin'; +import CustomPropTypes from './utils/CustomPropTypes'; const ButtonGroup = React.createClass({ mixins: [BootstrapMixin], propTypes: { vertical: React.PropTypes.bool, - justified: React.PropTypes.bool + justified: React.PropTypes.bool, + block: CustomPropTypes.all([ + React.PropTypes.bool, + function(props, propName, componentName) { + if (props.block && !props.vertical) { + return new Error('The block property requires the vertical property to be set to have any effect'); + } + } + ]) }, getDefaultProps() { @@ -21,6 +30,7 @@ const ButtonGroup = React.createClass({ classes['btn-group'] = !this.props.vertical; classes['btn-group-vertical'] = this.props.vertical; classes['btn-group-justified'] = this.props.justified; + classes['btn-block'] = this.props.block; return (
+ + + ); + assert.ok(instance.getDOMNode().className.match(/\bbtn-block\b/)); + }); + + it('Should warn about block without vertical', function () { + ReactTestUtils.renderIntoDocument( + + + + ); + shouldWarn('The block property requires the vertical property to be set to have any effect'); + }); + it('Should add justified variation', function () { let instance = ReactTestUtils.renderIntoDocument(