nimble-progress-bar Component

[m-akinc]

😯 Problem to Solve

Need to create a new Nimble component to display progress. This was requested by the following teams but could also be useful in other places

• the Transportation BU (screenshot below; contact Jonathan Meyer or Deborah Bryant for more info)
• the Outlier Detection app (trying to replicate some UIs in O+ desktop Portal; contact Andrew Dove)

💁 Proposed Solution

• FAST component: https://explore.fast.design/components/fast-progress
• Visual Design: not requested yet

Requirements/features

• determinate vs indeterminate
• different fill colors to reflect different statuses

📋 Tasks

• [ ] nimble-progress-bar interaction design issue
• [ ] nimble-progress-bar interaction design spec
• [ ] nimble-progress-bar visual design issue
• [ ] nimble-progress-bar visual design spec
• [ ] nimble-progress-bar spec
• [ ] nimble-progress-bar custom element
• [ ] nimble-progress-bar unit tests
• [ ] nimble-progress-bar Storybook tests
• [ ] nimble-progress-bar Storybook docs
• [ ] nimble-progress-bar Angular wrapper
• [ ] nimble-progress-bar Blazor wrapper
• [ ] Add to Angular example app
• [ ] Add to Blazor example app
• [ ] Update Component Status table in README and incubating status

[jattasNI]

Example use case from a BTS PR that @atmgrifter00 brought to light.

Some commentary:

1. we probably don't want our progress bar to be orange
2. we should discuss whether showing the progress percentage as text is useful or not. If we show it, I don't think it should have as many digits of precision as this gif
3. if it's possible to give generic guidance about showing / hiding / reserving space for the progress bar before the operation has started, that would be nice to do. To me it's weird to show 0% complete for an operation that hasn't even been initiated yet

[jattasNI]

Example use case in an SLE data spaces HLD. They only need indeterminate progress so I've asked for clarification why the existing spinner component is insufficient.