feat: use uikit Tooltip (#42)

* feat: use uikit Tooltip * chore: update @gravity-ui/[email protected] * fix(Item): add left offset tooltip for action item * chore: update @gravity-ui/[email protected]
gravity-ui · Mar 6, 2023 · 2de0cac · 2de0cac
1 parent 511abd9
commit 2de0cac
Show file tree

Hide file tree

Showing 6 changed files with 55 additions and 114 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -42,7 +42,7 @@
         "@gravity-ui/prettier-config": "^1.0.0",
         "@gravity-ui/stylelint-config": "^1.0.0",
         "@gravity-ui/tsconfig": "^1.0.0",
-        "@gravity-ui/uikit": "^3.0.1",
+        "@gravity-ui/uikit": "^4.1.0",
         "@rollup/plugin-commonjs": "^22.0.0",
         "@rollup/plugin-node-resolve": "^13.3.0",
         "@rollup/plugin-typescript": "^8.3.3",
@@ -83,7 +83,7 @@
         "typescript": "^4.5.5"
     },
     "peerDependencies": {
-        "@gravity-ui/uikit": "^3.0.2",
+        "@gravity-ui/uikit": "^4.1.0",
         "react": "^16.0.0 || ^17.0.0",
         "react-dom": "^16.0.0 || ^17.0.0"
     },

diff --git a/src/components/CompositeBar/Item/Item.scss b/src/components/CompositeBar/Item/Item.scss
@@ -125,6 +125,10 @@ $block: '.#{variables.$ns}composite-bar-item';
         }
     }
 
+    &__icon-tooltip_item-type_action {
+        margin-left: 10px;
+    }
+
     &:not(&_compact) {
         &#{$class}_current {
             &#{$class}_type_regular {

diff --git a/src/components/CompositeBar/Item/Item.tsx b/src/components/CompositeBar/Item/Item.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import {block} from '../../utils/cn';
 
-import {List, Icon, Popup, PopupPlacement, PopupProps} from '@gravity-ui/uikit';
+import {List, Icon, Popup, PopupPlacement, PopupProps, Tooltip} from '@gravity-ui/uikit';
 
-import {ItemTooltip} from '../../ItemTooltip/ItemTooltip';
 import {MakeItemParams, MenuItem} from '../../types';
 import {getSelectedItemIndex} from '../utils';
 import {
@@ -81,7 +80,6 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
         return <div className={b('menu-divider')} />;
     }
 
-    const [tooltipAnchor, setTooltipAnchor] = React.useState<HTMLDivElement | null>(null);
     const [open, toggleOpen] = React.useState<boolean>(false);
 
     const ref = React.useRef<HTMLDivElement>(null);
@@ -121,7 +119,6 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
                          * - onClosePanel calls twice for each popuped item, as result it will prevent opening of panelItems
                          */
                         toggleOpen(!open);
-                        setTooltipAnchor(null);
                     } else {
                         onItemClick?.(item, false);
                     }
@@ -139,30 +136,25 @@ export const Item: React.FC<ItemInnerProps> = (props) => {
             >
                 <div className={b('icon-place')}>
                     {compact ? (
-                        <React.Fragment>
+                        <Tooltip
+                            content={tooltipText}
+                            disabled={!enableTooltip || (collapsedItem && open)}
+                            placement="right"
+                            className={b('icon-tooltip', {'item-type': type})}
+                        >
                             <div
-                                onMouseEnter={(event) => {
-                                    if (!open) {
-                                        setTooltipAnchor(event.currentTarget);
-                                    }
-                                    onMouseEnter?.();
-                                }}
-                                onMouseLeave={() => {
-                                    setTooltipAnchor(null);
-                                    onMouseLeave?.();
-                                }}
+                                onMouseEnter={() => onMouseEnter?.()}
+                                onMouseLeave={() => onMouseLeave?.()}
                                 className={b('btn-icon')}
                             >
                                 {iconEl}
                             </div>
-                            {enableTooltip && (
-                                <ItemTooltip anchor={tooltipAnchor} text={tooltipText} />
-                            )}
-                        </React.Fragment>
+                        </Tooltip>
                     ) : (
                         iconEl
                     )}
                 </div>
+
                 <div
                     className={b('title')}
                     title={typeof item.title === 'string' ? item.title : undefined}

diff --git a/src/components/ItemTooltip/ItemTooltip.scss b/src/components/ItemTooltip/ItemTooltip.scss
diff --git a/src/components/ItemTooltip/ItemTooltip.tsx b/src/components/ItemTooltip/ItemTooltip.tsx