diff --git a/src/content/modes/modes.mdx b/src/content/modes/modes.mdx index 195ec5dd..cbdb4d05 100644 --- a/src/content/modes/modes.mdx +++ b/src/content/modes/modes.mdx @@ -11,7 +11,11 @@ import { YouTubeCallout } from "../../components/YouTubeCallout"; Global-level configurations (globals) such as viewport size, theme (light/dark), and locale impact how a component renders. Chromatic simplifies the process of visually testing your stories with different global configs. - + You can save combinations of globals as a unique "mode" and apply one or multiple modes to a story using the `chromatic.modes` parameter. When Chromatic tests your story, it will capture a snapshot for each applied mode. These modes are treated separately, with independent baselines and distinct approvals. @@ -379,6 +383,41 @@ export const allModes = { }; ``` +### Maintain the original non-modes based baseline + +Sometimes, you might want to keep the original baseline for a story while testing it with extra modes. Add a mode called `1200px` with the value `{ viewport: 1200 }` to your story. This way, you can maintain the original baseline and still test the story with additional modes. + +Let's take an example scenario. We want to test the base story in both light and dark modes. By introducing the `1200px` mode, we can maintain the original baseline for that story while also testing it with light and dark modes. + +```jsx +// ArticleCard.stories.js + +import { allModes } from "../.storybook/modes"; +import { ArticleCard } from "./ArticleCard"; + +export default { + component: ArticleCard, + parameters: { + chromatic: { + //🔶 Test each story for ArticleCard in two modes + modes: { + "light mobile": allModes["light mobile"], + "dark desktop": allModes["dark desktop"], + "1200px": { viewport: 1200 }, + }, + }, + }, +}; + +export const Base = { + args: { + //... + }, +}; +``` + +Internally, this is easily achievable simply by naming one of your modes `1200px`, but we do not mention that anywhere in our doc. + --- ### Frequently asked questions