Component QA
Component QA is used whenever someone wants to merge a new component to the system. The steps below are from Nathan Curtis’ Component QA article and work more as a guideline. You may want to edit these to fit your own organization’s goals.
Does the component apply visual style — color, typography, icons, space, borders, and more — using appropriate variables, and does it meet our visual guidelines?
Does it cover all the necessary variations (primary, secondary, flat, menu button) and states (default, hover, active, disabled), given intended scope?
Does it incorporate responsive display patterns and behaviors as needed?
Is each dynamic word or image element resilient to too much, too little, and no content at all, respectively? For tabs, how long can labels be, and what happens when you run out of space?
Does it fit well when placed next to or layered with other components to form a larger composition? For tabs, how can they be applied stacked with or on top of other components?
Do all behaviors – typically, JavaScript-driven – function as expected? For responsive tabs, are gestures (for sliding left and right) and menus (for overflow tabs) behaving correctly in varied device settings?
Has the design and implementation accounted for accessible?
Has the component visual quality and accuracy been assessed across Safari, Chrome, Firefox, IE and other browsers across relevant devices?
- Getting Started: How to install and run Vue Design System.
- Terminology: Introduction to the system concepts and its hierarchy.
- Naming of Things: Naming is hard, so it’s good to have clear guidelines.
- Directory Structure: What goes where and why.
-
Working with the System: Concrete examples on how to work with
Tokens,Elements,PatternsandTemplates. - Editing Living Documentation: How to customize the living system documentation.
- Spacing: A framework for creating a predictable and harmonious spacing.
- Component Status: Clear labels that reflect the state of completion.
- Component QA: How to review new components and keep the quality high.
- Contributing: A set of guidelines for contributing to the system.
- Code of Conduct: By participating you agree to abide by its terms.
- Frequently Asked Questions: How to use icons, how to use font-face, etc.
- Changelog: See releases pafge for the full changelog.