Fix tooltip with bounds

packages/vx-tooltip/Readme.md

@@ -69,7 +69,7 @@ accepts the following props, and will spread any additional props on the tooltip
 | className | string           | --      | Adds a class (in addition to `vx-tooltip-portal`) to the tooltip container    |
 | style     | object           | --      | Sets / overrides any styles on the tooltip container (including top and left) |
 | children  | node             | --      | Sets the children of the tooltip, i.e., the actual content                    |
-| unstyled  | bool             | true    | Whether the tooltip use styles from the style prop or not                     |
+| unstyled  | bool             | true    | Whether the tooltip should use styles from the style prop or not              |
 
 #### TooltipWithBounds
 
@@ -86,6 +86,7 @@ component (i.e., ...restProps):
 | offsetRight | number | 10      | Vertical offset of the tooltip from the passed `top` value, functions as a vertical padding.                                                                                     |
 | style       | object | --      | Sets / overrides any styles on the tooltip container (including top and left)                                                                                                    |
 | children    | node   | --      | Sets the children of the tooltip, i.e., the actual content                                                                                                                       |
+| unstyled  | bool             | true    | Whether the tooltip should use styles from the style prop or not              |
 
 Note that this component is positioned using a `transform`, so overriding `left` and `top` via
 styles may have no effect.

packages/vx-tooltip/src/tooltips/TooltipWithBounds.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { withBoundingRects } from '@vx/bounds';
 
-import Tooltip from './Tooltip';
+import Tooltip, { TooltipProps, defaultStyles } from './Tooltip';
 
 type RectShape = {
   top: number;
@@ -18,14 +18,6 @@ type WithBoundingRectsProps = {
   parentRect?: RectShape;
 };
 
-type TooltipProps = {
-  left?: number;
-  top?: number;
-  className?: string;
-  style?: React.CSSProperties;
-  children?: React.ReactNode;
-};
-
 type Props = {
   offsetLeft?: number;
   offsetTop?: number;
@@ -41,7 +33,8 @@ function TooltipWithBounds({
   parentRect,
   getRects,
   children,
-  style,
+  style = defaultStyles,
+  unstyled = false,
   ...otherProps
 }: Props) {
   let left = initialLeft;
@@ -64,7 +57,12 @@ function TooltipWithBounds({
 
   return (
     <Tooltip
-      style={{ top: 0, transform: `translate(${left}px, ${top}px)`, ...style }}
+      style={{
+        top: 0,
+        transform: `translate(${left}px, ${top}px)`,
+        ...(!unstyled && style),
+      }}
+      unstyled={unstyled}
       {...otherProps}
     >
       {children}

packages/vx-tooltip/test/TooltipWithBounds.test.tsx

@@ -1,7 +1,29 @@
-import { TooltipWithBounds } from '../src';
+import React from 'react';
+import { shallow } from 'enzyme';
+import { TooltipWithBounds, defaultStyles } from '../src';
 
 describe('<TooltipWithBounds />', () => {
   test('it should be defined', () => {
     expect(TooltipWithBounds).toBeDefined();
   });
+
+  it('should render the Tooltip with default styles by default', () => {
+    const wrapper = shallow(<TooltipWithBounds>Hello</TooltipWithBounds>, {
+      disableLifecycleMethods: true,
+    }).dive();
+    const styles = wrapper.find('Tooltip').props().style as any;
+    Object.entries(defaultStyles).forEach(([key, value]) => {
+      expect(styles[key]).toBe(value);
+    });
+  });
+
+  it('should render the tooltip without default styles if unstyled is set to true', () => {
+    const wrapper = shallow(<TooltipWithBounds unstyled>Hello</TooltipWithBounds>, {
+      disableLifecycleMethods: true,
+    }).dive();
+    const styles = wrapper.find('Tooltip').props().style as any;
+    Object.keys(defaultStyles).forEach(key => {
+      expect(styles[key]).toBeUndefined();
+    });
+  });
 });