Component health evaluation tracking

Tracking component health evaluations. Updates will be done in https://gitlab.com/jeldergl/component-health and visible at https://jeldergl.gitlab.io/component-health/#/matrix.

The following criteria is the same that's used in the evaluation form steps.

Evaluation criteria

Design

Consider the following design aspects and update the status:

• Does the design cover all states and variants necessary to cover design needs? Note that not all variants or capabilities may be needed or possible considering use and design tool capabilities and may not negatively impact the status.
• Are Figma components configurable and published for use?
• Do the design assets align with code examples? If not, identify which should be updated.
• Are there open issues or Figma branches that impact the status?

Code

Consider the following code aspects and update the status:

• Does the component include all states, variants, and functionality?
• Do controls and props exist to test component options?
• Does the code align with design assets? If not, identify which should be updated.
• Are there open issues or merge requests that impact the status?

Docs

If a component exists, then a documentation page should also exist. Documentation is ready when there are no todos, examples are included, and configuration details are comprehensive.

Accessibility

Accessibility testing will only be done on components that are marked as code ready. When a component has been tested and found passing, choose the 'Tested' status. For components that haven't been tested or there are known issues choose 'Incomplete'. Use the component label along with accessibility labels to track open issues.

---

Note

A checkbox indicates that the evaluation step is 100% complete. It does not indicate anything about the resulting status recorded in the component health matrix. It may require several passes before part of the eval is complete.

Component	Design	Code	Docs	Accessibility	Notes
Accordion	✅	✅	✅	✅	During the eval it was discovered that visual differences exist between design/code and #2864 was created. A new accessibility evaluation was done and the component is passing.
Alert	✅	✅	✅	✅	During the eval it was discovered that visual differences exist between design/code. The Rails implementation needs visual updates for icon color to match design. #2869 was created to address updates. The accessibility epic, gitlab-org&7538, has also been updated.
Avatar	✅	✅	✅	✅	We need to determine if parity is needed in a few places. Do we need group and stack variants in Figma? Should Rails have all the same features and variants as Vue? The accessibility epic, gitlab-org&6953, has also been updated.
Badge	✅	✅	✅	✅	Rails implementation has icons that don't change color with variant. A new accessibility evaluation was done and the component is passing.
Banner	✅	✅	✅	✅
Breadcrumb	✅	✅	✅	✅	A medium size exists in Vue, but because of its limited use case we will not include a medium size variant in Figma. A new accessibility evaluation was done and the component is passing.
Broadcast message	✅	✅	✅	✅	We've intentionally not including the notification variant in design and Rails. I know we've discussed removing this component altogether since it has a different implementation in the product too.
Button	✅	✅	✅	✅	Due to limited use we've intentionally not included a button with badge in Figma. We need to address badges in buttons in dark mode.
Button group	✅	✅	✅		There is a desire to update the design, but nothing is planned at the moment.
Card	✅	✅	✅		Recent design work has been completed to get parity with code, but unsure if code is ready for an accessibility evaluation.
Checkbox	✅	✅	✅	✅
Color picker	✅	✅	✅	—	Consider if this should be removed from the design system and only handled as a component (or components) in the product.
Date picker	✅	✅	✅
Drawer	✅	✅	✅		There are many open proposals for enhancements or features.
Dropdown combobox	✅	✅	✅
Dropdown disclosure	✅	✅	✅
Filter	✅	✅	✅		This exists as both a code component and a design pattern, but it should probably only be a pattern in the design system sense, even if it's a Vue component. Design assets are available as a starter pattern in the Patterns and Page Templates UI kit file.
Infinite scroll	✅	✅	✅	—	Has been set to "Please refrain from using this component - it is deprecated and will be removed." for a long time and should probably finally be removed. Consider an option from the loading patterns instead, https://design.gitlab.com/patterns/loading.
Label	✅	✅	✅		We've leaned towards making this extended instead of core because of the user generated content and the system has limited ability to control certain properties.
Link	✅	✅	✅		Design assets are ready, but a few todos for design docs exist in the component library file. There's a phase two that would address link styles when a component can't be used.
Modal	✅	✅	✅
Pagination	✅	✅	✅		Some style and example work needed to sure this up.
Path	✅	✅	✅		Exploration has been done that may remove the need for this in favor of a progressive pattern.
Popover	✅	✅	✅
Progress bar	✅	✅	✅		In most systems, the progress bar only includes the bar and not visible text or other elements.
Radio button	✅	✅	✅
Search	✅	✅	✅
Select	✅	✅	✅
Skeleton loader	✅	✅	✅
Sorting	✅	✅	✅		Currently documented as a button component, but could be part of a sorting pattern instead.
Spinner	✅	✅	✅
Stepper	✅	✅	✅	—	Similar to the path component, exploration has been done that may remove the need for this in favor of a progressive pattern. There are no official design or code resources
Table	✅	✅	✅		Tables need considerable development work for design parity and accessibility. Design assets could also benefit from updates to make them easier to use and configure.
Tabs	✅	✅	✅
Text input	✅	✅	✅		Documentation and implementation is sparse. The effort in #2871 (closed) should help.
Textarea	✅	✅	✅		Documentation and implementation is sparse. The effort in #2871 (closed) should help.
Toast	✅	✅	✅
Toggle	✅	✅	✅
Token	✅	✅	✅
Tooltip	✅	✅	✅
Tree	✅	✅	✅	—	Consider developing a tree view widget.