Skip to content

Design QA Instructions

Jump to bottom
Shixie edited this page Jun 9, 2021 · 33 revisions

Summary

  • 1. Review PR's changes against Definition of done in Storybook preview links
  • 2. Review Percy results, see how below
  • 3. Comment on PR with any requests for changes. Repeat above until no changes are needed
  • 4. Approve both PR & Percy checks
  • 5. Remove Needs design review label

Detailed instructions

1. Review Storybook preview links

Definition of done (DOD) is what both designers and developers should reference when creating and reviewing the PR. Sharing the same standard will reduce time spent on QA. If you notice any gaps in the current DOD, please reach out!

DDS storybook's preview links are automatically generated once the PR is submitted. This usually takes 10-20min to build. Look for the preview links in ibmdotcom-bot comments:

Storybook preview

Keep in mind there might be multiple storybooks to review. In general,

  • a style package change affects both Web components and React storybooks, so both should be reviewed.
  • a new component build in Web components should be reviewed in React wrapper storybook, and not React storybook.
  • an experimental component change will require the Feature flag label to generate the Experimental components storybook preview link.
  • a RTL (Right to Left language) change will require RTL label to generate the RTL components storybook preview link

2. Review Percy results

Percy checks fail whenever the PR contains a visual change compared to the current production build. This prompts the designer to look into the Percy results to see if this visual change is intentional, or not. This check helps us to catch unintended visual regression that sometimes happen due to our complex tree of dependencies.

To open Percy results:

GitHub checks

After clicking "Details", you should see the Percy results page, which looks like below. Any visual differences from Production will be highlighted red.

Percy results

3. Comment to request changes

Points to keep in mind:

  • Be conscientious to the PR's specific goal. If you notice a new issue unrelated (and not triggered by) the current issue, create a new issue.
Clone this wiki locally