From 6874ee1a0a18bc5cbcb64d5f674601199f6c034e Mon Sep 17 00:00:00 2001
From: Angelina Gadzhieva <lunory@yandex-team.ru>
Date: Tue, 14 Nov 2023 17:19:59 +0300
Subject: [PATCH] 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
---
 .../__stories__/AsideHeaderShowcase.tsx       | 19 ++++++++++++++++---
 src/components/CompositeBar/Item/Item.tsx     | 10 +++++++++-
 2 files changed, 25 insertions(+), 4 deletions(-)

diff --git a/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx b/src/components/AsideHeader/__stories__/AsideHeaderShowcase.tsx
index aafab0a..4033bd0 100644
--- 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,7 +181,6 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                         <FooterItem
                             item={{
                                 id: 'project-settings',
-                                icon: Gear,
                                 title: 'Settings with panel',
                                 tooltipText: (
                                     <div>
@@ -180,6 +188,11 @@ export const AsideHeaderShowcase: FC<AsideHeaderShowcaseProps> = ({
                                     </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
index 46eed3d..76dd058 100644
--- 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 && (