EVG-20201: Use new LeafyGreen props in LoadingButton component (everg…

…reen-ci#2077)

src/components/Buttons/LoadingButton.stories.tsx

@@ -0,0 +1,21 @@
+import { Variant } from "@leafygreen-ui/button";
+import { CustomStoryObj, CustomMeta } from "test_utils/types";
+import { LoadingButton } from ".";
+
+export default {
+  component: LoadingButton,
+} satisfies CustomMeta<typeof LoadingButton>;
+
+export const Default: CustomStoryObj<typeof LoadingButton> = {
+  render: (args) => <LoadingButton {...args}>Button text</LoadingButton>,
+  args: {
+    loading: false,
+    variant: Variant.Default,
+  },
+  argTypes: {
+    variant: {
+      options: Object.values(Variant),
+      control: { type: "select" },
+    },
+  },
+};

src/components/Buttons/LoadingButton.tsx

@@ -1,19 +1,20 @@
 import { forwardRef } from "react";
 import { ExtendableBox } from "@leafygreen-ui/box";
 import LeafyGreenButton, { ButtonProps } from "@leafygreen-ui/button";
-import Icon from "components/Icon";
+import { Spinner } from "@leafygreen-ui/loading-indicator";
 
-type Props = ButtonProps & {
+type Props = Omit<ButtonProps, "isLoading"> & {
   loading?: boolean;
 };
 
 export const LoadingButton: ExtendableBox<
   Props & { ref?: React.Ref<any> },
   "button"
-> = forwardRef(({ leftGlyph, loading = false, ...rest }: Props, ref) => (
+> = forwardRef(({ loading = false, ...rest }: Props, ref) => (
   <LeafyGreenButton
     ref={ref}
-    leftGlyph={loading ? <Icon glyph="Loading" /> : leftGlyph}
+    isLoading={loading}
+    loadingIndicator={<Spinner />}
     {...rest}
   />
 ));

src/components/Settings/EventLog/EventLog.tsx

@@ -1,8 +1,7 @@
 import styled from "@emotion/styled";
-import Button from "@leafygreen-ui/button";
 import Card from "@leafygreen-ui/card";
-import { Spinner } from "@leafygreen-ui/loading-indicator";
 import { Subtitle } from "@leafygreen-ui/typography";
+import { LoadingButton } from "components/Buttons";
 import { size } from "constants/tokens";
 import { EventDiffTable } from "./EventDiffTable";
 import { Header } from "./Header";
@@ -42,15 +41,14 @@ export const EventLog: React.FC<EventLogProps> = ({
         );
       })}
       {!allEventsFetched && !!events.length && (
-        <Button
+        <LoadingButton
           data-cy="load-more-button"
-          isLoading={loading}
-          loadingIndicator={<Spinner />}
+          loading={loading}
           onClick={handleFetchMore}
           variant="primary"
         >
           Load more events
-        </Button>
+        </LoadingButton>
       )}
       {allEventsFetched && <Subtitle>{allEventsFetchedCopy}</Subtitle>}
     </Container>

src/pages/configurePatch/configurePatchCore/index.tsx

@@ -2,10 +2,10 @@ import { useMemo } from "react";
 import { useMutation } from "@apollo/client";
 import styled from "@emotion/styled";
 import Button from "@leafygreen-ui/button";
-import { Spinner } from "@leafygreen-ui/loading-indicator";
 import { Tab } from "@leafygreen-ui/tabs";
 import TextInput from "@leafygreen-ui/text-input";
 import { useNavigate } from "react-router-dom";
+import { LoadingButton } from "components/Buttons";
 import { CodeChanges } from "components/CodeChanges";
 import {
   MetadataCard,
@@ -153,28 +153,29 @@ const ConfigurePatchCore: React.FC<ConfigurePatchCoreProps> = ({ patch }) => {
           value={description}
           onChange={(e) => setDescription(e.target.value)}
         />
-        {activated && (
-          <StyledButton
-            data-cy="cancel-button"
-            onClick={() =>
-              window.history.state.idx > 0
-                ? navigate(-1)
-                : navigate(getVersionRoute(id))
-            }
+        <ButtonWrapper>
+          {activated && (
+            <Button
+              data-cy="cancel-button"
+              onClick={() =>
+                window.history.state.idx > 0
+                  ? navigate(-1)
+                  : navigate(getVersionRoute(id))
+              }
+            >
+              Cancel
+            </Button>
+          )}
+          <LoadingButton
+            data-cy="schedule-patch"
+            disabled={totalSelectedTaskCount === 0 && aliasCount === 0}
+            loading={loadingScheduledPatch}
+            onClick={onClickSchedule}
+            variant="primary"
           >
-            Cancel
-          </StyledButton>
-        )}
-        <StyledButton
-          data-cy="schedule-patch"
-          onClick={onClickSchedule}
-          isLoading={loadingScheduledPatch}
-          variant="primary"
-          disabled={totalSelectedTaskCount === 0 && aliasCount === 0}
-          loadingIndicator={<Spinner />}
-        >
-          Schedule
-        </StyledButton>
+            Schedule
+          </LoadingButton>
+        </ButtonWrapper>
       </FlexRow>
       <PageLayout hasSider>
         <PageSider>
@@ -315,8 +316,10 @@ const StyledInput = styled(TextInput)`
   width: 100%;
 `;
 
-const StyledButton = styled(Button)`
+const ButtonWrapper = styled.div`
   margin-top: ${size.m};
+  display: flex;
+  gap: ${size.s};
 `;
 
 const FlexRow = styled.div`

src/pages/task/actionButtons/previousCommits/index.tsx

@@ -1,11 +1,10 @@
 import { useReducer, useEffect } from "react";
 import { useLazyQuery, useQuery } from "@apollo/client";
 import styled from "@emotion/styled";
-import Button from "@leafygreen-ui/button";
-import { Spinner } from "@leafygreen-ui/loading-indicator";
 import { Option, Select } from "@leafygreen-ui/select";
 import Tooltip from "@leafygreen-ui/tooltip";
 import { useTaskAnalytics } from "analytics";
+import { LoadingButton } from "components/Buttons";
 import { ConditionalWrapper } from "components/ConditionalWrapper";
 import { finishedTaskStatuses } from "constants/task";
 import { size } from "constants/tokens";
@@ -201,22 +200,21 @@ export const PreviousCommits: React.FC<PreviousCommitsProps> = ({ taskId }) => {
           </Tooltip>
         )}
       >
-        <Button
+        <LoadingButton
+          as={Link}
+          data-cy="previous-commits-go-button"
+          disabled={disableButton}
+          loading={loading}
           onClick={() =>
             sendEvent({
               name: "Submit Previous Commit Selector",
               type: selectState,
             })
           }
-          as={Link}
-          disabled={disableButton}
           size="small"
-          data-cy="previous-commits-go-button"
-          isLoading={loading}
-          loadingIndicator={<Spinner />}
         >
           Go
-        </Button>
+        </LoadingButton>
       </ConditionalWrapper>
     </PreviousCommitsWrapper>
   );