Merge 251b150 into c9f64af

cheton · Feb 16, 2020 · bafcbef · bafcbef
2 parents c9f64af + 251b150
commit bafcbef
Show file tree

Hide file tree

Showing 14 changed files with 391 additions and 183 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-bootstrap-buttons",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "React Bootstrap buttons.",
   "main": "lib/index.js",
   "files": [
@@ -88,6 +88,7 @@
     "react-styleguidist": "~9.1.11",
     "style-loader": "~0.23.1",
     "styled-components": "~4.3.2",
+    "styled-system": "~5.1.4",
     "stylint": "~2.0.0",
     "stylus": "~0.54.5",
     "stylus-loader": "~3.0.2",

diff --git a/src/Button.jsx b/src/Button.jsx
@@ -2,43 +2,65 @@ import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
 import {
-    btnSizes, // deprecated
-    btnStyles
+    sizes,
+    variants,
 } from './constants';
 import deprecate from './deprecate';
 import styles from './styles/index.styl';
 
 /**
  * @example ../examples/Button.md
  */
-const Button = ({
-    className,
-    tag: Component,
-    type,
-    btnSize, // deprecated
-    lg,
-    md,
-    sm,
-    xs,
-    btnStyle,
-    outline,
-    block,
-    active,
-    hover,
-    focus,
-    disabled,
-    ...props
-}) => {
+const Button = React.forwardRef((
+    {
+        className,
+        tag: Component,
+        type,
+        lg,
+        md,
+        sm,
+        xs,
+        btnSize, // deprecated
+        size,
+        btnStyle, // deprecated
+        variant,
+        outline,
+        block,
+        active,
+        hover,
+        focus,
+        disabled,
+        ...props
+    },
+    ref,
+) => {
     if (btnSize !== undefined) {
         const deprecatedPropName = 'btnSize';
-        const remappedPropName = 'lg|md|sm|xs';
+        const remappedPropName = 'size';
 
         deprecate({ deprecatedPropName, remappedPropName });
 
-        lg = (btnSize === 'large' || btnSize === 'lg');
-        md = (btnSize === 'medium' || btnSize === 'md');
-        sm = (btnSize === 'small' || btnSize === 'sm');
-        xs = (btnSize === 'extra-small' || btnSize === 'xs');
+        if (size === undefined) {
+            size = btnSize;
+        }
+    }
+
+    if (btnStyle !== undefined) {
+        const deprecatedPropName = 'btnStyle';
+        const remappedPropName = 'variant';
+
+        deprecate({ deprecatedPropName, remappedPropName });
+
+        if (variant === undefined) {
+            variant = btnStyle;
+        }
+    }
+
+    if (size !== undefined) {
+        lg = (size === 'large' || size === 'lg');
+        md = (size === 'medium' || size === 'md');
+        sm = (size === 'small' || size === 'sm');
+        xs = (size === 'extra-small' || size === 'xs');
     }
 
     if (lg) {
@@ -63,25 +85,25 @@ const Button = ({
         [styles.btnMd]: md,
         [styles.btnSm]: sm,
         [styles.btnXs]: xs,
-        [styles.btnDefault]: btnStyle === 'default' && !outline,
-        [styles.btnPrimary]: btnStyle === 'primary' && !outline,
-        [styles.btnSecondary]: btnStyle === 'secondary' && !outline,
-        [styles.btnDanger]: btnStyle === 'danger' && !outline,
-        [styles.btnWarning]: btnStyle === 'warning' && !outline,
-        [styles.btnInfo]: btnStyle === 'info' && !outline,
-        [styles.btnSuccess]: btnStyle === 'success' && !outline,
-        [styles.btnLight]: btnStyle === 'light' && !outline,
-        [styles.btnDark]: btnStyle === 'dark' && !outline,
-        [styles.btnLink]: btnStyle === 'link',
-        [styles.btnOutlineDefault]: btnStyle === 'default' && outline,
-        [styles.btnOutlinePrimary]: btnStyle === 'primary' && outline,
-        [styles.btnOutlineSecondary]: btnStyle === 'secondary' && outline,
-        [styles.btnOutlineDanger]: btnStyle === 'danger' && outline,
-        [styles.btnOutlineWarning]: btnStyle === 'warning' && outline,
-        [styles.btnOutlineInfo]: btnStyle === 'info' && outline,
-        [styles.btnOutlineSuccess]: btnStyle === 'success' && outline,
-        [styles.btnOutlineLight]: btnStyle === 'light' && outline,
-        [styles.btnOutlineDark]: btnStyle === 'dark' && outline,
+        [styles.btnDefault]: variant === 'default' && !outline,
+        [styles.btnPrimary]: variant === 'primary' && !outline,
+        [styles.btnSecondary]: variant === 'secondary' && !outline,
+        [styles.btnDanger]: variant === 'danger' && !outline,
+        [styles.btnWarning]: variant === 'warning' && !outline,
+        [styles.btnInfo]: variant === 'info' && !outline,
+        [styles.btnSuccess]: variant === 'success' && !outline,
+        [styles.btnLight]: variant === 'light' && !outline,
+        [styles.btnDark]: variant === 'dark' && !outline,
+        [styles.btnLink]: variant === 'link',
+        [styles.btnOutlineDefault]: variant === 'default' && outline,
+        [styles.btnOutlinePrimary]: variant === 'primary' && outline,
+        [styles.btnOutlineSecondary]: variant === 'secondary' && outline,
+        [styles.btnOutlineDanger]: variant === 'danger' && outline,
+        [styles.btnOutlineWarning]: variant === 'warning' && outline,
+        [styles.btnOutlineInfo]: variant === 'info' && outline,
+        [styles.btnOutlineSuccess]: variant === 'success' && outline,
+        [styles.btnOutlineLight]: variant === 'light' && outline,
+        [styles.btnOutlineDark]: variant === 'dark' && outline,
         [styles.btnBlock]: block,
         [styles.hover]: hover,
         [styles.active]: active,
@@ -90,13 +112,14 @@ const Button = ({
 
     return (
         <Component
-            {...props}
+            ref={ref}
             type={type}
             className={cx(className, classes)}
             disabled={disabled}
+            {...props}
         />
     );
-};
+});
 
 Button.propTypes = {
     // Pass in a component to override default button element.
@@ -118,9 +141,6 @@ Button.propTypes = {
         'submit'
     ]),
 
-    // [deprecated] Component size variations.
-    btnSize: PropTypes.oneOf(btnSizes),
-
     // Large button.
     lg: PropTypes.bool,
 
@@ -133,8 +153,11 @@ Button.propTypes = {
     // Extra small button.
     xs: PropTypes.bool,
 
+    // Component size variations.
+    size: PropTypes.oneOf(sizes),
+
     // Component visual or contextual style variants.
-    btnStyle: PropTypes.oneOf(btnStyles),
+    variant: PropTypes.oneOf(variants),
 
     // Specifies whether to remove background image and color on a button.
     outline: PropTypes.bool,
@@ -158,7 +181,7 @@ Button.propTypes = {
 Button.defaultProps = {
     tag: 'button',
     type: 'button',
-    btnStyle: 'default',
+    variant: 'default',
     outline: false,
     block: false,
     active: false,

diff --git a/src/ButtonGroup.jsx b/src/ButtonGroup.jsx
@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 import React, { cloneElement } from 'react';
 import Button from './Button';
 import {
-    btnSizes, // deprecated
-    btnStyles
+    sizes,
+    variants,
 } from './constants';
 import deprecate from './deprecate';
 import styles from './styles/index.styl';
@@ -14,28 +14,51 @@ const getComponentType = (Component) => (Component ? (<Component />).type : unde
 /**
  * @example ../examples/ButtonGroup.md
  */
-const ButtonGroup = ({
-    btnSize, // deprecated
-    lg,
-    md,
-    sm,
-    xs,
-    btnStyle,
-    vertical,
-    children,
-    className,
-    ...props
-}) => {
+const ButtonGroup = React.forwardRef((
+    {
+        tag: Component,
+        lg,
+        md,
+        sm,
+        xs,
+        btnSize, // deprecated
+        size,
+        btnStyle, // deprecated
+        variant,
+        vertical,
+        children,
+        className,
+        ...props
+    },
+    ref,
+) => {
     if (btnSize !== undefined) {
         const deprecatedPropName = 'btnSize';
-        const remappedPropName = 'lg|md|sm|xs';
+        const remappedPropName = 'size';
 
         deprecate({ deprecatedPropName, remappedPropName });
 
-        lg = (btnSize === 'large' || btnSize === 'lg');
-        md = (btnSize === 'medium' || btnSize === 'md');
-        sm = (btnSize === 'small' || btnSize === 'sm');
-        xs = (btnSize === 'extra-small' || btnSize === 'xs');
+        if (size === undefined) {
+            size = btnSize;
+        }
+    }
+
+    if (btnStyle !== undefined) {
+        const deprecatedPropName = 'btnStyle';
+        const remappedPropName = 'variant';
+
+        deprecate({ deprecatedPropName, remappedPropName });
+
+        if (variant === undefined) {
+            variant = btnStyle;
+        }
+    }
+
+    if (size !== undefined) {
+        lg = (size === 'large' || size === 'lg');
+        md = (size === 'medium' || size === 'md');
+        sm = (size === 'small' || size === 'sm');
+        xs = (size === 'extra-small' || size === 'xs');
     }
 
     if (lg) {
@@ -64,31 +87,41 @@ const ButtonGroup = ({
     };
 
     return (
-        <div
-            {...props}
+        <Component
+            ref={ref}
             className={cx(className, classes)}
+            {...props}
         >
             {React.Children.map(children, child => {
                 if (React.isValidElement(child) && child.type === getComponentType(Button)) {
                     const childProps = {};
-                    if (btnSizes.indexOf(btnSize) >= 0) {
-                        childProps.btnSize = btnSize;
+                    if (sizes.indexOf(size) >= 0) {
+                        childProps.size = size;
                     }
-                    if (btnStyles.indexOf(btnStyle) >= 0) {
-                        childProps.btnStyle = btnStyle;
+                    if (variants.indexOf(variant) >= 0) {
+                        childProps.variant = variant;
                     }
                     return cloneElement(child, childProps);
                 }
 
                 return child;
             })}
-        </div>
+        </Component>
     );
-};
+});
 
 ButtonGroup.propTypes = {
-    // [deprecated] Component size variations.
-    btnSize: PropTypes.oneOf(btnSizes),
+    // Pass in a component to override default button element.
+    tag: PropTypes.oneOfType([
+        PropTypes.func,
+        PropTypes.string,
+        PropTypes.shape({ $$typeof: PropTypes.symbol, render: PropTypes.func }),
+        PropTypes.arrayOf(PropTypes.oneOfType([
+            PropTypes.func,
+            PropTypes.string,
+            PropTypes.shape({ $$typeof: PropTypes.symbol, render: PropTypes.func }),
+        ]))
+    ]),
 
     // Large button group.
     lg: PropTypes.bool,
@@ -102,14 +135,18 @@ ButtonGroup.propTypes = {
     // Extra small button group.
     xs: PropTypes.bool,
 
+    // Component size variations.
+    size: PropTypes.oneOf(sizes),
+
     // Component visual or contextual style variants.
-    btnStyle: PropTypes.oneOf(btnStyles),
+    variant: PropTypes.oneOf(variants),
 
     // Specifies whether a button group should be aligned vertically or not.
     vertical: PropTypes.bool,
 };
 
 ButtonGroup.defaultProps = {
+    tag: 'div',
     vertical: false,
 };
 

diff --git a/src/ButtonToolbar.jsx b/src/ButtonToolbar.jsx
@@ -5,11 +5,12 @@ import styles from './styles/index.styl';
 /**
  * @example ../examples/ButtonToolbar.md
  */
-const ButtonToolbar = ({ className, ...props }) => (
+const ButtonToolbar = React.forwardRef(({ className, ...props }, ref) => (
     <div
-        {...props}
+        ref={ref}
         className={cx(className, styles.btnToolbar)}
+        {...props}
     />
-);
+));
 
 export default ButtonToolbar;
diff --git a/src/constants.js b/src/constants.js
@@ -1,15 +1,15 @@
-export const btnSizes = [
+export const sizes = [
     'lg',
     'md',
     'sm',
     'xs',
     'large',
     'medium',
     'small',
-    'extra-small'
+    'extra-small',
 ];
 
-export const btnStyles = [
+export const variants = [
     'default',
     'primary',
     'secondary',
@@ -19,5 +19,5 @@ export const btnStyles = [
     'info',
     'light',
     'dark',
-    'link'
+    'link',
 ];