Need to be able to change the color of the progress bar

[brikiernan]

On the rux-progress we could use a part to be able to change the color of the progress bar

With ::part(progress) we are able to change the progress border color, but there is no part to change the color of the bar

The use case is that based on the value of the progress we need to change the color of the progress. We are using the status color tokens.

Need the inner bar color to match the border color, which is a status color token.

[steveg-rocket]

It appears in this use case that the progress bar is being used as a usage meter. This is a very different use case than what was intended for the component. This seems like a case for a new component. We should potentially do a design review on this use case, and see if we can find a better solution for this application.

[brikiernan]

I offered the use case as some in-site as to why, in our case, we are asking to be able to change the color of the inside of the progress bar. We're not looking for the status colors to be tied to the progress at all, I was just pointing out how we are trying to use it.

To me this issue feels more like a bug-fix than an enhancement. Reason being is there is already a part "progress" which is being provided to devs to be able to style the rux-progress. Wouldn't the intent of this part "progress" be to allow devs to style the entire progress and not just surrounding parts of the actual inside bar?

[steveg-rocket]

So I can see how being able to style one part, but not another part, of the component could be a bug. However, instead of opening it up to be randomly styled, and potentially causing issues with throwing status colors on the component, I'm thinking that maybe we should go the other way. Set it so the outside should not be able to be styled.

While I think having status colors could work, it also has a lot of potential to be confusing or ambiguous. It is probably important to understand that it needs to be clear what the status colors mean in the progress bar. What will make the bar change color? Is it clearly labeled? Does it conflict with any other statuses visible? Will the bar always have these statuses in that application, and in the same order? There are a lot of things to consider.

We also need to make sure people are not using only the color to represent statuses. That goes against our status color guidance, and fails accessibility guidelines. Shape, size, or some other indicator also needs to be used. Opening status colors up to usage on any component can cause too many statuses to be used on a screen, and then the status colors get diluted and ignored.

[micahjones13]

~~I've updated the JIRA ticket associated with this: https://rocketcom.atlassian.net/browse/ASTRO-4784 TL;DR I changed the ticket to be "Remove the progress shadow part".~~

[micahjones13]

We have decided to not take any action on this particular case for the following reasons:

• Our design team has decided that the progress bar of rux-progress should not be able to have it's color changed (see above comments).
• We don't want to remove the progress CSS shadow part, because it can help with things other than color (width, height, display, ect). This may already be in use by other devs as well and would be considered a breaking change.

Thanks for everyone's input on this!