feat(CompositeBar): add icon to collapsed list (#272)

gravity-ui · Aug 5, 2024 · 47c13fa · 47c13fa
1 parent 2cbdb99
commit 47c13fa
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 2 deletions.
diff --git a/src/components/CompositeBar/Item/Item.scss b/src/components/CompositeBar/Item/Item.scss
@@ -94,13 +94,20 @@ $block: '.#{variables.$ns}composite-bar-item';
     }
 
     &__collapse-item {
+        --_--item-icon-color: var(--g-color-text-misc);
+
         display: flex;
         padding: 0 16px;
         align-items: center;
         width: 100%;
         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
@@ -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,