Introduced our wrapper around the isChromatic helper to locally test the change described above. Run CHROMATIC=true yarn storybook to test it.
Pinned prettier version to avoid huge diff in this PR. Let's unpin it in a follow-up PR.
Added React context to the Popover component to be able to change the HTML element where it's rendered. Thanks, @vovakulikov, for implementing that!
New global decorator
The withChromaticThemes decorator renders stories with parameters.chromatic.enableDarkMode === true twice — in light and dark mode. The decorator is enabled only if isChromatic() === true. It's a suggested way of snapshotting the same story with different themes. Trade-offs:
Pros
Simpler code — decorator React component. No need to touch the story store API used previously.
Compatible with the new story store API. We won't need to migrate anything when the Storybook v7 is released.
Two themes on one snapshot —> less number of snapshots -> less spending.
Cons
Dark mode and light mode stories are not isolated — they are rendered in the same React tree. (e.g., that's why we need a way to control the Popover root element).
Test plan
Ensure that Storybook works locally without changes.
