[CircularProgress] Add track slot to be customizable

[siriwatknp]

Summary

Add an empty track slot to the CircularProgress component like LinearProgress so that it can be styled without hacking.

Having a subtle track enhance the visibility and aesthetic of the UI.

Above is the current usage of CIrcularProgress in a dashboard metrics interface.

Examples

To achieve the above design, need to hack with 2 CircularProgress overlap each other.

Motivation

No response

Search keywords: circular progress track

[monam2]

I checked that this issue has the label "upboat waiting" and asignee has been set.
Can I proceed with this work? If there is no problem, please reply.

[siriwatknp]

I checked that this issue has the label "upboat waiting" and asignee has been set. Can I proceed with this work? If there is no problem, please reply.

Please proceed, here is what I think about the API.

• add enableTrackSlot prop to the CircularProgress
• render another<circle> slot above the CircularProgressCircle (the size and thickness should affect the new slot too)
• set the track background color to be subtle by default

Lastly, create a demo.

[monam2]

I’ve implemented this in PR #46907. Please take a look and share your feedback.