refactor(ToolbarListButton): reuse ToolbarButtonView (#680)

Author: ogonkov

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>

src/toolbar/ToolbarListButton.tsx

@@ -1,24 +1,15 @@
 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';
 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,42 +61,21 @@ export function ToolbarListButton<E>({
         buttonContent.push(<Icon key={3} data={ChevronDown} size={16} />);
     }
 
-    const titleText: string = isFunction(title) ? title() : title;
-
     return (
         <>
-            <Popover
-                className={b('action-disabled-popover')}
-                content={
-                    <div className={b('action-disabled-tooltip')}>
-                        {i18n('toolbar_action_disabled')}
-                    </div>
-                }
-                placement={'bottom'}
-                disabled={!everyDisabled}
+            <ToolbarButtonView
+                ref={setAnchorElement}
+                active={someActive}
+                enabled={!everyDisabled}
+                title={title}
+                className={b({arrow: withArrow}, [className])}
+                onClick={() => {
+                    if (popupItem) setPopupItem(undefined);
+                    else toggleOpen();
+                }}
             >
-                <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>
-                </ActionTooltip>
-            </Popover>
+                {buttonContent}
+            </ToolbarButtonView>
             <Popup anchorElement={anchorElement} open={popupOpen} onOpenChange={hide}>
                 <Menu size="l" className={b('menu')}>
                     {data