Merge pull request #16 – feat(tooltip): add tooltip to list items

Add tooltip for items with a drop-down list of actions. Add delay before open and close tooltip.

package.json

@@ -66,7 +66,7 @@
     "@gravity-ui/prettier-config": "1.0.1",
     "@gravity-ui/stylelint-config": "1.0.1",
     "@gravity-ui/tsconfig": "1.0.0",
-    "@gravity-ui/uikit": "3.0.2",
+    "@gravity-ui/uikit": "3.1.0",
     "@storybook/addon-essentials": "6.5.10",
     "@storybook/preset-scss": "1.0.3",
     "@storybook/react": "6.5.10",
@@ -105,7 +105,7 @@
   },
   "peerDependencies": {
     "@doc-tools/transform": "^2.14.0",
-    "@gravity-ui/uikit": "^3.0.0",
+    "@gravity-ui/uikit": "^3.1.0",
     "lodash": "^4.17.20",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"

src/toolbar/FlexToolbar.tsx

@@ -14,7 +14,9 @@ import './FlexToolbar.scss';
 
 const b = cn('flex-toolbar');
 
-export type FlexToolbarProps<E> = ToolbarProps<E>;
+export type FlexToolbarProps<E> = ToolbarProps<E> & {
+    dotsTitle: string | (() => string);
+};
 
 export function FlexToolbar<E>(props: FlexToolbarProps<E>) {
     useRenderTime((time) => {
@@ -40,6 +42,7 @@ export function FlexToolbar<E>(props: FlexToolbarProps<E>) {
                     <ToolbarListButton
                         data={dots}
                         icon={{data: dotsIcon}}
+                        title={props.dotsTitle}
                         editor={props.editor}
                         focus={props.focus}
                         onClick={props.onClick}

src/toolbar/ToolbarButton.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import {isFunction} from 'lodash';
 import {Button, Icon, Tooltip} from '@gravity-ui/uikit';
 import {cn} from '../classname';
+import {ToolbarTooltipDelay} from './const';
 import type {ToolbarBaseProps, ToolbarItemData} from './types';
 
 import './ToolbarButton.scss';
@@ -31,6 +32,8 @@ export function ToolbarButton<E>({
 
     return (
         <Tooltip
+            openDelay={ToolbarTooltipDelay.Open}
+            closeDelay={ToolbarTooltipDelay.Close}
             content={
                 <>
                     {titleText}

src/toolbar/ToolbarListButton.tsx

@@ -1,10 +1,11 @@
 import React from 'react';
 import {isFunction} from 'lodash';
-import {Button, HelpPopover, Icon, Menu, Popup} from '@gravity-ui/uikit';
+import {Button, HelpPopover, Icon, Menu, Popup, Tooltip} from '@gravity-ui/uikit';
 
 import chevronIcon from '../../assets/icons/ye-chevron.svg';
 import {cn} from '../classname';
 import {useBooleanState} from '../react-utils/hooks';
+import {ToolbarTooltipDelay} from './const';
 import {ToolbarBaseProps, ToolbarIconData, ToolbarItemData} from './types';
 
 import './ToolbarListButton.scss';
@@ -13,6 +14,7 @@ const b = cn('toolbar-list-button');
 
 export type ToolbarListButtonData<E> = {
     icon: ToolbarIconData;
+    title: string | (() => string);
     withArrow?: boolean;
     data: ToolbarItemData<E>[];
 };
@@ -25,6 +27,7 @@ export function ToolbarListButton<E>({
     focus,
     onClick,
     icon,
+    title,
     withArrow,
     data,
 }: ToolbarListButtonProps<E>) {
@@ -50,19 +53,28 @@ export function ToolbarListButton<E>({
         buttonContent.push(<Icon key={3} data={chevronIcon} size={16} />);
     }
 
+    const titleText: string = isFunction(title) ? title() : title;
+
     return (
         <>
-            <Button
-                size="m"
-                ref={buttonRef}
-                view={someActive || popupOpen ? 'normal' : 'flat'}
-                selected={someActive}
-                disabled={everyDisabled}
-                className={b({arrow: withArrow}, [className])}
-                onClick={toggleOpen}
+            <Tooltip
+                content={titleText}
+                disabled={popupOpen}
+                openDelay={ToolbarTooltipDelay.Open}
+                closeDelay={ToolbarTooltipDelay.Close}
             >
-                {buttonContent}
-            </Button>
+                <Button
+                    size="m"
+                    ref={buttonRef}
+                    view={someActive || popupOpen ? 'normal' : 'flat'}
+                    selected={someActive}
+                    disabled={everyDisabled}
+                    className={b({arrow: withArrow}, [className])}
+                    onClick={toggleOpen}
+                >
+                    {buttonContent}
+                </Button>
+            </Tooltip>
             <Popup anchorRef={buttonRef} open={popupOpen} onClose={hide}>
                 <Menu size="l" className={b('menu')}>
                     {data.map(({id, title, icon, hotkey, isActive, isEnable, exec, hint}) => {

src/toolbar/const.ts

@@ -0,0 +1,4 @@
+export enum ToolbarTooltipDelay {
+    Open = 250,
+    Close = 150,
+}

src/toolbar/index.ts

@@ -1,3 +1,4 @@
+export * from './const';
 export * from './types';
 export * from './Toolbar';
 export * from './ToolbarButton';