diff --git a/packages/vx-tooltip/Readme.md b/packages/vx-tooltip/Readme.md index 3b8bf2153..552a26373 100644 --- a/packages/vx-tooltip/Readme.md +++ b/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 diff --git a/packages/vx-tooltip/src/index.ts b/packages/vx-tooltip/src/index.ts index c02aace1e..38a30bd58 100644 --- a/packages/vx-tooltip/src/index.ts +++ b/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'; diff --git a/packages/vx-tooltip/src/tooltips/Tooltip.tsx b/packages/vx-tooltip/src/tooltips/Tooltip.tsx index 3ee572b06..8f683cc7b 100644 --- a/packages/vx-tooltip/src/tooltips/Tooltip.tsx +++ b/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 (
{children} diff --git a/packages/vx-tooltip/src/tooltips/TooltipWithBounds.tsx b/packages/vx-tooltip/src/tooltips/TooltipWithBounds.tsx index 9aa623357..af32357bf 100644 --- a/packages/vx-tooltip/src/tooltips/TooltipWithBounds.tsx +++ b/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'; diff --git a/packages/vx-tooltip/test/Tooltip.test.tsx b/packages/vx-tooltip/test/Tooltip.test.tsx index 16b0ed1dd..270330f0a 100644 --- a/packages/vx-tooltip/test/Tooltip.test.tsx +++ b/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('', () => { test('it should be defined', () => { expect(Tooltip).toBeDefined(); }); + + it('should render with the default styles', () => { + const wrapper = shallow(Hello); + 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(Hello); + 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(); + const styles = wrapper.props().style; + Object.entries(newStyles).forEach(([key, value]) => { + expect(styles[key]).toBe(value); + }); + }); });