Polaris-react: [Color system] orange

[danrosenthal]

Context

• Orange is used for the Badge component's warning variant
• Orange is also used to generate Avatar and Icon variants

Usage

• Lighter #FCEBDB - 0
• Light #FFC58B - 1
• Orange #F49342 - 2
• Dark #C05717 - 2
• Darker #4A1504 - 0
• Text #594430 - 1

Recommendations

• eliminate warning as a variant of the Badge component
• eliminate all orange variants of the Icon and Avatar components
• remove orange from the system

[danrosenthal]

Components

|badge|icon|
|-|-|
|||

[ry5n]

I’m finding it hard to draw the line from the context given here, to the recommendation to remove orange from the system.

Removing orange and warning badges would have a significant impact on the merchant experience in some important places, like the orders list page:

[danrosenthal]

Sorry about that, should have given more context. The context here is that it is minimally used in the system, basically just on this badge. I want us to challenge the assumption that we need orange.

Given your example, I think we could push against the validity of how important orange badges are to this particular merchant experience. If yellow badges are used for attention, couldn't the pending badge use yellow? Why does the merchant need to be warned that the payment is pending?

For the Partially fulfilled badge, why is an attention badge with a partially filled pip and the different content not enough?

[ry5n]

It’s great to challenge the need for things like this!

@erapago what do you think about the impact to merchants on the order list page, if Polaris removed orange from the badge statuses?

[erapago]

Honestly given that the chargeback badges are yellow, and arguably much more critical information than a partial fulfillment (much closer to actually being a warning), I don't see this is as a big issue to switch this at all.

May want to check with @mherlihey next week though, we're looking at more fulfillment statuses.

[erapago]

Maybe chargebacks _should_ be orange though. That's pretty critical information.

Would we get a critical badge as a trade-off?

[danrosenthal]

Would we get a critical badge as a trade-off?

I think so

[mherlihey]

Agreed that the use of orange isn't particularly useful on the index. The Partially fulfilled and Pending states should be yellow. Yellow represents work to do and is represented the way on the order show page. You can see here the orange is out of place.

That being said, other than chargebacks there is also Expiring that I can see the case made for the orange badge.

[AdamWhitcroft]

I like the idea of a simpler palette for our actions, but using the third colour as an addendum or modifier to special cases (Authorized in yellow, with a secondary Expiring in orange is real nice).

If we set all base payment and fulfillment badges to use either yellow or grey, I think we should probably make Partially paid yellow too.

[erapago]

Maybe we can think about which badges are alerts, which are critical, and think about removing the red strikethrough for canceled orders.

I would be very curious to hear some thoughts about why we would need three classifications of "warnings" though. Is it because we discourage the use of red/critical?

[danrosenthal]

From what I'm hearing, orange warning badges are, at best, not particularly useful. At their worst, orange badges appear to be confusing and inconsistent in their application. Warning badges could either be replaced by a less severe variation of badge that is currently available, or a more severe (unavailable) critical badge. The cases of expiring and chargeback make particular sense as critical badges, since they need to have action taken on them immediately.

As a next step, I would like to open a pull request that deprecates the warning badge (with the intention of removing it in the next major Polaris release), and introduces a critical badge. So far I have not seen any opposition to a critical badge. It's also present in the rails implementation of Polaris, so I'm not convinced its omission wasn't an oversight on our part.

@mherlihey, @AdamWhitcroft, @erapago, @ry5n any objection to that as a plan?

[danrosenthal]

Closed in favor of https://github.com/Shopify/polaris-react/issues/1593