Setup modes for Chromatic

[ghengeveld]

📦 Published PR as canary version: 0.0.85--canary.114.34ead1e.0

✨ Test out this PR locally via:

npm install @chromaui/addon-visual-tests@0.0.85--canary.114.34ead1e.0
# or 
yarn add @chromaui/addon-visual-tests@0.0.85--canary.114.34ead1e.0

[tmeasday]

I like it. Can you talk me through the choice to do 2-up views for the pages but 1-up views for the components? I'm not quite understanding that, TBH.

[ghengeveld]

I like it. Can you talk me through the choice to do 2-up views for the pages but 1-up views for the components? I'm not quite understanding that, TBH.

Twofold. Components are supposed to render nicely regardless of their container. They shouldn't really be affected by explicit breakpoints. But that's just from an idealistic view. The other reason is that this setup yields nicer images in Chromatic:

The 2-up really is designed to mimic the addon panel. It even has the appropriate borders and background to make it look like a panel. Throwing individual components on there feels a bit weird.

By the way I imagine we won't use the 2-up layout for fullscreen screens either (since they won't have horizontal/vertical layout variants). I'll rename componentModes and screenModes to better reflect that.