Background
We need to introduce a static version of the ProgressBar component in Codex to support use cases where the progress represents measurable completion - rather than a system process or loading state. This variant would allow designers and developers to display goal progression consistently across products, using the same Codex component structure while maintaining a style that communicates growth/progress/completion/achievement.
Description
The determinate ProgressBar shows that an operation is in progress when the amount of progress can’t be measured (for example, loading or processing with an unknown duration).
User stories
As a designer, I want the progress bar component to support a static, goal-oriented variant, so I can visually communicate progress toward completion rather than system activity.
As a developer, I want a single progress bar component that can handle both indeterminate (loading) and determinate (goal-based) states, so I can reuse the same component with different variants across multiple contexts.
Design specifications
- bar has a height of 12px (size-75 token)
- bar container uses border-color-progressive and a fill background-color-base
- progress element uses a fill background-color-progressive
- both bar container and progress element use a corner radius of 2px (border-radius-base)
- labels use 14px font size and color-subtle
- labels show at 4px from progress bar
- this variant allows for labels at both sides of the progress bar - codex user can choose whether they want to have only left-side label, only right-side label, or both.
Design
Codex implementation
Some notes from Slack thread (see full thread here).
Recommendation would be to add a new optional prop called progress or percentCompleted that takes a numerical value. Maybe the cleanest way to do it would be to accept a float value from 0 to 1, but you could also represent things as 2-digit integers (or any way you want to do it really)
I think that reasonable behavior for the component would be: if the progress prop is not supplied, show the indeterminate loading bar. If the prop is supplied, show the bar filled up by that amount instead
Since this is a Vue component, it would be easy for the bar to dynamically animate as the progress value increments
Final thing – in some ways the trickiest part will be whether you also want to support a CSS-only version of this component variant. I think you could probably write some clever CSS using some kind of [data-progress] attribute that directly informs the styles in terms of how much of the bar to fill up. But this would take a little bit of research to figure out. For implementation I would probably suggest figuring out the CSS-only way to do this first (assuming we want to support that use-case) and then work backwards to make the Vue version easy to use but compatible with the CSS-only approach.
Component task owners
- Designer: @JFernandez-WMF
- Developer: add the main developer's name
