From 72504c90081bb7f152d9a45d0c2e3ef151d68e0d Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Fri, 21 Nov 2025 15:26:42 +0100 Subject: [PATCH 1/5] Wait for checklist widget to load --- .../components/sidebar/ChecklistWidget.tsx | 2 +- .../components/sidebar/Sidebar.stories.tsx | 27 ++++++++++++++++--- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/code/core/src/manager/components/sidebar/ChecklistWidget.tsx b/code/core/src/manager/components/sidebar/ChecklistWidget.tsx index b6c10e201d9b..865aaf3ffced 100644 --- a/code/core/src/manager/components/sidebar/ChecklistWidget.tsx +++ b/code/core/src/manager/components/sidebar/ChecklistWidget.tsx @@ -191,7 +191,7 @@ export const ChecklistWidget = () => { return ( - + + waitFor( + () => + expect(document.getElementById('storybook-checklist-widget')?.checkVisibility()).toBe(true), + { timeout: 5000 } + ); + +export const Simple: Story = { + play: waitForChecklistWidget, +}; export const SimpleInProduction: Story = { args: { @@ -200,6 +209,7 @@ export const SimpleInProduction: Story = { export const Mobile: Story = { decorators: [mobileLayoutDecorator], globals: { sb_theme: 'light', viewport: { value: 'mobile1' } }, + play: waitForChecklistWidget, }; export const Loading: Story = { @@ -219,12 +229,14 @@ export const Empty: Story = { args: { index: {}, }, + play: waitForChecklistWidget, }; export const EmptyMobile: Story = { args: Empty.args, decorators: [mobileLayoutDecorator], globals: { sb_theme: 'light', viewport: { value: 'mobile1' } }, + play: waitForChecklistWidget, }; export const EmptyIndex: Story = { @@ -235,18 +247,21 @@ export const EmptyIndex: Story = { v: 6, }, }, + play: waitForChecklistWidget, }; export const IndexError: Story = { args: { indexError, }, + play: waitForChecklistWidget, }; export const WithRefs: Story = { args: { refs, }, + play: waitForChecklistWidget, }; export const WithRefsNarrow: Story = { @@ -283,12 +298,14 @@ export const WithRefsNarrow: Story = { value: 'narrow', }, }, + play: waitForChecklistWidget, }; export const WithRefsMobile: Story = { args: WithRefs.args, decorators: [mobileLayoutDecorator], globals: { sb_theme: 'light', viewport: { value: 'mobile1' } }, + play: waitForChecklistWidget, }; export const LoadingWithRefs: Story = { @@ -316,6 +333,7 @@ export const WithRefEmpty: Story = { ...Empty.args, refs: refsEmpty, }, + play: waitForChecklistWidget, }; export const StatusesCollapsed: Story = { @@ -349,6 +367,7 @@ export const StatusesCollapsed: Story = { return acc; }, {} as StatusesByStoryIdAndTypeId), }, + play: waitForChecklistWidget, }; export const StatusesOpen: Story = { @@ -380,6 +399,7 @@ export const StatusesOpen: Story = { } satisfies StatusesByStoryIdAndTypeId; }, {} as StatusesByStoryIdAndTypeId), }, + play: waitForChecklistWidget, }; export const Searching: Story = { @@ -394,7 +414,7 @@ export const Searching: Story = { ), ], play: async ({ canvasElement, step }) => { - await step('wait 2000ms', () => wait(2000)); + await waitForChecklistWidget(); const canvas = await within(canvasElement); const search = await canvas.findByPlaceholderText('Find components'); userEvent.clear(search); @@ -473,6 +493,7 @@ export const Scrolled: Story = { ); }, play: async ({ canvasElement, step }) => { + await waitForChecklistWidget(); const canvas = await within(canvasElement); const scrollable = await canvasElement.querySelector('[data-radix-scroll-area-viewport]'); await step('expand component', async () => { From cd9c4937ebe96784422081cfc7d410aede9c3d92 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Fri, 21 Nov 2025 15:59:58 +0100 Subject: [PATCH 2/5] Fix narrow story --- code/core/src/manager/components/sidebar/Sidebar.stories.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx index 3f93d8af7717..fb3cc5e19906 100644 --- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx +++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx @@ -279,7 +279,7 @@ export const WithRefsNarrow: Story = { narrow: { name: 'narrow', styles: { - width: '400px', + width: '230px', height: '800px', }, }, @@ -288,7 +288,7 @@ export const WithRefsNarrow: Story = { chromatic: { modes: { narrow: { - viewport: 400, + viewport: 230, }, }, }, From 12f8d5a00a39b98a820438ec434620274bc10b8d Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Fri, 21 Nov 2025 16:17:27 +0100 Subject: [PATCH 3/5] Wait for expand animation --- .../core/src/manager/components/sidebar/Sidebar.stories.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx index fb3cc5e19906..25b623802eb7 100644 --- a/code/core/src/manager/components/sidebar/Sidebar.stories.tsx +++ b/code/core/src/manager/components/sidebar/Sidebar.stories.tsx @@ -182,12 +182,14 @@ const refsEmpty = { }, }; -const waitForChecklistWidget = () => - waitFor( +const waitForChecklistWidget = async () => { + await waitFor( () => expect(document.getElementById('storybook-checklist-widget')?.checkVisibility()).toBe(true), { timeout: 5000 } ); + await wait(300); // wait for expand animation +}; export const Simple: Story = { play: waitForChecklistWidget, From d74f04b6af0bf9b1c3bf090066006bea584e3f9f Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Fri, 21 Nov 2025 16:22:09 +0100 Subject: [PATCH 4/5] Fix bullet contrast --- code/core/src/manager/settings/Checklist/Checklist.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/core/src/manager/settings/Checklist/Checklist.tsx b/code/core/src/manager/settings/Checklist/Checklist.tsx index d19423de2069..18200147ff21 100644 --- a/code/core/src/manager/settings/Checklist/Checklist.tsx +++ b/code/core/src/manager/settings/Checklist/Checklist.tsx @@ -159,7 +159,7 @@ const ItemContent = styled.div(({ theme }) => ({ listStyleType: 'disc', 'li::marker': { - color: theme.color.medium, + color: theme.color.mediumdark, }, }, })); From e07f0bca8cb3335b421a15207afe05ea959479f0 Mon Sep 17 00:00:00 2001 From: Gert Hengeveld Date: Fri, 21 Nov 2025 16:33:05 +0100 Subject: [PATCH 5/5] Fix checklist contrast on dark mode --- code/core/src/manager/settings/Checklist/Checklist.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/code/core/src/manager/settings/Checklist/Checklist.tsx b/code/core/src/manager/settings/Checklist/Checklist.tsx index 18200147ff21..2fea864a1b49 100644 --- a/code/core/src/manager/settings/Checklist/Checklist.tsx +++ b/code/core/src/manager/settings/Checklist/Checklist.tsx @@ -34,7 +34,7 @@ const Sections = styled.ol(({ theme }) => ({ '& > li': { background: theme.background.content, - border: `1px solid ${theme.color.border}`, + border: `1px solid ${theme.base === 'dark' ? theme.color.darker : theme.color.border}`, borderRadius: 8, }, })); @@ -47,7 +47,7 @@ const Items = styled.ol(({ theme }) => ({ padding: 0, '& > li:not(:last-child)': { - boxShadow: `inset 0 -1px 0 ${theme.color.border}`, + boxShadow: `inset 0 -1px 0 ${theme.base === 'dark' ? theme.color.darker : theme.color.border}`, }, '& > li:last-child': { @@ -170,9 +170,9 @@ const StatusIcon = styled.div(({ theme }) => ({ minHeight: 16, minWidth: 16, margin: 0, - background: theme.background.app, + background: theme.base === 'dark' ? theme.color.darkest : theme.background.app, borderRadius: 9, - outline: `1px solid ${theme.color.border}`, + outline: `1px solid ${theme.base === 'dark' ? theme.color.darker : theme.color.border}`, outlineOffset: -1, })); const Checked = styled(StatusPassIcon)<{ 'data-visible'?: boolean }>(