[EuiButtonIcon] Add isLoading prop (#5668)

* Add `isLoading` prop to EuiButtonIcon * Added `isLoading` test * CL entry * Adding border width * Reusing variable * Removing unncessary "Non-Null Assertion Operator"
elastic · Mar 2, 2022 · 83a7f51 · 83a7f51
1 parent fffefd6
commit 83a7f51
Show file tree

Hide file tree

Showing 13 changed files with 60 additions and 44 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -4,6 +4,8 @@
 - Added `readOnly` prop to `EuiMarkdownEditor` ([#5627](https://github.com/elastic/eui/pull/5627))
 - Added support for supplying `breadcrumbs` and `breadcrumbProps` directly to `EuiPageHeader` ([#5634](https://github.com/elastic/eui/pull/5634))
 - Extended props of `EuiBreadcrumb` to include `HTMLElement` and `color` inherited from `EuiLink` ([#5634](https://github.com/elastic/eui/pull/5634))
+- Added `"xxl"` size to `EuiLoadingSpinner` ([#5668](https://github.com/elastic/eui/pull/5668))
+- Added `isLoading` prop to `EuiButtonIcon` ([#5668](https://github.com/elastic/eui/pull/5668))
 - Updated `EuiDataGrid` to allow setting individual cell `isExpandable` state via `setCellProps` ([#5667](https://github.com/elastic/eui/pull/5667))
 
 **Bug fixes**

diff --git a/src-docs/src/views/loading/loading_spinner.tsx b/src-docs/src/views/loading/loading_spinner.tsx
@@ -11,5 +11,7 @@ export default () => (
     <EuiLoadingSpinner size="l" />
     &nbsp;&nbsp;
     <EuiLoadingSpinner size="xl" />
+    &nbsp;&nbsp;
+    <EuiLoadingSpinner size="xxl" />
   </div>
 );
diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -32,7 +32,6 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
           aria-expanded={false}
           aria-labelledby="generated-id"
           className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiAccordion__iconButton"
-          disabled={false}
           onClick={[Function]}
           tabIndex={-1}
           type="button"
@@ -122,7 +121,6 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
           aria-expanded={true}
           aria-labelledby="generated-id"
           className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen"
-          disabled={false}
           onClick={[Function]}
           tabIndex={-1}
           type="button"
@@ -212,7 +210,6 @@ exports[`EuiAccordion behavior opens when div is clicked if element is a div 1`]
           aria-expanded={true}
           aria-labelledby="generated-id"
           className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiAccordion__iconButton euiAccordion__iconButton-isOpen"
-          disabled={false}
           onClick={[Function]}
           tabIndex={-1}
           type="button"

diff --git a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
@@ -246,6 +246,19 @@ exports[`EuiButtonIcon props isDisabled renders a button even when href is defin
 </button>
 `;
 
+exports[`EuiButtonIcon props isLoading is rendered 1`] = `
+<button
+  aria-label="button"
+  class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--primary euiButtonIcon--empty euiButtonIcon--xSmall"
+  disabled=""
+  type="button"
+>
+  <span
+    class="euiLoadingSpinner euiLoadingSpinner--medium"
+  />
+</button>
+`;
+
 exports[`EuiButtonIcon props isSelected is rendered as false 1`] = `
 <button
   aria-label="button"

diff --git a/src/components/button/button_icon/button_icon.test.tsx b/src/components/button/button_icon/button_icon.test.tsx
@@ -164,5 +164,15 @@ describe('EuiButtonIcon', () => {
         expect(handler.mock.calls.length).toEqual(1);
       });
     });
+
+    describe('isLoading', () => {
+      it('is rendered', () => {
+        const component = render(
+          <EuiButtonIcon aria-label="button" iconType="user" isLoading />
+        );
+
+        expect(component).toMatchSnapshot();
+      });
+    });
   });
 });
diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx
@@ -25,6 +25,8 @@ import {
 
 import { IconType, IconSize, EuiIcon } from '../../icon';
 
+import { EuiLoadingSpinner } from '../../loading';
+
 import { ButtonColor } from '../button';
 
 import { validateHref } from '../../../services/security/href_validator';
@@ -71,6 +73,10 @@ export interface EuiButtonIconProps extends CommonProps {
    * `empty` (default) is equivalent to an EuiButtonEmpty
    */
   display?: EuiButtonIconDisplay;
+  /**
+   * Disables the button and changes the icon to a loading spinner
+   */
+  isLoading?: boolean;
 }
 
 export type EuiButtonIconPropsForAnchor = {
@@ -133,10 +139,11 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
   size = 'xs',
   buttonRef,
   isSelected,
+  isLoading,
   ...rest
 }) => {
   const isHrefValid = !href || validateHref(href);
-  const isDisabled = _isDisabled || disabled || !isHrefValid;
+  const isDisabled = _isDisabled || disabled || !isHrefValid || isLoading;
 
   const ariaHidden = rest['aria-hidden'];
   const isAriaHidden = ariaHidden === 'true' || ariaHidden === true;
@@ -161,7 +168,7 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
   // Add an icon to the button if one exists.
   let buttonIcon;
 
-  if (iconType) {
+  if (iconType && !isLoading) {
     buttonIcon = (
       <EuiIcon
         className="euiButtonIcon__icon"
@@ -173,6 +180,15 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
     );
   }
 
+  // `original` size doesn't exist in `EuiLoadingSpinner`
+  // when the `iconSize` is `original` we don't pass any size to the `EuiLoadingSpinner`
+  // so it gets the default size
+  const loadingSize = iconSize === 'original' ? undefined : iconSize;
+
+  if (iconType && isLoading) {
+    buttonIcon = <EuiLoadingSpinner size={loadingSize} />;
+  }
+
   // <a> elements don't respect the `disabled` attribute. So if we're disabled, we'll just pretend
   // this is a button and piggyback off its disabled styles.
   if (href && !isDisabled) {

diff --git a/src/components/code/__snapshots__/code_block.test.tsx.snap b/src/components/code/__snapshots__/code_block.test.tsx.snap
@@ -110,7 +110,6 @@ exports[`EuiCodeBlock full screen displays content in fullscreen mode 1`] = `
           <button
             aria-label="Collapse"
             className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiCodeBlock__fullScreenButton"
-            disabled={false}
             onClick={[Function]}
             type="button"
           >
@@ -449,7 +448,6 @@ console.log(some);"
                     <button
                       aria-label="Copy"
                       className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                      disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}

diff --git a/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap b/src/components/datagrid/controls/__snapshots__/column_sorting.test.tsx.snap
@@ -881,7 +881,6 @@ exports[`useDataGridColumnSorting columnSorting renders a toolbar button/popover
                                                                               <button
                                                                                 aria-label="Remove Column A from data grid sort"
                                                                                 className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGridColumnSorting__button"
-                                                                                disabled={false}
                                                                                 onClick={[Function]}
                                                                                 type="button"
                                                                               >

diff --git a/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap b/src/components/loading/__snapshots__/loading_spinner.test.tsx.snap
@@ -31,3 +31,9 @@ exports[`EuiLoadingSpinner size xl is rendered 1`] = `
   class="euiLoadingSpinner euiLoadingSpinner--xLarge"
 />
 `;
+
+exports[`EuiLoadingSpinner size xxl is rendered 1`] = `
+<span
+  class="euiLoadingSpinner euiLoadingSpinner--xxLarge"
+/>
+`;
diff --git a/src/components/loading/_loading_spinner.scss b/src/components/loading/_loading_spinner.scss
@@ -13,28 +13,17 @@
   }
 }
 
-.euiLoadingSpinner--small {
-  width: $euiSizeM;
-  height: $euiSizeM;
-  border-width: 1px;
+@each $name, $size in $euiLoadingSpinnerSizes {
+  .euiLoadingSpinner--#{$name} {
+    @include size($size);
+  }
 }
 
+.euiLoadingSpinner--small,
 .euiLoadingSpinner--medium {
-  width: $euiSize;
-  height: $euiSize;
   border-width: 1px;
 }
 
-.euiLoadingSpinner--large {
-  width: $euiSizeL;
-  height: $euiSizeL;
-}
-
-.euiLoadingSpinner--xLarge {
-  width: $euiSizeXL;
-  height: $euiSizeXL;
-}
-
 @keyframes euiLoadingSpinner {
   from {
     transform: rotate(0deg);

diff --git a/src/components/loading/_variables.scss b/src/components/loading/_variables.scss
@@ -1,2 +1,5 @@
 $euiGradientStartStop: tintOrShade($euiColorLightShade, 65%, 12%);
 $euiGradientMiddle: tintOrShade($euiColorLightShade, 80%, 24%);
+
+// loading spinners are used in button icons for `isLoading` states so we want to match the icon sizes
+$euiLoadingSpinnerSizes: $euiIconSizes;
diff --git a/src/components/loading/loading_spinner.tsx b/src/components/loading/loading_spinner.tsx
@@ -15,6 +15,7 @@ const sizeToClassNameMap = {
   m: 'euiLoadingSpinner--medium',
   l: 'euiLoadingSpinner--large',
   xl: 'euiLoadingSpinner--xLarge',
+  xxl: 'euiLoadingSpinner--xxLarge',
 };
 
 export const SIZES = keysOf(sizeToClassNameMap);

diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
@@ -224,7 +224,6 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
                 <button
                   aria-label="Bold"
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -273,7 +272,6 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
                 <button
                   aria-label="Italic"
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -325,7 +323,6 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
                 <button
                   aria-label="Unordered list"
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -374,7 +371,6 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
                 <button
                   aria-label="Ordered list"
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -423,7 +419,6 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
                 <button
                   aria-label="Task list"
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -475,7 +470,6 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
                 <button
                   aria-label="Quote"
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -524,7 +518,6 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
                 <button
                   aria-label="Code"
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -573,7 +566,6 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
                 <button
                   aria-label="Link"
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -764,7 +756,6 @@ exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1
                       <button
                         aria-label="Show markdown help"
                         className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small euiMarkdownEditorFooter__helpButton"
-                        disabled={false}
                         onClick={[Function]}
                         title="Syntax help"
                         type="button"
@@ -1582,7 +1573,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = `
                 <button
                   aria-label="Bold"
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -1631,7 +1621,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = `
                 <button
                   aria-label="Italic"
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -1683,7 +1672,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = `
                 <button
                   aria-label="Unordered list"
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -1732,7 +1720,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = `
                 <button
                   aria-label="Ordered list"
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -1781,7 +1768,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = `
                 <button
                   aria-label="Task list"
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -1833,7 +1819,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = `
                 <button
                   aria-label="Quote"
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -1882,7 +1867,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = `
                 <button
                   aria-label="Code"
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -1931,7 +1915,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = `
                 <button
                   aria-label="Link"
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -1983,7 +1966,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = `
                 <button
                   aria-label="Tooltip"
                   className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
-                  disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
                   onFocus={[Function]}
@@ -2204,7 +2186,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = `
                     <button
                       aria-label="Show markdown help"
                       className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--small euiMarkdownEditorFooter__helpButton"
-                      disabled={false}
                       onBlur={[Function]}
                       onClick={[Function]}
                       onFocus={[Function]}
@@ -3109,7 +3090,6 @@ exports[`EuiMarkdownEditor modal with help syntax is rendered 1`] = `
                                       <button
                                         aria-label="Closes this modal window"
                                         className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiModal__closeIcon"
-                                        disabled={false}
                                         onClick={[Function]}
                                         type="button"
                                       >