[EuiProgressBar] Gradient variant
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 15h
- Merged PRs (30d)
- 69
Description
**Requestor**
@gvnmagni @awahab07
**Problem Statement**
Tl;dr; Currently, the progress bar indicator is not rounded and we cannot pass a gradient value.
Lens is introducing the ability to display progress bars next to values with a value-based coloring function (conditional formatting). One of the required coloring options is a gradient that:
- can have any number of steps and colors (driven by data and customer settings; we have no control over the configuration, so the API needs to be flexible),
- should be revealed within the filled portion of the bar as the value grows, rather than always rendering the full gradient stretched to the bar's full width and clipped by the value:
| Undesired | Desired |
|-|-|
| | |
There is also a separate, related ask to update the bar style to be fully rounded, aligned with the recent badge updates, applied globally rather than as a one-off for Lens.
**Proposed Solution**
Two directions discussed:
1. Accept a gradient string with the existing `color` prop (see experimental PR https://github.com/elastic/eui/pull/9631). Simple and non-breaking but potentially too flexible (arbitrary directions/degrees we may not want to support).
2. Add a new `palette` prop (matching the API used in `EuiColorPalettePicker`) so consumers pass colors and the gradient is constructed internally. Stricter, consistent with existing EUI patterns, also non-breaking.
Option 2 is likely preferable for API consistency. Whichever direction is chosen, the gradient behavior must match the "revealed in available space" pattern (see ☝🏻), not the "fill and clip" pattern.
Globally rounding the bar fill should be handled as part of the same effort.
Note: the semantic question of `` vs `` came up (a future `EuiMeter` was floated). Consensus for now is to extend `EuiProgress` rather than introduce a new component.
**Use Case**
- https://github.com/elastic/kibana/issues/250708
**Value / Impact**
- Value to end users (Kibana feature requirement) and library consumers.
- More visual consistency with recent rounded badges.
- Useful beyond Lens. Potentially for all progress bar usages.
- Opt-in. No breaking changes.
**Urgency**
Preferably before end of May.
**Do alternatives or workarounds exist?**
A plain CSS override cannot achieve the required gradient behavior. The alternative is for Kibana to fork/customize the progress bar locally for Lens Tables which we'd like to avoid given the pattern is likely reusable.
**Related code or customizations**
- Experimental EUI PR (gradient using `color` string): https://github.com/elastic/eui/pull/9631
- Kibana tracking issue: https://github.com/elastic/kibana/issues/250708
- @mgadewoll has a stashed PoC from earlier exploration that demonstrates the desired "revealed gradient" behavior and can be revisited for implementation.
**Additional context (Optional)**
- **High contrast mode** (especially Windows high contrast themes, which strictly override background colors) needs to be evaluated as part of the implementation. Flagged by Lene but not yet investigated in depth.
- **Indeterminate progress state** should be checked separately; gradients there may need specific specs. To be defined with design.
- There is a reported size misalignment between Figma and EUI docs for `EuiProgress` (XL size in particular). Worth confirming during this work.
**Designs or Specs (Optional)**
WIP (@JoseLuisGJ)
Contributor guide
Assessment
This issue has not been assessed yet.