fix(CompositeBar/Item): support itemWrapper icon for highlighted node (…

…#148) * fix(CompositeBar/Item): support itemWrapper icon for highlighted node * chore: move highlightedNode initializing * chore: get highlightedNode from itemWrapper
gravity-ui · Nov 14, 2023 · 6874ee1 · 6874ee1
1 parent c8e735b
commit 6874ee1
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 4 deletions.
diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx
@@ -1,12 +1,21 @@
 import React, {FC, useState} from 'react';
 
-import {RadioButton, Radio, Modal, Button, eventBroker, EventBrokerData} from '@gravity-ui/uikit';
-import {Gear, Magnifier} from '@gravity-ui/icons';
+import {
+    Button,
+    EventBrokerData,
+    Radio,
+    RadioButton,
+    Modal,
+    Icon,
+    eventBroker,
+} from '@gravity-ui/uikit';
+import {Bug, Gear, Magnifier} from '@gravity-ui/icons';
 
 import {AsideHeader, FooterItem} from '../..';
 import {cn} from '../../utils/cn';
 import {menuItemsShowcase, text as placeholderText} from './moc';
 import {MenuItem, OpenModalSubscriber} from '../../types';
+import {ASIDE_HEADER_ICON_SIZE} from '../../constants';
 
 import logoIcon from '../../../../.storybook/assets/logo.svg';
 
@@ -172,14 +181,18 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                         <FooterItem
                             item={{
                                 id: 'project-settings',
-                                icon: Gear,
                                 title: 'Settings with panel',
                                 tooltipText: (
                                     <div>
                                         <b>Settings with panel</b>
                                     </div>
                                 ),
                                 current: visiblePanel === Panel.ProjectSettings,
+                                itemWrapper: (params, makeItem) =>
+                                    makeItem({
+                                        ...params,
+                                        icon: <Icon data={Bug} size={ASIDE_HEADER_ICON_SIZE} />,
+                                    }),
                                 onItemClick: () => {
                                     setVisiblePanel(
                                         visiblePanel === Panel.ProjectSettings

diff --git a/src/components/CompositeBar/Item/Item.tsx b/src/components/CompositeBar/Item/Item.tsx
@@ -224,17 +224,25 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
     const iconNode = icon ? <Icon data={icon} size={iconSize} className={b('icon')} /> : null;
     const titleNode = renderItemTitle(item);
     const params = {icon: iconNode, title: titleNode};
+    let highlightedNode = null;
     let node;
 
     const opts = {compact: Boolean(compact), collapsed: false, item, ref};
 
     if (typeof item.itemWrapper === 'function') {
         node = item.itemWrapper(params, makeNode, opts) as React.ReactElement;
+        highlightedNode =
+            bringForward &&
+            (item.itemWrapper(
+                params,
+                ({icon: iconEl}) => makeIconNode(iconEl),
+                opts,
+            ) as React.ReactElement);
     } else {
         node = makeNode(params);
+        highlightedNode = bringForward && makeIconNode(iconNode);
     }
 
-    const highlightedNode = makeIconNode(iconNode);
     return (
         <>
             {bringForward && (