Merge pull request #685 from Adslot/680-merge-spinner-button-into-button

Breaking: merge SpinnerButton into Button, and remove SpinnerButton

docs/components/Layout/index.jsx

@@ -10,7 +10,6 @@ import SearchResultCard from '../SearchResultCard';
 import ButtonExample from '../../examples/ButtonExample';
 import AlertInputExample from '../../examples/AlertInputExample';
 import FilePickerExample from '../../examples/FilePickerExample';
-import SpinnerButtonExample from '../../examples/SpinnerButtonExample';
 import TextareaExample from '../../examples/TextareaExample';
 import TextEllipsisExample from '../../examples/TextEllipsisExample';
 import AlertExample from '../../examples/AlertExample';
@@ -69,7 +68,6 @@ ContentArea.propTypes = SidebarArea.propTypes;
 const componentsBySection = {
   'form-elements': [
     'button',
-    'spinner-button',
     'alert-input',
     'file-picker',
     'textarea',
@@ -170,7 +168,6 @@ class PageLayout extends React.Component {
           <ContentArea>
             <PageTitle title="Form Elements" />
             <ButtonExample />
-            <SpinnerButtonExample />
             <AlertInputExample />
             <FilePickerExample />
             <TextareaExample />

docs/examples/ButtonExample.jsx

@@ -92,6 +92,7 @@ export const exampleProps = {
       propType: 'inverse',
       type: 'bool',
       note: 'Renders an inverse button. Can be used with bsStyle to create primary inverse buttons.',
+      defaultValue: 'false',
     },
     {
       propType: 'reason',
@@ -112,6 +113,12 @@ export const exampleProps = {
         </span>
       ),
     },
+    {
+      propType: 'isLoading',
+      type: 'bool',
+      defaultValue: 'false',
+      note: 'set this to true to display Spinner and disable the button',
+    },
   ],
 };
 

src/components/adslot-ui/index.js

@@ -11,7 +11,6 @@ import PagedGrid from 'adslot-ui/PagedGrid';
 import Panel from 'adslot-ui/Panel';
 import Search from 'adslot-ui/Search';
 import SearchBar from 'adslot-ui/SearchBar';
-import SpinnerButton from 'adslot-ui/SpinnerButton';
 import SplitPane from 'adslot-ui/SplitPane';
 import Textarea from 'adslot-ui/Textarea';
 import TextEllipsis from 'adslot-ui/TextEllipsis';
@@ -41,7 +40,6 @@ export {
   Panel,
   Search,
   SearchBar,
-  SpinnerButton,
   SplitPane,
   Textarea,
   TextEllipsis,

src/components/third-party/bootstrap/Button/index.jsx

@@ -7,9 +7,23 @@ import classNames from 'classnames';
 import BootstrapButton from 'react-bootstrap/lib/Button';
 import BootstrapPopover from 'react-bootstrap/lib/Popover';
 import BootstrapOverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
+import Spinner from 'alexandria/Spinner';
 import { expandDts } from 'lib/utils';
+import './styles.scss';
 
 class Button extends React.PureComponent {
+  renderSpinner() {
+    if (this.props.isLoading) {
+      return (
+        <div className="spinner-container">
+          <Spinner size={_.includes(['lg', 'large'], this.props.bsSize) ? 'medium' : 'small'} />
+        </div>
+      );
+    }
+
+    return null;
+  }
+
   renderWithReason() {
     const popover = (
       <BootstrapPopover id="btn-reason" className="btn-popover-reason">
@@ -24,15 +38,20 @@ class Button extends React.PureComponent {
   }
 
   renderButton() {
-    const { inverse, children, dts, className } = this.props;
+    const { inverse, children, dts, className, isLoading, disabled } = this.props;
+    const classes = classNames('button-component', className, {
+      'btn-inverse': inverse && !/btn-inverse/.test(className),
+    });
 
     return (
       <BootstrapButton
         {..._.pick(this.props, _.keys(BootstrapButton.propTypes))}
-        className={classNames(className, { 'btn-inverse': inverse && !/btn-inverse/.test(className) })}
+        disabled={isLoading || disabled}
+        className={classes}
         {...expandDts(dts)}
       >
-        {children}
+        {this.renderSpinner()}
+        <div className={isLoading ? 'button-component-children-container' : null}>{children}</div>
       </BootstrapButton>
     );
   }
@@ -48,12 +67,14 @@ Button.propTypes = _.assign(
     inverse: PropTypes.bool,
     reason: PropTypes.string,
     dts: PropTypes.string,
+    isLoading: PropTypes.bool,
   },
   BootstrapButton.propTypes
 );
 
 Button.defaultProps = {
   inverse: false,
+  isLoading: false,
 };
 
 export default Button;

src/components/third-party/bootstrap/Button/index.spec.jsx

@@ -1,8 +1,9 @@
 import React from 'react';
 import { shallow } from 'enzyme';
-import { Button } from 'third-party';
 import OverlayTrigger from 'react-bootstrap/lib/OverlayTrigger';
 import BootstrapButton from 'react-bootstrap/lib/Button';
+import { Button } from 'third-party';
+import Spinner from 'alexandria/Spinner';
 
 describe('ButtonComponent', () => {
   it('should render Bootstrap Button', () => {
@@ -12,12 +13,12 @@ describe('ButtonComponent', () => {
 
   it('should support legacy classname btn-inverse for non-breaking change', () => {
     const element = shallow(<Button className="btn-inverse">Test</Button>);
-    expect(element.prop('className')).to.equal('btn-inverse');
+    expect(element.prop('className')).to.equal('button-component btn-inverse');
   });
 
   it('should support className prop', () => {
     const element = shallow(<Button className="all the-classes">Test</Button>);
-    expect(element.prop('className')).to.equal('all the-classes');
+    expect(element.prop('className')).to.equal('button-component all the-classes');
   });
 
   it('should not duplicate btn-inverse class if both legacy and new are used', () => {
@@ -26,12 +27,12 @@ describe('ButtonComponent', () => {
         Test
       </Button>
     );
-    expect(element.prop('className')).to.equal('btn-inverse');
+    expect(element.prop('className')).to.equal('button-component btn-inverse');
   });
 
   it('should render inverse button with btn-inverse class', () => {
     const element = shallow(<Button inverse>Test</Button>);
-    expect(element.prop('className')).to.equal('btn-inverse');
+    expect(element.prop('className')).to.equal('button-component btn-inverse');
   });
 
   it('should support data-test-selectors', () => {
@@ -54,4 +55,19 @@ describe('ButtonComponent', () => {
     expect(overlay).to.have.length(1);
     expect(shallow(overlay.prop('overlay')).text()).to.eql('Because');
   });
+
+  it('should render Spinner if isLoading is true', () => {
+    const element = shallow(<Button isLoading>Spinner</Button>);
+    expect(element.find(Spinner)).to.have.length(1);
+  });
+
+  it('should only allow bsSize medium or small on Spinner', () => {
+    const element = shallow(
+      <Button isLoading bsSize="lg">
+        Spinner
+      </Button>
+    );
+    const spinnerEl = element.find(Spinner);
+    expect(spinnerEl.prop('size')).to.equal('medium');
+  });
 });

src/components/adslot-ui/SpinnerButton/styles.scss → src/components/third-party/bootstrap/Button/styles.scss

@@ -1,4 +1,4 @@
-.spinner-button-component {
+.button-component {
   position: relative;
 
   &-children-container {

src/dist-entry/core.js

@@ -61,7 +61,6 @@ import {
   Panel,
   Search,
   SearchBar,
-  SpinnerButton,
   SplitPane,
   Textarea,
   TextEllipsis,
@@ -117,7 +116,6 @@ export {
   Select,
   Slicey,
   Spinner,
-  SpinnerButton,
   SplitPane,
   Statistic,
   SvgSymbol,