|
| 1 | +--- |
| 2 | +slug: /storybook-story-modes |
| 3 | +title: Storybook story modes |
| 4 | +--- |
| 5 | + |
| 6 | +# Storybook story modes for testing themes, viewports, locales and more |
| 7 | + |
| 8 | +Argos can capture multiple versions of your stories by applying different “modes,” which are essentially combinations of global Storybook settings (such as theme, viewport, locale, etc.). With modes, you can automatically generate a separate snapshot for each unique configuration. |
| 9 | + |
| 10 | +:::note |
| 11 | + |
| 12 | +If you already have `parameters.chromatic.modes`, Argos will handle those settings by default. Prefer `parameters.argos.modes` in new work. |
| 13 | + |
| 14 | +::: |
| 15 | + |
| 16 | +## What are modes? |
| 17 | + |
| 18 | +A mode is a preset that configures various Storybook globals. For instance, you can have a “dark” mode for your UI theme, a “mobile” mode for smaller screens, or a combined “dark-mobile-spanish” mode that configures multiple globals at once. |
| 19 | + |
| 20 | +**Key features of modes:** |
| 21 | + |
| 22 | +- Each mode is named (e.g., "dark desktop" or "mobile"). |
| 23 | +- Each mode sets specific values for the Storybook globals (e.g., viewport size, background color, locale). |
| 24 | +- Argos creates a separate visual baseline for each mode name. |
| 25 | + |
| 26 | +## Setting up globals & addons |
| 27 | + |
| 28 | +Before you define any modes, make sure you’ve configured the relevant Storybook addons in your .storybook/preview.js (or .storybook/preview.ts) file. Examples include: |
| 29 | + |
| 30 | +- [`@storybook/addon-viewport`](https://www.npmjs.com/package/@storybook/addon-viewport) for screen sizes |
| 31 | +- [`@storybook/addon-themes`](https://www.npmjs.com/package/@storybook/addon-themes) for light/dark themes |
| 32 | +- [`@storybook/addon-backgrounds`](https://www.npmjs.com/package/@storybook/addon-backgrounds) for backgrounds |
| 33 | +- [`storybook-i18n`](https://www.npmjs.com/package/storybook-i18n) for locales |
| 34 | + |
| 35 | +These addons utilize Storybook “globals” and “decorators” under the hood. Argos modes simply manipulate those globals at test time to generate multiple snapshots of the same story. |
| 36 | + |
| 37 | +```ts |
| 38 | +// .storybook/preview.js |
| 39 | +import { withThemeByClassName } from "@storybook/addon-themes"; |
| 40 | +import "../src/styles.css"; |
| 41 | + |
| 42 | +const preview = { |
| 43 | + parameters: { |
| 44 | + viewport: { |
| 45 | + viewports: { |
| 46 | + compact: { |
| 47 | + name: "Compact", |
| 48 | + styles: { width: "600px", height: "900px" }, |
| 49 | + }, |
| 50 | + widescreen: { |
| 51 | + name: "Widescreen", |
| 52 | + styles: { width: "1440px", height: "900px" }, |
| 53 | + }, |
| 54 | + }, |
| 55 | + }, |
| 56 | + backgrounds: { |
| 57 | + values: [ |
| 58 | + { name: "Light", value: "#ffffff" }, |
| 59 | + { name: "Dark", value: "#1A1A1A" }, |
| 60 | + ], |
| 61 | + }, |
| 62 | + }, |
| 63 | + decorators: [ |
| 64 | + withThemeByClassName({ |
| 65 | + themes: { |
| 66 | + light: "light", |
| 67 | + dark: "dark", |
| 68 | + }, |
| 69 | + defaultTheme: "light", |
| 70 | + }), |
| 71 | + ], |
| 72 | +}; |
| 73 | + |
| 74 | +export default preview; |
| 75 | +``` |
| 76 | + |
| 77 | +## Defining modes |
| 78 | + |
| 79 | +Create a `.storybook/modes.js` (or `.ts`) file that exports an object where each key is a mode name and each value is a set of overrides for the Storybook globals. For example: |
| 80 | + |
| 81 | +```ts |
| 82 | +// .storybook/modes.js |
| 83 | + |
| 84 | +export const allModes = { |
| 85 | + dark: { |
| 86 | + backgrounds: { value: "#1A1A1A" }, |
| 87 | + theme: "dark", |
| 88 | + }, |
| 89 | + mobile: { |
| 90 | + viewport: "compact", |
| 91 | + }, |
| 92 | + "dark widescreen": { |
| 93 | + backgrounds: { value: "#1A1A1A" }, |
| 94 | + theme: "dark", |
| 95 | + viewport: "widescreen", |
| 96 | + }, |
| 97 | + "light mobile": { |
| 98 | + backgrounds: { value: "#ffffff" }, |
| 99 | + theme: "light", |
| 100 | + viewport: "compact", |
| 101 | + }, |
| 102 | +}; |
| 103 | +``` |
| 104 | + |
| 105 | +Each object can include as many or as few globals as you need. If a mode doesn’t specify a particular global, that global simply won’t be changed in that mode. |
| 106 | + |
| 107 | +## Applying modes |
| 108 | + |
| 109 | +Attach modes to any level of your Storybook: globally in `.storybook/preview.js`, at the component (default export) level, or in an individual story’s parameters. Argos merges all modes defined up the chain. |
| 110 | + |
| 111 | +### Basic usage in a story file |
| 112 | + |
| 113 | +```ts |
| 114 | +// src/components/ProductCard/ProductCard.stories.js |
| 115 | + |
| 116 | +import { ProductCard } from "./ProductCard"; |
| 117 | +import { allModes } from "../../../.storybook/modes"; |
| 118 | + |
| 119 | +export default { |
| 120 | + title: "Components/ProductCard", |
| 121 | + component: ProductCard, |
| 122 | + parameters: { |
| 123 | + // Use Argos for new projects; Chromatic is recognized too |
| 124 | + argos: { |
| 125 | + modes: { |
| 126 | + mobile: allModes.mobile, |
| 127 | + dark: allModes.dark, |
| 128 | + }, |
| 129 | + }, |
| 130 | + }, |
| 131 | +}; |
| 132 | + |
| 133 | +// Story #1 |
| 134 | +export const DefaultView = { |
| 135 | + args: { |
| 136 | + productName: "Coffee Beans", |
| 137 | + price: 9.99, |
| 138 | + }, |
| 139 | +}; |
| 140 | + |
| 141 | +// Story #2 |
| 142 | +export const SoldOutView = { |
| 143 | + args: { |
| 144 | + productName: "Coffee Beans", |
| 145 | + price: 9.99, |
| 146 | + isSoldOut: true, |
| 147 | + }, |
| 148 | +}; |
| 149 | +``` |
| 150 | + |
| 151 | +In this example, Argos will generate two snapshots for each story (DefaultView and SoldOutView): one in “mobile” mode and another in “dark” mode. |
| 152 | + |
| 153 | +## Combining modes from multiple levels |
| 154 | + |
| 155 | +You can add modes in your .storybook/preview.js at the project level, then define additional modes in a story file. Argos “stacks” these modes, creating a snapshot for every combination. |
| 156 | + |
| 157 | +### Project-level modes |
| 158 | + |
| 159 | +```ts |
| 160 | +// .storybook/preview.js |
| 161 | +import { allModes } from "./modes"; |
| 162 | + |
| 163 | +const preview = { |
| 164 | + parameters: { |
| 165 | + argos: { |
| 166 | + modes: { |
| 167 | + "light mobile": allModes["light mobile"], |
| 168 | + }, |
| 169 | + }, |
| 170 | + }, |
| 171 | +}; |
| 172 | + |
| 173 | +export default preview; |
| 174 | +``` |
| 175 | + |
| 176 | +### Component-level modes |
| 177 | + |
| 178 | +```ts |
| 179 | +// ProductCard.stories.js |
| 180 | +import { ProductCard } from "./ProductCard"; |
| 181 | +import { allModes } from "../../../.storybook/modes"; |
| 182 | + |
| 183 | +export default { |
| 184 | + title: "Components/ProductCard", |
| 185 | + component: ProductCard, |
| 186 | + parameters: { |
| 187 | + argos: { |
| 188 | + modes: { |
| 189 | + "dark widescreen": allModes["dark widescreen"], |
| 190 | + }, |
| 191 | + }, |
| 192 | + }, |
| 193 | +}; |
| 194 | + |
| 195 | +// Single story for brevity |
| 196 | +export const Basic = { |
| 197 | + args: { |
| 198 | + /* ... */ |
| 199 | + }, |
| 200 | +}; |
| 201 | +``` |
| 202 | + |
| 203 | +When Argos runs, it will generate snapshots for each mode defined at the project level and the component level. So for Basic, you get “light mobile” (from `preview.js`) plus “dark widescreen” (from the component’s parameter). |
| 204 | + |
| 205 | +## Excluding or disabling modes |
| 206 | + |
| 207 | +Sometimes you want to turn off a certain higher-level mode for a specific story. You can do this by passing a disable property: |
| 208 | + |
| 209 | +```ts |
| 210 | +// ProductCard.stories.js |
| 211 | +export const SpecialCard = { |
| 212 | + args: { |
| 213 | + /* ... */ |
| 214 | + }, |
| 215 | + parameters: { |
| 216 | + argos: { |
| 217 | + modes: { |
| 218 | + "light mobile": { disable: true }, // turns off this inherited mode |
| 219 | + }, |
| 220 | + }, |
| 221 | + }, |
| 222 | +}; |
| 223 | +``` |
| 224 | + |
| 225 | +That story will now ignore light mobile mode but still apply any other inherited modes. |
| 226 | + |
| 227 | +## Working with baselines |
| 228 | + |
| 229 | +Each mode name corresponds to a separate baseline in Argos. If you rename a mode, it’s treated as entirely new. If you alter the internals of a mode (like changing the viewport from “compact” to “ultra-compact”) without renaming it, Argos still compares the new screenshot against the old baselines for that mode name. |
| 230 | + |
| 231 | +:::note |
| 232 | + |
| 233 | +If you have an original single baseline from before you introduced modes, and you want to keep it around, just add a mode like "baseline" that reproduces the same environment as the original story. That way, your old baseline is preserved while you experiment with new modes. |
| 234 | + |
| 235 | +::: |
| 236 | + |
| 237 | +## FAQ |
| 238 | + |
| 239 | +<details> |
| 240 | + <summary> |
| 241 | + Can modes be applied if I'm still using `parameters.chromatic`? |
| 242 | + </summary> |
| 243 | + |
| 244 | +Yes. Argos reads your `chromatic.modes` settings if present. However, |
| 245 | +for new users or updated setups, prefer using `argos.modes` to avoid |
| 246 | +any confusion in the future. |
| 247 | + |
| 248 | +</details> |
| 249 | + |
| 250 | +<details> |
| 251 | + <summary>Do all Storybook addons work with Argos modes?</summary> |
| 252 | + |
| 253 | +Any addon that leverages Storybook globals should work, including [@storybook/addon-themes](https://storybook.js.org/addons/@storybook/addon-themes), |
| 254 | +[@storybook/addon-viewport](https://storybook.js.org/addons/@storybook/addon-viewport), |
| 255 | +[@storybook/addon-backgrounds](https://storybook.js.org/addons/@storybook/addon-backgrounds), |
| 256 | +or [storybook-i18n](https://storybook.js.org/addons/storybook-i18n). Modes just |
| 257 | +provide different values for those globals. |
| 258 | + |
| 259 | +</details> |
| 260 | + |
| 261 | +<details> |
| 262 | + <summary>What happens if I delete or rename a mode?</summary> |
| 263 | + |
| 264 | +If you remove a mode from your code, Argos will stop capturing new snapshots for |
| 265 | +that mode, and its baseline history won’t be updated anymore. Renaming a mode effectively |
| 266 | +creates a new baseline, much like renaming a story. |
| 267 | + |
| 268 | +</details> |
| 269 | + |
| 270 | +Enjoy your multi-mode visual tests! By setting up modes for dark vs. light, mobile vs. desktop, and everything in between, you can verify all key variants of your UI without writing extra stories. |
0 commit comments