From b575781e222cd5c1e4327dbaa14456bc20821284 Mon Sep 17 00:00:00 2001 From: rogermparent Date: Fri, 8 Jul 2022 10:43:35 -0400 Subject: [PATCH 01/13] Use @storybook/testing-library for Storybook play functions This should make writing play functions easier, since we can use the full testing-library query suite --- webview/package.json | 1 + .../src/stories/ComparisonTable.stories.tsx | 9 ++++--- webview/src/stories/Plots.stories.tsx | 20 +++++++--------- yarn.lock | 24 ++++++++++++++++--- 4 files changed, 35 insertions(+), 19 deletions(-) diff --git a/webview/package.json b/webview/package.json index 26362fd627..f000def4c2 100644 --- a/webview/package.json +++ b/webview/package.json @@ -23,6 +23,7 @@ }, "dependencies": { "@reduxjs/toolkit": "^1.8.2", + "@storybook/testing-library": "^0.0.13", "@tippyjs/react": "^4.2.6", "@vscode/webview-ui-toolkit": "^1.0.0", "classnames": "^2.2.6", diff --git a/webview/src/stories/ComparisonTable.stories.tsx b/webview/src/stories/ComparisonTable.stories.tsx index cd2616572d..687e661873 100644 --- a/webview/src/stories/ComparisonTable.stories.tsx +++ b/webview/src/stories/ComparisonTable.stories.tsx @@ -1,6 +1,6 @@ import { Meta, Story } from '@storybook/react/types-6-0' import { configureStore } from '@reduxjs/toolkit' -import { within } from '@testing-library/react' +import { screen, userEvent, within } from '@storybook/testing-library' import React from 'react' import { Provider, useDispatch } from 'react-redux' import plotsRevisionsFixture from 'dvc/src/test/fixtures/plotsDiff/revisions' @@ -62,12 +62,11 @@ export const WithPinnedColumn = Template.bind({}) WithPinnedColumn.parameters = { chromatic: { delay: 300 } } -WithPinnedColumn.play = async ({ canvasElement }) => { - const canvas = within(canvasElement) - const mainHeader = await canvas.findByTestId('main-header') +WithPinnedColumn.play = async () => { + const mainHeader = await screen.findByTestId('main-header') const pin = within(mainHeader).getByRole('button') - pin.click() + userEvent.click(pin) } const removeSingleImage = ( diff --git a/webview/src/stories/Plots.stories.tsx b/webview/src/stories/Plots.stories.tsx index cc74f66ef0..ad42643d3f 100644 --- a/webview/src/stories/Plots.stories.tsx +++ b/webview/src/stories/Plots.stories.tsx @@ -2,7 +2,7 @@ import { configureStore } from '@reduxjs/toolkit' import React from 'react' import { Provider, useDispatch } from 'react-redux' import { Story, Meta } from '@storybook/react/types-6-0' -import { within, waitFor } from '@testing-library/react' +import { screen, userEvent, within } from '@storybook/testing-library' import { PlotsData, DEFAULT_SECTION_COLLAPSED, @@ -196,22 +196,20 @@ export const ZoomedInPlot = Template.bind({}) ZoomedInPlot.parameters = { chromatic: { delay: 300 } } -ZoomedInPlot.play = async ({ canvasElement }) => { - const canvas = within(canvasElement) - const plots = await canvas.findAllByTestId(/^plot_/) - const plot = await waitFor(() => within(plots[0]).getByRole('button')) +ZoomedInPlot.play = async () => { + const plots = await screen.findAllByTestId(/^plot_/) + const plot = await within(plots[0]).findByRole('button') - plot.click() + userEvent.click(plot) } export const MultiviewZoomedInPlot = Template.bind({}) MultiviewZoomedInPlot.parameters = { chromatic: { delay: 300 } } -MultiviewZoomedInPlot.play = async ({ canvasElement }) => { - const canvas = within(canvasElement) - const plot = await canvas.findByTestId('plots-section_template-multi_1') - const plotButton = await waitFor(() => within(plot).getByRole('button')) +MultiviewZoomedInPlot.play = async () => { + const plot = await screen.findByTestId('plots-section_template-multi_1') + const plotButton = await within(plot).findByRole('button') - plotButton.click() + userEvent.click(plotButton) } diff --git a/yarn.lock b/yarn.lock index 0e7fd7d5b2..e421f7972a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2470,7 +2470,7 @@ ts-dedent "^2.0.0" util-deprecate "^1.0.2" -"@storybook/client-logger@6.5.9": +"@storybook/client-logger@6.5.9", "@storybook/client-logger@^6.4.0": version "6.5.9" resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.9.tgz#dc1669abe8c45af1cc38f74c6f4b15ff33e63014" integrity sha512-DOHL6p0uiDd3gV/Sb2FR+Vh6OiPrrf8BrA06uvXWsMRIIvEEvnparxv9EvPg7FlmUX0T3nq7d3juwjx4F8Wbcg== @@ -2682,7 +2682,7 @@ lodash "^4.17.21" regenerator-runtime "^0.13.7" -"@storybook/instrumenter@6.5.9": +"@storybook/instrumenter@6.5.9", "@storybook/instrumenter@^6.4.0": version "6.5.9" resolved "https://registry.yarnpkg.com/@storybook/instrumenter/-/instrumenter-6.5.9.tgz#885d9dec31b7b7fa6ea29b446105480450e527b8" integrity sha512-I2nu/6H0MAy8d+d3LY/G6oYEFyWlc8f2Qs2DhpYh5FiCgIpzvY0DMN05Lf8oaXdKHL3lPF/YLJH17FttekXs1w== @@ -2962,6 +2962,17 @@ read-pkg-up "^7.0.1" regenerator-runtime "^0.13.7" +"@storybook/testing-library@^0.0.13": + version "0.0.13" + resolved "https://registry.yarnpkg.com/@storybook/testing-library/-/testing-library-0.0.13.tgz#417c87d4ea62895092ec5fdf67027ae201254f45" + integrity sha512-vRMeIGer4EjJkTgI8sQyK9W431ekPWYCWL//OmSDJ64IT3h7FnW7Xg6p+eqM3oII98/O5pcya5049GxnjaPtxw== + dependencies: + "@storybook/client-logger" "^6.4.0" + "@storybook/instrumenter" "^6.4.0" + "@testing-library/dom" "^8.3.0" + "@testing-library/user-event" "^13.2.1" + ts-dedent "^2.2.0" + "@storybook/theming@6.5.9": version "6.5.9" resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.9.tgz#13f60a3a3cd73ceb5caf9f188e1627e79f1891aa" @@ -3112,7 +3123,7 @@ dependencies: defer-to-connect "^2.0.0" -"@testing-library/dom@^8.5.0": +"@testing-library/dom@^8.3.0", "@testing-library/dom@^8.5.0": version "8.14.0" resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.14.0.tgz#c9830a21006d87b9ef6e1aae306cf49b0283e28e" integrity sha512-m8FOdUo77iMTwVRCyzWcqxlEIk+GnopbrRI15a0EaLbpZSCinIVI4kSQzWhkShK83GogvEFJSsHF3Ws0z1vrqA== @@ -3150,6 +3161,13 @@ "@testing-library/dom" "^8.5.0" "@types/react-dom" "^18.0.0" +"@testing-library/user-event@^13.2.1": + version "13.5.0" + resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.5.0.tgz#69d77007f1e124d55314a2b73fd204b333b13295" + integrity sha512-5Kwtbo3Y/NowpkbRuSepbyMFkZmHgD+vPzYB/RJ4oxt5Gj/avFFBYjhw27cqSVPVw/3a67NK1PbiIr9k4Gwmdg== + dependencies: + "@babel/runtime" "^7.12.5" + "@tippyjs/react@^4.2.6": version "4.2.6" resolved "https://registry.yarnpkg.com/@tippyjs/react/-/react-4.2.6.tgz#971677a599bf663f20bb1c60a62b9555b749cc71" From 22b25464ec0aa8f9690721ae432796ce9c0b7f25 Mon Sep 17 00:00:00 2001 From: rogermparent Date: Fri, 8 Jul 2022 10:53:05 -0400 Subject: [PATCH 02/13] Stop using screen --- webview/src/stories/ComparisonTable.stories.tsx | 6 +++--- webview/src/stories/Plots.stories.tsx | 12 +++++++----- 2 files changed, 10 insertions(+), 8 deletions(-) diff --git a/webview/src/stories/ComparisonTable.stories.tsx b/webview/src/stories/ComparisonTable.stories.tsx index 687e661873..7379331735 100644 --- a/webview/src/stories/ComparisonTable.stories.tsx +++ b/webview/src/stories/ComparisonTable.stories.tsx @@ -1,6 +1,6 @@ import { Meta, Story } from '@storybook/react/types-6-0' import { configureStore } from '@reduxjs/toolkit' -import { screen, userEvent, within } from '@storybook/testing-library' +import { userEvent, within } from '@storybook/testing-library' import React from 'react' import { Provider, useDispatch } from 'react-redux' import plotsRevisionsFixture from 'dvc/src/test/fixtures/plotsDiff/revisions' @@ -62,8 +62,8 @@ export const WithPinnedColumn = Template.bind({}) WithPinnedColumn.parameters = { chromatic: { delay: 300 } } -WithPinnedColumn.play = async () => { - const mainHeader = await screen.findByTestId('main-header') +WithPinnedColumn.play = async ({ canvasElement }) => { + const mainHeader = await within(canvasElement).findByTestId('main-header') const pin = within(mainHeader).getByRole('button') userEvent.click(pin) diff --git a/webview/src/stories/Plots.stories.tsx b/webview/src/stories/Plots.stories.tsx index ad42643d3f..7b5e56faa1 100644 --- a/webview/src/stories/Plots.stories.tsx +++ b/webview/src/stories/Plots.stories.tsx @@ -2,7 +2,7 @@ import { configureStore } from '@reduxjs/toolkit' import React from 'react' import { Provider, useDispatch } from 'react-redux' import { Story, Meta } from '@storybook/react/types-6-0' -import { screen, userEvent, within } from '@storybook/testing-library' +import { userEvent, within } from '@storybook/testing-library' import { PlotsData, DEFAULT_SECTION_COLLAPSED, @@ -196,8 +196,8 @@ export const ZoomedInPlot = Template.bind({}) ZoomedInPlot.parameters = { chromatic: { delay: 300 } } -ZoomedInPlot.play = async () => { - const plots = await screen.findAllByTestId(/^plot_/) +ZoomedInPlot.play = async ({ canvasElement }) => { + const plots = await within(canvasElement).findAllByTestId(/^plot_/) const plot = await within(plots[0]).findByRole('button') userEvent.click(plot) @@ -207,8 +207,10 @@ export const MultiviewZoomedInPlot = Template.bind({}) MultiviewZoomedInPlot.parameters = { chromatic: { delay: 300 } } -MultiviewZoomedInPlot.play = async () => { - const plot = await screen.findByTestId('plots-section_template-multi_1') +MultiviewZoomedInPlot.play = async ({ canvasElement }) => { + const plot = await within(canvasElement).findByTestId( + 'plots-section_template-multi_1' + ) const plotButton = await within(plot).findByRole('button') userEvent.click(plotButton) From 0891df30a53ed1b70a024471ad770dd5e5702157 Mon Sep 17 00:00:00 2001 From: rogermparent Date: Sun, 10 Jul 2022 19:49:02 -0400 Subject: [PATCH 03/13] Make header shadow only appear when scrolled --- webview/package.json | 1 + webview/setup-tests.js | 9 +++++++++ .../src/experiments/components/table/Table.tsx | 1 + .../experiments/components/table/TableHead.tsx | 15 ++++++++++++--- .../components/table/styles.module.scss | 7 ++++++- yarn.lock | 5 +++++ 6 files changed, 34 insertions(+), 4 deletions(-) diff --git a/webview/package.json b/webview/package.json index 26362fd627..a30ac7ab0c 100644 --- a/webview/package.json +++ b/webview/package.json @@ -30,6 +30,7 @@ "lodash.merge": "^4.6.2", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-intersection-observer": "^9.3.5", "react-redux": "^8.0.2", "react-table": "^7.8.0", "react-vega": "^7.4.4", diff --git a/webview/setup-tests.js b/webview/setup-tests.js index bfb10431fe..b539a4bcf4 100644 --- a/webview/setup-tests.js +++ b/webview/setup-tests.js @@ -15,4 +15,13 @@ const mutationObserverMock = jest.fn().mockImplementation(() => { }) global.MutationObserver = mutationObserverMock +const intersectionObserverMock = jest.fn().mockImplementation(() => { + return { + disconnect: jest.fn(), + observe: jest.fn(), + unobserve: jest.fn() + } +}) +global.IntersectionObserver = intersectionObserverMock + StyleUtils.getThemeValue = jest.fn().mockImplementation(() => '#ffffff') diff --git a/webview/src/experiments/components/table/Table.tsx b/webview/src/experiments/components/table/Table.tsx index 469c4c5122..a7dd62e479 100644 --- a/webview/src/experiments/components/table/Table.tsx +++ b/webview/src/experiments/components/table/Table.tsx @@ -194,6 +194,7 @@ export const Table: React.FC = ({ filteredCounts={filteredCounts} filters={filters} columns={columns} + root={tableRef.current} /> {rows.map(row => ( = ({ +export const TableHead = ({ instance: { headerGroups, setColumnOrder, state: { columnOrder }, allColumns }, + root, filteredCounts, filters, columns, sorts -}) => { +}: TableHeadProps) => { const orderedColumns = useColumnOrder(columns, columnOrder) const allHeaders: HeaderGroup[] = [] for (const headerGroup of headerGroups) { @@ -85,9 +89,14 @@ export const TableHead: React.FC = ({ type: MessageFromWebviewType.REORDER_COLUMNS }) } + const [ref, scrolled] = useInView({ + root, + rootMargin: '-15px 0px 0px 0px', + threshold: 1 + }) return ( -
+
Date: Mon, 11 Jul 2022 11:27:14 -0400 Subject: [PATCH 04/13] Add story for scrolled table --- webview/src/stories/Table.stories.tsx | 34 ++++++++++++++++++++++++--- 1 file changed, 31 insertions(+), 3 deletions(-) diff --git a/webview/src/stories/Table.stories.tsx b/webview/src/stories/Table.stories.tsx index 5318a5a88d..99da3313de 100644 --- a/webview/src/stories/Table.stories.tsx +++ b/webview/src/stories/Table.stories.tsx @@ -1,14 +1,17 @@ import React from 'react' -import { Story, Meta } from '@storybook/react/types-6-0' +import { ComponentStory } from '@storybook/react' +import { Meta } from '@storybook/react/types-6-0' import rowsFixture from 'dvc/src/test/fixtures/expShow/rows' import columnsFixture from 'dvc/src/test/fixtures/expShow/columns' import { TableData } from 'dvc/src/experiments/webview/contract' import workspaceChangesFixture from 'dvc/src/test/fixtures/expShow/workspaceChanges' import deeplyNestedTableData from 'dvc/src/test/fixtures/expShow/deeplyNested' -import Experiments from '../experiments/components/Experiments' import './test-vscode-styles.scss' import '../shared/style.scss' +import { getAllByRole, within } from '@storybook/testing-library' +import { findByText } from '@testing-library/react' +import Experiments from '../experiments/components/Experiments' const tableData: TableData = { changes: workspaceChangesFixture, @@ -53,7 +56,7 @@ export default { title: 'Table' } as Meta -const Template: Story<{ tableData: TableData }> = ({ tableData }) => { +const Template: ComponentStory = ({ tableData }) => { return } @@ -103,3 +106,28 @@ WithNoSortsOrFilters.args = { sorts: [] } } + +export const Scrolled = Template.bind({}) +Scrolled.play = async ({ canvasElement }) => { + await findByText(canvasElement, '90aea7f') + const rows = getAllByRole(canvasElement, 'row') + const lastRow = rows[rows.length - 1] + const lastRowCells = within(lastRow).getAllByRole('cell') + const lastCell = lastRowCells[lastRowCells.length - 1] + lastCell.scrollIntoView() +} +Scrolled.parameters = { + viewport: { + defaultViewport: 'scrollable', + viewports: { + scrollable: { + name: 'Scrollable', + styles: { + height: '400px', + width: '800px' + }, + type: 'desktop' + } + } + } +} From 2292037738f8a2dcf4e83d9592660a13424954d9 Mon Sep 17 00:00:00 2001 From: rogermparent Date: Mon, 11 Jul 2022 20:38:23 -0400 Subject: [PATCH 05/13] Remove chromatic delay on MultiView Zoomed plot --- webview/src/stories/Plots.stories.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/webview/src/stories/Plots.stories.tsx b/webview/src/stories/Plots.stories.tsx index 7b5e56faa1..833333cb49 100644 --- a/webview/src/stories/Plots.stories.tsx +++ b/webview/src/stories/Plots.stories.tsx @@ -204,9 +204,6 @@ ZoomedInPlot.play = async ({ canvasElement }) => { } export const MultiviewZoomedInPlot = Template.bind({}) -MultiviewZoomedInPlot.parameters = { - chromatic: { delay: 300 } -} MultiviewZoomedInPlot.play = async ({ canvasElement }) => { const plot = await within(canvasElement).findByTestId( 'plots-section_template-multi_1' From b20d192033cc4a2e1f0a81369af4306f31d0a2db Mon Sep 17 00:00:00 2001 From: rogermparent Date: Mon, 11 Jul 2022 21:22:46 -0400 Subject: [PATCH 06/13] Remove chromatic delays --- webview/src/stories/ComparisonTable.stories.tsx | 3 --- webview/src/stories/Plots.stories.tsx | 3 --- 2 files changed, 6 deletions(-) diff --git a/webview/src/stories/ComparisonTable.stories.tsx b/webview/src/stories/ComparisonTable.stories.tsx index 7379331735..69035dadec 100644 --- a/webview/src/stories/ComparisonTable.stories.tsx +++ b/webview/src/stories/ComparisonTable.stories.tsx @@ -59,9 +59,6 @@ const Template: Story = ({ plots, revisions }) => { export const Basic = Template.bind({}) export const WithPinnedColumn = Template.bind({}) -WithPinnedColumn.parameters = { - chromatic: { delay: 300 } -} WithPinnedColumn.play = async ({ canvasElement }) => { const mainHeader = await within(canvasElement).findByTestId('main-header') const pin = within(mainHeader).getByRole('button') diff --git a/webview/src/stories/Plots.stories.tsx b/webview/src/stories/Plots.stories.tsx index 833333cb49..4825f3ac6f 100644 --- a/webview/src/stories/Plots.stories.tsx +++ b/webview/src/stories/Plots.stories.tsx @@ -193,9 +193,6 @@ VirtualizedPlots.args = { VirtualizedPlots.parameters = chromaticParameters export const ZoomedInPlot = Template.bind({}) -ZoomedInPlot.parameters = { - chromatic: { delay: 300 } -} ZoomedInPlot.play = async ({ canvasElement }) => { const plots = await within(canvasElement).findAllByTestId(/^plot_/) const plot = await within(plots[0]).findByRole('button') From db47df5a7b1d0da979bac52c063a6762c3733f72 Mon Sep 17 00:00:00 2001 From: rogermparent Date: Mon, 11 Jul 2022 21:28:32 -0400 Subject: [PATCH 07/13] Await multiview plot --- webview/src/stories/Plots.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/webview/src/stories/Plots.stories.tsx b/webview/src/stories/Plots.stories.tsx index 4825f3ac6f..be1df04a5d 100644 --- a/webview/src/stories/Plots.stories.tsx +++ b/webview/src/stories/Plots.stories.tsx @@ -205,6 +205,7 @@ MultiviewZoomedInPlot.play = async ({ canvasElement }) => { const plot = await within(canvasElement).findByTestId( 'plots-section_template-multi_1' ) + await within(plot).findByRole('graphics-document') const plotButton = await within(plot).findByRole('button') userEvent.click(plotButton) From 8f4888152efb67a138fec8b0d19c9cdc6c23e1dc Mon Sep 17 00:00:00 2001 From: rogermparent Date: Mon, 11 Jul 2022 22:05:13 -0400 Subject: [PATCH 08/13] Remove react call to findByText --- webview/src/stories/Table.stories.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/webview/src/stories/Table.stories.tsx b/webview/src/stories/Table.stories.tsx index 99da3313de..2f1991548c 100644 --- a/webview/src/stories/Table.stories.tsx +++ b/webview/src/stories/Table.stories.tsx @@ -9,8 +9,7 @@ import deeplyNestedTableData from 'dvc/src/test/fixtures/expShow/deeplyNested' import './test-vscode-styles.scss' import '../shared/style.scss' -import { getAllByRole, within } from '@storybook/testing-library' -import { findByText } from '@testing-library/react' +import { getAllByRole, within, findByText } from '@storybook/testing-library' import Experiments from '../experiments/components/Experiments' const tableData: TableData = { From 40eab16beabcd6acd240172fbe893e14f0bdf84c Mon Sep 17 00:00:00 2001 From: rogermparent Date: Mon, 11 Jul 2022 22:18:11 -0400 Subject: [PATCH 09/13] Add chromatic viewport --- webview/src/stories/Table.stories.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/webview/src/stories/Table.stories.tsx b/webview/src/stories/Table.stories.tsx index 2f1991548c..2af5b6a604 100644 --- a/webview/src/stories/Table.stories.tsx +++ b/webview/src/stories/Table.stories.tsx @@ -116,6 +116,9 @@ Scrolled.play = async ({ canvasElement }) => { lastCell.scrollIntoView() } Scrolled.parameters = { + chromatic: { + viewports: [400, 800] + }, viewport: { defaultViewport: 'scrollable', viewports: { From 535d769d1826061867ac8d5dbbe5c1d7964c280f Mon Sep 17 00:00:00 2001 From: rogermparent Date: Mon, 11 Jul 2022 22:30:16 -0400 Subject: [PATCH 10/13] Use scrollable viewport for chromatic --- webview/src/stories/Table.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webview/src/stories/Table.stories.tsx b/webview/src/stories/Table.stories.tsx index 2af5b6a604..04f379bde2 100644 --- a/webview/src/stories/Table.stories.tsx +++ b/webview/src/stories/Table.stories.tsx @@ -117,7 +117,7 @@ Scrolled.play = async ({ canvasElement }) => { } Scrolled.parameters = { chromatic: { - viewports: [400, 800] + viewports: ['scrollable'] }, viewport: { defaultViewport: 'scrollable', From 278adbb09f1f919d7c8bc3ab5d254fdd6f88c6e7 Mon Sep 17 00:00:00 2001 From: rogermparent Date: Tue, 12 Jul 2022 08:14:35 -0400 Subject: [PATCH 11/13] Add wrapper element to scrolled story for chromatic --- webview/src/stories/Table.stories.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/webview/src/stories/Table.stories.tsx b/webview/src/stories/Table.stories.tsx index 04f379bde2..a64293d8a8 100644 --- a/webview/src/stories/Table.stories.tsx +++ b/webview/src/stories/Table.stories.tsx @@ -106,7 +106,13 @@ WithNoSortsOrFilters.args = { } } -export const Scrolled = Template.bind({}) +const Scrolled: ComponentStory = ({ tableData }) => { + return ( +
+ +
+ ) +} Scrolled.play = async ({ canvasElement }) => { await findByText(canvasElement, '90aea7f') const rows = getAllByRole(canvasElement, 'row') @@ -117,7 +123,7 @@ Scrolled.play = async ({ canvasElement }) => { } Scrolled.parameters = { chromatic: { - viewports: ['scrollable'] + viewports: [400] }, viewport: { defaultViewport: 'scrollable', @@ -126,7 +132,7 @@ Scrolled.parameters = { name: 'Scrollable', styles: { height: '400px', - width: '800px' + width: '600px' }, type: 'desktop' } From 63136aff8eb21bdc0037e039a72269564a8771ed Mon Sep 17 00:00:00 2001 From: rogermparent Date: Tue, 12 Jul 2022 09:58:16 -0400 Subject: [PATCH 12/13] Actually export the scrolled story --- webview/src/stories/Table.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/webview/src/stories/Table.stories.tsx b/webview/src/stories/Table.stories.tsx index 2e3257299e..b0f7680e4f 100644 --- a/webview/src/stories/Table.stories.tsx +++ b/webview/src/stories/Table.stories.tsx @@ -123,7 +123,7 @@ WithNoSortsOrFilters.args = { } } -const Scrolled: ComponentStory = ({ tableData }) => { +export const Scrolled: ComponentStory = ({ tableData }) => { return (
From e7ca0acbc7c0b0f36f9ecd2e3dc762ff8fa1c255 Mon Sep 17 00:00:00 2001 From: rogermparent Date: Wed, 13 Jul 2022 12:42:05 -0400 Subject: [PATCH 13/13] rename variable and class --- webview/src/experiments/components/table/TableHead.tsx | 7 +++++-- .../src/experiments/components/table/styles.module.scss | 2 +- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/webview/src/experiments/components/table/TableHead.tsx b/webview/src/experiments/components/table/TableHead.tsx index 10b11f5784..8830b58e33 100644 --- a/webview/src/experiments/components/table/TableHead.tsx +++ b/webview/src/experiments/components/table/TableHead.tsx @@ -89,14 +89,17 @@ export const TableHead = ({ type: MessageFromWebviewType.REORDER_COLUMNS }) } - const [ref, scrolled] = useInView({ + const [ref, needsShadow] = useInView({ root, rootMargin: '-15px 0px 0px 0px', threshold: 1 }) return ( -
+