[added] Now accepting a block property on the ButtonGroup component.

Closes react-bootstrap#240.

Author: Mathieu M-Gosselin

docs/examples/ButtonGroupBlock.js

@@ -0,0 +1,8 @@
+const buttonGroupInstance = (
+  <ButtonGroup vertical block>
+    <Button>Full width button</Button>
+    <Button>Full width button</Button>
+  </ButtonGroup>
+);
+
+React.render(buttonGroupInstance, mountNode);

docs/src/ComponentsPage.js

@@ -127,6 +127,9 @@ const ComponentsPage = React.createClass({
                     className='text-danger'>Split button dropdowns are not supported here.</strong></p>
                   <p>Just add <code>vertical</code> to the <code>{'<ButtonGroup />'}</code>.</p>
                   <ReactPlayground codeText={Samples.ButtonGroupVertical} />
+                  <br />
+                  <p>Moreover, you can have buttons be block level elements so they take the full width of their container, just add <code>block</code> to the <code>{'<ButtonGroup />'}</code>, in addition to the <code>vertical</code> you just added.</p>
+                  <ReactPlayground codeText={Samples.ButtonGroupBlock} />
 
                   <h3 id='btn-groups-justified'>Justified button groups</h3>
                   <p>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.</p>

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'),

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 (
       <div

test/ButtonGroupSpec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import ReactTestUtils from 'react/lib/ReactTestUtils';
 import ButtonGroup from '../src/ButtonGroup';
 import Button from '../src/Button';
+import { shouldWarn } from './helpers';
 
 describe('ButtonGroup', function () {
   it('Should output a button group', function () {
@@ -38,6 +39,28 @@ describe('ButtonGroup', function () {
     assert.equal(instance.getDOMNode().className.trim(), 'btn-group-vertical');
   });
 
+  it('Should add block variation', function () {
+    let instance = ReactTestUtils.renderIntoDocument(
+      <ButtonGroup vertical block>
+        <Button>
+          Title
+        </Button>
+      </ButtonGroup>
+    );
+    assert.ok(instance.getDOMNode().className.match(/\bbtn-block\b/));
+  });
+
+  it('Should warn about block without vertical', function () {
+    ReactTestUtils.renderIntoDocument(
+      <ButtonGroup block>
+        <Button>
+          Title
+        </Button>
+      </ButtonGroup>
+    );
+    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(
       <ButtonGroup justified>