Skip to content

Commit

Permalink
fix: menu item option icon (#5631)
Browse files Browse the repository at this point in the history
* fix(menu-item-option-hook): `null` as value of `icon` prop should not render Icon

* chore: add changeset
  • Loading branch information
anubra266 authored Feb 28, 2022
1 parent 0017511 commit e4da635
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 9 deletions.
6 changes: 6 additions & 0 deletions .changeset/twelve-singers-prove.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@chakra-ui/menu": patch
---

Fixed bug where passing `null` as value of `icon` prop in `MenuOptionItem` still
rendered the icon.
20 changes: 11 additions & 9 deletions packages/menu/src/menu.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -322,11 +322,11 @@ const CheckIcon: React.FC<PropsOf<"svg">> = (props) => (

export interface MenuItemOptionProps
extends UseMenuOptionOptions,
Omit<MenuItemProps, keyof UseMenuOptionOptions> {
Omit<MenuItemProps, keyof UseMenuOptionOptions | "icon"> {
/**
* @type React.ReactElement
*/
icon?: React.ReactElement
icon?: React.ReactElement | null
/**
* @type SystemProps["mr"]
*/
Expand All @@ -344,13 +344,15 @@ export const MenuItemOption = forwardRef<MenuItemOptionProps, "button">(
{...optionProps}
className={cx("chakra-menu__menuitem-option", rest.className)}
>
<MenuIcon
fontSize="0.8em"
marginEnd={iconSpacing}
opacity={props.isChecked ? 1 : 0}
>
{icon || <CheckIcon />}
</MenuIcon>
{icon !== null && (
<MenuIcon
fontSize="0.8em"
marginEnd={iconSpacing}
opacity={props.isChecked ? 1 : 0}
>
{icon || <CheckIcon />}
</MenuIcon>
)}
<span style={{ flex: 1 }}>{optionProps.children}</span>
</StyledMenuItem>
)
Expand Down
22 changes: 22 additions & 0 deletions packages/menu/stories/menu.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -261,6 +261,28 @@ export const withMenuRadio = () => (
</Menu>
)

export const withDisabledIconInMenuRadio = () => (
<Menu closeOnSelect={false}>
<MenuButton as={Button} variant="solid" colorScheme="teal" size="sm">
Open menu
</MenuButton>

<MenuList minWidth="240px">
<MenuOptionGroup title="Country" type="checkbox">
<MenuItemOption icon={null} value="email">
Email
</MenuItemOption>
<MenuItemOption icon={null} value="phone">
Phone
</MenuItemOption>
<MenuItemOption icon={null} value="country">
Country
</MenuItemOption>
</MenuOptionGroup>
</MenuList>
</Menu>
)

export const WithInternalState = () => (
<Menu>
{({ isOpen }) => (
Expand Down

1 comment on commit e4da635

@vercel
Copy link

@vercel vercel bot commented on e4da635 Feb 28, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.