Design QA Instructions

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 review efforts.
• 4. 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

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:

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

Review Percy snapshots: there should be no unexpected diffs.

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.