feat(menu): extend menu theme with icon part (chakra-ui#7791)

itkrt2y · Jul 11, 2023 · d603693 · d603693
1 parent 69ab1e5
commit d603693
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 11 deletions.
diff --git a/.changeset/swift-yaks-shop.md b/.changeset/swift-yaks-shop.md
@@ -0,0 +1,7 @@
+---
+"@chakra-ui/anatomy": patch
+"@chakra-ui/theme": patch
+"@chakra-ui/menu": patch
+---
+
+Allow styling `MenuIcon` as part of `Menu` theme
diff --git a/packages/components/anatomy/src/components.ts b/packages/components/anatomy/src/components.ts
@@ -79,7 +79,7 @@ export const listAnatomy = anatomy("list").parts("container", "item", "icon")
 
 export const menuAnatomy = anatomy("menu")
   .parts("button", "list", "item")
-  .extend("groupTitle", "command", "divider")
+  .extend("groupTitle", "icon", "command", "divider")
 
 export const modalAnatomy = anatomy("modal")
   .parts("overlay", "dialogContainer", "dialog")

diff --git a/packages/components/menu/src/menu-icon.tsx b/packages/components/menu/src/menu-icon.tsx
@@ -2,10 +2,13 @@ import { HTMLChakraProps, chakra } from "@chakra-ui/system"
 import { cx } from "@chakra-ui/shared-utils"
 
 import { Children, cloneElement, isValidElement } from "react"
+import { useMenuStyles } from "./menu"
 
 export const MenuIcon: React.FC<HTMLChakraProps<"span">> = (props) => {
   const { className, children, ...rest } = props
 
+  const styles = useMenuStyles()
+
   const child = Children.only(children)
 
   const clone = isValidElement(child)
@@ -19,16 +22,7 @@ export const MenuIcon: React.FC<HTMLChakraProps<"span">> = (props) => {
   const _className = cx("chakra-menu__icon-wrapper", className)
 
   return (
-    <chakra.span
-      className={_className}
-      {...rest}
-      __css={{
-        display: "inline-flex",
-        alignItems: "center",
-        justifyContent: "center",
-        flexShrink: 0,
-      }}
-    >
+    <chakra.span className={_className} {...rest} __css={styles.icon}>
       {clone}
     </chakra.span>
   )

diff --git a/packages/components/theme/src/components/menu.ts b/packages/components/theme/src/components/menu.ts
@@ -66,6 +66,13 @@ const baseStyleGroupTitle = defineStyle({
   fontSize: "sm",
 })
 
+const baseStyleIcon = defineStyle({
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  flexShrink: 0,
+})
+
 const baseStyleCommand = defineStyle({
   opacity: 0.6,
 })
@@ -88,6 +95,7 @@ const baseStyle = definePartsStyle({
   list: baseStyleList,
   item: baseStyleItem,
   groupTitle: baseStyleGroupTitle,
+  icon: baseStyleIcon,
   command: baseStyleCommand,
   divider: baseStyleDivider,
 })