Remove tooltip default styles

packages/vx-tooltip/Readme.md

@@ -53,6 +53,7 @@ This is a simple Tooltip container component meant to be used to actually render
 | 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                     |
 
 #### TooltipWithBounds
 

packages/vx-tooltip/package.json

@@ -30,7 +30,7 @@
   "dependencies": {
     "@types/classnames": "^2.2.9",
     "@types/react": "*",
-    "@vx/bounds": "0.0.195",
+    "@vx/bounds": "^0.0.195",
     "classnames": "^2.2.5",
     "prop-types": "^15.5.10"
   },

packages/vx-tooltip/src/index.ts

@@ -1,4 +1,4 @@
 export { default as withTooltip } from './enhancers/withTooltip';
 export { default as useTooltip } from './hooks/useTooltip';
-export { default as Tooltip } from './tooltips/Tooltip';
+export { default as Tooltip, defaultStyles } from './tooltips/Tooltip';
 export { default as TooltipWithBounds } from './tooltips/TooltipWithBounds';

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

@@ -7,33 +7,34 @@ export type TooltipProps = {
   className?: string;
   style?: React.CSSProperties;
   children?: React.ReactNode;
+  unstyled?: boolean;
+};
+
+export const defaultStyles: React.CSSProperties = {
+  position: 'absolute',
+  backgroundColor: 'white',
+  color: '#666666',
+  padding: '.3rem .5rem',
+  borderRadius: '3px',
+  fontSize: '14px',
+  boxShadow: '0 1px 2px rgba(33,33,33,0.2)',
+  lineHeight: '1em',
+  pointerEvents: 'none',
 };
 
 export default function Tooltip({
   className,
   top,
   left,
-  style,
+  style = defaultStyles,
   children,
+  unstyled = false,
   ...restProps
 }: TooltipProps & JSX.IntrinsicElements['div']) {
   return (
     <div
       className={cx('vx-tooltip-portal', className)}
-      style={{
-        position: 'absolute',
-        backgroundColor: 'white',
-        color: '#666666',
-        padding: '.3rem .5rem',
-        borderRadius: '3px',
-        fontSize: '14px',
-        boxShadow: '0 1px 2px rgba(33,33,33,0.2)',
-        lineHeight: '1em',
-        pointerEvents: 'none',
-        top,
-        left,
-        ...style,
-      }}
+      style={{ top, left, ...(!unstyled && style) }}
       {...restProps}
     >
       {children}

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

@@ -1,5 +1,4 @@
 import React from 'react';
-// @ts-ignore This line could be removed after bounds migration to the TS
 import { withBoundingRects } from '@vx/bounds';
 
 import Tooltip from './Tooltip';

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

@@ -1,7 +1,43 @@
-import { Tooltip } from '../src';
+import React from 'react';
+import { shallow } from 'enzyme';
+import { Tooltip, defaultStyles } from '../src';
 
 describe('<Tooltip />', () => {
   test('it should be defined', () => {
     expect(Tooltip).toBeDefined();
   });
+
+  it('should render with the default styles', () => {
+    const wrapper = shallow(<Tooltip>Hello</Tooltip>);
+    const styles = wrapper.props().style;
+    Object.entries(defaultStyles).forEach(([key, value]) => {
+      expect(styles[key]).toBe(value);
+    });
+  });
+
+  it('should render with no default styles', () => {
+    const wrapper = shallow(<Tooltip unstyled>Hello</Tooltip>);
+    const styles = wrapper.props().style;
+    Object.keys(defaultStyles).forEach(key => {
+      expect(styles[key]).toBe(undefined);
+    });
+  });
+
+  it('should overwrite default styles when given the style prop', () => {
+    const newStyles: React.CSSProperties = {
+      position: 'relative',
+      backgroundColor: 'green',
+      color: 'red',
+      padding: '.8rem .8rem',
+      borderRadius: '13px',
+      fontSize: '17px',
+      boxShadow: '0 2px 3px rgba(133,133,133,0.5)',
+      lineHeight: '2em',
+    };
+    const wrapper = shallow(<Tooltip style={newStyles}></Tooltip>);
+    const styles = wrapper.props().style;
+    Object.entries(newStyles).forEach(([key, value]) => {
+      expect(styles[key]).toBe(value);
+    });
+  });
 });