Definition of done (Visual QA checklist)

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.