search

chromaui / addon-visual-tests

Visual Tests addon for Storybook
MIT License
33 stars 2 forks source link

Setup modes for Chromatic #114

Closed ghengeveld closed 11 months ago

ghengeveld commented 11 months ago
📦 Published PR as canary version: 0.0.85--canary.114.34ead1e.0
:sparkles: Test out this PR locally via: ```bash 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 ```
ghengeveld commented 11 months ago

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:

Screenshot 2023-09-20 at 09 20 33

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.