[RFC] Improve Variability of Storybook Snapshots with Modes

[TylerAPfledderer]

As part of an ongoing effort to improve the usage of Storybook with the new DS, apply the feature of Story Modes to Chromatic snapshots.

In short, with allow the generation of various snapshots to each story to show components in various viewports and color modes, among other possible combinations.

This can help cut down review time significantly by not forcing a reviewer to go into the Storybook canvas to check color mode and viewports widths for any design regressions.

An example of it's usefulness would for snapshots of the hero components, as the design for these components have defined alterations in the DS between various viewport widths.

[pettinarip]

Definitely. That will be very useful. At least the mobile visual test is critical, I would say.

Another critical one, which may not be related to these modes, is i18n testing. It would be nice to have visual tests with at least 1 locale (ru or uk, which often have long words) different from the default.

[TylerAPfledderer]

@pettinarip ah yes! I'll need to dig, but I believe you can do modes with i18n.

[wackerow]

Hey @TylerAPfledderer, this sounds great... how did you imagine this being implemented? Should we make a list of the existing stories and check them off with individual PRs that update them?

[wackerow]

Personally think I'd like to see:

• Color modes
  • Light
  • Dark
• i18n
  • en as default
  • zh as an example of shorter text (or comparable)
  • ru as an example of longer text (or comparable)
  • fa as an example of RTL text
• Viewport
  • Desktop
  • Mobile
  • maybe tablet? This could be an opportunity to improve UX for this screen size

[TylerAPfledderer]

@wackerow I do have a draft PR up and didn't tie it to this issue yet. See #12668.

Yes, there are a bunch of combinations to implement. It definitely should be at the story level in terms of what to implement, but can look at exporting an object from .storybook to use for reusability.

I'm running into some trouble getting some options to generate properly. Waiting on #12674 so I can see issues through the PR checks.

I don't think small components like buttons or links warrant different Viewport snapshots like the hero components need. This is also something where we should have only enough snapshots to replicate the various forms shown in the DS figma file.

[pettinarip]

I like @wackerow list but I'd start with less combinations just to not hit the snapshot limits

For example, I'd consider more important to test the mobile resolutions than the dark mode or tablet res. We could add those later if we have more room.

Agree also on that not all the components need to be tested with all the combinations.

[github-actions]

This issue is stale because it has been open 30 days with no activity.