Frontend: Refine the the mini pipeline graph button states and add a stage name to the dropdown panel
Release notes
Problem to solve
- Currently it's not possible to tell which pipeline stage the dropdown relates to in the mini pipeline graph. It makes it difficult to navigate between the stages and jobs in the graph.
- Some states for the buttons are missing.
 |
Proposal
- Add a distinct state to the pipeline icon button in the graph for when the dropdown is open, so you can see which stage is currently "active"
- Add the missing focus state as described in this comment
- Add a stage name to the dropdown panel header
Other minor tweak:
- alignment is broken in Firefox and on wrap
Out of scope: We will also add a tip to the dropdown panel pointing to the stage that it relates to in a separate gitlab-ui component update.
👉 Design specs in Figma
| Hover state (increased border + fill + dropshadow) | "Active" state when the dropdown panel is open + the stage name header (only increased border) |
|---|---|
 |
 |
Intended users
Feature Usage Metrics
N/A
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 Briley Sandlin