From b9d227727457176f2e92aced4f1ff96f158ff345 Mon Sep 17 00:00:00 2001 From: Stephanie Roy Date: Thu, 29 Sep 2022 09:57:05 -0400 Subject: [PATCH 1/2] Use a variable for the tooltip delay --- webview/src/experiments/components/App.test.tsx | 14 +++++++------- .../components/table/CellHintTooltip.tsx | 4 ++-- .../src/experiments/util/buildDynamicColumns.tsx | 4 ++-- .../comparisonTable/ComparisonTableRow.tsx | 6 ++++-- webview/src/shared/components/tooltip/Tooltip.tsx | 2 +- webview/src/stories/Table.stories.tsx | 3 +-- 6 files changed, 17 insertions(+), 16 deletions(-) diff --git a/webview/src/experiments/components/App.test.tsx b/webview/src/experiments/components/App.test.tsx index 7595d11082..1f4d6fe30c 100644 --- a/webview/src/experiments/components/App.test.tsx +++ b/webview/src/experiments/components/App.test.tsx @@ -21,7 +21,7 @@ import { tableData as sortingTableDataFixture } from '../../test/sort' import { - CELL_TOOLTIP_DELAY, + NORMAL_TOOLTIP_DELAY, HEADER_TOOLTIP_DELAY } from '../../shared/components/tooltip/Tooltip' import { getRow } from '../../test/queries' @@ -610,7 +610,7 @@ describe('App', () => { const testParamCell = screen.getByText(testParamStringValue) fireEvent.mouseEnter(testParamCell, { bubbles: true }) - jest.advanceTimersByTime(CELL_TOOLTIP_DELAY - 1) + jest.advanceTimersByTime(NORMAL_TOOLTIP_DELAY[0] - 1) expect(screen.queryByRole('tooltip')).not.toBeInTheDocument() jest.advanceTimersByTime(1) @@ -621,7 +621,7 @@ describe('App', () => { fireEvent.mouseLeave(testParamCell, { bubbles: true }) - jest.advanceTimersByTime(CELL_TOOLTIP_DELAY) + jest.advanceTimersByTime(NORMAL_TOOLTIP_DELAY[0]) expect(screen.queryByRole('tooltip')).not.toBeInTheDocument() }) @@ -631,14 +631,14 @@ describe('App', () => { const testParamCell = screen.getByText(testParamStringValue) fireEvent.mouseEnter(testParamCell, { bubbles: true }) - jest.advanceTimersByTime(CELL_TOOLTIP_DELAY) + jest.advanceTimersByTime(NORMAL_TOOLTIP_DELAY[0]) const tooltip = screen.getByRole('tooltip') expect(tooltip).toBeInTheDocument() fireEvent.mouseLeave(testParamCell, { bubbles: true }) fireEvent.mouseEnter(tooltip, { bubbles: true }) - jest.advanceTimersByTime(CELL_TOOLTIP_DELAY) + jest.advanceTimersByTime(NORMAL_TOOLTIP_DELAY[0]) expect(tooltip).toBeInTheDocument() }) @@ -652,13 +652,13 @@ describe('App', () => { fireEvent.mouseEnter(testParamCell, { bubbles: true }) - jest.advanceTimersByTime(CELL_TOOLTIP_DELAY) + jest.advanceTimersByTime(NORMAL_TOOLTIP_DELAY[0]) const tooltip = screen.queryByRole('tooltip') expect(tooltip).toHaveTextContent(expectedTooltipResult) fireEvent.mouseLeave(testParamCell, { bubbles: true }) - jest.advanceTimersByTime(CELL_TOOLTIP_DELAY) + jest.advanceTimersByTime(NORMAL_TOOLTIP_DELAY[0]) expect(screen.queryByRole('tooltip')).not.toBeInTheDocument() } diff --git a/webview/src/experiments/components/table/CellHintTooltip.tsx b/webview/src/experiments/components/table/CellHintTooltip.tsx index 27836d0b5c..576c153467 100644 --- a/webview/src/experiments/components/table/CellHintTooltip.tsx +++ b/webview/src/experiments/components/table/CellHintTooltip.tsx @@ -2,7 +2,7 @@ import React, { ReactNode, ReactElement } from 'react' import { TippyProps } from '@tippyjs/react' import styles from './styles.module.scss' import Tooltip, { - CELL_TOOLTIP_DELAY + NORMAL_TOOLTIP_DELAY } from '../../../shared/components/tooltip/Tooltip' export type CellHintTooltipProps = { @@ -13,7 +13,7 @@ export type CellHintTooltipProps = { export const CellHintTooltip: React.FC = ({ tooltipContent, children, - delay = [CELL_TOOLTIP_DELAY, 0] + delay = NORMAL_TOOLTIP_DELAY }) => { return ( > = cell => { } placement="bottom-end" - delay={[CELL_TOOLTIP_DELAY, 0]} + delay={NORMAL_TOOLTIP_DELAY} interactive={true} >
diff --git a/webview/src/plots/components/comparisonTable/ComparisonTableRow.tsx b/webview/src/plots/components/comparisonTable/ComparisonTableRow.tsx index 97ef949ec0..5ed391ef2d 100644 --- a/webview/src/plots/components/comparisonTable/ComparisonTableRow.tsx +++ b/webview/src/plots/components/comparisonTable/ComparisonTableRow.tsx @@ -11,7 +11,9 @@ import { ChevronDown, ChevronRight } from '../../../shared/components/icons' import { PlotsState } from '../../store' import { CopyButton } from '../../../shared/components/copyButton/CopyButton' import { isSelecting } from '../../../util/strings' -import Tooltip from '../../../shared/components/tooltip/Tooltip' +import Tooltip, { + NORMAL_TOOLTIP_DELAY +} from '../../../shared/components/tooltip/Tooltip' export interface ComparisonTableRowProps { path: string @@ -51,7 +53,7 @@ export const ComparisonTableRow: React.FC = ({ {path} diff --git a/webview/src/shared/components/tooltip/Tooltip.tsx b/webview/src/shared/components/tooltip/Tooltip.tsx index a50c425e9c..4a691d47d9 100644 --- a/webview/src/shared/components/tooltip/Tooltip.tsx +++ b/webview/src/shared/components/tooltip/Tooltip.tsx @@ -5,7 +5,7 @@ import styles from './styles.module.scss' import 'tippy.js/dist/tippy.css' export const HEADER_TOOLTIP_DELAY = 100 -export const CELL_TOOLTIP_DELAY = 1000 +export const NORMAL_TOOLTIP_DELAY = [1000, 0] as [number, number] const hideOnEsc = { defaultValue: true, diff --git a/webview/src/stories/Table.stories.tsx b/webview/src/stories/Table.stories.tsx index 24fa585daa..7c3b8a2db4 100644 --- a/webview/src/stories/Table.stories.tsx +++ b/webview/src/stories/Table.stories.tsx @@ -18,7 +18,6 @@ import Experiments from '../experiments/components/Experiments' import './test-vscode-styles.scss' import '../shared/style.scss' -import { CELL_TOOLTIP_DELAY } from '../shared/components/tooltip/Tooltip' import { setExperimentsAsSelected, setExperimentsAsStarred @@ -182,7 +181,7 @@ WithAllDataTypes.play = async ({ canvasElement }) => { userEvent.hover(falseCell, { bubbles: true }) } WithAllDataTypes.parameters = { - chromatic: { delay: CELL_TOOLTIP_DELAY } + chromatic: { delay: 1000 } } export const WithDeeplyNestedHeaders = Template.bind({}) From d08791a92e93854ebd376fa04b32a16b8ec1ffd3 Mon Sep 17 00:00:00 2001 From: Stephanie Roy Date: Thu, 29 Sep 2022 10:05:38 -0400 Subject: [PATCH 2/2] Revert a change --- webview/src/stories/Table.stories.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/webview/src/stories/Table.stories.tsx b/webview/src/stories/Table.stories.tsx index 7c3b8a2db4..f5625b6627 100644 --- a/webview/src/stories/Table.stories.tsx +++ b/webview/src/stories/Table.stories.tsx @@ -24,6 +24,7 @@ import { } from '../test/tableDataFixture' import { experimentsReducers } from '../experiments/store' import { TableDataState } from '../experiments/components/table/tableDataSlice' +import { NORMAL_TOOLTIP_DELAY } from '../shared/components/tooltip/Tooltip' const tableData: TableDataState = { changes: workspaceChangesFixture, @@ -181,7 +182,7 @@ WithAllDataTypes.play = async ({ canvasElement }) => { userEvent.hover(falseCell, { bubbles: true }) } WithAllDataTypes.parameters = { - chromatic: { delay: 1000 } + chromatic: { delay: NORMAL_TOOLTIP_DELAY[0] } } export const WithDeeplyNestedHeaders = Template.bind({})