Skip to content

Design QA Instructions

Jump to bottom
Shixie edited this page Jun 8, 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. Once starting review, please assign yourself in the PR. This way we avoid duplicating efforts.
  • 3. Comment on PR with any requests for changes. Repeat above until no changes are needed
  • 5. Approve both PR & Percy checks
  • 6. Remove Needs design review label

1. Review Storybook preview links

Definition of done is what both designers and developers should reference when creating the PR reviewing. Sharing the same standard will reduce the amount of 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. Look for the preview links in ibmdotcom-bot comments:

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

  • a style package change affects both Web components and React storybooks.
  • 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

GitHub checks

  • Review Percy snapshots: there should be no unexpected diffs

3. Comment to request changes

  • 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