From ba7699eb61cf5457fe3fbf22219add0dd08dce6e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Rafa=C5=82=20Cie=C5=9Blak?= <rafal.cieslak@goteleport.com> Date: Wed, 4 Oct 2023 08:32:24 +0200 Subject: [PATCH] MenuIcon: Support arbitrary icon through Icon prop (#32889) --- .../MenuAction/MenuAction.story.tsx | 51 +++++++++++++------ .../components/MenuAction/MenuActionIcon.tsx | 9 +++- 2 files changed, 43 insertions(+), 17 deletions(-) diff --git a/web/packages/shared/components/MenuAction/MenuAction.story.tsx b/web/packages/shared/components/MenuAction/MenuAction.story.tsx index aa660cc147bf3..97370d57b2ab9 100644 --- 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 index b2d25872c8999..a61a294285628 100644 --- 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>; };