From 14a8eebc25bc7f426400207b1bf9c4239e6d51bd Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Wed, 7 Oct 2020 17:05:44 -0700 Subject: [PATCH 1/3] fix(tooltip): fallback to left/top positioning, add applyPositionStyle --- .../visx-tooltip/src/tooltips/Tooltip.tsx | 30 +++++++++++++------ .../src/tooltips/TooltipWithBounds.tsx | 25 +++++++--------- .../test/TooltipWithBounds.test.tsx | 7 ++--- 3 files changed, 34 insertions(+), 28 deletions(-) diff --git a/packages/visx-tooltip/src/tooltips/Tooltip.tsx b/packages/visx-tooltip/src/tooltips/Tooltip.tsx index 71f9445a2..5ac95d2fd 100644 --- a/packages/visx-tooltip/src/tooltips/Tooltip.tsx +++ b/packages/visx-tooltip/src/tooltips/Tooltip.tsx @@ -2,13 +2,26 @@ import React from 'react'; import cx from 'classnames'; export type TooltipProps = { + children?: React.ReactNode; + className?: string; left?: number; - top?: number; offsetLeft?: number; offsetTop?: number; - className?: string; - style?: React.CSSProperties; - children?: React.ReactNode; + /** Styles to apply, unless `unstyled=true`. */ + style?: React.CSSProperties | null; + top?: number; + /** + * Applies position: 'absolute' for tooltips to correctly position themselves + * when `unstyled=true`. In a future major release this will be the default behavior. + */ + applyPositionStyle?: boolean; + /** + * Whether to omit applying any style, except `left` / `top`. + * In most cases if this is `true` a developer must do one of the following + * for positioning to work correctly: + * - set `applyPositionStyles=true` + * - create a CSS selector like: `.visx-tooltip { position: 'absolute' }` + */ unstyled?: boolean; }; @@ -33,17 +46,16 @@ export default function Tooltip({ style = defaultStyles, children, unstyled = false, + applyPositionStyle = false, ...restProps }: TooltipProps & React.HTMLProps) { return (
& WithBoundingRectsProps; function TooltipWithBounds({ + children, + getRects, left: initialLeft = 0, - top: initialTop = 0, offsetLeft = 10, offsetTop = 10, - children, - rect: ownBounds, parentRect: parentBounds, - getRects, + rect: ownBounds, style = defaultStyles, + top: initialTop = 0, unstyled = false, ...otherProps }: TooltipWithBoundsProps) { @@ -44,12 +41,12 @@ function TooltipWithBounds({ return ( {children} diff --git a/packages/visx-tooltip/test/TooltipWithBounds.test.tsx b/packages/visx-tooltip/test/TooltipWithBounds.test.tsx index b7eaa53c7..ce7767f14 100644 --- a/packages/visx-tooltip/test/TooltipWithBounds.test.tsx +++ b/packages/visx-tooltip/test/TooltipWithBounds.test.tsx @@ -1,3 +1,4 @@ +/* eslint-disable @typescript-eslint/no-explicit-any */ import React from 'react'; import { shallow } from 'enzyme'; import { TooltipWithBounds, defaultStyles } from '../src'; @@ -21,11 +22,7 @@ describe('', () => { const wrapper = shallow(Hello, { disableLifecycleMethods: true, }).dive(); - const styles = wrapper - .find('Tooltip') - .dive() - .find('.visx-tooltip') - .props().style as any; + const styles = wrapper.find('Tooltip').props().style as any; Object.keys(defaultStyles).forEach(key => { expect(styles[key]).toBeUndefined(); }); From e3682d3e7bd27b8c56b9252ef52c346363ab9c19 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Wed, 7 Oct 2020 17:11:22 -0700 Subject: [PATCH 2/3] copy(tooltip): fix prop type annotation --- packages/visx-tooltip/src/tooltips/Tooltip.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/visx-tooltip/src/tooltips/Tooltip.tsx b/packages/visx-tooltip/src/tooltips/Tooltip.tsx index 5ac95d2fd..c34424271 100644 --- a/packages/visx-tooltip/src/tooltips/Tooltip.tsx +++ b/packages/visx-tooltip/src/tooltips/Tooltip.tsx @@ -19,7 +19,7 @@ export type TooltipProps = { * Whether to omit applying any style, except `left` / `top`. * In most cases if this is `true` a developer must do one of the following * for positioning to work correctly: - * - set `applyPositionStyles=true` + * - set `applyPositionStyle=true` * - create a CSS selector like: `.visx-tooltip { position: 'absolute' }` */ unstyled?: boolean; From 6603411b9a77a97dde06443ef3e00d4525db9758 Mon Sep 17 00:00:00 2001 From: Chris Williams Date: Wed, 7 Oct 2020 17:22:07 -0700 Subject: [PATCH 3/3] fix(tooltip): remove optional null style type, add other prop annotations --- packages/visx-tooltip/src/tooltips/Tooltip.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/packages/visx-tooltip/src/tooltips/Tooltip.tsx b/packages/visx-tooltip/src/tooltips/Tooltip.tsx index c34424271..b26209dce 100644 --- a/packages/visx-tooltip/src/tooltips/Tooltip.tsx +++ b/packages/visx-tooltip/src/tooltips/Tooltip.tsx @@ -2,13 +2,19 @@ import React from 'react'; import cx from 'classnames'; export type TooltipProps = { + /** Tooltip content. */ children?: React.ReactNode; + /** Optional className to apply to the Tooltip in addition to `visx-tooltip`. */ className?: string; + /** The `left` position of the Tooltip. */ left?: number; + /** Offset the `left` position of the Tooltip by this margin. */ offsetLeft?: number; + /** Offset the `top` position of the Tooltip by this margin. */ offsetTop?: number; /** Styles to apply, unless `unstyled=true`. */ - style?: React.CSSProperties | null; + style?: React.CSSProperties; + /** The `top` position of the Tooltip. */ top?: number; /** * Applies position: 'absolute' for tooltips to correctly position themselves