From 20dd058de0c54f76c4569a5959c5768a55cfafc8 Mon Sep 17 00:00:00 2001
From: Alexey Sudilovskiy <sudilovskiy@yandex-team.ru>
Date: Thu, 13 Mar 2025 18:17:51 +0100
Subject: [PATCH 1/4] refactor: split ActionTooltip/Popover nesting

---
 src/toolbar/ToolbarListButton.tsx | 58 ++++++++++++++++++-------------
 1 file changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/toolbar/ToolbarListButton.tsx b/src/toolbar/ToolbarListButton.tsx
index 612d52f36..58073277e 100644
--- a/src/toolbar/ToolbarListButton.tsx
+++ b/src/toolbar/ToolbarListButton.tsx
@@ -72,40 +72,48 @@ export function ToolbarListButton<E>({
 
     const titleText: string = isFunction(title) ? title() : title;
 
+    const button = (
+        <Button
+            size="m"
+            ref={setAnchorElement}
+            view={someActive || popupOpen ? 'normal' : 'flat'}
+            selected={someActive}
+            disabled={everyDisabled}
+            className={b({arrow: withArrow}, [className])}
+            onClick={() => {
+                if (popupItem) setPopupItem(undefined);
+                else toggleOpen();
+            }}
+        >
+            {buttonContent}
+        </Button>
+    );
+    
     return (
         <>
-            <Popover
-                className={b('action-disabled-popover')}
-                content={
-                    <div className={b('action-disabled-tooltip')}>
-                        {i18n('toolbar_action_disabled')}
-                    </div>
-                }
-                placement={'bottom'}
-                disabled={!everyDisabled}
-            >
+            {everyDisabled ? (
                 <ActionTooltip
                     title={titleText}
                     disabled={Boolean(popupItem) || popupOpen}
                     openDelay={ToolbarTooltipDelay.Open}
                     closeDelay={ToolbarTooltipDelay.Close}
                 >
-                    <Button
-                        size="m"
-                        ref={setAnchorElement}
-                        view={someActive || popupOpen ? 'normal' : 'flat'}
-                        selected={someActive}
-                        disabled={everyDisabled}
-                        className={b({arrow: withArrow}, [className])}
-                        onClick={() => {
-                            if (popupItem) setPopupItem(undefined);
-                            else toggleOpen();
-                        }}
-                    >
-                        {buttonContent}
-                    </Button>
+                    {button}
                 </ActionTooltip>
-            </Popover>
+            ) : (
+                <Popover
+                    className={b('action-disabled-popover')}
+                    content={
+                        <div className={b('action-disabled-tooltip')}>
+                            {i18n('toolbar_action_disabled')}
+                        </div>
+                    }
+                    placement={'bottom'}
+                    disabled={!everyDisabled}
+                >
+                    {button}
+                </Popover>
+            )}
             <Popup anchorElement={anchorElement} open={popupOpen} onOpenChange={hide}>
                 <Menu size="l" className={b('menu')}>
                     {data

From 9c5514f07a6953ab9a67cdeebcd137dde9f5298c Mon Sep 17 00:00:00 2001
From: Alexey <sudilovskiy@yandex-team.ru>
Date: Thu, 13 Mar 2025 18:22:13 +0100
Subject: [PATCH 2/4] chore: lint

---
 src/toolbar/ToolbarListButton.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/toolbar/ToolbarListButton.tsx b/src/toolbar/ToolbarListButton.tsx
index 58073277e..7b956c9ce 100644
--- a/src/toolbar/ToolbarListButton.tsx
+++ b/src/toolbar/ToolbarListButton.tsx
@@ -88,7 +88,7 @@ export function ToolbarListButton<E>({
             {buttonContent}
         </Button>
     );
-    
+
     return (
         <>
             {everyDisabled ? (

From df37d55afc64107b2c331776377ec35f48f83072 Mon Sep 17 00:00:00 2001
From: Alexey Sudilovskiy <sudilovskiy@yandex-team.ru>
Date: Fri, 14 Mar 2025 13:09:19 +0100
Subject: [PATCH 3/4] refactor: use `ToolbarButtonView`

---
 src/toolbar/ToolbarListButton.tsx | 67 +++++++------------------------
 1 file changed, 14 insertions(+), 53 deletions(-)

diff --git a/src/toolbar/ToolbarListButton.tsx b/src/toolbar/ToolbarListButton.tsx
index 7b956c9ce..d2f80276e 100644
--- a/src/toolbar/ToolbarListButton.tsx
+++ b/src/toolbar/ToolbarListButton.tsx
@@ -1,16 +1,7 @@
 import {Fragment, useEffect, useState} from 'react';
 
 import {ChevronDown} from '@gravity-ui/icons';
-import {
-    ActionTooltip,
-    Button,
-    HelpMark,
-    Hotkey,
-    Icon,
-    Menu,
-    Popover,
-    Popup,
-} from '@gravity-ui/uikit';
+import {HelpMark, Hotkey, Icon, Menu, Popover, Popup} from '@gravity-ui/uikit';
 
 import {cn} from '../classname';
 import {i18n} from '../i18n/common';
@@ -18,7 +9,7 @@ import {isFunction} from '../lodash';
 import {useBooleanState, useElementState} from '../react-utils/hooks';
 
 import {PreviewTooltip} from './PreviewTooltip';
-import {ToolbarTooltipDelay} from './const';
+import {ToolbarButtonView} from './ToolbarButton';
 import type {
     ToolbarBaseProps,
     ToolbarButtonPopupData,
@@ -70,50 +61,20 @@ export function ToolbarListButton<E>({
         buttonContent.push(<Icon key={3} data={ChevronDown} size={16} />);
     }
 
-    const titleText: string = isFunction(title) ? title() : title;
-
-    const button = (
-        <Button
-            size="m"
-            ref={setAnchorElement}
-            view={someActive || popupOpen ? 'normal' : 'flat'}
-            selected={someActive}
-            disabled={everyDisabled}
-            className={b({arrow: withArrow}, [className])}
-            onClick={() => {
-                if (popupItem) setPopupItem(undefined);
-                else toggleOpen();
-            }}
-        >
-            {buttonContent}
-        </Button>
-    );
-
     return (
         <>
-            {everyDisabled ? (
-                <ActionTooltip
-                    title={titleText}
-                    disabled={Boolean(popupItem) || popupOpen}
-                    openDelay={ToolbarTooltipDelay.Open}
-                    closeDelay={ToolbarTooltipDelay.Close}
-                >
-                    {button}
-                </ActionTooltip>
-            ) : (
-                <Popover
-                    className={b('action-disabled-popover')}
-                    content={
-                        <div className={b('action-disabled-tooltip')}>
-                            {i18n('toolbar_action_disabled')}
-                        </div>
-                    }
-                    placement={'bottom'}
-                    disabled={!everyDisabled}
-                >
-                    {button}
-                </Popover>
-            )}
+            <ToolbarButtonView
+                ref={setAnchorElement}
+                active={someActive}
+                enabled={!everyDisabled}
+                title={title}
+                icon={icon}
+                className={b({arrow: withArrow}, [className])}
+                onClick={() => {
+                    if (popupItem) setPopupItem(undefined);
+                    else toggleOpen();
+                }}
+            />
             <Popup anchorElement={anchorElement} open={popupOpen} onOpenChange={hide}>
                 <Menu size="l" className={b('menu')}>
                     {data

From 66c8e454348702a045b4a008b5fda5331239d291 Mon Sep 17 00:00:00 2001
From: Alexey Sudilovskiy <sudilovskiy@yandex-team.ru>
Date: Fri, 14 Mar 2025 13:25:46 +0100
Subject: [PATCH 4/4] feat(ToolbarButtonView): allow children override

---
 src/toolbar/ToolbarButton.tsx     | 14 +++++++++-----
 src/toolbar/ToolbarListButton.tsx |  5 +++--
 2 files changed, 12 insertions(+), 7 deletions(-)

diff --git a/src/toolbar/ToolbarButton.tsx b/src/toolbar/ToolbarButton.tsx
index 66a540a2b..9aee0afc5 100644
--- a/src/toolbar/ToolbarButton.tsx
+++ b/src/toolbar/ToolbarButton.tsx
@@ -1,4 +1,4 @@
-import {forwardRef} from 'react';
+import {type ReactNode, forwardRef} from 'react';
 
 import {ActionTooltip, Button, Icon, Popover, setRef} from '@gravity-ui/uikit';
 
@@ -17,17 +17,17 @@ export type ToolbarButtonProps<E> = ToolbarBaseProps<E> & ToolbarItemData<E>;
 
 export type ToolbarButtonViewProps = Pick<
     ToolbarItemData<unknown>,
-    'icon' | 'title' | 'hint' | 'hotkey' | 'hintWhenDisabled'
+    'title' | 'hint' | 'hotkey' | 'hintWhenDisabled'
 > & {
     active: boolean;
     enabled: boolean;
     onClick: () => void;
     className?: string;
-};
+} & (Pick<ToolbarItemData<unknown>, 'icon'> | {children: ReactNode});
 
 export const ToolbarButtonView = forwardRef<HTMLButtonElement, ToolbarButtonViewProps>(
     function ToolbarButtonView(
-        {icon, title, hint, hotkey, hintWhenDisabled, active, enabled, onClick, className},
+        {title, hint, hotkey, hintWhenDisabled, active, enabled, onClick, className, ...props},
         ref,
     ) {
         const disabled = !active && !enabled;
@@ -70,7 +70,11 @@ export const ToolbarButtonView = forwardRef<HTMLButtonElement, ToolbarButtonView
                                 className={b(null, [className])}
                                 aria-label={titleText}
                             >
-                                <Icon data={icon.data} size={icon.size ?? 16} />
+                                {'icon' in props ? (
+                                    <Icon data={props.icon.data} size={props.icon.size ?? 16} />
+                                ) : (
+                                    props.children
+                                )}
                             </Button>
                         )}
                     </ActionTooltip>
diff --git a/src/toolbar/ToolbarListButton.tsx b/src/toolbar/ToolbarListButton.tsx
index d2f80276e..7e847acdf 100644
--- a/src/toolbar/ToolbarListButton.tsx
+++ b/src/toolbar/ToolbarListButton.tsx
@@ -68,13 +68,14 @@ export function ToolbarListButton<E>({
                 active={someActive}
                 enabled={!everyDisabled}
                 title={title}
-                icon={icon}
                 className={b({arrow: withArrow}, [className])}
                 onClick={() => {
                     if (popupItem) setPopupItem(undefined);
                     else toggleOpen();
                 }}
-            />
+            >
+                {buttonContent}
+            </ToolbarButtonView>
             <Popup anchorElement={anchorElement} open={popupOpen} onOpenChange={hide}>
                 <Menu size="l" className={b('menu')}>
                     {data