feat(AsideHeader)!: add ui-kit button in aside-header

src/components/CompositeBar/Item/Item.scss

@@ -30,6 +30,24 @@ $block: '.#{variables.$ns}composite-bar-item';
     cursor: pointer;
     padding: 0;
 
+    &__action {
+        display: flex;
+        min-width: 0;
+        width: 100%;
+        height: 100%;
+        align-items: center;
+        cursor: pointer;
+    }
+
+    &__action_collapse {
+        display: flex;
+        width: 216px;
+    }
+
+    &__action-btn-container {
+        display: flex;
+    }
+
     &__icon {
         color: var(--gn-aside-header-item-icon-color, var(--_--item-icon-color));
 
@@ -74,6 +92,15 @@ $block: '.#{variables.$ns}composite-bar-item';
         height: 100%;
     }
 
+    &__action-icon {
+        color: var(--gn-aside-header-item-icon-color, var(--g-color-text-complementary));
+        align-items: center;
+        display: flex;
+        flex-shrink: 0;
+        justify-content: center;
+        width: var(--gn-composite-bar-item-action-size, 36px);
+    }
+
     &__title {
         display: flex;
         align-items: center;
@@ -163,36 +190,15 @@ $block: '.#{variables.$ns}composite-bar-item';
         justify-content: center;
     }
 
-    &_type_action {
-        justify-content: center;
-        height: var(--gn-composite-bar-item-action-size);
+    &__action-container {
+        width: 100%;
         margin: 0 10px 8px;
-        background: var(--g-color-base-float);
-        box-shadow:
-            0px 0px 0px 1px rgba(0, 0, 0, 0.03),
-            0px 5px 6px rgba(0, 0, 0, 0.12);
-        border-radius: var(--gn-composite-bar-item-action-size);
-        transition:
-            transform 0.1s ease-out,
-            background-color 0.15s linear;
-
-        &:focus-visible {
-            box-shadow: 0 0 0 2px var(--g-color-line-misc);
-        }
-
-        &:hover {
-            background-color: var(--g-color-base-float-hover);
-        }
-
-        &:active {
-            box-shadow: 0 1px 2px var(--g-color-sfx-shadow);
-            transition: none;
-            transform: scale(0.96);
-        }
+    }
 
-        & #{$class}__icon-place {
-            width: var(--gn-composite-bar-item-action-size);
-        }
+    &__action-container-compact {
+        width: var(--gn-composite-bar-item-action-size, 36px);
+        height: var(--gn-composite-bar-item-action-size, 36px);
+        margin: 0 10px 8px;
     }
 
     &__icon-tooltip_item-type_action {

src/components/CompositeBar/Item/Item.tsx

@@ -1,6 +1,14 @@
 import React from 'react';
 
-import {ActionTooltip, Icon, List, Popup, PopupPlacement, PopupProps} from '@gravity-ui/uikit';
+import {
+    ActionTooltip,
+    Button,
+    Icon,
+    List,
+    Popup,
+    PopupPlacement,
+    PopupProps,
+} from '@gravity-ui/uikit';
 
 import {useAsideHeaderContext} from '../../AsideHeader/AsideHeaderContext';
 import {ASIDE_HEADER_ICON_SIZE} from '../../constants';
@@ -165,50 +173,115 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
             ? ['a' as const, {href: item.link}]
             : ['button' as const, {}];
 
-        const createdNode = (
-            <React.Fragment>
-                <Tag
-                    {...tagProps}
-                    className={b({type, current, compact}, className)}
+        const handleMouseEnter = () => {
+            if (!compact) {
+                onMouseEnter?.();
+            }
+        };
+
+        const handleMouseLeave = () => {
+            if (!compact) {
+                onMouseLeave?.();
+            }
+        };
+
+        const handleClick = (
+            event: React.MouseEvent<
+                HTMLAnchorElement | HTMLButtonElement | HTMLDivElement,
+                MouseEvent
+            >,
+        ) => {
+            const target = event.currentTarget;
+            if (collapsedItem) {
+                /**
+                 * If we call onItemClick for collapsedItem then:
+                 * - User get unexpected item in onItemClick callback
+                 * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
+                 */
+                toggleOpen(!open);
+            } else if (target instanceof HTMLDivElement) {
+                onItemClick?.(item, false, event as React.MouseEvent<HTMLDivElement, MouseEvent>);
+            }
+        };
+
+        const renderActionButton = () => (
+            <div className={compact ? b('action-container-compact') : b('action-container')}>
+                <Button
+                    onClick={handleClick}
+                    className={b('action', {compact, collapse: !compact}, className)}
                     ref={ref}
                     data-qa={item.qa}
-                    onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
-                        if (collapsedItem) {
-                            /**
-                             * If we call onItemClick for collapsedItem then:
-                             * - User get unexpected item in onItemClick callback
-                             * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
-                             */
-                            toggleOpen(!open);
-                            onCollapseItemClick?.();
-                        } else {
-                            onItemClick?.(item, false, event);
-                        }
-                    }}
-                    onClickCapture={onItemClickCapture}
-                    onMouseEnter={() => {
-                        if (!compact) {
-                            onMouseEnter?.();
-                        }
-                    }}
-                    onMouseLeave={() => {
-                        if (!compact) {
-                            onMouseLeave?.();
-                        }
-                    }}
+                    onMouseEnter={handleMouseEnter}
+                    onMouseLeave={handleMouseLeave}
+                    size="l"
+                    view="raised"
+                    type="button"
+                    pin="circle-circle"
                 >
-                    <div className={b('icon-place')} ref={highlightedRef}>
-                        {makeIconNode(iconEl)}
+                    <div className={b('action-btn-container')}>
+                        <div className={b('action-icon')}>{makeIconNode(iconEl)}</div>
+
+                        {!compact && (
+                            <div
+                                className={b('title')}
+                                title={typeof item.title === 'string' ? item.title : undefined}
+                            >
+                                {titleEl}
+                            </div>
+                        )}
                     </div>
+                </Button>
+            </div>
+        );
 
-                    <div
-                        className={b('title')}
-                        title={typeof item.title === 'string' ? item.title : undefined}
-                    >
-                        {titleEl}
-                    </div>
-                </Tag>
-                {renderPopupContent && Boolean(anchorRef?.current) && (
+        const renderTagContainer = () => (
+            <Tag
+                {...tagProps}
+                className={b({type, current, compact}, className)}
+                ref={ref}
+                data-qa={item.qa}
+                onClick={(event: React.MouseEvent<HTMLElement, MouseEvent>) => {
+                    if (collapsedItem) {
+                        /**
+                         * If we call onItemClick for collapsedItem then:
+                         * - User get unexpected item in onItemClick callback
+                         * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
+                         */
+                        toggleOpen(!open);
+                        onCollapseItemClick?.();
+                    } else {
+                        onItemClick?.(item, false, event);
+                    }
+                }}
+                onClickCapture={onItemClickCapture}
+                onMouseEnter={() => {
+                    if (!compact) {
+                        onMouseEnter?.();
+                    }
+                }}
+                onMouseLeave={() => {
+                    if (!compact) {
+                        onMouseLeave?.();
+                    }
+                }}
+            >
+                <div className={b('icon-place')} ref={highlightedRef}>
+                    {makeIconNode(iconEl)}
+                </div>
+
+                <div
+                    className={b('title')}
+                    title={typeof item.title === 'string' ? item.title : undefined}
+                >
+                    {titleEl}
+                </div>
+            </Tag>
+        );
+
+        const createdNode = (
+            <React.Fragment>
+                {type === 'action' ? renderActionButton() : renderTagContainer()}
+                {renderPopupContent && anchorRef?.current && (
                     <Popup
                         open={popupVisible}
                         keepMounted={popupKeepMounted}
@@ -224,12 +297,21 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
             </React.Fragment>
         );
 
+        if (item.link) {
+            return (
+                <a href={item.link} className={b('link')}>
+                    {createdNode}
+                </a>
+            );
+        }
+
         return createdNode;
     };
 
     const iconNode = icon ? (
         <Icon qa={iconQa} data={icon} size={iconSize} className={b('icon')} />
     ) : null;
+
     const titleNode = renderItemTitle(item);
     const params = {icon: iconNode, title: titleNode};
     let highlightedNode = null;