From 935171f433c947990c9dbe97795c53af5bd4dc59 Mon Sep 17 00:00:00 2001
From: Mathieu M-Gosselin <mathieumg@atx33.com>
Date: Tue, 26 May 2015 20:38:26 -0400
Subject: [PATCH] [added] Now accepting a `block` property on the ButtonGroup
 component. Closes #240.

---
 docs/examples/ButtonGroupBlock.js |  8 ++++++++
 docs/src/ComponentsPage.js        |  3 +++
 docs/src/Samples.js               |  1 +
 src/ButtonGroup.js                | 12 +++++++++++-
 test/ButtonGroupSpec.js           | 23 +++++++++++++++++++++++
 5 files changed, 46 insertions(+), 1 deletion(-)
 create mode 100644 docs/examples/ButtonGroupBlock.js

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 = (
+  <ButtonGroup vertical block>
+    <Button>Full width button</Button>
+    <Button>Full width button</Button>
+  </ButtonGroup>
+);
+
+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.</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>
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 (
       <div
diff --git a/test/ButtonGroupSpec.js b/test/ButtonGroupSpec.js
index a6e476fb70..f748d5ac71 100644
--- a/test/ButtonGroupSpec.js
+++ b/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>