Skip to content
Snippets Groups Projects

Update project CI badges to be Pajamas compliant

    • Closed Issue created by Gina Doyle @gdoyle

    Release notes

    Our project overview pages include badges that provide a summary of various CI aspects, such as code coverage, most recent pipeline status, or last release. These badges are not up-to-date with Pajamas standards and are not always clear. They are also not accessible at the moment because of the color contrast. We are updating these to Pajamas badges and adding more helpful information to make them consistent with the ways we present that information elsewhere in the UI.

    Problem to solve

    Our project overview pages include badges that provide a summary of various CI aspects, such as code coverage, most recent pipeline status, or last release. These badges are not up-to-date with Pajamas standards and are not always clear. They are also not accessible at the moment because of the color contrast.

    Screen_Shot_2022-03-08_at_5.09.12_PM

    We use the following hex values to represent different test coverage percentage intervals (see documentation). Users can configure these if they'd like:

    STATUS_COLOR = {
          good: '#4c1',
          acceptable: '#a3c51c',
          medium: '#dfb317',
          low: '#e05d44',
          unknown: '#9f9f9f'

    And for pipeline statuses:

    STATUS_COLOR = {
          success: '#4c1',
          failed: '#e05d44',
          running: '#dfb317',
          pending: '#dfb317',
          preparing: '#a7a7a7',
          canceled: '#9f9f9f',
          skipped: '#9f9f9f',
          unknown: '#9f9f9f'

    And release status:

    STATUS_COLOR = {
          latest: '#3076af',
          none: '#e05d44'

    None of these pass WCAG AA accessibility for color contrast as a background color with #FFFFFF as the foreground color.

    Intended users

    All personas can see and access these. The following personas will most likely interact with them more often than others:

    User experience goal

    Migrating old components over to Pajamas and improving accessibility and consistency.

    Proposal

    :art: Designs: Design management screens 1-4

    :paintbrush: Figma file: https://www.figma.com/file/RAA4AmQIY4aHhP8NvunbBj/Testing---Project-Quality-Summary?node-id=325%3A13687

    Further details

    Permissions and Security

    Documentation

    Availability & Testing

    Available Tier

    Feature Usage Metrics

    What does success look like, and how can we measure that?

    What is the type of buyer?

    Is this a cross-stage feature?

    Links / references

    This page may contain information related to upcoming products, features and functionality. It is important to note that the information presented is for informational purposes only, so please do not rely on the information for purchasing or planning purposes. Just like with all projects, the items mentioned on the page are subject to change or delay, and the development, release, and timing of any products, features, or functionality remain at the sole discretion of GitLab Inc.

    Edited by Gina Doyle

    Designs

      Child items ...

      2. Activity

      Please register or sign in to reply