feat(DropdownMenu): add class name for submenu parents (#1465)

gravity-ui · Apr 1, 2024 · a314081 · a314081
1 parent 484cac7
commit a314081
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 1 deletion.
diff --git a/src/components/DropdownMenu/DropdownMenuPopup.tsx b/src/components/DropdownMenu/DropdownMenuPopup.tsx
@@ -150,6 +150,13 @@ export const DropdownMenuPopup = <T,>({
                         const isActive = isNavigationActive && activeItemIndex === index;
                         const activate = () => setActiveItemIndex(index);
 
+                        const isActiveParent =
+                            open &&
+                            !isActive &&
+                            activeMenuPath.length !== 0 &&
+                            stringifyNavigationPath(item.path) ===
+                                stringifyNavigationPath(activeMenuPath.slice(0, item.path.length));
+
                         const extraProps = {
                             ...item.extraProps,
                             onMouseEnter: activate,
@@ -160,7 +167,11 @@ export const DropdownMenuPopup = <T,>({
                                 key={index}
                                 className={cnDropdownMenu(
                                     'menu-item',
-                                    {separator: isSeparator(item)},
+                                    {
+                                        separator: isSeparator(item),
+                                        'active-parent': isActiveParent,
+                                        'with-submenu': Boolean(item.items?.length),
+                                    },
                                     item.className,
                                 )}
                                 selected={isActive}

diff --git a/src/components/DropdownMenu/README.md b/src/components/DropdownMenu/README.md
@@ -160,6 +160,11 @@ LANDING_BLOCK-->
 
 The `items` property on an individual menu item adds nested subitems to this menu item.
 
+Menu items with submenus obtain the following additional class names to allow for extra styling:
+
+- the class name `.g-dropdown-menu__menu-item_with-submenu` is added to items with more than 1 nested item;
+- the class name `.g-dropdown-menu__menu-item_active-parent` is added to an item whose submenu is currently open.
+
 <!--LANDING_BLOCK
 
 <ExampleBlock