Add KuiLoadingButtonIcon and isLoading prop for KuiButton.

ui_framework/components/button/button.js

@@ -1,15 +1,16 @@
 import React, {
-  Component,
   PropTypes,
 } from 'react';
 
 import classNames from 'classnames';
 import keyMirror from 'keymirror';
 
+import { KuiLoadingButtonIcon } from './button_icon';
+
 const KuiButton = props => {
   if (props.isSubmit) {
     // input is a void element tag and can't have children.
-    if (typeof props.children !== 'string' || props.icon || props.rightIcon) {
+    if (typeof props.children !== 'string' || props.icon) {
       throw new Error(
         `KuiButton with isSubmit prop set to true can only accept string children, and can't
         display icons. This is because input is a void element and can't contain children.`
@@ -29,8 +30,13 @@ const KuiButton = props => {
     props.onClick(props.data);
   }
 
+  const icon =
+    props.isLoading
+    ? <KuiLoadingButtonIcon />
+    : props.icon;
+
   const className = classNames('kuiButton', props.className, {
-    'kuiButton--iconText': props.icon || props.iconRight,
+    'kuiButton--iconText': icon,
   });
 
   let wrappedChildren;
@@ -53,11 +59,16 @@ const KuiButton = props => {
   const children =
     props.isSubmit
     ? null
-    : (
+    : props.isIconOnRight
+    ? (
+      <span>
+        {wrappedChildren}
+        {icon}
+      </span>
+    ) : (
       <span>
-        {props.icon}
+        {icon}
         {wrappedChildren}
-        {props.iconRight}
       </span>
     );
 
@@ -77,14 +88,14 @@ KuiButton.propTypes = {
   testSubject: PropTypes.string,
   data: PropTypes.any,
   icon: PropTypes.node,
-  iconRight: PropTypes.node,
+  isIconOnRight: PropTypes.bool,
   children: PropTypes.node,
   isSubmit: PropTypes.bool,
   href: PropTypes.string,
   target: PropTypes.string,
   onClick: PropTypes.func,
   isDisabled: PropTypes.bool,
-  hasIcon: PropTypes.bool,
+  isLoading: PropTypes.bool,
   className: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.array,

ui_framework/components/button/button_icon.js

@@ -24,11 +24,13 @@ const KuiCreateButtonIcon = () => <KuiButtonIcon className="fa-plus" />;
 const KuiDeleteButtonIcon = () => <KuiButtonIcon className="fa-trash" />;
 const KuiPreviousButtonIcon = () => <KuiButtonIcon className="fa-chevron-left" />;
 const KuiNextButtonIcon = () => <KuiButtonIcon className="fa-chevron-right" />;
+const KuiLoadingButtonIcon = () => <KuiButtonIcon className="fa-spinner fa-spin" />;
 
 export {
   KuiButtonIcon,
   KuiCreateButtonIcon,
   KuiDeleteButtonIcon,
   KuiPreviousButtonIcon,
   KuiNextButtonIcon,
+  KuiLoadingButtonIcon,
 };

ui_framework/doc_site/src/views/button/button_example.jsx

@@ -24,6 +24,9 @@ const primarySource = require('!!raw!./button_primary');
 import Danger from './button_danger';
 const dangerSource = require('!!raw!./button_danger');
 
+import Loading from './button_loading';
+const loadingSource = require('!!raw!./button_loading');
+
 import WithIcon from './button_with_icon';
 const withIconSource = require('!!raw!./button_with_icon');
 
@@ -106,6 +109,18 @@ export default props => (
       </GuideDemo>
     </GuideSection>
 
+    <GuideSection
+      title="Loading Button"
+      source={[{
+        type: GuideSectionTypes.JS,
+        code: loadingSource,
+      }]}
+    >
+      <GuideDemo>
+        <Loading />
+      </GuideDemo>
+    </GuideSection>
+
     <GuideSection
       title="Button with icon"
       source={[{

ui_framework/doc_site/src/views/button/button_group_united.js

@@ -25,7 +25,7 @@ export default () => (
 
     <KuiButtonGroup isUnited>
       <KuiBasicButton icon={<KuiPreviousButtonIcon />}/>
-      <KuiBasicButton iconRight={<KuiNextButtonIcon />}/>
+      <KuiBasicButton icon={<KuiNextButtonIcon />}/>
     </KuiButtonGroup>
   </div>
 );

ui_framework/doc_site/src/views/button/button_loading.js

@@ -0,0 +1,58 @@
+import React, {
+  Component,
+} from 'react';
+
+import {
+  KuiCreateButtonIcon,
+  KuiPrimaryButton,
+  KuiBasicButton,
+} from '../../../../components';
+
+export default class LoadingButton extends Component {
+  constructor() {
+    super();
+
+    this.state = {
+      isLoading: false,
+    };
+
+    this.onClick = this.onClick.bind(this);
+  }
+
+  onClick() {
+    this.setState({
+      isLoading: true,
+    });
+
+    setTimeout(() => {
+      this.setState({
+        isLoading: false,
+      });
+    }, 3000);
+  }
+
+  render() {
+    return (
+      <div>
+        <KuiBasicButton
+          onClick={this.onClick}
+          isLoading={this.state.isLoading}
+          isDisabled={this.state.isLoading}
+        >
+          {this.state.isLoading ? 'Loading...' : 'Load more'}
+        </KuiBasicButton>
+
+        <br />
+
+        <KuiPrimaryButton
+          onClick={this.onClick}
+          icon={<KuiCreateButtonIcon />}
+          isLoading={this.state.isLoading}
+          isDisabled={this.state.isLoading}
+        >
+          {this.state.isLoading ? 'Creating...' : 'Create'}
+        </KuiPrimaryButton>
+      </div>
+    );
+  }
+}

ui_framework/doc_site/src/views/button/button_with_icon.js

@@ -8,6 +8,7 @@ import {
   KuiDeleteButtonIcon,
   KuiNextButtonIcon,
   KuiPreviousButtonIcon,
+  KuiLoadingButtonIcon,
   KuiPrimaryButton,
 } from '../../../../components';
 
@@ -31,12 +32,18 @@ export default () => (
 
     <br />
 
-    <KuiBasicButton iconRight={<KuiNextButtonIcon />}>
+    <KuiBasicButton icon={<KuiNextButtonIcon />} isIconOnRight>
       Next
     </KuiBasicButton>
 
     <br />
 
+    <KuiBasicButton icon={<KuiLoadingButtonIcon />}>
+      Loading
+    </KuiBasicButton>
+
+    <br />
+
     <KuiBasicButton icon={<KuiButtonIcon className="fa-plane" />}/>
   </div>
 );