From cfba537dd0851687bd14d8ef41ffecda46b3455a Mon Sep 17 00:00:00 2001
From: Brooke Scarlett Yalof <brooke.yalof@mongodb.com>
Date: Wed, 26 Jul 2023 19:56:23 +0200
Subject: [PATCH] Updates Button component `loading` API (#1865)

* with changeset

* update readme

* uncommit loading story

* user can pass props to spinner
---
 .changeset/loud-lies-camp.md                  |  5 +++
 packages/button/README.md                     | 33 ++++++++++---------
 packages/button/package.json                  | 16 ++++-----
 packages/button/src/Button.story.tsx          |  7 ++--
 packages/button/src/Button/Button.spec.tsx    |  3 ++
 packages/button/src/Button/Button.tsx         |  7 +++-
 .../src/ButtonContent/ButtonContent.tsx       | 27 ++++++++++-----
 packages/button/src/types.ts                  |  5 +++
 8 files changed, 66 insertions(+), 37 deletions(-)
 create mode 100644 .changeset/loud-lies-camp.md

diff --git a/.changeset/loud-lies-camp.md b/.changeset/loud-lies-camp.md
new file mode 100644
index 0000000000..db8ff5f4ae
--- /dev/null
+++ b/.changeset/loud-lies-camp.md
@@ -0,0 +1,5 @@
+---
+'@leafygreen-ui/button': major
+---
+
+Changes API that supports `isLoading` in Button components. Consuming applications now must pass their own Spinner components through the `loadingIndicator` slot prop
diff --git a/packages/button/README.md b/packages/button/README.md
index 4d6a9094ea..9f80d939b2 100644
--- a/packages/button/README.md
+++ b/packages/button/README.md
@@ -80,21 +80,22 @@ npm install @leafygreen-ui/button
 
 ## Properties
 
-| Prop           | Type                                                                                       | Description                                                                                                                                                                                                     | Default     |
-| -------------- | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
-| `variant`      | `'default'`, `'primary'`, `'primaryOutline'`, `'danger'`, `'dangerOutline'`, `'baseGreen'` | Sets the style variant of the button.                                                                                                                                                                           | `'default'` |
-| `darkMode`     | `boolean`                                                                                  | Determines if the component renders in dark mode                                                                                                                                                                | `false`     |
-| `size`         | `'xsmall'`, `'small'`, `'default'`, `'large'`                                              | Sets the size variant of the button.                                                                                                                                                                            | `'default'` |
-| `children`     | `node`                                                                                     | The content that will appear inside of the `<Button />` component.                                                                                                                                              | `null`      |
-| `className`    | `string`                                                                                   | Adds a className to the class attribute.                                                                                                                                                                        | `''`        |
-| `disabled`     | `boolean`                                                                                  | Disabled the button                                                                                                                                                                                             | `false`     |
-| `as`           | `'a' \| 'button'`                                                                          | Determines the root element. An `a` tags can be supplied to replace `button` from being the DOM element that wraps the component.                                                                               | `button`    |
-| `href`         | `string`                                                                                   | If a href is supplied it will change the `as` value, such that the component renders inside of an `a` tag instead of inside of a `button` tag.                                                                  |             |
-| `leftGlyph`    | `React.ReactElement`                                                                       | Glyph that will appear to the left of text, if there is text provided via the children prop. If no children are supplied to the component, passing an Icon here will render the button as an icon-only button.  |             |
-| `rightGlyph`   | `React.ReactElement`                                                                       | Glyph that will appear to the right of text, if there is text provided via the children prop. If no children are supplied to the component, passing an Icon here will render the button as an icon-only button. |
-| `isLoading`    | `boolean`                                                                                  | Indicates whether the Button is in a loading state                                                                                                                                                              | `false`     |
-| `loadingText`  | `string`                                                                                   | String displayed in place of `children` while the button is in a loading state                                                                                                                                  |             |
-| `baseFontSize` | `14`, `16`                                                                                 | Determines the base font-size of the component                                                                                                                                                                  | `14`        |
-| ...            | native attributes of component passed to as prop                                           | Any other properties will be spread on the root element                                                                                                                                                         |             |
+| Prop               | Type                                                                                       | Description                                                                                                                                                                                                     | Default     |
+| ------------------ | ------------------------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- |
+| `variant`          | `'default'`, `'primary'`, `'primaryOutline'`, `'danger'`, `'dangerOutline'`, `'baseGreen'` | Sets the style variant of the button.                                                                                                                                                                           | `'default'` |
+| `darkMode`         | `boolean`                                                                                  | Determines if the component renders in dark mode                                                                                                                                                                | `false`     |
+| `size`             | `'xsmall'`, `'small'`, `'default'`, `'large'`                                              | Sets the size variant of the button.                                                                                                                                                                            | `'default'` |
+| `children`         | `node`                                                                                     | The content that will appear inside of the `<Button />` component.                                                                                                                                              | `null`      |
+| `className`        | `string`                                                                                   | Adds a className to the class attribute.                                                                                                                                                                        | `''`        |
+| `disabled`         | `boolean`                                                                                  | Disabled the button                                                                                                                                                                                             | `false`     |
+| `as`               | `'a' \| 'button'`                                                                          | Determines the root element. An `a` tags can be supplied to replace `button` from being the DOM element that wraps the component.                                                                               | `button`    |
+| `href`             | `string`                                                                                   | If a href is supplied it will change the `as` value, such that the component renders inside of an `a` tag instead of inside of a `button` tag.                                                                  |             |
+| `leftGlyph`        | `React.ReactElement`                                                                       | Glyph that will appear to the left of text, if there is text provided via the children prop. If no children are supplied to the component, passing an Icon here will render the button as an icon-only button.  |             |
+| `rightGlyph`       | `React.ReactElement`                                                                       | Glyph that will appear to the right of text, if there is text provided via the children prop. If no children are supplied to the component, passing an Icon here will render the button as an icon-only button. |
+| `isLoading`        | `boolean`                                                                                  | Indicates whether the Button is in a loading state                                                                                                                                                              | `false`     |
+| `loadingText`      | `string`                                                                                   | String displayed in place of `children` while the button is in a loading state                                                                                                                                  |             |
+| `baseFontSize`     | `14`, `16`                                                                                 | Determines the base font-size of the component                                                                                                                                                                  | `14`        |
+| `loadingIndicator` | `React.ReactElement`                                                                       | Element to be rendered as loading indicator                                                                                                                                                                     |             |
+| ...                | native attributes of component passed to as prop                                           | Any other properties will be spread on the root element                                                                                                                                                         |             |
 
 _Note: In order to make this Component act as a submit button, the recommended approach is to pass `submit` as the `type` prop. Note it is also valid to pass `input` to the `as` prop, and the button's content's to the `value` prop -- in this case, do not supply children to the component._
diff --git a/packages/button/package.json b/packages/button/package.json
index b75c40ae6e..4e8cf0b3ba 100644
--- a/packages/button/package.json
+++ b/packages/button/package.json
@@ -22,18 +22,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@leafygreen-ui/box": "^3.1.5",
-    "@leafygreen-ui/emotion": "^4.0.5",
-    "@leafygreen-ui/lib": "^10.4.1",
-    "@leafygreen-ui/loading-indicator": "^2.0.1",
-    "@leafygreen-ui/palette": "^4.0.5",
-    "@leafygreen-ui/ripple": "^1.1.10",
-    "@leafygreen-ui/tokens": "^2.1.2",
+    "@leafygreen-ui/box": "^3.1.4",
+    "@leafygreen-ui/emotion": "^4.0.4",
+    "@leafygreen-ui/lib": "^10.4.0",
+    "@leafygreen-ui/palette": "^4.0.4",
+    "@leafygreen-ui/ripple": "^1.1.9",
+    "@leafygreen-ui/tokens": "^2.1.1",
     "polished": "^4.2.2"
   },
   "devDependencies": {
     "next": "^13.0.5",
-    "@leafygreen-ui/icon": "^11.20.1"
+    "@leafygreen-ui/icon": "^11.20.0",
+    "@leafygreen-ui/loading-indicator": "^2.0.0"
   },
   "peerDependencies": {
     "@leafygreen-ui/leafygreen-provider": "^3.1.4"
diff --git a/packages/button/src/Button.story.tsx b/packages/button/src/Button.story.tsx
index 1b7e6c061c..5ce67f3139 100644
--- a/packages/button/src/Button.story.tsx
+++ b/packages/button/src/Button.story.tsx
@@ -10,6 +10,7 @@ import {
   type StoryMetaType,
   type StoryType,
 } from '@leafygreen-ui/lib';
+import { Spinner } from '@leafygreen-ui/loading-indicator';
 
 import { Size } from './types';
 import Button, { ButtonProps, Variant } from '.';
@@ -44,6 +45,7 @@ const meta: StoryMetaType<typeof Button> = {
   },
   args: {
     children: 'MongoDB',
+    loadingIndicator: <Spinner />,
     leftGlyph: undefined,
     rightGlyph: undefined,
   },
@@ -159,11 +161,10 @@ Loading.parameters = {
       variant: Variant.Default,
       rightGlyph: undefined,
       leftGlyph: undefined,
+      loadingIndicator: <Spinner />,
     },
   },
-};
-// Avoid flaky visual diff tests with Spinner
-Loading.parameters = {
+  // Avoids flakey Chromatic tests
   chromatic: {
     disableSnapshots: true,
   },
diff --git a/packages/button/src/Button/Button.spec.tsx b/packages/button/src/Button/Button.spec.tsx
index 8404625993..2cb453d69e 100644
--- a/packages/button/src/Button/Button.spec.tsx
+++ b/packages/button/src/Button/Button.spec.tsx
@@ -4,6 +4,7 @@ import { axe } from 'jest-axe';
 import NextLink from 'next/link';
 
 import { BoxProps } from '@leafygreen-ui/box';
+import { Spinner } from '@leafygreen-ui/loading-indicator';
 
 import { ButtonProps } from '../types';
 import Button from '..';
@@ -57,6 +58,7 @@ describe('packages/button', () => {
     test(`renders spinner when isLoading is true`, () => {
       const { getByTestId } = renderButton({
         isLoading: true,
+        loadingIndicator: <Spinner />,
       });
       expect(getByTestId('lg-button-spinner')).toBeVisible();
     });
@@ -74,6 +76,7 @@ describe('packages/button', () => {
       const loadingText = 'loading text';
       const { getByText } = renderButton({
         isLoading: true,
+        loadingIndicator: <Spinner />,
         loadingText,
       });
       expect(getByText(loadingText)).toBeVisible();
diff --git a/packages/button/src/Button/Button.tsx b/packages/button/src/Button/Button.tsx
index d937982b4d..7627201936 100644
--- a/packages/button/src/Button/Button.tsx
+++ b/packages/button/src/Button/Button.tsx
@@ -22,7 +22,6 @@ export const Button = React.forwardRef(function Button(
     darkMode: darkModeProp,
     baseFontSize = BaseFontSize.Body1,
     disabled = false,
-    isLoading = false,
     onClick,
     leftGlyph,
     rightGlyph,
@@ -30,6 +29,8 @@ export const Button = React.forwardRef(function Button(
     className,
     as,
     type,
+    isLoading = false,
+    loadingIndicator,
     loadingText,
     ...rest
   }: BoxProps<'button', ButtonProps>,
@@ -71,6 +72,7 @@ export const Button = React.forwardRef(function Button(
     variant,
     size,
     isLoading,
+    loadingIndicator,
     loadingText,
   } as const;
 
@@ -92,4 +94,7 @@ Button.propTypes = {
   leftGlyph: PropTypes.element,
   rightGlyph: PropTypes.element,
   href: PropTypes.string,
+  isLoading: PropTypes.bool,
+  loadingText: PropTypes.string,
+  loadingIndicator: PropTypes.element,
 };
diff --git a/packages/button/src/ButtonContent/ButtonContent.tsx b/packages/button/src/ButtonContent/ButtonContent.tsx
index c0b7955585..2e5b21eac6 100644
--- a/packages/button/src/ButtonContent/ButtonContent.tsx
+++ b/packages/button/src/ButtonContent/ButtonContent.tsx
@@ -2,7 +2,6 @@ import React, { useEffect, useRef } from 'react';
 
 import { cx } from '@leafygreen-ui/emotion';
 import { useDarkMode } from '@leafygreen-ui/leafygreen-provider';
-import { Spinner } from '@leafygreen-ui/loading-indicator';
 import { registerRipple } from '@leafygreen-ui/ripple';
 
 import {
@@ -31,6 +30,7 @@ export const ButtonContent = (props: ButtonContentProps) => {
     size,
     isLoading,
     loadingText,
+    loadingIndicator,
     className,
   } = props;
 
@@ -50,6 +50,21 @@ export const ButtonContent = (props: ButtonContentProps) => {
     return unregisterRipple;
   }, [rippleRef, variant, darkMode, disabled, theme]);
 
+  const spinner =
+    loadingIndicator &&
+    React.cloneElement(loadingIndicator, {
+      ...loadingIndicator.props,
+      className: cx(
+        {
+          [centeredSpinnerStyles]: !loadingText,
+        },
+        loadingIndicator.props?.className,
+      ),
+      sizeOverride: buttonSpinnerSize[size],
+      colorOverride: spinnerColor[theme],
+      ['data-testid']: 'lg-button-spinner',
+    });
+
   if (isLoading) {
     return (
       <>
@@ -58,14 +73,8 @@ export const ButtonContent = (props: ButtonContentProps) => {
             [centeredSpinnerContainerStyles]: !loadingText,
           })}
         >
-          <Spinner
-            className={cx({
-              [centeredSpinnerStyles]: !loadingText,
-            })}
-            sizeOverride={buttonSpinnerSize[size]}
-            colorOverride={spinnerColor[theme]}
-            data-testid="lg-button-spinner"
-          />
+          {spinner}
+
           {loadingText}
         </div>
         {!loadingText && (
diff --git a/packages/button/src/types.ts b/packages/button/src/types.ts
index 8d3124053a..8344f14c63 100644
--- a/packages/button/src/types.ts
+++ b/packages/button/src/types.ts
@@ -127,6 +127,11 @@ export interface ButtonProps {
    */
   loadingText?: string;
 
+  /**
+   * Visual indicator display to convey that component is loading.
+   */
+  loadingIndicator?: React.ReactElement;
+
   /**
    * The component or HTML Element that the button is rendered as.
    *