feat: add display remaining feat for ProgressBar

[subirjolly]

Closes #

Changes

Added displayRemaining boolean flag which allows you to view remaining value instead of used value.
Also add prefix and suffix to value/max labels.

Screenshots

If displayRemaining boolean value is passed as true then following is the affect on the ProgressBar. Also added prefix and suffix to value/max labels.

BEFORE

AFTER

Checklist

Check all that apply

• Updated documentation to reflect changes
• Added entry to top of Changelog with link to PR (not issue)
• Tests pass
• Peer reviewed and approved
• Signed CLA (if not already signed)

[daviddkkim]

@subirjolly in the screenshot, is the reason why the progress bar doesn't fill up the height of the container because of CSS you passed in on the uI repo or is it like that in clockface?

if the former, it might make sense to create different sizing for the progressbar in clockface.

Also, I'm not sure if this pattern will work smoothly. There should be some indication that one is talking about remaining and the other is talking about used. Two UI that communicate different things look entirely the same

for example, When communicating "9" is remaining, does it matter that the total was 30? or does it only really matter that you have 9 remaining? So maybe we could make it 9 Remaining rather than 9/30 ?

[subirjolly]

@subirjolly in the screenshot, is the reason why the progress bar doesn't fill up the height of the container because of CSS you passed in on the uI repo or is it like that in clockface?

It doesn't seem to be because of my CSS as I have disabled my CSS for this component all together.

if the former, it might make sense to create different sizing for the progressbar in clockface.

Also, I'm not sure if this pattern will work smoothly. There should be some indication that one is talking about remaining and the other is talking about used. Two UI that communicate different things look entirely the same

Makes sense and I am about to add additional label for the values.

for example, When communicating "9" is remaining, does it matter that the total was 30? or does it only really matter that you have 9 remaining? So maybe we could make it 9 Remaining rather than 9/30 ?

I don't think this should matter, for this change. According to the mockups I am working with, we do need the latter part as well.

[daviddkkim]

Subir and I chat about what he could do.
Value text and max text

approving in advance since i will be offline

[daviddkkim]

lgtm