add isLoading prop to EuiButtonEmpty (#768)

* add isLoading prop to EuiButtonEmpty * change log
elastic · May 3, 2018 · bd21c3b · bd21c3b
1 parent c4735a1
commit bd21c3b
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,7 @@
 
 - Added `EuiDescribedFormGroup` component, a wrapper around `EuiFormRow`(s) ([#707](https://github.com/elastic/eui/pull/707))
 - Added `describedByIds` prop to `EuiFormRow` to help with accessibility ([#707](https://github.com/elastic/eui/pull/707))
+- Added `isLoading` prop to `EuiButtonEmpty` ([#768](https://github.com/elastic/eui/pull/768))
 
 ## [`0.0.45`](https://github.com/elastic/eui/tree/v0.0.45)
 

diff --git a/src-docs/src/views/button/button_empty.js b/src-docs/src/views/button/button_empty.js
@@ -266,6 +266,27 @@ export default () => (
       </EuiFlexItem>
     </EuiFlexGroup>
 
+    <EuiFlexGroup gutterSize="s" alignItems="center">
+      <EuiFlexItem grow={false}>
+        <EuiButtonEmpty
+          onClick={() => window.alert('Button clicked')}
+          isLoading
+        >
+          Loading
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+
+      <EuiFlexItem grow={false}>
+        <EuiButtonEmpty
+          onClick={() => window.alert('Button clicked')}
+          isLoading
+          iconSide="right"
+        >
+          Loading
+        </EuiButtonEmpty>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+
     <EuiFlexGroup gutterSize="s" alignItems="center">
       <EuiFlexItem grow={false}>
         <EuiButtonEmpty

diff --git a/src/components/button/button_empty/button_empty.js b/src/components/button/button_empty/button_empty.js
@@ -2,6 +2,10 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import {
+  EuiLoadingSpinner
+} from '../../loading';
+
 import { getSecureRelForTarget } from '../../../services';
 
 import {
@@ -50,6 +54,7 @@ export const EuiButtonEmpty = ({
   size,
   flush,
   isDisabled,
+  isLoading,
   href,
   target,
   rel,
@@ -58,6 +63,9 @@ export const EuiButtonEmpty = ({
   ...rest
 }) => {
 
+  // If in the loading state, force disabled to true
+  isDisabled = isLoading ? true : isDisabled;
+
   const classes = classNames(
     'euiButtonEmpty',
     colorToClassNameMap[color],
@@ -70,7 +78,14 @@ export const EuiButtonEmpty = ({
   // Add an icon to the button if one exists.
   let buttonIcon;
 
-  if (iconType) {
+  if (isLoading) {
+    buttonIcon = (
+      <EuiLoadingSpinner
+        className="euiButton__spinner"
+        size="m"
+      />
+    );
+  } else if (iconType) {
     buttonIcon = (
       <EuiIcon
         className="euiButtonEmpty__icon"
@@ -130,6 +145,12 @@ EuiButtonEmpty.propTypes = {
   target: PropTypes.string,
   rel: PropTypes.string,
   onClick: PropTypes.func,
+
+  /**
+   * Adds/swaps for loading spinner & disables
+   */
+  isLoading: PropTypes.bool,
+
   type: PropTypes.string,
   buttonRef: PropTypes.func,
 };