feat: add Button types (#1903)

okta · Jul 21, 2023 · 5b78259 · 5b78259
1 parent 1eca38c
commit 5b78259
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 37 deletions.
diff --git a/packages/odyssey-react-mui/src/Button.tsx b/packages/odyssey-react-mui/src/Button.tsx
@@ -18,6 +18,7 @@ import { MuiPropsContext } from "./MuiPropsContext";
 import { Tooltip } from "./Tooltip";
 
 export const buttonSizeValues = ["small", "medium", "large"] as const;
+export const buttonTypeValues = ["button", "submit", "reset"] as const;
 export const buttonVariantValues = [
   "primary",
   "secondary",
@@ -75,6 +76,10 @@ export type ButtonProps = {
    * The tooltip text for the Button if it's icon-only
    */
   tooltipText?: string;
+  /**
+   * The type of the HTML button element
+   */
+  type?: (typeof buttonTypeValues)[number];
   /**
    * The variant of the Button
    */
@@ -94,6 +99,7 @@ const Button = ({
   startIcon,
   text = "",
   tooltipText,
+  type = "button",
   variant,
 }: ButtonProps) => {
   const muiProps = useContext(MuiPropsContext);
@@ -112,12 +118,16 @@ const Button = ({
         onClick={onClick}
         size={size}
         startIcon={startIcon}
+        type={type}
         variant={variant}
       >
         {text}
       </MuiButton>
     ),
     [
+      ariaLabel,
+      ariaLabelledBy,
+      ariaDescribedBy,
       endIcon,
       id,
       isDisabled,
@@ -126,10 +136,8 @@ const Button = ({
       size,
       startIcon,
       text,
+      type,
       variant,
-      ariaLabel,
-      ariaLabelledBy,
-      ariaDescribedBy,
     ]
   );
 

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/Button/Button.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/Button/Button.stories.tsx
@@ -15,6 +15,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import {
   Button,
   buttonSizeValues,
+  buttonTypeValues,
   buttonVariantValues,
   AddIcon,
 } from "@okta/odyssey-react-mui";
@@ -31,6 +32,30 @@ const storybookMeta: Meta<ButtonProps> = {
   title: "MUI Components/Button",
   component: Button,
   argTypes: {
+    endIcon: {
+      control: {
+        type: "select",
+      },
+      options: Object.keys(icons),
+      mapping: icons,
+      description: "An optional icon to display at the end of the button",
+      table: {
+        type: {
+          summary: "<Icon />",
+        },
+        defaultValue: "",
+      },
+    },
+    id: {
+      control: null,
+      description: "An optional ID for the button",
+      table: {
+        type: {
+          summary: "string",
+        },
+        defaultValue: "",
+      },
+    },
     isDisabled: {
       control: "boolean",
       description: "If `true`, the button is disabled",
@@ -51,6 +76,16 @@ const storybookMeta: Meta<ButtonProps> = {
         },
       },
     },
+    onClick: {
+      action: true,
+      description: "Callback fired when the button is clicked",
+      table: {
+        type: {
+          summary: "(() => void)",
+        },
+        defaultValue: "",
+      },
+    },
     size: {
       options: buttonSizeValues,
       control: { type: "radio" },
@@ -78,30 +113,6 @@ const storybookMeta: Meta<ButtonProps> = {
         defaultValue: "",
       },
     },
-    endIcon: {
-      control: {
-        type: "select",
-      },
-      options: Object.keys(icons),
-      mapping: icons,
-      description: "An optional icon to display at the end of the button",
-      table: {
-        type: {
-          summary: "<Icon />",
-        },
-        defaultValue: "",
-      },
-    },
-    id: {
-      control: null,
-      description: "An optional ID for the button",
-      table: {
-        type: {
-          summary: "string",
-        },
-        defaultValue: "",
-      },
-    },
     text: {
       control: "text",
       description:
@@ -124,6 +135,20 @@ const storybookMeta: Meta<ButtonProps> = {
         defaultValue: "",
       },
     },
+    type: {
+      options: buttonTypeValues,
+      control: { type: "radio" },
+      description: "The type of the HTML button element.",
+      defaultValue: "button",
+      table: {
+        type: {
+          summary: buttonTypeValues.join(" | "),
+        },
+        defaultValue: {
+          summary: "button",
+        },
+      },
+    },
     variant: {
       options: buttonVariantValues,
       control: { type: "radio" },
@@ -138,16 +163,6 @@ const storybookMeta: Meta<ButtonProps> = {
         },
       },
     },
-    onClick: {
-      action: true,
-      description: "Callback fired when the button is clicked",
-      table: {
-        type: {
-          summary: "(() => void)",
-        },
-        defaultValue: "",
-      },
-    },
   },
   args: {
     text: "Add crew",