Definition of done (Visual QA checklist) - carbon-design-system/carbon-for-ibm-dotcom GitHub Wiki

Component visual QA should be done to cover the following aspects:

1. Check for grid usage on all breakpoints

  • Beyond max
  • max
  • xlg
  • lg
  • md
  • sm

2. Interactive states using correct styling

  • Default
  • Hover
  • Active
  • Focus
  • Keyboard navigation
  • Other non-universal states such as selected in Table of content

3. Content edge cases

  • Minimal content
  • Maximum content
  • Text line wrap
  • With & without optional content

4. Themeing

  • White theme
  • Gray 10 theme
  • Gray 90 theme
  • Gray 100 theme

5. Storybook

  • On grid
  • Names of component and variation demoed is spelled correctly
  • Knobs are as expected and functional
  • Default example demos usage intent

6. Code

  • Color: No hardcoded color value unless explicitly requested by design
  • Typography: No hardcoded type styles unless explicitly requested by design
  • Pass all checks (except Percy when style changes are expected)
  • If PR addresses styling change, run a Percy test locally to catch obvious regressions.