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 = ToolbarBaseProps & ToolbarItemData; export type ToolbarButtonViewProps = Pick< ToolbarItemData, - 'icon' | 'title' | 'hint' | 'hotkey' | 'hintWhenDisabled' + 'title' | 'hint' | 'hotkey' | 'hintWhenDisabled' > & { active: boolean; enabled: boolean; onClick: () => void; className?: string; -}; +} & (Pick, 'icon'> | {children: ReactNode}); export const ToolbarButtonView = forwardRef( 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 - + {'icon' in props ? ( + + ) : ( + props.children + )} )} diff --git a/src/toolbar/ToolbarListButton.tsx b/src/toolbar/ToolbarListButton.tsx index 612d52f36..7e847acdf 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,42 +61,21 @@ export function ToolbarListButton({ buttonContent.push(); } - const titleText: string = isFunction(title) ? title() : title; - return ( <> - - {i18n('toolbar_action_disabled')} - - } - placement={'bottom'} - disabled={!everyDisabled} + { + if (popupItem) setPopupItem(undefined); + else toggleOpen(); + }} > - - - - + {buttonContent} + {data