Components: Expand ProgressBar functionality and visual customization

[keoshi]

Problem Statement

The current ProgressBar component is quite limited, with no clear sizing or styling options.

As it stands, the bar itself is nearly invisible in certain contexts, making it unsuitable for cases where it needs to stand out. There is also a lack of flexibility for potential use cases other than being used for real-time updates, such as displaying scores or object meters.

Goals

• Explore adding more customization options for size, type, and styling of the ProgressBar, either through props or other means.
• Consider whether the ProgressBar should remain a single component or be expanded to include labels and indicators for more complex use cases.
• Discuss the potential use of the component in scenarios beyond simple progress indication, such as denoting a score or other type of permanent status.

Designs

Linear

→ Link to Figma

Circular

→ Link to Figma

Feedback

1. Should size, type, and styling be customizable through props, or is CSS sufficient for these changes?
2. Would wrapping progress bar, labels, and indicators into a new component be a better approach for more complex needs?
3. How do we ensure this component remains simple while still offering flexibility for advanced use cases?

Would love to hear your thoughts @mirka @ciampo @tyxla.

[mirka]

1. Should size, type, and styling be customizable through props, or is CSS sufficient for these changes?

We don't have an official system yet, but from past explorations like the Theme component or the theme package, it's likely that we'll eventually adopt a system based on CSS variables.

2. Would wrapping progress bar, labels, and indicators into a new component be a better approach for more complex needs?

The suggested patterns look reasonable, but since we don't have actual use cases in the Gutenberg app yet, I don't think we can officially codify them as part of the component yet.

[simison]

A practical example of circular progress indicator that I'd find helpful right away: