Extended/Advanced Pipeline/build status icons/badges
This is a continuation from a discussion that started in https://gitlab.com/gitlab-org/gitlab-ce/issues/25139 and which deserves its own issue to better handle it. A lot of exploration has already happened and it started around https://gitlab.com/gitlab-org/gitlab-ce/issues/25139#note_20890756
Problem
- Currently it is quite difficult to see what the CI status is without paying too much attention to details.
- Currently we use just the exclamation mark icon to refer to both: "passed with warnings" and "failed, but allowed to fail". These 2 advanced statuses have a different emotional and effectual effect and should have their unique visuals to represent them.
Solution
We will incorporate advanced statuses as advanced status icons, so they can even be recognised if just the icon is present, like so:
contents:
- primary status icon
- secondary status shape (circle,triangle and possibly a square)
- secondary status icon (exclamation mark, check, etc.. should try to resemble one of the primary statusses)
This extends to full status badges as well:
Lastly, we should introduce tootlips to even better convey and teach the recognising of these statuses. This will help users eventually not needing the tooltip at all and they will just be able to scour the page status icons in order to know their status of either the pipeline, pipeline stage or individual build status.
Implementation
@grzesiek / @ayufan told me the BE should already be able to do this in quite an easy way
Final design
coming soon..
cc: @grzesiek @filipa @markpundsack @joshlambert @awhildy @tauriedavis @ayufan