Set position on hover

Shopify · Jan 24, 2024 · 9879369 · 9879369
1 parent 6e0d551
commit 9879369
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 17 deletions.
diff --git a/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx b/packages/polaris-viz/src/components/LegendContainer/LegendContainer.tsx
@@ -9,11 +9,7 @@ import {
   useChartContext,
   useTheme,
 } from '@shopify/polaris-viz-core';
-import type {
-  Direction,
-  Dimensions,
-  BoundingRect,
-} from '@shopify/polaris-viz-core';
+import type {Direction, Dimensions} from '@shopify/polaris-viz-core';
 
 import {DEFAULT_LEGEND_HEIGHT, DEFAULT_LEGEND_WIDTH} from '../../constants';
 import {useResizeObserver, useWatchColorVisionEvents} from '../../hooks';
@@ -29,7 +25,6 @@ import {classNames} from '../../utilities';
 import style from './LegendContainer.scss';
 import {HiddenLegendPopover} from './components/HiddenLegendPopover';
 
-const MORE_TEXT_WIDTH = 50;
 const LEGEND_GAP = 10;
 
 export interface LegendContainerProps {
@@ -46,7 +41,6 @@ export interface LegendContainerProps {
   renderHiddenLegendLabel?: RenderHiddenLegendLabel;
   /* If enabled, hides overflowing legend items with "+ n more" */
   hideOverflow?: boolean;
-  chartBounds: BoundingRect;
 }
 
 export function LegendContainer({
@@ -61,7 +55,6 @@ export function LegendContainer({
   width,
   hideOverflow = false,
   renderHiddenLegendLabel = (count) => `+${count} more`,
-  chartBounds,
 }: LegendContainerProps) {
   const selectedTheme = useTheme();
   const {setRef, entry} = useResizeObserver();
@@ -198,7 +191,6 @@ export function LegendContainer({
               )}
               lastVisibleIndex={allData.length - hiddenData.length}
               setButtonWidth={setButtonWidth}
-              chartBounds={chartBounds}
             />
           )}
         </>

diff --git a/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendPopover.tsx b/packages/polaris-viz/src/components/LegendContainer/components/HiddenLegendPopover.tsx
@@ -9,6 +9,7 @@ import {useBrowserCheck} from '../../../hooks/useBrowserCheck';
 import {useColorVisionEvents} from '../../../hooks';
 import {createPortal} from 'react-dom';
 import {useRootContainer} from '../../../hooks/useRootContainer';
+import {TOOLTIP_MARGIN} from '../../../components/TooltipWrapper';
 
 interface Props {
   activeIndex: number;
@@ -43,10 +44,20 @@ export function HiddenLegendPopover({
   const [active, setActive] = useState(false);
 
   useEffect(() => {
+    if (activatorRef.current == null) {
+      return;
+    }
+    const activator = activatorRef.current.getBoundingClientRect();
+    setButtonWidth(activator.width);
+  }, [setButtonWidth]);
+
+  const getTooltipPosition = useCallback(() => {
     if (tooltipRef.current == null || activatorRef.current == null) {
       return;
     }
 
+    setActive(true);
+
     const activator = activatorRef.current.getBoundingClientRect();
     const tooltip = tooltipRef.current.getBoundingClientRect();
 
@@ -55,18 +66,21 @@ export function HiddenLegendPopover({
 
     function getXPosition() {
       const goesPastRightOfWindow =
-        xPosition + tooltip.width > window.innerWidth;
+        xPosition + tooltip.width + TOOLTIP_MARGIN > window.innerWidth;
 
       if (goesPastRightOfWindow) {
+        // console.log({goesPastRightOfWindow});
         return xPosition - tooltip.width + activator.width;
       }
       return xPosition;
     }
 
     function getYPosition() {
       const goesPastBottomOfWindow =
-        yPosition + tooltip.height >= window.innerHeight;
+        yPosition + tooltip.height + TOOLTIP_MARGIN >=
+        window.innerHeight + window.scrollY;
       if (goesPastBottomOfWindow) {
+        // console.log({goesPastBottomOfWindow});
         return yPosition - tooltip.height - activator.height;
       }
 
@@ -77,18 +91,14 @@ export function HiddenLegendPopover({
       top: getYPosition(),
       left: getXPosition(),
     });
-
-    setButtonWidth(activator.width);
-  }, [tooltipRef.current, activatorRef.current]);
+  }, [setPosition, setButtonWidth]);
 
   return (
     <>
       <button
         className={style.MoreText}
         ref={activatorRef}
-        onMouseOver={() => {
-          setActive(true);
-        }}
+        onMouseEnter={getTooltipPosition}
         onMouseLeave={() => setActive(false)}
       >
         {label}