fix TooltipWithBounds positioning (#828)

* remove line unstyled={unstyled} in TooltipWithBounds.tsx * fix TooltipWithBounds positioning * corrections for failing tests * pass tests Co-authored-by: Chris Williams <williaster@users.noreply.github.com> * fix(Tooltip): add unit to translateY Co-authored-by: Chris Williams <williaster@users.noreply.github.com>
airbnb · Oct 7, 2020 · 0dc7dec · 0dc7dec
1 parent e6abc6b
commit 0dc7dec
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 9 deletions.
diff --git a/packages/visx-tooltip/src/tooltips/Tooltip.tsx b/packages/visx-tooltip/src/tooltips/Tooltip.tsx
@@ -39,8 +39,11 @@ export default function Tooltip({
     <div
       className={cx('visx-tooltip', className)}
       style={{
-        top: top == null || offsetTop == null ? top : top + offsetTop,
-        left: left == null || offsetLeft == null ? left : left + offsetLeft,
+        left: 0,
+        top: 0,
+        transform: `translate(${
+          left == null || offsetLeft == null ? left ?? 0 : left + offsetLeft
+        }px, ${top == null || offsetTop == null ? top ?? 0 : top + offsetTop}px)`,
         ...(!unstyled && style),
       }}
       {...restProps}

diff --git a/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx b/packages/visx-tooltip/src/tooltips/TooltipWithBounds.tsx
@@ -44,12 +44,11 @@ function TooltipWithBounds({
 
   return (
     <Tooltip
-      style={{
-        top: 0,
-        left: 0,
-        transform: `translate(${left}px, ${top}px)`,
-        ...(!unstyled && style),
-      }}
+      top={top}
+      left={left}
+      offsetTop={0}
+      offsetLeft={0}
+      style={style}
       unstyled={unstyled}
       {...otherProps}
     >

diff --git a/packages/visx-tooltip/test/TooltipWithBounds.test.tsx b/packages/visx-tooltip/test/TooltipWithBounds.test.tsx
@@ -21,7 +21,11 @@ describe('<TooltipWithBounds />', () => {
     const wrapper = shallow(<TooltipWithBounds unstyled>Hello</TooltipWithBounds>, {
       disableLifecycleMethods: true,
     }).dive();
-    const styles = wrapper.find('Tooltip').props().style as any;
+    const styles = wrapper
+      .find('Tooltip')
+      .dive()
+      .find('.visx-tooltip')
+      .props().style as any;
     Object.keys(defaultStyles).forEach(key => {
       expect(styles[key]).toBeUndefined();
     });