Skip to content

Commit

Permalink
MenuIcon: Support arbitrary icon through Icon prop (#32840)
Browse files Browse the repository at this point in the history
  • Loading branch information
ravicious authored Oct 3, 2023
1 parent ed4c007 commit 9c3dff5
Show file tree
Hide file tree
Showing 2 changed files with 43 additions and 17 deletions.
51 changes: 36 additions & 15 deletions web/packages/shared/components/MenuAction/MenuAction.story.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@

import React from 'react';
import { Flex } from 'design';
import { Cog } from 'design/Icon';

import { MenuIcon, MenuButton, MenuItem } from '.';

Expand All @@ -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>
);
9 changes: 7 additions & 2 deletions web/packages/shared/components/MenuAction/MenuActionIcon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -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
Expand All @@ -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}
Expand Down Expand Up @@ -105,4 +109,5 @@ type Props = MenuProps & {
defaultOpen?: boolean;
buttonIconProps?: AnchorProps;
menuProps?: MenuProps;
Icon?: React.ComponentType<IconProps>;
};

0 comments on commit 9c3dff5

Please sign in to comment.