docs(storybook): document Storybook 9+ parameters and supported versions - #255
Merged
Merged
Conversation
Companion to argos-ci/argos-javascript#381, which makes @argos-ci/storybook resolve viewports from the Storybook 9+ `viewport.options` parameter and the `{ value, isRotated }` global. - Story modes guide: viewports and backgrounds are built into Storybook 9+ and configured through `options` maps, and a mode selects a background by key. A hint keeps the Storybook 8 format (`viewports`, `values`, color as value) for readers still on 8. - SDK reference: a Compatibility section (Storybook 8 through 11, Vitest 4 or 5, Node.js 22) and a Viewports section describing how a mode's or a story's `viewport` global is resolved. - Storybook Quickstart: the Vitest addon requires Storybook 9 or later. Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
jsfez
approved these changes
Sep 12, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Companion to argos-ci/argos-javascript#381, which makes
@argos-ci/storybookcompatible with Storybook 11 and teaches it the Storybook 9+ viewport format. The pages still described the Storybook 8 parameter shapes, which the SDK only kept for backwards compatibility.What changed
learn/how-to-guides/visual-coverage/storybook-story-modes.md— the setup section now says viewports and backgrounds are built into Storybook 9+ (the addon packages are for Storybook 8), thepreview.tsexample usesviewport.optionsandbackgrounds.options, and the modes select a background by key (backgrounds: { value: "dark" }) instead of by color. A hint keeps the Storybook 8 format for readers still on 8. A new paragraph after the modes example explains what a mode'sviewportresolves to and that Storybook's{ value, isRotated }form works too. The FAQ entry on addons drops the viewport/backgrounds addon links accordingly.sdks-reference/storybook.md— a Compatibility section (Storybook 8 through 11 including the 11 pre-releases, Vitest 4 or 5, Node.js 22; the Vitest addon needs Storybook 9+, the Test Runner works from 8) and a Viewports section describing how theviewportglobal is resolved: a key ofviewport.options(orviewport.viewportson 8), Storybook's{ value, isRotated }object, or a bare number used as the width.quickstart/storybook-quickstart/README.md— the prerequisite moves from Storybook v8+ to v9+, since@storybook/addon-vitestonly exists from 9 (the Test Runner quickstart keeps v8+).No
SUMMARY.mdchange — no page was added. All GitBook block tags verified balanced.Not changed, worth a look
The modes guide shows
{ disable: true }to turn off an inherited mode, but the SDK currently checksdisabled(packages/storybook/src/utils/screenshot.ts, and its fixture stories usedisabled: true). Chromatic usesdisable. I left the page as is; the SDK should probably accept both, which would be a one-line follow-up in argos-javascript.🤖 Generated with Claude Code