Merge pull request #1926 from okta/jk/OKTA-635650

Update MenuButton icon
okta · Aug 18, 2023 · 37bba47 · 37bba47
2 parents 20b210e + 32c56f2
commit 37bba47
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 5 deletions.
diff --git a/packages/odyssey-react-mui/src/MenuButton.tsx b/packages/odyssey-react-mui/src/MenuButton.tsx
@@ -12,7 +12,7 @@
 
 import { Button, buttonVariantValues, MenuItem, useUniqueId } from "./";
 import { Divider, ListSubheader, Menu } from "@mui/material";
-import { ChevronDownIcon } from "./icons.generated";
+import { ChevronDownIcon, MoreIcon } from "./icons.generated";
 import { memo, type ReactElement, useCallback, useMemo, useState } from "react";
 
 import { MenuContext, MenuContextType } from "./MenuContext";
@@ -55,6 +55,10 @@ export type MenuButtonProps = {
    * The id of the Button
    */
   id?: string;
+  /**
+   * If the MenuButton is an overflow menu or standard menu.
+   */
+  isOverflow?: boolean;
   /**
    * The tooltip text for the Button if it's icon-only
    */
@@ -84,8 +88,9 @@ const MenuButton = ({
   buttonLabel = "",
   buttonVariant = "secondary",
   children,
-  endIcon = <ChevronDownIcon />,
+  endIcon: endIconProp,
   id: idOverride,
+  isOverflow,
   tooltipText,
 }: MenuButtonProps) => {
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
@@ -115,6 +120,14 @@ const MenuButton = ({
     [closeMenu, openMenu]
   );
 
+  const endIcon = endIconProp ? (
+    endIconProp
+  ) : isOverflow ? (
+    <MoreIcon />
+  ) : (
+    <ChevronDownIcon />
+  );
+
   return (
     <div>
       <Button

diff --git a/packages/odyssey-storybook/src/components/odyssey-mui/MenuButton/MenuButton.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-mui/MenuButton/MenuButton.stories.tsx
@@ -25,7 +25,6 @@ import {
   GroupIcon,
   GlobeIcon,
   CalendarIcon,
-  MoreIcon,
 } from "@okta/odyssey-react-mui/icons";
 import icons from "../../../../.storybook/components/iconUtils";
 import { MuiThemeDecorator } from "../../../../.storybook/components";
@@ -118,6 +117,16 @@ const storybookMeta: Meta<MenuButtonProps> = {
         defaultValue: "",
       },
     },
+    isOverflow: {
+      control: "boolean",
+      description: "If the MenuButton is an overflow menu or standard menu.",
+      table: {
+        type: {
+          summary: "boolean",
+        },
+        defaultValue: "",
+      },
+    },
     tooltipText: {
       control: "text",
       description:
@@ -133,7 +142,6 @@ const storybookMeta: Meta<MenuButtonProps> = {
   args: {
     buttonLabel: "More actions",
     buttonVariant: "secondary",
-    endIcon: <MoreIcon />,
   },
   decorators: [MuiThemeDecorator],
   tags: ["autodocs"],
@@ -273,7 +281,6 @@ export const IconButton: StoryObj<MenuButtonProps> = {
       <MenuItem key="2">Edit configuration</MenuItem>,
       <MenuItem key="3">Launch</MenuItem>,
     ],
-    endIcon: <MoreIcon />,
     tooltipText: "Add confirmation",
   },
 };