palantir/blueprint

[Feature request] [Progress] Multiple stacked progress bars

Open

#3,469 opened on Apr 9, 2019

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (20,263 stars) (2,167 forks)batch import
P3Package: coreType: feature requesthelp wanted

Description

Environment

  • Package version(s): ^3.12.0
  • Browser and OS versions: Chrome 73.0.3683.86 on Windows 10

Feature request

Allow multiple progress meters with different intents within one bar

Examples

Bootstrap's progress bars support it: https://getbootstrap.com/docs/4.3/components/progress/#multiple-bars

image

Contributor guide

Tech stack
reacttypescripthtmlcss
Domain
frontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
React knowledgeBlueprint component APICSS styling
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
60
Research direction
Examine the existing ProgressBar component in Blueprint (likely in src/components/progress bar/progressBar.tsx) to understand its API and rendering. Review the linked Bootstrap documentation for stacking multiple bars. Consider designing a new prop (e.g., 'stripedBars' or 'bars') that accepts an array of value/color objects. Modify the component to render multiple inner bars, updating styles accordingly. No linked PRs or maintainer comments exist, so scope is open.