Page MenuHomePhabricator

Explore how component changes affect chromatic
Closed, ResolvedPublic

Description

We decided to use chromatic in T254881: Explore visual regression testing but need to teach us how to use it.

Event Timeline

After enabling the UI Review and Visual Tests options on Chromatic, it became clear that they don't work on our composed Storybook, whose main stories are the design system tokens.
After discussing this with UX, we agreed that it's more important to leverage the features Chromatic offers on our vue components and not on our design tokens.

PR #141 moves Cromatic from the docs package to the vue-components package.

What's left of this task is to explore the "UI Review" feature on Chromatic and decide if we like the workflow @Sarai-WMDE

New approach to component stories and Storybook re-structuring

In order to ensure that the highest possible number of component variants and types can be subject to visual regression testing, we opted to remove the knobs and to capture component typologies in independent stories. Under the new approach, it was necessary to restructure Storybook's component pages (see new structure proposa).

New approach to component stories and Storybook re-structuring

In order to ensure that the highest possible number of component variants and types can be subject to visual regression testing, we opted to remove the knobs and to capture component typologies in independent stories. Under the new approach, it was necessary to restructure Storybook's component pages (see new structure proposa).

PR #160