Add support for passing btnSize and btnStyle to ButtonGroup component

Author: cheton

README.md

@@ -106,15 +106,15 @@ import { Button } from './components/Buttons';
 #### Flat button group
 
 ```js
-<ButtonGroup>
-    <Button btnStyle="flat" active>Left</Button>
-    <Button btnStyle="flat">Middle</Button>
-    <Button btnStyle="flat">Right</Button>
+<ButtonGroup btnStyle="flat" btnSize="md">
+    <Button active>Left</Button>
+    <Button>Middle</Button>
+    <Button>Right</Button>
 </ButtonGroup>
-<ButtonGroup>
-    <Button btnStyle="flat" compact><i className="fa fa-pie-chart" /></Button>
-    <Button btnStyle="flat" compact><i className="fa fa-line-chart" /></Button>
-    <Button btnStyle="flat" compact><i className="fa fa-table" /></Button>
+<ButtonGroup btnStyle="flat" btnSize="md">
+    <Button compact><i className="fa fa-pie-chart" /></Button>
+    <Button compact><i className="fa fa-line-chart" /></Button>
+    <Button compact><i className="fa fa-table" /></Button>
 </ButtonGroup>
 ```
 

examples/ButtonGroups.jsx

@@ -20,15 +20,15 @@ export default () => {
                 <br /><br />
 
                 <p><strong>Flat button group</strong></p>
-                <ButtonGroup>
-                    <Button btnStyle="flat" active>Left</Button>
-                    <Button btnStyle="flat">Middle</Button>
-                    <Button btnStyle="flat">Right</Button>
+                <ButtonGroup btnSize="md" btnStyle="flat">
+                    <Button active>Left</Button>
+                    <Button>Middle</Button>
+                    <Button>Right</Button>
                 </ButtonGroup>
-                <ButtonGroup>
-                    <Button btnStyle="flat" compact><i className="fa fa-pie-chart" /></Button>
-                    <Button btnStyle="flat" compact><i className="fa fa-line-chart" /></Button>
-                    <Button btnStyle="flat" compact><i className="fa fa-table" /></Button>
+                <ButtonGroup btnSize="md" btnStyle="flat">
+                    <Button compact><i className="fa fa-pie-chart" /></Button>
+                    <Button compact><i className="fa fa-line-chart" /></Button>
+                    <Button compact><i className="fa fa-table" /></Button>
                 </ButtonGroup>
             </div>
         </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@trendmicro/react-buttons",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Trend Micro Components: React Buttons",
   "main": "lib/index.js",
   "files": [

src/Button.jsx

@@ -1,6 +1,10 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
+import {
+    btnSizes,
+    btnStyles
+} from './constants';
 import styles from './index.styl';
 
 class Button extends PureComponent {
@@ -14,25 +18,8 @@ class Button extends PureComponent {
             'reset',
             'submit'
         ]),
-        btnSize: PropTypes.oneOf([
-            'lg',
-            'md',
-            'sm',
-            'xs',
-            'large',
-            'medium',
-            'small',
-            'extra-small'
-        ]),
-        btnStyle: PropTypes.oneOf([
-            'default',
-            'primary',
-            'danger',
-            'emphasis', // alias of "danger"
-            'border',
-            'flat',     // alias of "border"
-            'link'
-        ]),
+        btnSize: PropTypes.oneOf(btnSizes),
+        btnStyle: PropTypes.oneOf(btnStyles),
         active: PropTypes.bool,
         hover: PropTypes.bool,
         focus: PropTypes.bool,

src/ButtonGroup.jsx

@@ -1,9 +1,14 @@
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { cloneElement } from 'react';
+import Button from './Button';
+import {
+    btnSizes,
+    btnStyles
+} from './constants';
 import styles from './index.styl';
 
-const ButtonGroup = ({ className, btnSize, vertical, dropdownOpen, ...props }) => {
+const ButtonGroup = ({ btnSize, btnStyle, vertical, dropdownOpen, children, className, ...props }) => {
     const classes = {
         [styles.btnGroup]: true,
         [styles.btnGroupLg]: btnSize === 'large' || btnSize === 'lg',
@@ -13,32 +18,41 @@ const ButtonGroup = ({ className, btnSize, vertical, dropdownOpen, ...props }) =
         [styles.btnGroupVertical]: vertical,
         [styles.open]: dropdownOpen
     };
+
     return (
         <div
             {...props}
             className={classNames(className, classes)}
-        />
+        >
+            {React.Children.map(children, child => {
+                if (React.isValidElement(child) && child.type === Button) {
+                    const childProps = {};
+                    if (btnSizes.indexOf(btnSize) >= 0) {
+                        childProps.btnSize = btnSize;
+                    }
+                    if (btnStyles.indexOf(btnStyle) >= 0) {
+                        childProps.btnStyle = btnStyle;
+                    }
+                    return cloneElement(child, childProps);
+                }
+
+                return child;
+            })}
+        </div>
     );
 };
 
 ButtonGroup.propTypes = {
-    btnSize: PropTypes.oneOf([
-        'lg',
-        'md',
-        'sm',
-        'xs',
-        'large',
-        'medium',
-        'small',
-        'extra-small'
-    ]),
+    btnSize: PropTypes.oneOf(btnSizes),
+    btnStyle: PropTypes.oneOf(btnStyles),
     vertical: PropTypes.bool,
 
     // Apply styles for use in a Dropdown.
     // This prop will be set automatically when the ButtonGroup is used inside a Dropdown.
     dropdownOpen: PropTypes.bool
 };
 ButtonGroup.defaultProps = {
+    btnSize: 'md',
     vertical: false,
     dropdownOpen: false
 };

src/btn-size.styl

@@ -6,7 +6,9 @@
     border-radius: 3px;
 
     &.btn-compact {
-        width: 58px;
+        padding-left: 0;
+        padding-right: 0;
+        min-width: 58px;
     }
 }
 
@@ -16,6 +18,12 @@
     font-size: 13px;
     line-height: 20px;
     border-radius: 3px;
+
+    &.btn-compact {
+        padding-left: 0;
+        padding-right: 0;
+        min-width: 42px;
+    }
 }
 
 .btn-sm,
@@ -26,7 +34,9 @@
     border-radius: 3px;
 
     &.btn-compact {
-        width: 36px;
+        padding-left: 0;
+        padding-right: 0;
+        min-width: 36px;
     }
 }
 
@@ -38,6 +48,8 @@
     border-radius: 3px;
 
     &.btn-compact {
-        width: 28px;
+        padding-left: 0;
+        padding-right: 0;
+        min-width: 28px;
     }
 }

src/btn.styl

@@ -60,14 +60,6 @@
         margin-left: 8px;
     }
 
-    // compact button
-    &.btn-compact {
-        min-width: 0;
-        padding-left: 0;
-        padding-right: 0;
-        width: 42px;
-    }
-
     // Loading class within a button
     > [class*="loader-container"] {
         display: inline-block;

src/constants.js

@@ -0,0 +1,20 @@
+export const btnSizes = [
+    'lg',
+    'md',
+    'sm',
+    'xs',
+    'large',
+    'medium',
+    'small',
+    'extra-small'
+];
+
+export const btnStyles = [
+    'default',
+    'primary',
+    'danger',
+    'emphasis', // alias of "danger"
+    'border',
+    'flat',     // alias of "border"
+    'link'
+];