Component: Single Stat [Figma]

Description

• From gitlab-org/gitlab-design#817 (closed)
• We have a single stat component available in gitlab-ui that isn't available in Pajamas.
• Single stat is for displaying a single metric (often multiple single stats will be shown side-by-side

Solution criteria

• Communicating key metric & title
• Communicating supporting info (optional): units, average, trend, deviation, good/bad
• Metric guidance: showing more info/education on metric if unfamiliar
• Modularity: Displaying metric on its own and with others side-by-side
• Accessibility: Using icons + colour to communicate status (as mentioned here by @jeldergl)

Proposal

• View working file in Figma →

Base	Status	Trend	Popover

Base component

• Title text + Value text required
• Title icon + unit optional

Status/Trend indicators

• Additional status and trend indicators can be added to single stat
• Avoid using title icon when using status/trend indicators
• Trend arrows and color should be independent (e.g. arrow down + red, arrow down + green)
• Status icons should only be the icons shown for each color and not interchangeable

Popover

• While hovering over any part of the component - a popover should appear.
• Because of this, we don't need an info icon ℹ️ in the title
• Single stat background should be Gray-50 while hovering

Checklist

Make sure the following are completed before closing the issue:

1. Assignee: Design in your working file. When applicable, follow our [structure][structure], [building][building], and [annotation][annotation] guidelines. If you have any questions, reach out to a [FE/UX Foundations designer][foundations-team].
2. Assignee: Update the link to the working file in the issue description.
3. Assignee: Ask a [FE/UX Foundations designer][foundations-team] to review your design (ensure they have edit permissions in Figma).
4. Reviewer: Review and approve assignee’s design. Specific design questions can be addressed with comments in Figma. Comment in this issue when the content is less specific to the design or requires greater visibility.
5. Reviewer: Assign to a [Figma maintainer][figma-maintainer] for final review (make sure they have edit permissions in Figma).
6. Maintainer: Review and approve assignee’s changes.
7. Maintainer: Add the changes or additions to the target file. For example, you’d copy a final chart design from the working file and paste into the related location in the Data Visualization file.
   1. Ensure that all styles and components now belong to the target file.
   2. For changes to the Component Library file, view the components in the Assets panel to ensure they align with our [asset library structure guidelines][structure].
8. Maintainer: When applicable, [publish][publishing] any library changes along with a clear commit message.
9. Assignee: Move your working file to the shared Figma project:
   1. For Component Library changes, move your file to the [Component archive][component-archive] project.
   2. For all other changes, move your file to the [Misc archive][misc-archive] project.
   3. If you’re a community contributor, we ask that you transfer ownership of your draft file to the maintainer so they can move it to our archive, along with its version history and comments.
10. Assignee (or Maintainer, for community contributions): If it’s a new pattern or a significant change, add an agenda item to the next UX weekly call to inform the team.
11. Assignee: When applicable, create a merge request in this repository with the [component-guideline template][component-guideline-template] to create or update the component’s documentation page.
12. Assignee: When applicable, [create an issue in GitLab UI][new-gitlab-ui-issue] to build or update the component code. Mark the new issue as related to this one.
13. Assignee: 🎉 Congrats, you made it! You can now close this issue.