Skip to content

Pajamas component: Single stat (simple chart)

Problem

We have a single stat component available in gitlab-ui that isn't available in Pajamas or the Sketch design library.

Solution

  • Add the single stat component to the chart section of Pajamas and to the Sketch design library.

  • The single stat gitlab-ui component should also be updated to include color examples. On the page it does mention that:

The single stat component is a card used to show a single value. The color of the background & text is determined by the variant prop, which can be one of "success", "warning", "error", "info", or "neutral" (default).

We should communicate how this relates to the color guidelines in Pajamas and provide visual examples:

  • Blue indicates a current or active state. It communicates: management, progress, connectivity, or organization.

Relates to "info"

  • Green indicates success. It communicates: save, create, add, available, done, approved, or resolved.

"Success"

  • Orange indicates ‘attention-required.’ It communicates: warning, pending, missing, or impeded progress.

"Warning"

  • Red indicates a problem. It communicates: critical states, destructive actions, errors, fails, removals, or declines.

"Error"

(+ Neutral = grey)

Example(s)

The security dashboard is not using the proper component, as it was built before this component was added to Gitlab-UI, but should be updated to match the component specs as detailed from the output of this issue.

Screen_Shot_2019-12-20_at_5.00.40_PM

This pattern is currently being built for the WAF Statistics Reporting issue as well:

image

Usage

Dos and dont's

✅ Do 🛑 Don’t
Refer to the color guidelines for color use in this component

Related patterns

Links / references

Checklist

Make sure these are completed before closing the issue, with a link to the relevant commit or issue, if applicable. Get familiar with the Sketch UI Kit documentation which has information on updating files, structure, fonts, and symbols.

  1. Author: Create a Sketch file in your progress folder with the changes required for this issue. Try to use existing symbols, layer styles, and text styles.
  2. Author: Ask another Product Designer to review your personal Sketch file, linking them to your latest commit so they know where to find it. If they have the capacity, they should assign themselves to this issue. If not, try pinging another person.
  3. Reviewer: Review and approve author's changes in their personal Sketch file, according to the workflow.
  4. Author: Add your changes to the GitLab Sketch UI Kit (pattern library and/or instance sheet), following this step-by-step process.
  5. Author: Ask the reviewer to review your changes to the Sketch UI Kit files.
  6. Reviewer: Review and approve author's changes to the Sketch UI Kit files, according to the workflow.
  7. Author: Create an issue in the Design System to update the design specs and documentation. Mark it as related to this issue.
  8. Author: Add a read only (FYI) agenda item to the next UX weekly call to inform everyone of these changes, linking to this issue.

/cc @gitlab-com/gitlab-ux