feat(ActionButton): use button component for action button (#1358)

Co-authored-by: Copilot <copilot@github.com>

Author: ethanashaw

src/components/ActionButton/ActionButton.tsx

@@ -1,11 +1,11 @@
 import classNames from "classnames";
-import React, { MouseEventHandler, useEffect, useRef, useState } from "react";
-import type { ButtonHTMLAttributes, ReactNode } from "react";
+import React, { useEffect, useRef, useState } from "react";
 
 import type { ButtonProps } from "../Button";
 import Icon from "../Icon";
 
-import type { ClassName, PropsWithSpread } from "types";
+import type { PropsWithSpread } from "types";
+import Button from "../Button";
 
 export const LOADER_MIN_DURATION = 400; // minimium duration (ms) loader displays
 export const SUCCESS_DURATION = 2000; // duration (ms) success tick is displayed
@@ -17,41 +17,16 @@ export enum Label {
 
 export type Props = PropsWithSpread<
   {
-    /**
-     * The appearance of the button.
-     */
-    appearance?: ButtonProps["appearance"];
-    /**
-     * The content of the button.
-     */
-    children?: ReactNode;
-    /**
-     * Optional class(es) to pass to the button element.
-     */
-    className?: ClassName;
-    /**
-     * Whether the button should be disabled.
-     */
-    disabled?: boolean;
-    /**
-     * Whether the button should display inline.
-     */
-    inline?: boolean;
     /**
      * Whether the button should be in the loading state.
      */
     loading?: boolean;
-    /**
-     * Function for handling button click event.
-     */
-    onClick?: MouseEventHandler<HTMLButtonElement>;
     /**
      * Whether the button should be in the success state.
      */
-
     success?: boolean;
   },
-  ButtonHTMLAttributes<HTMLButtonElement>
+  ButtonProps
 >;
 
 /**
@@ -62,12 +37,9 @@ export type Props = PropsWithSpread<
  * props table:
  */
 const ActionButton = ({
-  appearance,
   children,
   className,
-  onClick,
   disabled = null,
-  inline = false,
   loading = false,
   success = false,
   ...buttonProps
@@ -150,33 +122,20 @@ const ActionButton = ({
     return () => window.clearTimeout(successTimeout);
   }, [showSuccess]);
 
-  const buttonClasses = classNames(
-    className,
-    "p-action-button",
-    appearance ? `p-button--${appearance}` : "p-button",
-    {
-      "is-processing": showLoader || showSuccess,
-      "is-disabled": disabled === null ? showLoader : disabled,
-      "is-inline": inline,
-    },
-  );
+  const buttonClasses = classNames(className, "p-action-button", {
+    "is-processing": showLoader || showSuccess,
+  });
   const showIcon = showLoader || showSuccess;
-  const isDisabled = disabled === null ? showLoader : disabled;
   const icon = (showLoader && "spinner") || (showSuccess && "success") || null;
-  const iconLight = appearance === "positive" || appearance === "negative";
-  const onClickDisabled: MouseEventHandler<HTMLButtonElement> = (e) =>
-    e.preventDefault();
-
-  // This component uses the base button element instead of the Button component
-  // as the button requires a ref and Button would have to be updated to use
-  // forwardRef which is not currently supported by components that use
-  // typescript generics.
+  const iconLight =
+    buttonProps.appearance === "positive" ||
+    buttonProps.appearance === "negative";
+
   return (
-    <button
+    <Button
       className={buttonClasses}
       ref={ref}
-      onClick={isDisabled ? onClickDisabled : onClick}
-      aria-disabled={isDisabled || undefined}
+      disabled={disabled === null ? showLoader : disabled}
       style={
         height && width
           ? {
@@ -197,7 +156,7 @@ const ActionButton = ({
       ) : (
         children
       )}
-    </button>
+    </Button>
   );
 };
 

src/components/ActionButton/__snapshots__/ActionButton.test.tsx.snap

@@ -1,9 +1,9 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ActionButton matches loading snapshot 1`] = `
 <button
   aria-disabled="true"
-  class="p-action-button p-button is-processing is-disabled"
+  class="p-button is-disabled p-action-button is-processing"
 >
   <i
     aria-label="Waiting for action to complete"
@@ -14,7 +14,7 @@ exports[`ActionButton matches loading snapshot 1`] = `
 
 exports[`ActionButton matches success snapshot 1`] = `
 <button
-  class="p-action-button p-button is-processing"
+  class="p-button p-action-button is-processing"
 >
   <i
     aria-label="Action completed"

src/components/Button/Button.tsx

@@ -6,6 +6,7 @@ import type {
   ElementType,
   MouseEventHandler,
   ReactNode,
+  Ref,
 } from "react";
 
 import type { ClassName, ValueOf } from "types";
@@ -64,6 +65,10 @@ export type Props<P = null> = {
    * Whether the button should be small.
    */
   small?: boolean;
+  /**
+   * A ref to the button.
+   */
+  ref?: Ref<HTMLButtonElement>;
 } & (Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> | P);
 
 /**

src/components/ConfirmationModal/ConfirmationModal.stories.tsx

@@ -4,6 +4,7 @@ import { Meta, StoryObj } from "@storybook/react";
 
 import ConfirmationModal from "./ConfirmationModal";
 import Input from "../Input";
+import Icon from "components/Icon";
 
 const doNothing = () => {};
 
@@ -30,9 +31,17 @@ export const Default: Story = {
         {modalOpen ? (
           <ConfirmationModal
             title="Confirm delete"
-            confirmButtonLabel="Delete"
+            confirmButtonLabel={
+              <>
+                <Icon name="delete" light />
+                <span>Delete</span>
+              </>
+            }
             onConfirm={doNothing}
             close={closeHandler}
+            confirmButtonProps={{
+              hasIcon: true,
+            }}
           >
             <p>
               This will permanently delete the user "Simon".

src/components/Modal/Modal.stories.tsx

@@ -85,7 +85,7 @@ export const Focus: Story = {
   render: ({ closeOnOutsideClick }) => {
     /* eslint-disable react-hooks/rules-of-hooks */
     const [modalOpen, setModalOpen] = useState(true);
-    const buttonRef = useRef<HTMLElement>(null);
+    const buttonRef = useRef<HTMLButtonElement>(null);
     /* eslint-enable react-hooks/rules-of-hooks */
 
     const closeHandler = () => setModalOpen(false);

src/components/SummaryButton/__snapshots__/SummaryButton.test.tsx.snap

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+// Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<SummaryButton /> renders and matches the snapshot 1`] = `
 <small>
@@ -8,7 +8,7 @@ exports[`<SummaryButton /> renders and matches the snapshot 1`] = `
     Showing some items
   </span>
   <button
-    class="is-small is-dense is-inline p-action-button p-button"
+    class="p-button is-small is-dense is-inline p-action-button"
   >
     Show more
   </button>