test: convert chromatic sentinels to pixel equivalents (#26778)

site/src/components/Alert/Alert.tsx

@@ -135,7 +135,7 @@ export const AlertDescription: React.FC<React.PropsWithChildren> = ({
 	children,
 }) => {
 	return (
-		<span className="m-0 text-sm" data-chromatic="ignore">
+		<span className="m-0 text-sm" data-pixel="ignore">
 			{children}
 		</span>
 	);

site/src/components/ErrorBoundary/GlobalErrorBoundary.tsx

@@ -115,7 +115,7 @@ const ErrorStack: FC<ErrorStackProps> = ({ error }) => {
 					</p>
 					{error.stack && (
 						<pre className="m-0 py-2 px-0 overflow-x-auto text-xs">
-							<code data-testid="code" data-chromatic="ignore">
+							<code data-testid="code" data-pixel="ignore">
 								{error.stack}
 							</code>
 						</pre>

site/src/components/GitDeviceAuth/GitDeviceAuth.tsx

@@ -72,7 +72,7 @@ export const GitDeviceAuth: FC<GitDeviceAuthProps> = ({
 }) => {
 	let status = (
 		<p className="flex items-center justify-center gap-2 text-content-disabled">
-			<CircularProgress size={16} color="secondary" data-chromatic="ignore" />
+			<CircularProgress size={16} color="secondary" data-pixel="ignore" />
 			Checking for authentication...
 		</p>
 	);

site/src/components/LastSeen/LastSeen.stories.tsx

@@ -10,7 +10,7 @@ const meta: Meta<typeof LastSeen> = {
 		// because it creates a lot of noise when a static dates roles over from eg.
 		// "2 months ago" to "3 months ago", but these stories use relative dates,
 		// and test specific cases that we want to be validated.
-		"data-chromatic": "",
+		"data-pixel": "",
 	},
 };
 

site/src/components/LastSeen/LastSeen.tsx

@@ -7,7 +7,7 @@ import { isAfter, relativeTime, subtractTime } from "#/utils/time";
 interface LastSeenProps
 	extends Omit<HTMLAttributes<HTMLSpanElement>, "children"> {
 	at: dayjs.ConfigType;
-	"data-chromatic"?: string; // prevents a type error in the stories
+	"data-pixel"?: string; // prevents a type error in the stories
 }
 
 export const LastSeen: FC<LastSeenProps> = ({ at, className, ...attrs }) => {
@@ -39,7 +39,7 @@ export const LastSeen: FC<LastSeenProps> = ({ at, className, ...attrs }) => {
 
 	return (
 		<span
-			data-chromatic="ignore"
+			data-pixel="ignore"
 			style={{ color }}
 			{...attrs}
 			className={cn(["whitespace-nowrap", className])}

site/src/components/LinearProgress/LinearProgress.stories.tsx

@@ -32,7 +32,7 @@ export const Indeterminate: Story = {
 		value: 0,
 	},
 	parameters: {
-		chromatic: { disable: true },
+		pixel: { exclude: true },
 	},
 };
 
@@ -75,6 +75,6 @@ export const ControlledDeterminate: Story = {
 		);
 	},
 	parameters: {
-		chromatic: { disable: true },
+		pixel: { exclude: true },
 	},
 };

site/src/components/Pill/Pill.stories.tsx

@@ -83,7 +83,4 @@ export const WithSpinner: Story = {
 	args: {
 		icon: <PillSpinner />,
 	},
-	parameters: {
-		chromatic: { delay: 700 },
-	},
 };

site/src/components/SyntaxHighlighter/SyntaxHighlighter.tsx

@@ -92,7 +92,7 @@ export const SyntaxHighlighter: FC<SyntaxHighlighterProps> = ({
 
 	return (
 		<div
-			data-chromatic="ignore"
+			data-pixel="ignore"
 			className="py-2 h-full"
 			style={{
 				backgroundColor: theme.monaco.colors["editor.background"],

site/src/modules/notifications/NotificationsInbox/InboxItem.stories.tsx

@@ -100,8 +100,6 @@ export const OnMarkNotificationAsRead: Story = {
 		);
 	},
 	parameters: {
-		chromatic: {
-			disableSnapshot: true,
-		},
+		pixel: { exclude: true },
 	},
 };

site/src/modules/notifications/NotificationsInbox/InboxPopover.stories.tsx

@@ -66,9 +66,7 @@ export const OnRetry: Story = {
 		await expect(args.onRetry).toHaveBeenCalledTimes(1);
 	},
 	parameters: {
-		chromatic: {
-			disableSnapshot: true,
-		},
+		pixel: { exclude: true },
 	},
 };
 
@@ -86,9 +84,7 @@ export const OnMarkAllAsRead: Story = {
 		await expect(args.onMarkAllAsRead).toHaveBeenCalledTimes(1);
 	},
 	parameters: {
-		chromatic: {
-			disableSnapshot: true,
-		},
+		pixel: { exclude: true },
 	},
 };
 
@@ -111,8 +107,6 @@ export const OnMarkNotificationAsRead: Story = {
 		);
 	},
 	parameters: {
-		chromatic: {
-			disableSnapshot: true,
-		},
+		pixel: { exclude: true },
 	},
 };

site/src/modules/provisioners/Provisioner.tsx

@@ -77,7 +77,7 @@ export const Provisioner: FC<ProvisionerProps> = ({
 					<span>No warnings</span>
 				)}
 				{provisioner.last_seen_at && (
-					<span className="text-content-primary" data-chromatic="ignore">
+					<span className="text-content-primary" data-pixel="ignore">
 						Last seen {createDayString(provisioner.last_seen_at)}
 					</span>
 				)}

site/src/modules/tasks/TaskDeleteDialog/TaskDeleteDialog.stories.tsx

@@ -22,9 +22,7 @@ export const DeleteTaskSuccess: Story = {
 		onClose: () => {},
 	},
 	parameters: {
-		chromatic: {
-			disableSnapshot: false,
-		},
+		pixel: { exclude: false },
 	},
 	beforeEach: () => {
 		spyOn(API, "deleteTask").mockResolvedValue();

site/src/modules/tasks/TaskPrompt/TaskPrompt.stories.tsx

@@ -134,9 +134,7 @@ export const Submitting: Story = {
 		await userEvent.click(submitButton);
 	},
 	parameters: {
-		chromatic: {
-			disableSnapshot: true,
-		},
+		pixel: { exclude: true },
 	},
 };
 
@@ -356,9 +354,7 @@ export const AuthenticatedExternalAuth: Story = {
 		});
 	},
 	parameters: {
-		chromatic: {
-			disableSnapshot: true,
-		},
+		pixel: { exclude: true },
 	},
 };
 

site/src/modules/workspaces/WorkspaceTiming/WorkspaceTimings.stories.tsx

@@ -42,7 +42,7 @@ export const ClickToOpen: Story = {
 		defaultIsOpen: false,
 	},
 	parameters: {
-		chromatic: { disableSnapshot: true },
+		pixel: { exclude: true },
 	},
 	play: async ({ canvasElement }) => {
 		const user = userEvent.setup();
@@ -54,7 +54,7 @@ export const ClickToOpen: Story = {
 
 export const ClickToClose: Story = {
 	parameters: {
-		chromatic: { disableSnapshot: true },
+		pixel: { exclude: true },
 	},
 	play: async ({ canvasElement }) => {
 		const user = userEvent.setup();

site/src/pages/AISettingsPage/TemplatesPage/TemplatesPageView.tsx

@@ -184,7 +184,7 @@ const TemplateRow: FC<TemplateRowProps> = ({
 				</div>
 			</TableCell>
 			<TableCell
-				data-chromatic="ignore"
+				data-pixel="ignore"
 				className="whitespace-nowrap text-sm font-medium leading-6 text-content-secondary"
 			>
 				{createDayString(template.updated_at)}

site/src/pages/AgentsPage/AgentChatPageView.stories.tsx

@@ -1112,7 +1112,7 @@ const inverseScrollFetchSpy = fn(() => {
  * top of the transcript.
  */
 export const InverseScrollLoadsOlderMessages: Story = {
-	parameters: { chromatic: { disableSnapshot: true } },
+	parameters: { pixel: { exclude: true } },
 	decorators: scrollStoryDecorators,
 	render: () => (
 		<StoryAgentChatPageView
@@ -1147,7 +1147,7 @@ const multiPageFetchSpy = fn(() => {
  * second upward reveal can load another page.
  */
 export const InverseScrollCanLoadMultiplePages: Story = {
-	parameters: { chromatic: { disableSnapshot: true } },
+	parameters: { pixel: { exclude: true } },
 	decorators: scrollStoryDecorators,
 	render: () => (
 		<StoryAgentChatPageView
@@ -1189,7 +1189,7 @@ const scrollToBottomButtonStoryStore = buildStoreWithMessages(
  * user from older history to the newest messages.
  */
 export const ScrollToBottomButtonWorksWithInverseScroll: Story = {
-	parameters: { chromatic: { disableSnapshot: true } },
+	parameters: { pixel: { exclude: true } },
 	decorators: scrollStoryDecorators,
 	render: () => (
 		<StoryAgentChatPageView store={scrollToBottomButtonStoryStore} />
@@ -1239,7 +1239,7 @@ const scrollToBottomStoryRef: { current: (() => void) | null } = {
  * hook, so the replacement container must keep that contract working.
  */
 export const ScrollToBottomRefStillWorks: Story = {
-	parameters: { chromatic: { disableSnapshot: true } },
+	parameters: { pixel: { exclude: true } },
 	decorators: scrollStoryDecorators,
 	render: () => (
 		<StoryAgentChatPageView
@@ -1283,7 +1283,7 @@ const messageOrderStore = buildStoreWithMessages([
  * The reversed container layout must not invert the transcript's visible order.
  */
 export const MessageOrderIsStillCorrect: Story = {
-	parameters: { chromatic: { disableSnapshot: true } },
+	parameters: { pixel: { exclude: true } },
 	decorators: scrollStoryDecorators,
 	render: () => <StoryAgentChatPageView store={messageOrderStore} />,
 	play: async ({ canvasElement }) => {
@@ -1316,7 +1316,7 @@ const stickyPinningStore = buildStoreWithMessages(buildLongConversation(40));
  * message is pinned within a few pixels of the scroll container's top.
  */
 export const StickyUserMessagePinsOnScroll: Story = {
-	parameters: { chromatic: { disableSnapshot: true } },
+	parameters: { pixel: { exclude: true } },
 	decorators: scrollStoryDecorators,
 	render: () => <StoryAgentChatPageView store={stickyPinningStore} />,
 	play: async ({ canvasElement }) => {
@@ -1421,7 +1421,7 @@ const stickyClipUpdateStore = buildStoreWithMessages(
  * the new geometry without any scroll event.
  */
 export const StickyUserMessageClipUpdatesWhilePinned: Story = {
-	parameters: { chromatic: { disableSnapshot: true } },
+	parameters: { pixel: { exclude: true } },
 	decorators: scrollStoryDecorators,
 	render: () => <StoryAgentChatPageView store={stickyClipUpdateStore} />,
 	play: async ({ canvasElement }) => {
@@ -1513,7 +1513,7 @@ export const StickyUserMessageClipUpdatesWhilePinned: Story = {
  */
 export const TerminalFocusOnTabSwitch: Story = {
 	parameters: {
-		chromatic: { disableSnapshot: true },
+		pixel: { exclude: true },
 		webSocket: { "/api/v2/workspaceagents/": [{ event: "message", data: "" }] },
 	},
 	decorators: [withWebSocket],

site/src/pages/AgentsPage/components/AgentChatInput.stories.tsx

@@ -613,9 +613,7 @@ export const LargePasteCreatesAttachmentPreview: Story = {
 		onRemoveAttachment: fn(),
 	},
 	parameters: {
-		chromatic: {
-			disableSnapshot: true,
-		},
+		pixel: { exclude: true },
 	},
 	play: async ({ canvasElement, args }) => {
 		const target = getPasteTarget(canvasElement);
@@ -648,9 +646,7 @@ export const CtrlShiftVBypassesAttachmentCollapse: Story = {
 		onRemoveAttachment: fn(),
 	},
 	parameters: {
-		chromatic: {
-			disableSnapshot: true,
-		},
+		pixel: { exclude: true },
 	},
 	play: async ({ canvasElement, args }) => {
 		const target = getPasteTarget(canvasElement);

site/src/pages/AgentsPage/components/ChatElements/Shimmer.tsx

@@ -45,7 +45,7 @@ const ShimmerComponent = ({
 	return (
 		<MotionConfig reducedMotion="user">
 			<MotionComponent
-				data-chromatic="ignore"
+				data-pixel="ignore"
 				animate={{ backgroundPosition: "0% center" }}
 				className={cn(
 					"relative inline-block bg-[length:250%_100%,auto] bg-clip-text text-transparent",

site/src/pages/AgentsPage/components/ChatMessageInput/ChatMessageInput.stories.tsx

@@ -382,7 +382,7 @@ export const MobileShiftedVisualViewport: Story = {
 	decorators: [MobileDecorator],
 	parameters: {
 		viewport: { defaultViewport: "mobile1" },
-		chromatic: { disableSnapshot: true },
+		pixel: { exclude: true },
 	},
 	play: async ({ canvasElement }) => {
 		const restoreMatchMedia = mockMobileMatchMedia();
@@ -418,7 +418,7 @@ export const MobileOffsetTopDoesNotCollapse: Story = {
 	decorators: [MobileDecorator],
 	parameters: {
 		viewport: { defaultViewport: "mobile1" },
-		chromatic: { disableSnapshot: true },
+		pixel: { exclude: true },
 	},
 	play: async ({ canvasElement }) => {
 		const restoreMatchMedia = mockMobileMatchMedia();

site/src/pages/AgentsPage/components/ChatsSidebar/ChatsSidebar.stories.tsx

@@ -264,7 +264,7 @@ export const StaleTurnSummaryAfterStreamingIsSuppressed: Story = {
 			location: { path: "/agents" },
 			routing: agentsRouting,
 		}),
-		chromatic: { disableSnapshot: true },
+		pixel: { exclude: true },
 	},
 	render: (args) => {
 		const initialSummary = "Added Docker and Terraform validation";

site/src/pages/AgentsPage/components/ChatsSidebar/dialogs/ChatSearchResults.tsx

@@ -298,7 +298,7 @@ const ChatSearchResultRow: FC<ChatSearchResultRowProps> = ({
 					/>
 				)}
 				{/* Pin the ignored mask width so Chromatic does not diff bounding rect changes. */}
-				<span data-chromatic="ignore" className="inline-block w-7 text-right">
+				<span data-pixel="ignore" className="inline-block w-7 text-right">
 					{shortRelativeTime(chat.updated_at)}
 				</span>
 			</span>

site/src/pages/AgentsPage/components/ChatsSidebar/tree/ChatTreeNode.tsx

@@ -339,7 +339,7 @@ export const ChatTreeNode: FC<ChatTreeNodeProps> = ({ chat, isChildNode }) => {
 											<>
 												{/* Pin the ignored mask width so Chromatic does not diff bounding rect changes. */}
 												<span
-													data-chromatic="ignore"
+													data-pixel="ignore"
 													className="inline-block w-7 text-right"
 												>
 													{shortRelativeTime(chat.updated_at)}

site/src/pages/AgentsPage/components/RightPanel/PortPreviewPanel.stories.tsx

@@ -24,7 +24,7 @@ const meta = {
 	},
 	parameters: {
 		layout: "centered",
-		chromatic: { disableSnapshot: true },
+		pixel: { exclude: true },
 	},
 	decorators: [
 		(Story) => (

site/src/pages/AgentsPage/components/TerminalPanel.stories.tsx

@@ -37,7 +37,7 @@ const meta = {
 	},
 	parameters: {
 		layout: "centered",
-		chromatic: { disableSnapshot: true },
+		pixel: { exclude: true },
 		queries: terminalQueries,
 	},
 	decorators: [

site/src/pages/CreateTokenPage/CreateTokenForm.tsx

@@ -87,7 +87,7 @@ export const CreateTokenForm: FC<CreateTokenFormProps> = ({
 					form.values.lifetime ? (
 						<>
 							The token will expire on{" "}
-							<span data-chromatic="ignore">
+							<span data-pixel="ignore">
 								{currentTime
 									.add(form.values.lifetime, "days")
 									.utc()
@@ -137,7 +137,7 @@ export const CreateTokenForm: FC<CreateTokenFormProps> = ({
 									setExpDays(lt);
 								}}
 								inputProps={{
-									"data-chromatic": "ignore",
+									"data-pixel": "ignore",
 									min: dayjs().add(1, "day").format("YYYY-MM-DD"),
 									max: maxTokenLifetime
 										? dayjs()

site/src/pages/DeploymentSettingsPage/OAuth2AppsSettingsPage/EditOAuth2AppPageView.tsx

@@ -283,7 +283,7 @@ const OAuth2SecretRow: FC<OAuth2SecretRowProps> = ({
 	return (
 		<TableRow key={secret.id} data-testid={`secret-${secret.id}`}>
 			<TableCell>*****{secret.client_secret_truncated}</TableCell>
-			<TableCell data-chromatic="ignore">
+			<TableCell data-pixel="ignore">
 				{secret.last_used_at ? createDayString(secret.last_used_at) : "never"}
 			</TableCell>
 			<TableCell>

site/src/pages/HealthPage/HealthLayout.tsx

@@ -122,7 +122,7 @@ export const HealthLayout: FC = () => {
 							<div className="flex flex-col">
 								<span className="font-medium">Last check</span>
 								<span
-									data-chromatic="ignore"
+									data-pixel="ignore"
 									className="text-content-secondary line-height-[150%]"
 								>
 									{createDayString(healthStatus.time)}
@@ -132,7 +132,7 @@ export const HealthLayout: FC = () => {
 							<div className="flex flex-col">
 								<span className="font-medium">Version</span>
 								<span
-									data-chromatic="ignore"
+									data-pixel="ignore"
 									className="text-content-secondary line-height-[150%]"
 								>
 									{healthStatus.coder_version}

site/src/pages/HealthPage/WorkspaceProxyPage.tsx

@@ -141,7 +141,7 @@ const WorkspaceProxyPage: FC = () => {
 										))}
 									</div>
 								)}
-								<span data-chromatic="ignore">
+								<span data-pixel="ignore">
 									{createDayString(region.updated_at)}
 								</span>
 							</div>

site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/CancelJobButton.stories.tsx

@@ -30,7 +30,7 @@ export const NotCancellable: Story = {
 
 export const ConfirmOnClick: Story = {
 	parameters: {
-		chromatic: { disableSnapshot: true },
+		pixel: { exclude: true },
 	},
 	play: async ({ canvasElement }) => {
 		const user = userEvent.setup();

site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/CancelJobConfirmationDialog.stories.tsx

@@ -26,7 +26,7 @@ export const Idle: Story = {};
 
 export const OnCancel: Story = {
 	parameters: {
-		chromatic: { disableSnapshot: true },
+		pixel: { exclude: true },
 	},
 	play: async ({ canvasElement, args }) => {
 		const user = userEvent.setup();
@@ -41,7 +41,7 @@ export const OnCancel: Story = {
 
 export const OnConfirmSuccess: Story = {
 	parameters: {
-		chromatic: { disableSnapshot: true },
+		pixel: { exclude: true },
 	},
 	decorators: [withToaster],
 	play: async ({ canvasElement, args }) => {
@@ -61,7 +61,7 @@ export const OnConfirmSuccess: Story = {
 
 export const OnConfirmFailure: Story = {
 	parameters: {
-		chromatic: { disableSnapshot: true },
+		pixel: { exclude: true },
 	},
 	decorators: [withToaster],
 	args: {

site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/JobRow.tsx

@@ -136,7 +136,7 @@ export const JobRow: FC<JobRowProps> = ({ job, defaultIsOpen = false }) => {
 							<dd>{job.metadata.workspace_name ?? "null"}</dd>
 
 							<dt>Creation time:</dt>
-							<dd data-chromatic="ignore">{job.created_at}</dd>
+							<dd data-pixel="ignore">{job.created_at}</dd>
 
 							{job.queue_position > 0 && (
 								<>

site/src/pages/OrganizationSettingsPage/OrganizationProvisionerJobsPage/OrganizationProvisionerJobsPageView.stories.tsx

@@ -66,9 +66,7 @@ export const RetryAfterError: Story = {
 		});
 	},
 	parameters: {
-		chromatic: {
-			disableSnapshot: true,
-		},
+		pixel: { exclude: true },
 	},
 };
 

site/src/pages/OrganizationSettingsPage/OrganizationProvisionerKeysPage/ProvisionerKeyRow.tsx

@@ -78,7 +78,7 @@ export const ProvisionerKeyRow: FC<ProvisionerKeyRowProps> = ({
 							])}
 						>
 							<dt>Creation time:</dt>
-							<dd data-chromatic="ignore">{provisionerKey.created_at}</dd>
+							<dd data-pixel="ignore">{provisionerKey.created_at}</dd>
 
 							<dt>Tags:</dt>
 							<dd>

site/src/pages/OrganizationSettingsPage/OrganizationProvisionersPage/ProvisionerRow.tsx

@@ -116,10 +116,10 @@ export const ProvisionerRow: FC<ProvisionerRowProps> = ({
 							])}
 						>
 							<dt>Last seen:</dt>
-							<dd data-chromatic="ignore">{provisioner.last_seen_at}</dd>
+							<dd data-pixel="ignore">{provisioner.last_seen_at}</dd>
 
 							<dt>Creation time:</dt>
-							<dd data-chromatic="ignore">{provisioner.created_at}</dd>
+							<dd data-pixel="ignore">{provisioner.created_at}</dd>
 
 							<dt>Version:</dt>
 							<dd>

site/src/pages/TemplateVersionEditorPage/ProvisionerTagsPopover.stories.tsx

@@ -31,7 +31,7 @@ export const Open: Story = {
 
 export const OnTagsChange: Story = {
 	parameters: {
-		chromatic: { disableSnapshot: true },
+		pixel: { exclude: true },
 	},
 	args: {
 		tags: {},

site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx

@@ -413,7 +413,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 					</Sidebar>
 
 					<div className="flex flex-col w-full min-h-full overflow-hidden">
-						<div className="flex-1 overflow-y-auto" data-chromatic="ignore">
+						<div className="flex-1 overflow-y-auto" data-pixel="ignore">
 							{activePath ? (
 								isEditorValueBinary ? (
 									<div

site/src/pages/TemplatesPage/TemplatesPageView.tsx

@@ -176,7 +176,7 @@ const TemplateRow: FC<TemplateRowProps> = ({
 				{formatTemplateBuildTime(template.build_time_stats.start.P50)}
 			</TableCell>
 
-			<TableCell data-chromatic="ignore" className="text-content-secondary">
+			<TableCell data-pixel="ignore" className="text-content-secondary">
 				{createDayString(template.updated_at)}
 			</TableCell>
 

site/src/pages/UserSettingsPage/SecretsPage/SecretsTable.tsx

@@ -112,7 +112,7 @@ export const SecretsTable: FC<SecretsTableProps> = ({
 										fallback="No description"
 									/>
 								</TableCell>
-								<TableCell data-chromatic="ignore">
+								<TableCell data-pixel="ignore">
 									{relativeTime(secret.updated_at)}
 								</TableCell>
 								<TableCell>

site/src/pages/UserSettingsPage/TokensPage/TokensPageView.tsx

@@ -114,7 +114,7 @@ const TokensTableBody: FC<TokensTableBodyProps> = ({
 					<TableCell>
 						<span
 							style={{ color: theme.palette.text.secondary }}
-							data-chromatic="ignore"
+							data-pixel="ignore"
 						>
 							{dayjs(token.expires_at).fromNow()}
 						</span>

site/src/pages/UsersPage/UsersTable.stories.tsx

@@ -143,7 +143,4 @@ export const Loading: Story = {
 		users: [],
 		isLoading: true,
 	},
-	parameters: {
-		chromatic: { pauseAnimationAtEnd: true },
-	},
 };

site/src/pages/WorkspacePage/WorkspaceBuildProgress.tsx

@@ -127,14 +127,14 @@ export const WorkspaceBuildProgress: FC<WorkspaceBuildProgressProps> = ({
 				<div className="mb-1 text-center">
 					<div
 						className="block text-xs font-semibold text-content-secondary"
-						data-chromatic="ignore"
+						data-pixel="ignore"
 					>
 						{progressText}
 					</div>
 				</div>
 			)}
 			<LinearProgress
-				data-chromatic="ignore"
+				data-pixel="ignore"
 				value={progressValue !== undefined ? progressValue : 0}
 				variant={
 					// There is an initial state where progressValue may be undefined
@@ -153,7 +153,7 @@ export const WorkspaceBuildProgress: FC<WorkspaceBuildProgressProps> = ({
 					</div>
 					<div
 						className="block text-xs font-semibold text-content-secondary"
-						data-chromatic="ignore"
+						data-pixel="ignore"
 					>
 						{progressText}
 					</div>

site/src/pages/WorkspacesPage/WorkspacesPage.stories.tsx

@@ -182,7 +182,7 @@ const makePage = (prefix: string) =>
 
 export const PaginationChangesQueryKey: Story = {
 	parameters: {
-		chromatic: { disableSnapshot: true },
+		pixel: { exclude: true },
 		queries: [
 			...meta.parameters.queries,
 			{

site/src/utils/schedule.tsx

@@ -136,7 +136,7 @@ export const autostopDisplay = (
 		if (template.autostop_requirement && template.allow_user_autostop) {
 			title = <HelpPopoverTitle>Autostop schedule</HelpPopoverTitle>;
 			reason = (
-				<span data-chromatic="ignore">
+				<span data-pixel="ignore">
 					{" "}
 					because this workspace has enabled autostop. You can disable autostop
 					from this workspace&apos;s{" "}
@@ -150,7 +150,7 @@ export const autostopDisplay = (
 		return {
 			message: `Stop ${deadline.fromNow()}`,
 			tooltip: (
-				<span data-chromatic="ignore">
+				<span data-pixel="ignore">
 					{title}
 					This workspace will be stopped on{" "}
 					{deadline.format("MMMM D [at] h:mm A")}