[Feature Request]: StatusIndicator - Support yellow colorOverride prop

[ckifer]

Description

Support yellow colorOverride prop in StatusIndicator component.

Currently the warning status indicator has a yellow color, but you cannot use colorOverride to change a different icon to color yellow.

This would allow the color yellow for any status indicator icon i.e.

Current colors here do not list/allow yellow: https://github.com/cloudscape-design/components/blob/main/src/status-indicator/internal.tsx#L72

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate requests

[rubencarvalho]

Hello Coltin,

Thank you for your feature request to add a yellow colorOverride option for the StatusIndicator component.

Our current design allows for overrides of specific colors to maintain consistency across different states:

• Red: Error, warning, negative, and failure states
• Green: Success, positive, and completed states
• Blue: Information, tips, recommendations, and improvements
• Grey: Stopped, inactive, pending, in progress, loading, idle, and unchanged states

Could you please elaborate on your specific use-case that necessitates a yellow color override? Knowing more about it will help us better understand the requirement and evaluate the feasibility of adding this feature.

Thank you!

[ckifer]

Use case is pretty simple, I have need of using a yellow color with a different icon than (!) due to (!) drawing more attention to the area than my users want. Pending icon is more appropriate in this case because it's waiting for something anyways (but gray is too easy to miss).

Regardless of case, yellow is now the color for the warning status rather than red in CloudScape. It is Alert/Flashbar/StatusIndicator components so it makes sense you should be able to override to any of the colors you can get to with a normal variant. I.e. if I can override to red why can't I override to yellow.

Looking at the code, effort seems minimal. Should just be adding another option and pointing at the existing warning color design token.

Thanks

[jperals]

Hi, the yellow value for colorOverride prop has been added in #1682, as there is no good reason for this color not to be available for this property along with the others. However note that for consistency we recommend to use the status indicator "Pending" status as is, without color override. The color associated to a pending status is grey and not yellow, and a pending status is not a warning and should not be treated as such.

[ckifer]

Noted, thank you for getting it in!