From 2b28515d9b874e368127d166eaad7c5f67068a61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?McKayla=20=E3=81=AF=E3=81=AA?= Date: Wed, 29 Jul 2026 18:13:55 -0600 Subject: [PATCH] refactor: migrate story snapshot params to pixel (#26844) --- coderd/database/querier_test.go | 4 ++-- .../FeatureStageBadge/FeatureStageBadge.stories.tsx | 2 -- site/src/components/Logs/LogLine.stories.tsx | 2 -- site/src/components/Logs/Logs.stories.tsx | 2 -- .../AIGovernanceSeatBannerView.stories.tsx | 2 -- .../LicenseBanner/LicenseBannerView.stories.tsx | 2 -- .../modules/dashboard/Navbar/NavbarView.stories.tsx | 4 ++-- .../provisioners/ProvisionerAlert.stories.tsx | 2 -- .../provisioners/ProvisionerStatusAlert.stories.tsx | 2 -- .../resources/AgentDevcontainerCard.stories.tsx | 2 -- .../src/modules/resources/AgentExternal.stories.tsx | 4 ---- site/src/modules/resources/AgentRow.stories.tsx | 2 -- .../TemplateExampleCard.stories.tsx | 2 -- .../TemplateFiles/TemplateFileTree.stories.tsx | 2 -- .../TemplateFiles/TemplateFiles.stories.tsx | 2 -- .../WorkspaceBuildLogs.stories.tsx | 2 -- .../WorkspaceTiming/WorkspaceTimings.stories.tsx | 4 ---- .../pages/AgentsPage/AgentsPageLayout.stories.tsx | 8 ++++++++ .../components/AgentChatInput.stories.tsx | 8 +++++--- .../ChatMessageInput/ChatMessageInput.stories.tsx | 4 ++-- .../components/ChatSharingPopover.stories.tsx | 2 +- .../AgentsPage/components/ChatTopBar.stories.tsx | 10 +++++----- .../AgentsPage/components/WorkspacePill.stories.tsx | 2 +- .../AuditPage/AuditLogRow/AuditLogRow.stories.tsx | 4 ---- site/src/pages/AuditPage/AuditPageView.stories.tsx | 6 +++--- .../ConnectionLogPageView.stories.tsx | 4 ++-- .../CreateTemplateGalleryPageView.stories.tsx | 2 -- .../CreateWorkspacePageView.stories.tsx | 2 -- .../LicensesSettingsPage/LicenseCard.stories.tsx | 2 -- .../LicensesSettingsPageView.stories.tsx | 2 -- .../OverviewPage/OverviewPageView.stories.tsx | 5 ----- site/src/pages/HealthPage/storybook.tsx | 2 -- site/src/pages/IconsPage/IconsPage.stories.tsx | 2 -- .../CustomRolesPage/PermissionPillsList.stories.tsx | 5 ----- .../OrganizationSettingsPageView.stories.tsx | 2 -- site/src/pages/SetupPage/SetupPageView.stories.tsx | 2 -- .../StarterTemplatePageView.stories.tsx | 2 -- .../TasksPage/BatchDeleteConfirmation.stories.tsx | 2 -- .../TemplateInsightsPage.stories.tsx | 2 -- .../pages/TemplatePage/TemplateStats.stories.tsx | 4 ++-- .../ProvisionerTagsPopover.stories.tsx | 2 -- .../TemplateVersionEditor.stories.tsx | 2 -- .../TemplatesPage/TemplatesPageView.stories.tsx | 4 ++-- .../src/pages/TerminalPage/TerminalPage.stories.tsx | 3 --- site/src/pages/UsersPage/UsersPageView.stories.tsx | 2 +- .../WorkspaceBuildPageView.stories.tsx | 2 -- .../pages/WorkspacePage/WorkspaceTopbar.stories.tsx | 8 -------- .../BatchDeleteConfirmation.stories.tsx | 2 -- site/src/testHelpers/chromatic.ts | 13 ------------- site/src/testHelpers/pixel.ts | 7 +++++++ 50 files changed, 43 insertions(+), 128 deletions(-) delete mode 100644 site/src/testHelpers/chromatic.ts create mode 100644 site/src/testHelpers/pixel.ts diff --git a/coderd/database/querier_test.go b/coderd/database/querier_test.go index 46e6976b7e..a4e08e460b 100644 --- a/coderd/database/querier_test.go +++ b/coderd/database/querier_test.go @@ -10663,7 +10663,7 @@ func TestUsageEventsTrigger(t *testing.T) { require.Equal(t, "hb_ai_seats_v1", rows[0].EventType) require.JSONEq(t, `{"count": 10}`, string(rows[0].UsageData)) - // Insert a higher count on the same day — should take the max. + // Insert a higher count on the same day. It should take the max. err = db.InsertUsageEvent(ctx, database.InsertUsageEventParams{ ID: "hb-2", EventType: "hb_ai_seats_v1", @@ -10676,7 +10676,7 @@ func TestUsageEventsTrigger(t *testing.T) { require.Len(t, rows, 1) require.JSONEq(t, `{"count": 50}`, string(rows[0].UsageData)) - // Insert a lower count on the same day — should keep the max (50). + // Insert a lower count on the same day. It should keep the max (50). err = db.InsertUsageEvent(ctx, database.InsertUsageEventParams{ ID: "hb-3", EventType: "hb_ai_seats_v1", diff --git a/site/src/components/FeatureStageBadge/FeatureStageBadge.stories.tsx b/site/src/components/FeatureStageBadge/FeatureStageBadge.stories.tsx index fe1c848988..3d49ad1ab0 100644 --- a/site/src/components/FeatureStageBadge/FeatureStageBadge.stories.tsx +++ b/site/src/components/FeatureStageBadge/FeatureStageBadge.stories.tsx @@ -1,11 +1,9 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { chromatic } from "#/testHelpers/chromatic"; import { FeatureStageBadge } from "./FeatureStageBadge"; const meta: Meta = { title: "components/FeatureStageBadge", component: FeatureStageBadge, - parameters: { chromatic }, args: { contentType: "beta", }, diff --git a/site/src/components/Logs/LogLine.stories.tsx b/site/src/components/Logs/LogLine.stories.tsx index 330ee34266..3e3b438bcb 100644 --- a/site/src/components/Logs/LogLine.stories.tsx +++ b/site/src/components/Logs/LogLine.stories.tsx @@ -1,10 +1,8 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { chromatic } from "#/testHelpers/chromatic"; import { LogLine, LogLinePrefix } from "./LogLine"; const meta: Meta = { title: "components/Logs/LogLine", - parameters: { chromatic }, component: LogLine, args: { level: "info", diff --git a/site/src/components/Logs/Logs.stories.tsx b/site/src/components/Logs/Logs.stories.tsx index 349e7e0acb..8a098b310d 100644 --- a/site/src/components/Logs/Logs.stories.tsx +++ b/site/src/components/Logs/Logs.stories.tsx @@ -1,12 +1,10 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockWorkspaceBuildLogs } from "#/testHelpers/entities"; import type { Line } from "./LogLine"; import { Logs } from "./Logs"; const meta: Meta = { title: "components/Logs", - parameters: { chromatic }, component: Logs, args: { lines: MockWorkspaceBuildLogs.map((log) => ({ diff --git a/site/src/modules/dashboard/AIGovernanceSeatBanner/AIGovernanceSeatBannerView.stories.tsx b/site/src/modules/dashboard/AIGovernanceSeatBanner/AIGovernanceSeatBannerView.stories.tsx index e2c6767999..e7c7164614 100644 --- a/site/src/modules/dashboard/AIGovernanceSeatBanner/AIGovernanceSeatBannerView.stories.tsx +++ b/site/src/modules/dashboard/AIGovernanceSeatBanner/AIGovernanceSeatBannerView.stories.tsx @@ -1,12 +1,10 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { expect, within } from "storybook/test"; import { LicenseAIGovernance90PercentWarningText } from "#/api/typesGenerated"; -import { chromatic } from "#/testHelpers/chromatic"; import { AIGovernanceSeatBannerView } from "./AIGovernanceSeatBannerView"; const meta: Meta = { title: "modules/dashboard/AIGovernanceSeatBannerView", - parameters: { chromatic }, component: AIGovernanceSeatBannerView, }; diff --git a/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.stories.tsx b/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.stories.tsx index 02ac3e0f1d..582493a4ef 100644 --- a/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.stories.tsx +++ b/site/src/modules/dashboard/LicenseBanner/LicenseBannerView.stories.tsx @@ -5,7 +5,6 @@ import { LicenseManagedAgentLimitExceededWarningText, LicenseTelemetryRequiredErrorText, } from "#/api/typesGenerated"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockAppearanceConfig, MockBuildInfo, @@ -20,7 +19,6 @@ import { LicenseBannerView } from "./LicenseBannerView"; const meta: Meta = { title: "components/LicenseBannerView", - parameters: { chromatic }, component: LicenseBannerView, }; diff --git a/site/src/modules/dashboard/Navbar/NavbarView.stories.tsx b/site/src/modules/dashboard/Navbar/NavbarView.stories.tsx index 9ec29a4f93..80c0986f30 100644 --- a/site/src/modules/dashboard/Navbar/NavbarView.stories.tsx +++ b/site/src/modules/dashboard/Navbar/NavbarView.stories.tsx @@ -1,13 +1,13 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { userEvent, within } from "storybook/test"; import type { TasksFilter } from "#/api/typesGenerated"; -import { chromaticWithTablet } from "#/testHelpers/chromatic"; import { MockBuildInfo, MockTasks, MockUserMember, MockUserOwner, } from "#/testHelpers/entities"; +import { pixelWithTablet } from "#/testHelpers/pixel"; import { withDashboardProvider } from "#/testHelpers/storybook"; import { NavbarView } from "./NavbarView"; @@ -18,7 +18,7 @@ const tasksFilter: TasksFilter = { const meta: Meta = { title: "modules/dashboard/NavbarView", parameters: { - chromatic: chromaticWithTablet, + pixel: { matrix: pixelWithTablet }, layout: "fullscreen", queries: [ { diff --git a/site/src/modules/provisioners/ProvisionerAlert.stories.tsx b/site/src/modules/provisioners/ProvisionerAlert.stories.tsx index 50562a6f16..604d9abaf2 100644 --- a/site/src/modules/provisioners/ProvisionerAlert.stories.tsx +++ b/site/src/modules/provisioners/ProvisionerAlert.stories.tsx @@ -1,11 +1,9 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { chromatic } from "#/testHelpers/chromatic"; import { AlertVariant, ProvisionerAlert } from "./ProvisionerAlert"; const meta: Meta = { title: "modules/provisioners/ProvisionerAlert", parameters: { - chromatic, layout: "centered", }, component: ProvisionerAlert, diff --git a/site/src/modules/provisioners/ProvisionerStatusAlert.stories.tsx b/site/src/modules/provisioners/ProvisionerStatusAlert.stories.tsx index a8397e3cdf..f612f00db7 100644 --- a/site/src/modules/provisioners/ProvisionerStatusAlert.stories.tsx +++ b/site/src/modules/provisioners/ProvisionerStatusAlert.stories.tsx @@ -1,5 +1,4 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockTemplateVersion } from "#/testHelpers/entities"; import { AlertVariant } from "./ProvisionerAlert"; import { ProvisionerStatusAlert } from "./ProvisionerStatusAlert"; @@ -7,7 +6,6 @@ import { ProvisionerStatusAlert } from "./ProvisionerStatusAlert"; const meta: Meta = { title: "modules/provisioners/ProvisionerStatusAlert", parameters: { - chromatic, layout: "centered", }, component: ProvisionerStatusAlert, diff --git a/site/src/modules/resources/AgentDevcontainerCard.stories.tsx b/site/src/modules/resources/AgentDevcontainerCard.stories.tsx index b9a69afb19..a85efcc7d8 100644 --- a/site/src/modules/resources/AgentDevcontainerCard.stories.tsx +++ b/site/src/modules/resources/AgentDevcontainerCard.stories.tsx @@ -2,7 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { screen, spyOn, userEvent, within } from "storybook/test"; import { API } from "#/api/api"; import { getPreferredProxy } from "#/contexts/ProxyContext"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockListeningPortsResponse, MockPrimaryWorkspaceProxy, @@ -36,7 +35,6 @@ const meta: Meta = { }, decorators: [withProxyProvider(), withDashboardProvider], parameters: { - chromatic, queries: [ { key: ["portForward", MockWorkspaceSubAgent.id], diff --git a/site/src/modules/resources/AgentExternal.stories.tsx b/site/src/modules/resources/AgentExternal.stories.tsx index d261d0f27d..6739311e33 100644 --- a/site/src/modules/resources/AgentExternal.stories.tsx +++ b/site/src/modules/resources/AgentExternal.stories.tsx @@ -1,5 +1,4 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockWorkspace, MockWorkspaceAgent } from "#/testHelpers/entities"; import { withDashboardProvider } from "#/testHelpers/storybook"; import { AgentExternal } from "./AgentExternal"; @@ -17,9 +16,6 @@ const meta: Meta = { workspace: MockWorkspace, }, decorators: [withDashboardProvider], - parameters: { - chromatic, - }, }; export default meta; diff --git a/site/src/modules/resources/AgentRow.stories.tsx b/site/src/modules/resources/AgentRow.stories.tsx index a8a1249c0b..2d07e7c9f5 100644 --- a/site/src/modules/resources/AgentRow.stories.tsx +++ b/site/src/modules/resources/AgentRow.stories.tsx @@ -4,7 +4,6 @@ import { API } from "#/api/api"; import { workspaceAgentContainersKey } from "#/api/queries/workspaces"; import type { WorkspaceAgentLogSource } from "#/api/typesGenerated"; import { getPreferredProxy } from "#/contexts/ProxyContext"; -import { chromatic } from "#/testHelpers/chromatic"; import * as M from "#/testHelpers/entities"; import { withDashboardProvider, @@ -135,7 +134,6 @@ const meta: Meta = { }, decorators: [withProxyProvider(), withDashboardProvider, withWebSocket], parameters: { - chromatic, queries: [ { key: ["portForward", M.MockWorkspaceAgent.id], diff --git a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.stories.tsx b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.stories.tsx index df438dafed..39b9dcb7f3 100644 --- a/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.stories.tsx +++ b/site/src/modules/templates/TemplateExampleCard/TemplateExampleCard.stories.tsx @@ -1,5 +1,4 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockTemplateExample, MockTemplateExample2, @@ -8,7 +7,6 @@ import { TemplateExampleCard } from "./TemplateExampleCard"; const meta: Meta = { title: "modules/templates/TemplateExampleCard", - parameters: { chromatic }, component: TemplateExampleCard, args: { example: MockTemplateExample, diff --git a/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx b/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx index f366352ab2..3e05e9d826 100644 --- a/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx +++ b/site/src/modules/templates/TemplateFiles/TemplateFileTree.stories.tsx @@ -1,6 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { action } from "storybook/actions"; -import { chromatic } from "#/testHelpers/chromatic"; import type { FileTree } from "#/utils/filetree"; import { TemplateFileTree } from "./TemplateFileTree"; @@ -33,7 +32,6 @@ const fileTree: FileTree = { const meta: Meta = { title: "modules/templates/TemplateFileTree", - parameters: { chromatic }, component: TemplateFileTree, args: { fileTree, diff --git a/site/src/modules/templates/TemplateFiles/TemplateFiles.stories.tsx b/site/src/modules/templates/TemplateFiles/TemplateFiles.stories.tsx index 0121697051..93967ed391 100644 --- a/site/src/modules/templates/TemplateFiles/TemplateFiles.stories.tsx +++ b/site/src/modules/templates/TemplateFiles/TemplateFiles.stories.tsx @@ -1,5 +1,4 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { chromatic } from "#/testHelpers/chromatic"; import { withDashboardProvider } from "#/testHelpers/storybook"; import { TemplateFiles } from "./TemplateFiles"; @@ -15,7 +14,6 @@ const exampleFiles = { const meta: Meta = { title: "modules/templates/TemplateFiles", decorators: [withDashboardProvider], - parameters: { chromatic }, component: TemplateFiles, args: { currentFiles: exampleFiles, diff --git a/site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx b/site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx index 79ccc13907..9a45058b97 100644 --- a/site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx +++ b/site/src/modules/workspaces/WorkspaceBuildLogs/WorkspaceBuildLogs.stories.tsx @@ -1,11 +1,9 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockWorkspaceBuildLogs } from "#/testHelpers/entities"; import { WorkspaceBuildLogs } from "./WorkspaceBuildLogs"; const meta: Meta = { title: "modules/workspaces/WorkspaceBuildLogs", - parameters: { chromatic }, component: WorkspaceBuildLogs, }; diff --git a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx index fe7de418a5..620c512314 100644 --- a/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx +++ b/site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx @@ -1,6 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { expect, userEvent, waitFor, within } from "storybook/test"; -import { chromatic } from "#/testHelpers/chromatic"; import { WorkspaceTimingsResponse } from "./storybookData"; import { WorkspaceTimings } from "./WorkspaceTimings"; @@ -13,9 +12,6 @@ const meta: Meta = { agentScriptTimings: WorkspaceTimingsResponse.agent_script_timings, agentConnectionTimings: WorkspaceTimingsResponse.agent_connection_timings, }, - parameters: { - chromatic, - }, }; export default meta; diff --git a/site/src/pages/AgentsPage/AgentsPageLayout.stories.tsx b/site/src/pages/AgentsPage/AgentsPageLayout.stories.tsx index b95f88258c..fd664b3e6d 100644 --- a/site/src/pages/AgentsPage/AgentsPageLayout.stories.tsx +++ b/site/src/pages/AgentsPage/AgentsPageLayout.stories.tsx @@ -707,6 +707,8 @@ export const WideSidebarPreservesChatPaneWidth: Story = { ], parameters: { viewport: { defaultViewport: "desktopZoom200" }, + // CLEANUP: this desktop-at-200%-zoom snapshot still uses the Chromatic + // viewport param; migrate it to a pixel viewport. chromatic: { viewports: [720] }, reactRouter: reactRouterParameters({ location: { path: "/agents/chat-wide-sidebar" }, @@ -858,6 +860,8 @@ export const SidebarCollapsed: Story = { export const EmptyStateZoom200Desktop: Story = { parameters: { viewport: { defaultViewport: "desktopZoom200" }, + // CLEANUP: this desktop-at-200%-zoom snapshot still uses the Chromatic + // viewport param; migrate it to a pixel viewport. chromatic: { viewports: [720] }, }, play: async ({ canvasElement }) => { @@ -896,6 +900,8 @@ export const EmptyStateZoom200Desktop: Story = { export const CollapsedSidebarZoom200Desktop: Story = { parameters: { viewport: { defaultViewport: "desktopZoom200" }, + // CLEANUP: this desktop-at-200%-zoom snapshot still uses the Chromatic + // viewport param; migrate it to a pixel viewport. chromatic: { viewports: [720] }, }, play: async ({ canvasElement }) => { @@ -923,6 +929,8 @@ export const CollapsedSidebarZoom200DesktopWithAgent: Story = { }, parameters: { viewport: { defaultViewport: "desktopZoom200" }, + // CLEANUP: this desktop-at-200%-zoom snapshot still uses the Chromatic + // viewport param; migrate it to a pixel viewport. chromatic: { viewports: [720] }, reactRouter: reactRouterParameters({ location: { path: "/agents/chat-1" }, diff --git a/site/src/pages/AgentsPage/components/AgentChatInput.stories.tsx b/site/src/pages/AgentsPage/components/AgentChatInput.stories.tsx index acf8a6dad4..2419f33803 100644 --- a/site/src/pages/AgentsPage/components/AgentChatInput.stories.tsx +++ b/site/src/pages/AgentsPage/components/AgentChatInput.stories.tsx @@ -976,6 +976,8 @@ export const PlanningIndicator: Story = { }, parameters: { viewport: { defaultViewport: "desktopZoom200" }, + // CLEANUP: this desktop-at-200%-zoom snapshot still uses the Chromatic + // viewport param; migrate it to a pixel viewport. chromatic: { viewports: [720] }, }, play: async ({ canvasElement }) => { @@ -1224,7 +1226,7 @@ export const UncheckSelectedWorkspaceFromPicker: Story = { }, parameters: { viewport: { defaultViewport: "mobile1" }, - chromatic: { viewports: [375] }, + pixel: { matrix: { viewports: ["phone"] } }, }, play: async ({ args, canvasElement }) => { const canvas = within(canvasElement); @@ -1316,7 +1318,7 @@ export const OverflowBadges: Story = { }, parameters: { viewport: { defaultViewport: "mobile2" }, - chromatic: { viewports: [414] }, + pixel: { matrix: { viewports: ["phone"] } }, }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); @@ -1395,7 +1397,7 @@ export const LongWorkspaceNameMobile: Story = { }, parameters: { viewport: { defaultViewport: "mobile1" }, - chromatic: { viewports: [375] }, + pixel: { matrix: { viewports: ["phone"] } }, }, play: async ({ canvasElement }) => { const canvas = within(canvasElement); diff --git a/site/src/pages/AgentsPage/components/ChatMessageInput/ChatMessageInput.stories.tsx b/site/src/pages/AgentsPage/components/ChatMessageInput/ChatMessageInput.stories.tsx index 3ce7dfb597..9f8e9b72f2 100644 --- a/site/src/pages/AgentsPage/components/ChatMessageInput/ChatMessageInput.stories.tsx +++ b/site/src/pages/AgentsPage/components/ChatMessageInput/ChatMessageInput.stories.tsx @@ -632,7 +632,7 @@ export const MobileAboveChatInput: Story = { decorators: [MobileDecorator], parameters: { viewport: { defaultViewport: "mobile1" }, - chromatic: { viewports: [320] }, + pixel: { matrix: { viewports: ["phone"] } }, }, play: async ({ canvasElement }) => { const restoreMatchMedia = mockMobileMatchMedia(); @@ -740,7 +740,7 @@ export const MobileLongListScrolls: Story = { decorators: [MobileDecorator], parameters: { viewport: { defaultViewport: "mobile1" }, - chromatic: { viewports: [320] }, + pixel: { matrix: { viewports: ["phone"] } }, }, play: async ({ canvasElement }) => { const restoreMatchMedia = mockMobileMatchMedia(); diff --git a/site/src/pages/AgentsPage/components/ChatSharingPopover.stories.tsx b/site/src/pages/AgentsPage/components/ChatSharingPopover.stories.tsx index b35f0b3347..1c4033d002 100644 --- a/site/src/pages/AgentsPage/components/ChatSharingPopover.stories.tsx +++ b/site/src/pages/AgentsPage/components/ChatSharingPopover.stories.tsx @@ -209,7 +209,7 @@ export const PopulatedACL: Story = { export const MobilePopulatedACL: Story = { decorators: [MobileFrame], parameters: { - chromatic: { viewports: [390] }, + pixel: { matrix: { viewports: ["phone"] } }, }, beforeEach: () => mockDialogRequests({ acl: populatedACL }), play: async ({ canvasElement }) => { diff --git a/site/src/pages/AgentsPage/components/ChatTopBar.stories.tsx b/site/src/pages/AgentsPage/components/ChatTopBar.stories.tsx index d9ddbf7f04..4e9c5ea75c 100644 --- a/site/src/pages/AgentsPage/components/ChatTopBar.stories.tsx +++ b/site/src/pages/AgentsPage/components/ChatTopBar.stories.tsx @@ -188,7 +188,7 @@ const mobileDecorator: Story["decorators"] = [ export const MobileWithOpenPR: Story = { decorators: mobileDecorator, - parameters: { chromatic: { viewports: [390] } }, + parameters: { pixel: { matrix: { viewports: ["phone"] } } }, args: { diffStatusData: { chat_id: "chat-1", @@ -205,7 +205,7 @@ export const MobileWithOpenPR: Story = { export const MobileWithDraftPR: Story = { decorators: mobileDecorator, - parameters: { chromatic: { viewports: [390] } }, + parameters: { pixel: { matrix: { viewports: ["phone"] } } }, args: { diffStatusData: { chat_id: "chat-1", @@ -222,7 +222,7 @@ export const MobileWithDraftPR: Story = { export const MobileWithMergedPR: Story = { decorators: mobileDecorator, - parameters: { chromatic: { viewports: [390] } }, + parameters: { pixel: { matrix: { viewports: ["phone"] } } }, args: { diffStatusData: { chat_id: "chat-1", @@ -240,7 +240,7 @@ export const MobileWithMergedPR: Story = { export const MobileWithClosedPR: Story = { decorators: mobileDecorator, - parameters: { chromatic: { viewports: [390] } }, + parameters: { pixel: { matrix: { viewports: ["phone"] } } }, args: { diffStatusData: { chat_id: "chat-1", @@ -370,7 +370,7 @@ export const ArchiveAndDeleteWorkspaceItem: Story = { export const PreservesArchivedFilterOnMobileBack: Story = { decorators: mobileDecorator, parameters: { - chromatic: { viewports: [390] }, + pixel: { matrix: { viewports: ["phone"] } }, reactRouter: reactRouterParameters({ location: { path: "/agents/chat-123", diff --git a/site/src/pages/AgentsPage/components/WorkspacePill.stories.tsx b/site/src/pages/AgentsPage/components/WorkspacePill.stories.tsx index e8ca7cc92f..a3cb2d2436 100644 --- a/site/src/pages/AgentsPage/components/WorkspacePill.stories.tsx +++ b/site/src/pages/AgentsPage/components/WorkspacePill.stories.tsx @@ -490,7 +490,7 @@ const mobilePortsStoryConfig = { }, parameters: { viewport: { defaultViewport: "mobile1" }, - chromatic: { viewports: [375] }, + pixel: { matrix: { viewports: ["phone"] } }, queries: [ { key: ["me", "apiKey"], data: { key: "mock-api-key" } }, { diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx index d84ef16697..6cdc5fb516 100644 --- a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx +++ b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.stories.tsx @@ -1,7 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import type { AuditLog } from "#/api/typesGenerated"; import { Table, TableBody } from "#/components/Table/Table"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockAuditLog, MockAuditLog2, @@ -40,7 +39,6 @@ export const NoDiff: Story = { }; export const WithDiff: Story = { - parameters: { chromatic }, args: { auditLog: MockAuditLog2, defaultIsDiffOpen: true, @@ -48,7 +46,6 @@ export const WithDiff: Story = { }; export const WithLongDiffRow: Story = { - parameters: { chromatic }, args: { auditLog: { ...MockAuditLog2, @@ -201,7 +198,6 @@ const MockChatAuditLog: AuditLog = { }; export const WithChatACLDiff: Story = { - parameters: { chromatic }, args: { auditLog: { ...MockChatAuditLog, diff --git a/site/src/pages/AuditPage/AuditPageView.stories.tsx b/site/src/pages/AuditPage/AuditPageView.stories.tsx index fb263efcd3..7707bd5c6a 100644 --- a/site/src/pages/AuditPage/AuditPageView.stories.tsx +++ b/site/src/pages/AuditPage/AuditPageView.stories.tsx @@ -9,13 +9,13 @@ import { mockSuccessResult, } from "#/components/PaginationWidget/PaginationContainer.mocks"; import type { UsePaginatedQueryResult } from "#/hooks/usePaginatedQuery"; -import { chromaticWithTablet } from "#/testHelpers/chromatic"; import { MockAuditLog, MockAuditLog2, MockAuditLog3, MockUserOwner, } from "#/testHelpers/entities"; +import { pixelWithTablet } from "#/testHelpers/pixel"; import { AuditPageView } from "./AuditPageView"; type FilterProps = ComponentProps["filterProps"]; @@ -50,7 +50,7 @@ export default meta; type Story = StoryObj; export const AuditPage: Story = { - parameters: { chromatic: chromaticWithTablet }, + parameters: { pixel: { matrix: pixelWithTablet } }, args: { auditsQuery: mockSuccessResult, }, @@ -94,7 +94,7 @@ export const NotVisible: Story = { }; export const MultiOrg: Story = { - parameters: { chromatic: chromaticWithTablet }, + parameters: { pixel: { matrix: pixelWithTablet } }, args: { showOrgDetails: true, auditsQuery: mockSuccessResult, diff --git a/site/src/pages/ConnectionLogPage/ConnectionLogPageView.stories.tsx b/site/src/pages/ConnectionLogPage/ConnectionLogPageView.stories.tsx index d2ac6ba03f..966dde9bfc 100644 --- a/site/src/pages/ConnectionLogPage/ConnectionLogPageView.stories.tsx +++ b/site/src/pages/ConnectionLogPage/ConnectionLogPageView.stories.tsx @@ -9,12 +9,12 @@ import { mockSuccessResult, } from "#/components/PaginationWidget/PaginationContainer.mocks"; import type { UsePaginatedQueryResult } from "#/hooks/usePaginatedQuery"; -import { chromaticWithTablet } from "#/testHelpers/chromatic"; import { MockConnectedSSHConnectionLog, MockDisconnectedSSHConnectionLog, MockUserOwner, } from "#/testHelpers/entities"; +import { pixelWithTablet } from "#/testHelpers/pixel"; import { ConnectionLogPageView } from "./ConnectionLogPageView"; type FilterProps = ComponentProps["filterProps"]; @@ -51,7 +51,7 @@ export default meta; type Story = StoryObj; export const ConnectionLog: Story = { - parameters: { chromatic: chromaticWithTablet }, + parameters: { pixel: { matrix: pixelWithTablet } }, args: { connectionLogsQuery: mockSuccessResult, }, diff --git a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.stories.tsx b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.stories.tsx index b45b510115..90d99f4b77 100644 --- a/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.stories.tsx +++ b/site/src/pages/CreateTemplateGalleryPage/CreateTemplateGalleryPageView.stories.tsx @@ -1,5 +1,4 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockTemplateExample, MockTemplateExample2, @@ -10,7 +9,6 @@ import { CreateTemplateGalleryPageView } from "./CreateTemplateGalleryPageView"; const meta: Meta = { title: "pages/CreateTemplateGalleryPage", - parameters: { chromatic }, component: CreateTemplateGalleryPageView, }; diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx index b516ebf33d..e31c3ff030 100644 --- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx +++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.stories.tsx @@ -2,7 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { expect, screen, within } from "storybook/test"; import { DetailedError } from "#/api/errors"; import type { Preset, PreviewParameter } from "#/api/typesGenerated"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockTemplate, MockUserMember, @@ -12,7 +11,6 @@ import { CreateWorkspacePageView } from "./CreateWorkspacePageView"; const meta: Meta = { title: "Pages/CreateWorkspacePageView", - parameters: { chromatic }, component: CreateWorkspacePageView, args: { autofillParameters: [], diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicenseCard.stories.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicenseCard.stories.tsx index d4c2275310..88cc7a3208 100644 --- a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicenseCard.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicenseCard.stories.tsx @@ -1,7 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import dayjs from "dayjs"; import { expect, fn, within } from "storybook/test"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockLicenseResponse } from "#/testHelpers/entities"; import { LicenseCard } from "./LicenseCard"; @@ -12,7 +11,6 @@ const FUTURE_START_DATE = dayjs("2099-01-01T12:00:00Z").unix(); const meta: Meta = { title: "pages/DeploymentSettingsPage/LicensesSettingsPage/LicenseCard", component: LicenseCard, - parameters: { chromatic }, args: { license: MockLicenseResponse[0], userLimitActual: 4, diff --git a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx index ef17f89600..afcd0065e3 100644 --- a/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.stories.tsx @@ -1,13 +1,11 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { expect, fn, within } from "storybook/test"; import type { Feature } from "#/api/typesGenerated"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockLicenseResponse } from "#/testHelpers/entities"; import LicensesSettingsPageView from "./LicensesSettingsPageView"; const meta: Meta = { title: "pages/DeploymentSettingsPage/LicensesSettingsPageView", - parameters: { chromatic }, component: LicensesSettingsPageView, args: { showConfetti: false, diff --git a/site/src/pages/DeploymentSettingsPage/OverviewPage/OverviewPageView.stories.tsx b/site/src/pages/DeploymentSettingsPage/OverviewPage/OverviewPageView.stories.tsx index d6a7e97211..f6f84b222c 100644 --- a/site/src/pages/DeploymentSettingsPage/OverviewPage/OverviewPageView.stories.tsx +++ b/site/src/pages/DeploymentSettingsPage/OverviewPage/OverviewPageView.stories.tsx @@ -39,11 +39,6 @@ const meta: Meta = { invalidExperiments: [], safeExperiments: [], }, - parameters: { - chromatic: { - diffThreshold: 0.5, - }, - }, }; export default meta; diff --git a/site/src/pages/HealthPage/storybook.tsx b/site/src/pages/HealthPage/storybook.tsx index d4e2543fa8..90dc5558b8 100644 --- a/site/src/pages/HealthPage/storybook.tsx +++ b/site/src/pages/HealthPage/storybook.tsx @@ -8,7 +8,6 @@ import { HEALTH_QUERY_KEY, HEALTH_QUERY_SETTINGS_KEY, } from "#/api/queries/debug"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockAppearanceConfig, MockBuildInfo, @@ -30,7 +29,6 @@ export const generateMeta = ({ element, path, params }: MetaOptions) => { return { component: HealthLayout, parameters: { - chromatic, layout: "fullscreen", reactRouter: reactRouterParameters({ location: { pathParams: params }, diff --git a/site/src/pages/IconsPage/IconsPage.stories.tsx b/site/src/pages/IconsPage/IconsPage.stories.tsx index 09e9b63347..3ba4c56764 100644 --- a/site/src/pages/IconsPage/IconsPage.stories.tsx +++ b/site/src/pages/IconsPage/IconsPage.stories.tsx @@ -1,10 +1,8 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { chromatic } from "#/testHelpers/chromatic"; import IconsPage from "./IconsPage"; const meta: Meta = { title: "pages/IconsPage", - parameters: { chromatic }, component: IconsPage, args: {}, }; diff --git a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/PermissionPillsList.stories.tsx b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/PermissionPillsList.stories.tsx index 13435ca467..4fc12ad11b 100644 --- a/site/src/pages/OrganizationSettingsPage/CustomRolesPage/PermissionPillsList.stories.tsx +++ b/site/src/pages/OrganizationSettingsPage/CustomRolesPage/PermissionPillsList.stories.tsx @@ -13,11 +13,6 @@ const meta: Meta = { ), ], - parameters: { - chromatic: { - diffThreshold: 0.6, - }, - }, }; export default meta; diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.stories.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.stories.tsx index 828ed18940..54cc12d2a2 100644 --- a/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.stories.tsx +++ b/site/src/pages/OrganizationSettingsPage/OrganizationSettingsPageView.stories.tsx @@ -1,7 +1,6 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { action } from "storybook/actions"; import { userEvent, within } from "storybook/test"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockDefaultOrganization, MockOrganization, @@ -11,7 +10,6 @@ import { OrganizationSettingsPageView } from "./OrganizationSettingsPageView"; const meta: Meta = { title: "pages/OrganizationSettingsPageView", component: OrganizationSettingsPageView, - parameters: { chromatic }, args: { organization: MockOrganization, }, diff --git a/site/src/pages/SetupPage/SetupPageView.stories.tsx b/site/src/pages/SetupPage/SetupPageView.stories.tsx index 5df288a831..89acabb566 100644 --- a/site/src/pages/SetupPage/SetupPageView.stories.tsx +++ b/site/src/pages/SetupPage/SetupPageView.stories.tsx @@ -1,12 +1,10 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { expect, userEvent, waitFor, within } from "storybook/test"; -import { chromatic } from "#/testHelpers/chromatic"; import { mockApiError } from "#/testHelpers/entities"; import { SetupPageView } from "./SetupPageView"; const meta: Meta = { title: "pages/SetupPage", - parameters: { chromatic }, component: SetupPageView, }; diff --git a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.stories.tsx b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.stories.tsx index 6392f307a3..21c4b00b0b 100644 --- a/site/src/pages/StarterTemplatePage/StarterTemplatePageView.stories.tsx +++ b/site/src/pages/StarterTemplatePage/StarterTemplatePageView.stories.tsx @@ -1,11 +1,9 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockTemplateExample, mockApiError } from "#/testHelpers/entities"; import { StarterTemplatePageView } from "./StarterTemplatePageView"; const meta: Meta = { title: "pages/StarterTemplatePage", - parameters: { chromatic }, component: StarterTemplatePageView, }; diff --git a/site/src/pages/TasksPage/BatchDeleteConfirmation.stories.tsx b/site/src/pages/TasksPage/BatchDeleteConfirmation.stories.tsx index 3ef9336b7d..ee919fe6cb 100644 --- a/site/src/pages/TasksPage/BatchDeleteConfirmation.stories.tsx +++ b/site/src/pages/TasksPage/BatchDeleteConfirmation.stories.tsx @@ -1,13 +1,11 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { action } from "storybook/actions"; import { userEvent, within } from "storybook/test"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockTask } from "#/testHelpers/entities"; import { BatchDeleteConfirmation } from "./BatchDeleteConfirmation"; const meta: Meta = { title: "pages/TasksPage/BatchDeleteConfirmation", - parameters: { chromatic }, component: BatchDeleteConfirmation, args: { onClose: action("onClose"), diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.stories.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.stories.tsx index 6d51f8eaf8..a9c13f358d 100644 --- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.stories.tsx +++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.stories.tsx @@ -1,11 +1,9 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { chromatic } from "#/testHelpers/chromatic"; import { mockApiError } from "#/testHelpers/entities"; import { TemplateInsightsPageView } from "./TemplateInsightsPage"; const meta: Meta = { title: "pages/TemplatePage/TemplateInsightsPageView", - parameters: { chromatic }, component: TemplateInsightsPageView, }; diff --git a/site/src/pages/TemplatePage/TemplateStats.stories.tsx b/site/src/pages/TemplatePage/TemplateStats.stories.tsx index 49ef63a652..7ee89fbb10 100644 --- a/site/src/pages/TemplatePage/TemplateStats.stories.tsx +++ b/site/src/pages/TemplatePage/TemplateStats.stories.tsx @@ -46,7 +46,7 @@ export const LongTemplateVersion: Story = { }, }, parameters: { - chromatic: { viewports: [960] }, + pixel: { matrix: { viewports: ["laptop"] } }, }, }; @@ -56,6 +56,6 @@ export const SmallViewport: Story = { activeVersion: MockTemplateVersion, }, parameters: { - chromatic: { viewports: [600] }, + pixel: { matrix: { viewports: ["tablet"] } }, }, }; diff --git a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.stories.tsx b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.stories.tsx index 676dc84351..e04dafae80 100644 --- a/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.stories.tsx +++ b/site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.stories.tsx @@ -1,14 +1,12 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { useState } from "react"; import { expect, fn, userEvent, within } from "storybook/test"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockTemplateVersion } from "#/testHelpers/entities"; import { ProvisionerTagsPopover } from "./ProvisionerTagsPopover"; const meta: Meta = { title: "pages/TemplateVersionEditorPage/ProvisionerTagsPopover", parameters: { - chromatic, layout: "centered", }, component: ProvisionerTagsPopover, diff --git a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx index 9fb9a8c6e8..9107b6a949 100644 --- a/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx +++ b/site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.stories.tsx @@ -1,6 +1,5 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { action } from "storybook/actions"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockFailedProvisionerJob, MockRunningProvisionerJob, @@ -24,7 +23,6 @@ const meta: Meta = { component: TemplateVersionEditor, decorators: [withDashboardProvider], parameters: { - chromatic, layout: "fullscreen", }, args: { diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx index 79f4ae39bc..b446257178 100644 --- a/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx +++ b/site/src/pages/TemplatesPage/TemplatesPageView.stories.tsx @@ -3,7 +3,6 @@ import { getDefaultFilterProps, MockMenu, } from "#/components/Filter/storyHelpers"; -import { chromaticWithTablet } from "#/testHelpers/chromatic"; import { MockTemplate, MockTemplateExample, @@ -11,6 +10,7 @@ import { MockUserOwner, mockApiError, } from "#/testHelpers/entities"; +import { pixelWithTablet } from "#/testHelpers/pixel"; import { withDashboardProvider } from "#/testHelpers/storybook"; import type { TemplateFilterState } from "./TemplatesPage"; import { TemplatesPageView } from "./TemplatesPageView"; @@ -27,7 +27,7 @@ const defaultFilterProps = getDefaultFilterProps({ const meta: Meta = { title: "pages/TemplatesPage", decorators: [withDashboardProvider], - parameters: { chromatic: chromaticWithTablet }, + parameters: { pixel: { matrix: pixelWithTablet } }, component: TemplatesPageView, args: { filterState: defaultFilterProps, diff --git a/site/src/pages/TerminalPage/TerminalPage.stories.tsx b/site/src/pages/TerminalPage/TerminalPage.stories.tsx index e15d192f8a..02aa6d1dd6 100644 --- a/site/src/pages/TerminalPage/TerminalPage.stories.tsx +++ b/site/src/pages/TerminalPage/TerminalPage.stories.tsx @@ -92,9 +92,6 @@ const meta = { }, }, ], - chromatic: { - diffThreshold: 0.8, - }, }, decorators: [ (Story) => ( diff --git a/site/src/pages/UsersPage/UsersPageView.stories.tsx b/site/src/pages/UsersPage/UsersPageView.stories.tsx index 64603a55c7..713de8d2e2 100644 --- a/site/src/pages/UsersPage/UsersPageView.stories.tsx +++ b/site/src/pages/UsersPage/UsersPageView.stories.tsx @@ -51,7 +51,7 @@ export const Admin: Story = {}; export const SmallViewport: Story = { parameters: { - chromatic: { viewports: [600] }, + pixel: { matrix: { viewports: ["tablet"] } }, }, }; diff --git a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.stories.tsx b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.stories.tsx index ffcd72ec48..0bee694927 100644 --- a/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.stories.tsx +++ b/site/src/pages/WorkspaceBuildPage/WorkspaceBuildPageView.stories.tsx @@ -1,5 +1,4 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockFailedWorkspaceBuild, MockWorkspaceBuild, @@ -15,7 +14,6 @@ const defaultBuilds = Array.from({ length: 15 }, (_, i) => ({ const meta: Meta = { title: "pages/WorkspaceBuildPage", - parameters: { chromatic }, component: WorkspaceBuildPageView, args: { build: MockWorkspaceBuild, diff --git a/site/src/pages/WorkspacePage/WorkspaceTopbar.stories.tsx b/site/src/pages/WorkspacePage/WorkspaceTopbar.stories.tsx index ba8a4f8350..6fd4ce86b6 100644 --- a/site/src/pages/WorkspacePage/WorkspaceTopbar.stories.tsx +++ b/site/src/pages/WorkspacePage/WorkspaceTopbar.stories.tsx @@ -47,9 +47,6 @@ const meta: Meta = { parameters: { layout: "fullscreen", features: ["advanced_template_scheduling"], - chromatic: { - diffThreshold: 0.6, - }, user: MockUserOwner, }, }; @@ -329,11 +326,6 @@ export const TemplateInfoPopover: Story = { ); }); }, - parameters: { - chromatic: { - diffThreshold: 0.6, - }, - }, }; export const TemplateInfoPopoverWithoutDisplayName: Story = { diff --git a/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.stories.tsx b/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.stories.tsx index fe19ba7357..06b5e649fb 100644 --- a/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.stories.tsx +++ b/site/src/pages/WorkspacesPage/BatchDeleteConfirmation.stories.tsx @@ -1,12 +1,10 @@ import type { Meta, StoryObj } from "@storybook/react-vite"; import { action } from "storybook/actions"; -import { chromatic } from "#/testHelpers/chromatic"; import { MockUserMember, MockWorkspace } from "#/testHelpers/entities"; import { BatchDeleteConfirmation } from "./BatchDeleteConfirmation"; const meta: Meta = { title: "pages/WorkspacesPage/BatchDeleteConfirmation", - parameters: { chromatic }, component: BatchDeleteConfirmation, args: { onClose: action("onClose"), diff --git a/site/src/testHelpers/chromatic.ts b/site/src/testHelpers/chromatic.ts deleted file mode 100644 index fafb4ad169..0000000000 --- a/site/src/testHelpers/chromatic.ts +++ /dev/null @@ -1,13 +0,0 @@ -export const chromatic = { - modes: { - dark: { theme: "dark" }, - light: { theme: "light" }, - }, -}; - -export const chromaticWithTablet = { - modes: { - "dark desktop": { theme: "dark" }, - "light tablet": { theme: "light", viewport: "ipad" }, - }, -}; diff --git a/site/src/testHelpers/pixel.ts b/site/src/testHelpers/pixel.ts new file mode 100644 index 0000000000..cc3d1611c1 --- /dev/null +++ b/site/src/testHelpers/pixel.ts @@ -0,0 +1,7 @@ +// Story-level overrides for pixel-storybook's snapshot matrix. These merge onto +// the global matrix from the pixel config, so specifying `viewports` here keeps +// the config's `themes`. + +export const pixelWithTablet = { + viewports: ["tablet", "desktop"], +};