chore(chromatic): fit the snapshot surface inside the free plan - #8208
Conversation
The token stories were the only design system layer with no visual coverage at all, so a changed value in tokens.json was caught only indirectly, via whichever component story happened to consume it. Enables snapshots for the five stories that render specimens: semantic colours, the primitive palette, radius, elevation and motion. Left off: TokenReference (a text table of variable names, no visual signal, exists for MCP) and CategoricalPalette (hardcoded tag and project hexes, not tokens). Motion is safe to capture; its only animation is a CSS transition on click, unlike Loader's SVG animateTransform which Chromatic cannot pause. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Row, Column and Flex render a single div with flexbox classes. They carry no colour, radius or shadow, so no design token can change how they look and their light and dark captures are identical. With both modes enabled that is 18 snapshots per full build for a diff that cannot occur. BareButton was considered and kept: it does reference tokens, via a focus-visible ring using --color-border-action and --radius-sm. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The pull_request trigger matched frontend/**, so a change to an e2e spec, an RTK service or an API type started a Chromatic build that TurboSnap then found nothing to capture in. Aligns it with the narrower push path list, and adds package.json to both, since a dependency bump can change rendering and is also where TurboSnap bails to a full build. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
1 Skipped Deployment
|
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughThe frontend Chromatic workflow now uses narrower path filters and includes Estimated code review effort: 2 (Simple) | ~10 minutes Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
github-actions
Bot
added
the
front-end
Docker builds report
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: e1c85d69-bd3c-4203-9138-54302a691ac4
📒 Files selected for processing (9)
.github/workflows/frontend-chromatic.ymlfrontend/documentation/ColourPalette.stories.tsxfrontend/documentation/ElevationTokens.stories.tsxfrontend/documentation/MotionTokens.stories.tsxfrontend/documentation/RadiusTokens.stories.tsxfrontend/documentation/SemanticTokens.stories.tsxfrontend/documentation/components/Column.stories.tsxfrontend/documentation/components/Flex.stories.tsxfrontend/documentation/components/Row.stories.tsx
✅ private-cloud · depot-ubuntu-latest-16 — run #18969 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
🗂️ Previous results✅ private-cloud · depot-ubuntu-latest-arm-16 — run #18969 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
✅ oss · depot-ubuntu-latest-arm-16 — run #18969 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
✅ oss · depot-ubuntu-latest-16 — run #18969 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
✅ private-cloud · depot-ubuntu-latest-arm-16 — run #18968 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
✅ private-cloud · depot-ubuntu-latest-16 — run #18968 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
✅ oss · depot-ubuntu-latest-arm-16 — run #18968 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
✅ oss · depot-ubuntu-latest-16 — run #18968 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
✅ private-cloud · depot-ubuntu-latest-arm-16 — run #18967 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)
Details
✅ private-cloud · depot-ubuntu-latest-16 — run #18967 (attempt 1)Playwright Test Results (private-cloud - depot-ubuntu-latest-16)
Details
✅ oss · depot-ubuntu-latest-arm-16 — run #18967 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-arm-16)
Details
✅ oss · depot-ubuntu-latest-16 — run #18967 (attempt 1)Playwright Test Results (oss - depot-ubuntu-latest-16)
Details
|
Visual Regression19 screenshots compared. See report for details. |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #8208 +/- ##
=======================================
Coverage 98.71% 98.71%
=======================================
Files 1531 1531
Lines 61263 61263
=======================================
Hits 60475 60475
Misses 788 788 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
We are on the free 5,000-snapshot plan and demand is roughly 20,000 a month, so snapshots stop being captured part-way through every billing period. The full surface is 217 capturable stories, which makes any build that cannot use TurboSnap cost 434 snapshots; 8 July alone burned 2,766. Scopes captures to 17 story files via onlyStoryFiles: the five token specimen stories, plus the twelve components whose dark appearance comes from a hand-written `.dark` override rather than from a token, which are the only ones where a snapshot can catch drift. That is 45 story exports, or roughly 3,710 snapshots a month at the current build volume. onlyStoryFiles rather than onlyStoryNames because several story titles contain spaces and the action does not document how it splits list inputs. Unverified: the quota is exhausted until 17 August, so this cannot be tested against a real build until then. Check the first build's snapshot count before assuming the allowlist took effect. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
talissoncosta
changed the title
Four of the five token documentation stories earn nothing: - MotionTokens: a static image cannot show duration or easing. - RadiusTokens, ElevationTokens: specimen sheets for tokens that Button, Card, Panel, Chip, Input and Modal already exercise, all of which are in the allowlist. - ColourPalette: renders _primitives.scss, the hand-maintained duplicate, not tokens.json. All four print token values as text, which the git diff of tokens.ts and _tokens.scss already shows whenever tokens.json changes. That is the same reason TokenReference is excluded. SemanticTokens stays. It renders live swatches read from the stylesheet, so it is the only place tokens no component exercises are visible: the nine code-* colours, surface-info, text-tertiary. Scope is now 13 story files, 41 exports, ~3,460 snapshots a month. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: fcbcbced-ba48-486d-8604-cb78b7aa2f66
📒 Files selected for processing (1)
.github/workflows/frontend-chromatic.yml
Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
.github/workflows/frontend-chromatic.yml (1)
106-119: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winInclude
BareButtonin the allowlist.
frontend/documentation/components/BareButton.stories.tsxexists, butonlyStoryFilesonly listsButton.stories.tsx, so the workflow will not runBareButtonstories. Adddocumentation/components/BareButton.stores.tsxand keep the allowed story count in scope.
♻️ Duplicate comments (1)
.github/workflows/frontend-chromatic.yml (1)
20-31:⚠️ Potential issue | 🟠 MajorInclude
frontend/package-lock.jsonin both trigger lists.The changed path lists add
frontend/package.json, but notfrontend/package-lock.json. The workflow uses the lockfile for the npm cache at Line 64 and fornpm ciat Line 67. A lockfile-only dependency update will skip this workflow, so Chromatic will not validate the resulting Storybook dependency graph. GitHub path filters match changed file paths, andnpm cirequires the committed lockfile. (docs.github.com)Add
frontend/package-lock.jsonto bothpush.pathsandpull_request.paths.#!/usr/bin/env bash set -euo pipefail python3 - <<'PY' from pathlib import Path import re lines = Path(".github/workflows/frontend-chromatic.yml").read_text().splitlines() required = "frontend/package-lock.json" found = {} for event in ("push", "pull_request"): start = next(i for i, line in enumerate(lines) if line == f" {event}:") end = next( (i for i in range(start + 1, len(lines)) if re.match(r"^ \S", lines[i])), len(lines), ) block = lines[start:end] paths_start = next(i for i, line in enumerate(block) if line.strip() == "paths:") paths_end = next( (i for i in range(paths_start + 1, len(block)) if re.match(r"^ \S", block[i])), len(block), ) found[event] = { line.strip()[2:].strip("'\"") for line in block[paths_start + 1:paths_end] if line.strip().startswith("- ") } missing = [event for event in ("push", "pull_request") if required not in found[event]] if missing: raise SystemExit(f"Missing {required} from: {', '.join(missing)}") PY
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 64afb4f4-eab9-4aba-843b-5cab2884e640
📒 Files selected for processing (1)
.github/workflows/frontend-chromatic.yml
There was a problem hiding this comment.
♻️ Duplicate comments (1)
.github/workflows/frontend-chromatic.yml (1)
14-24:⚠️ Potential issue | 🟠 MajorInclude
frontend/package-lock.jsonin both trigger path lists.The changed lists add
frontend/package.json, but notfrontend/package-lock.json. A lockfile-only dependency update will not trigger this workflow. The job uses the lockfile for the npm cache at Line [58] and runsnpm ciat Line [61]. Add the lockfile to bothpush.pathsandpull_request.paths;npm cirequires an existing lockfile and rejects mismatches withpackage.json. (docs.npmjs.com)
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: 28118bc6-65a8-4222-b6df-e2b39db5001f
📒 Files selected for processing (4)
.github/workflows/frontend-chromatic.ymlfrontend/documentation/components/Column.stories.tsxfrontend/documentation/components/Flex.stories.tsxfrontend/documentation/components/Row.stories.tsx
The action rejects the combination outright: ✖ You can only use one of --only-changed, --only-story-files And dropping onlyChanged instead is worse: without TurboSnap there is no baseline inheritance, so all 261 builds a month pay the full allowlist rather than only the ones that bail. disableSnapshot is a Storybook parameter rather than a CLI flag, so it composes with onlyChanged. Off by default in preview.js, opted into on the 13 story files worth capturing. TurboSnap keeps clean builds cheap, and a build that cannot use it captures 82 snapshots instead of 434. Also reverts the Row/Column/Flex opt-outs, now redundant under a default-off policy, and folds disableSnapshot into Modal's existing chromatic parameter rather than adding a duplicate key. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
There was a problem hiding this comment.
Actionable comments posted: 1
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: ASSERTIVE
Plan: Pro Plus
Run ID: c761ff7d-b31c-40d0-9543-3188c1e4da6e
📒 Files selected for processing (15)
.github/workflows/frontend-chromatic.ymlfrontend/.storybook/preview.jsfrontend/documentation/SemanticTokens.stories.tsxfrontend/documentation/components/Button.stories.tsxfrontend/documentation/components/Card.stories.tsxfrontend/documentation/components/Chip.stories.tsxfrontend/documentation/components/ErrorMessage.stories.tsxfrontend/documentation/components/Icons.stories.tsxfrontend/documentation/components/Input.stories.tsxfrontend/documentation/components/Modal.stories.tsxfrontend/documentation/components/MultiSelect.stories.tsxfrontend/documentation/components/Panel.stories.tsxfrontend/documentation/components/Switch.stories.tsxfrontend/documentation/components/Tabs.stories.tsxfrontend/documentation/components/Tooltip.stories.tsx
💤 Files with no reviewable changes (1)
- .github/workflows/frontend-chromatic.yml
Both from CodeRabbit on #8208. GitHub Actions has supported YAML anchors since September 2025, so the duplicated path lists collapse into one, and the comment claiming otherwise was wrong. package-lock.json joins package.json: the job runs `npm ci`, which installs from the lockfile, so a transitive bump can change rendering without package.json moving. Missing it also left main's baseline stale after a dependency update, which is what makes TurboSnap bail. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
The comment named only the `.dark` override criterion, but SemanticTokens opts in and has no `.dark` override at all. From CodeRabbit on #8208. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
3 participants
Thanks for submitting a PR! Please check the boxes below:
docs/if required so people know about the feature.Changes
Contributes to #6606
We're on Chromatic's free plan and run out of snapshots mid-period, which is why builds sat yellow and the repo got unlinked. 217 stories are capturable, so any build that can't use TurboSnap costs 434 snapshots. 8 July alone burned 2,766.
Snapshots are now off by default in
preview.jsand opted into on 13 story files: the components still styling dark mode with hand-written.darkblocks rather than tokens, where the two themes can quietly drift apart. 41 exports, so a build without TurboSnap costs 82 instead of 434.Used
disableSnapshotrather thanonlyStoryFilesbecause the action rejects that alongsideonlyChanged, and dropping TurboSnap instead is worse: with no baseline inheritance, every build pays for the whole set.Also narrows the
pull_requesttrigger fromfrontend/**to the same paths aspush, so e2e specs and service changes stop starting builds.How did you test this code?
Audited the result by script: 13 opted-in files, 41 capturable exports. Typecheck caught a duplicate
chromatickey I'd added toModal.stories.tsx, now folded into the existing one. eslint clean.Not verified yet. The account is out of snapshots until 17 August and the build here says so, so nothing was captured. On the first build after that which reports
TurboSnap disabled, the count should be ~82. If it's 434, the parameter isn't inheriting frompreview.js.