Contribution: Tag color variants Orange & Yellow

[AT-public]

Component Name

Tag Orange & Yellow

Reason & Research for this change? 

• The yellow and orange tags are unique variants  in PAL but it's not Health specific so do we want it to be in Carbon?
• They are used as status tags (warnings) across Watson Health Experiences.

Screen Shots

Overview

NOTES: We (WH) have developers that can contribute to this component. 

Contributing Designers & Dev

Andrew Thompson (@AT-public) Liz Judd (@elizabethsjudd)

[AT-public]

@designertyler I wanted to follow up & see what additional information you might need for these contributions to make a determination on whether or not these are contributions that Carbon might accept?

[designertyler]

@AT-public This makes sense. There is only one orange and yellow color in the palate as it was meant to be used for very specific alerts and warnings. Those were left out of the tag colors to avoid confusion if the colored tag wasn't meant as a status.

The mockups come off as just colored tags rather than warning tags and the team had some more feedback on how we could possibly make it more obvious it's an alert. @carbon-design-system/design

[aagonzales]

If these are tags that alert the user to problems that I think they should use the alert/status icons to be consistent. It will as add a second visual cue other than color to what the tag means.

This more closely mimics our notification styles to help drive that visual consistency.

[AT-public]

@aagonzales This is a great suggestion. We will work on making these assets in the next couple of weeks & the contribute back again. I will update this issue when we're done.

[vincentsnagg]

Thanks for input @designertyler and the suggestion @aagonzales — we discussed this more yesterday.

I think the original intent here was flexibility in color, where yellow or orange could be applied to tags if needed (for further differentiation). If there happens to be an implied indeterminate or in-progress state among those tags, yellow or orange might be used as a secondary cue, but it should not be required to have an icon in them because in that case, they would exclusively mean "warning." By that logic the red tags in Carbon would also have an error icon, and I don't think we want that.

Example (with abstracted content) from a product team where an icon would not always work, but where yellow is an appropriate, secondary / non-critical cue:

So basically, we're thinking tags with icons shouldn't replace the yellow and orange variants because the yellow and orange tags won't exclusively mean "warning", in the same way that a red tag doesn't always mean "error". We'd like to contribute those to the core Carbon library for added flexibility in products, but understand if your primary concern is adhering to IDL.

If this still doesn't feel like it makes sense in the core Carbon Sketch, perhaps this a candidate for the Community Components repo outlined in the recent RFC.

Let us know your thoughts!

[aagonzales]

So the problem with adding a yellow and a orange tags is that those colors are not part of the IBM Brand color palette. The way the other tags are created is it uses for example Blue 10 for the tag background then goes up to Blue 60 for the tag text.

There are special orange and yellow colors that are only used for notifications/alerts but they don't have the full spectrum so the tags style can't be mimicked. What you're showing with the tag having a neutral text breaks the tag visual pattern. Adding an orange and yellow tag will require Brand team sign off. What is the severity of you needing a yellow and orange tag vs a notification tag? Can any of the other tag colors be utilized for this purpose?