Billing Console moving to Paste

[andoyle]

We are currently in the process of moving Billing Console over to Paste. On the Billing overview screen, we have two important pieces of information to display - Current balance and Auto recharge, that we need to use Text for. Figma link: https://www.figma.com/file/7SPtqqCSdIbI2bAnaTcrYU/2021-Q2-Migrate-React-Components-to-Paste?node-id=250%3A57775

Prototype: https://6jzih.sse.codesandbox.io/
Success state: <Text as="h5" fontWeight="fontWeightMedium" fontSize="fontSize80" marginBottom="space40" color="colorTextSuccess" > +$39.5085 </Text>

Warning state: <Text as="p" fontWeight="fontWeightMedium" fontSize="fontSize80" marginBottom="space40" color="colorTextWarningStrong" > Disabled </Text>

• Are we okay to use Text in this situation?
• Should as="p" or "h5"? It's below a h4 heading.
• Is the color token for warning colorTextWarningStrong or colorTextWarningDark? WarningDark works in Codesandbox, it isn't in the docs but is in Figma, as far as I can see.

Btw, I tried using colorTextWarning but it didn't look right to me in this context. Quick example 👇

[SiTaggart]

Hi @andoyle

Great news on moving billing console over to Paste! Lots of things to cover on this one.

Creating text

Starting with the construction of the text itself, it's perfectly acceptable to use the Text component here, probably your best option. I love the attention to detail on semantics 🙌🏼 ! In this case I wouldn't suggest using a heading at all, a span would be fine. But if you really wanted to go above and beyond, a description list would be best as it's a key value pair.

<dl>
  <dt>Current balance</dt>
  <dd>+$2000</dd>
<dl>

You can achieve that as you might imagine with Box and/or Text

<Box as="dl">
  <Text as="dt">Current balance</Text>
  <Text as="dd">+$2000</Text>
<Box>

Tokens

For the tokens, you're a bit a head of the game and beating us to our announcement, which admittedly I've dropped the ball on.

We have recently switched from a dark/light nomenclature for tokens to strong/weak. This is allows us to better things in light and dark modes which aren't necessarily direct opposites.

We've deprecated the old tokens in code with a view to remove them in November-ish time. We've hidden them from the site as we don't want you using them, but we've not updated the Figma library with the new tokens names yet. We got a little thin on Design capacity recently, sorry about that.

So, colorTextWarningStrong is the "correct" one, and both will work in codesandbox for the time being but dark will be removed soon ™️ .

Color usage

Having said all that, there are some problems with using colorized text.

Color contrast

Both the warning and success text color tokens do not pass the color contrast requirements for text. The status text color tokens are really only intended for use in icons. We do list out the contrast ratios on certain backgrounds as best we can to inform you of that information https://paste.twilio.design/tokens#text-colors but the naming could be more explicit.

Communicating meaning with color alone

Now to the main part. On the whole we try to communicate status with the use of text, iconography and color together. Taking the balance as the first example, difference between a good and bad balance potentially is subjective when you remove the color. To use your mocks (I'm guess the mock data is inaccurate but you'll get my point) I don't know why $39 is better than $2000.

I think an improvement you could make here is to pair the balance with a status icon, which takes the color, and leave the the numbers in the base text color.

The second example is a little more blurry. Recharge status being enable or disabled is at least more clear because it's not necessarily subjective. The color is supplementary to the meaning of the word. So you could get away with green or red text from a technical perspective, but that wouldn't solve the problem that the success text color doesn't pass color contrast requirements. So again, I think pairing with an icon might be the best solution here too.

[andoyle]

Hey Simon, okay thanks for that!

Totally missed the Fail status in the docs and just assumed color contrast was catered for. My bad. Although, slightly confusing that it should only be intended for icons - especially when I'd mostly be picking it from Codesandbox list or selecting it in Figma, rather than looking it up in the docs.

Hmmm, I'll need to rethink this one so and speak with the team. There were some legacy design decisions that went into choosing color for the +/- balance.

Here's a proper example of the warning status for balance:

[SiTaggart]

Yup, for sure. We have a ticket to rethink the status text color tokens because it is confusing and doesn't "just work" in the way we'd like.

With regards to status coloured text, I'll circle with the team real quick. I know it's not something we favour as a pattern, but in terms of accessibility if:

1. You only have a need to communicate positive or negative balances, that is probably enough to make the colour requirement redundant. i.e. colour is supplementary and could be removed to convey the same meaning.
2. You only have enable and disabled, same thing applies. Colour is supplementary and could be removed to convey the same meaning.

[andoyle]

Good stuff 😃

I spoke with the team and have more context on the colour decision. I think I can solve this now without using colour text but with improved copy.

Thanks for your help 👍

[SiTaggart]

OK, that's good to know.

Further to my previous thoughts we got some Design feedback too. Generally speaking it's not too dissimilar to my initial thoughts.

On showing negative balance in red, probably fine but would benefit from the icon to make it very explicit.

On showing positive balance in green, you'll likely want to use an icon even if we had a "dark enough" version of green. When it's dark enough to pass color contrast it loses it's vibrancy and basically looks almost like normal text.

The icons is a much more vibrant and visually interesting, and clear alternative.

With regards to the recharge status we're actually leaning in even harder to the use of icons. In hindsight, and I tend to agree now, using enabled and disabled isn't necessarily super explicit in and of itself to say either one or the other is "good" or "bad". But coupling with an icon would completely remove this ambiguity from the UI.

I think this is something that @katieporter whipped up for us to show it off.

https://www.figma.com/file/7W2zktlZJ0pGcv7U0wx9dB/Billing?node-id=0%3A1