MenuIcon: Support arbitrary icon through Icon prop (#32889)

gravitational · Oct 4, 2023 · ba7699e · ba7699e
1 parent 538419e
commit ba7699e
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 17 deletions.
diff --git a/web/packages/shared/components/MenuAction/MenuAction.story.tsx b/web/packages/shared/components/MenuAction/MenuAction.story.tsx
@@ -16,6 +16,7 @@
 
 import React from 'react';
 import { Flex } from 'design';
+import { Cog } from 'design/Icon';
 
 import { MenuIcon, MenuButton, MenuItem } from '.';
 
@@ -24,20 +25,40 @@ export default {
 };
 
 export const Menu = () => (
-  <Flex
-    mx="auto"
-    width="200px"
-    height="100px"
-    justifyContent="space-around"
-    alignItems="center"
-  >
-    <MenuIcon>
-      <MenuItem>Edit...</MenuItem>
-      <MenuItem>Delete...</MenuItem>
-    </MenuIcon>
-    <MenuButton>
-      <MenuItem>Edit...</MenuItem>
-      <MenuItem>Delete...</MenuItem>
-    </MenuButton>
+  <Flex gap={11} flexWrap="wrap">
+    <Flex flexDirection="column">
+      MenuIcon
+      <MenuIcon
+        menuProps={{
+          anchorOrigin: { vertical: 'top', horizontal: 'left' },
+          transformOrigin: { vertical: 'top', horizontal: 'left' },
+        }}
+      >
+        <MenuItem>Edit…</MenuItem>
+        <MenuItem>Delete…</MenuItem>
+      </MenuIcon>
+    </Flex>
+
+    <Flex flexDirection="column">
+      MenuIcon with a custom icon
+      <MenuIcon
+        Icon={Cog}
+        menuProps={{
+          anchorOrigin: { vertical: 'top', horizontal: 'left' },
+          transformOrigin: { vertical: 'top', horizontal: 'left' },
+        }}
+      >
+        <MenuItem>Edit…</MenuItem>
+        <MenuItem>Delete…</MenuItem>
+      </MenuIcon>
+    </Flex>
+
+    <Flex flexDirection="column">
+      MenuButton
+      <MenuButton>
+        <MenuItem>Edit…</MenuItem>
+        <MenuItem>Delete…</MenuItem>
+      </MenuButton>
+    </Flex>
   </Flex>
 );
diff --git a/web/packages/shared/components/MenuAction/MenuActionIcon.tsx b/web/packages/shared/components/MenuAction/MenuActionIcon.tsx
@@ -18,10 +18,14 @@ import React from 'react';
 import Menu from 'design/Menu';
 import { ButtonIcon } from 'design';
 import { MoreHoriz } from 'design/Icon';
+import { IconProps } from 'design/Icon/Icon';
 
 import { MenuProps, AnchorProps } from './types';
 
 export default class MenuActionIcon extends React.Component<Props> {
+  static defaultProps = {
+    Icon: MoreHoriz,
+  };
   anchorEl = null;
 
   state = {
@@ -44,7 +48,7 @@ export default class MenuActionIcon extends React.Component<Props> {
 
   render() {
     const { open } = this.state;
-    const { children, buttonIconProps, menuProps } = this.props;
+    const { children, buttonIconProps, menuProps, Icon } = this.props;
     return (
       <>
         <ButtonIcon
@@ -53,7 +57,7 @@ export default class MenuActionIcon extends React.Component<Props> {
           onClick={this.onOpen}
           data-testid="button"
         >
-          <MoreHoriz size="medium" />
+          <Icon size="medium" />
         </ButtonIcon>
         <Menu
           getContentAnchorEl={null}
@@ -105,4 +109,5 @@ type Props = MenuProps & {
   defaultOpen?: boolean;
   buttonIconProps?: AnchorProps;
   menuProps?: MenuProps;
+  Icon?: React.ComponentType<IconProps>;
 };