From 40eee6d96fd146ef82e3d8b0624eb9d91847eb31 Mon Sep 17 00:00:00 2001
From: Angelina Gadzhieva <lunory@yandex-team.ru>
Date: Mon, 22 Jul 2024 12:48:20 +0300
Subject: [PATCH] feat(CompositeBar): add icon to collapsed list

---
 src/components/CompositeBar/Item/Item.scss |  7 +++++++
 src/components/CompositeBar/Item/Item.tsx  | 16 ++++++++++++++--
 2 files changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/CompositeBar/Item/Item.scss b/src/components/CompositeBar/Item/Item.scss
index 241e79b3..300c6534 100644
--- a/src/components/CompositeBar/Item/Item.scss
+++ b/src/components/CompositeBar/Item/Item.scss
@@ -92,6 +92,8 @@ $block: '.#{variables.$ns}composite-bar-item';
     }
 
     &__collapse-item {
+        --_--item-icon-color: var(--g-color-text-misc);
+
         display: flex;
         padding: 0 16px;
         align-items: center;
@@ -99,6 +101,11 @@ $block: '.#{variables.$ns}composite-bar-item';
         height: 100%;
         cursor: pointer;
 
+        &-icon {
+            color: var(--gn-aside-header-item-icon-color, var(--_--item-icon-color));
+            margin-right: 10px;
+        }
+
         #{$class}__title-adornment {
             margin-right: 0;
         }
diff --git a/src/components/CompositeBar/Item/Item.tsx b/src/components/CompositeBar/Item/Item.tsx
index f66e3897..830d0c63 100644
--- a/src/components/CompositeBar/Item/Item.tsx
+++ b/src/components/CompositeBar/Item/Item.tsx
@@ -297,7 +297,10 @@ function CollapsedPopup({
                     sortable={false}
                     onItemClick={onClose}
                     renderItem={(collapseItem) => {
-                        const makeCollapseNode = ({title: titleEl}: MakeItemParams) => {
+                        const makeCollapseNode = ({
+                            title: titleEl,
+                            icon: iconEl,
+                        }: MakeItemParams) => {
                             const res = (
                                 <div
                                     className={b('collapse-item')}
@@ -307,6 +310,7 @@ function CollapsedPopup({
                                         onItemClick?.(collapseItem, true, event);
                                     }}
                                 >
+                                    {iconEl}
                                     {titleEl}
                                 </div>
                             );
@@ -321,7 +325,15 @@ function CollapsedPopup({
                         };
 
                         const titleNode = renderItemTitle(collapseItem);
-                        const params = {title: titleNode};
+                        const iconNode = collapseItem.icon && (
+                            <Icon
+                                data={collapseItem.icon}
+                                size={14}
+                                className={b('collapse-item-icon')}
+                            />
+                        );
+
+                        const params = {title: titleNode, icon: iconNode};
                         const opts = {
                             compact: Boolean(compact),
                             collapsed: true,