fix: menu item option icon (#5631)

* fix(menu-item-option-hook): `null` as value of `icon` prop should not render Icon

* chore: add changeset

.changeset/twelve-singers-prove.md

@@ -0,0 +1,6 @@
+---
+"@chakra-ui/menu": patch
+---
+
+Fixed bug where passing `null` as value of `icon` prop in `MenuOptionItem` still
+rendered the icon.

packages/menu/src/menu.tsx

@@ -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"]
    */
@@ -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>
     )

packages/menu/stories/menu.stories.tsx

@@ -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 }) => (