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

gravity-ui · Oct 2, 2024 · a59feff · a59feff
1 parent a59d352
commit a59feff
Show file tree

Hide file tree

Showing 2 changed files with 101 additions and 48 deletions.
diff --git a/src/components/CompositeBar/Item/Item.scss b/src/components/CompositeBar/Item/Item.scss
@@ -2,6 +2,12 @@
 
 $block: '.#{variables.$ns}composite-bar-item';
 
+// rewrite default button styles
+
+.g-list__item-content .g-button.g-button_pin_round-round.g-button {
+    border-radius: var(--gn-composite-bar-item-action-size);
+}
+
 #{$block} {
     $class: &;
     --gn-composite-bar-item-action-size: 36px;
@@ -150,6 +156,10 @@ $block: '.#{variables.$ns}composite-bar-item';
         justify-content: center;
     }
 
+    &_type_action + & {
+        border-radius: var(--gn-composite-bar-item-action-size);
+    }
+
     &_type_action {
         justify-content: center;
         height: var(--gn-composite-bar-item-action-size);
@@ -158,7 +168,7 @@ $block: '.#{variables.$ns}composite-bar-item';
         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;
@@ -184,6 +194,14 @@ $block: '.#{variables.$ns}composite-bar-item';
         & #{$class}__title {
             margin-right: 16px;
         }
+
+        &::before {
+            content: none;
+        }
+
+        &::after {
+            content: none;
+        }
     }
 
     &__icon-tooltip_item-type_action {

diff --git a/src/components/CompositeBar/Item/Item.tsx b/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';
@@ -158,48 +166,72 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
     };
 
     const makeNode = ({icon: iconEl, title: titleEl}: MakeItemParams) => {
-        const createdNode = (
-            <React.Fragment>
+        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) {
+                toggleOpen(!open);
+            } else if (target instanceof HTMLDivElement) {
+                onItemClick?.(item, false, event as React.MouseEvent<HTMLDivElement, MouseEvent>);
+            }
+        };
+
+        const renderActionButton = () => (
+            <Button
+                onClick={handleClick}
+                className={b({type, current, compact}, className)}
+                ref={ref}
+                data-qa={item.qa}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+            >
+                {makeIconNode(iconEl)}
+                {!compact && titleEl}
+            </Button>
+        );
+
+        const renderDivContainer = () => (
+            <div
+                className={b({type, compact}, className)}
+                ref={ref}
+                data-qa={item.qa}
+                onClick={handleClick}
+                onClickCapture={onItemClickCapture}
+                onMouseEnter={handleMouseEnter}
+                onMouseLeave={handleMouseLeave}
+            >
+                <div className={b('icon-place')} ref={highlightedRef}>
+                    {makeIconNode(iconEl)}
+                </div>
                 <div
-                    className={b({type, current, compact}, className)}
-                    ref={ref}
-                    data-qa={item.qa}
-                    onClick={(event: React.MouseEvent<HTMLDivElement, 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);
-                        } else {
-                            onItemClick?.(item, false, event);
-                        }
-                    }}
-                    onClickCapture={onItemClickCapture}
-                    onMouseEnter={() => {
-                        if (!compact) {
-                            onMouseEnter?.();
-                        }
-                    }}
-                    onMouseLeave={() => {
-                        if (!compact) {
-                            onMouseLeave?.();
-                        }
-                    }}
+                    className={b('title')}
+                    title={typeof item.title === 'string' ? item.title : undefined}
                 >
-                    <div className={b('icon-place')} ref={highlightedRef}>
-                        {makeIconNode(iconEl)}
-                    </div>
-
-                    <div
-                        className={b('title')}
-                        title={typeof item.title === 'string' ? item.title : undefined}
-                    >
-                        {titleEl}
-                    </div>
+                    {titleEl}
                 </div>
-                {renderPopupContent && Boolean(anchorRef?.current) && (
+            </div>
+        );
+
+        const createdNode = (
+            <React.Fragment>
+                {type === 'action' ? renderActionButton() : renderDivContainer()}
+                {renderPopupContent && anchorRef?.current && (
                     <Popup
                         contentClassName={b('popup', popupContentClassName)}
                         open={popupVisible}
@@ -216,18 +248,21 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
             </React.Fragment>
         );
 
-        return item.link ? (
-            <a href={item.link} className={b('link')}>
-                {createdNode}
-            </a>
-        ) : (
-            createdNode
-        );
+        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;