[ExceptionList] Change warning status items from orange to yellow

[chloerice]

WHY are these changes introduced?

Fixes #804

WHAT is this pull request doing?

Updates the font, icon, and bullet colors of warning status ExceptionList items from dark orange to dark yellow.

Before	After

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Copy-paste this code in playground/Playground.tsx:

import * as React from 'react';
import {
  Page,
  ResourceList,
  Card,
  ExceptionList,
  TextStyle,
} from '@shopify/polaris';

interface State {
  selectedItems: any[];
}

export default class Playground extends React.Component<{}, State> {
  state: State = {
    selectedItems: [],
  };

  handleSelectionChange = (selectedItems: any[]) => {
    this.setState({selectedItems});
  };

  renderItem = (item, id) => {
    const {orderId, address} = item;
    const exceptions =
      id === 256
        ? [
            {
              status: 'critical',
              icon: 'risk',
              title: 'High fraud risk',
            },
            {
              status: 'warning',
              icon: 'alert',
              title: 'No available inventory',
              description: '-2 in stock',
            },
            {
              icon: 'notes',
              title: 'This customer is awesome',
            },
          ]
        : [];
    return (
      <ResourceList.Item
        id={id}
        accessibilityLabel={`View details for ${name}`}
      >
        <h3>
          <TextStyle variation="strong">{orderId}</TextStyle>
        </h3>
        <div>{address}</div>
        <div style={{marginLeft: '-4px', marginTop: '4px'}}>
          <ExceptionList items={exceptions} />
        </div>
      </ResourceList.Item>
    );
  };

  render() {
    const resourceName = {
      singular: 'order',
      plural: 'orders',
    };

    const items = [
      {
        id: 341,
        orderId: '120341',
        address: 'Decatur, USA',
      },
      {
        id: 256,
        orderId: '120256',
        name: 'Ellen Ochoa',
        address: 'Los Angeles, USA',
      },
    ];

    const promotedBulkActions = [
      {
        content: 'Edit orders',
        onAction: () => console.log('Todo: implement bulk edit'),
      },
    ];

    const bulkActions = [
      {
        content: 'Add tags',
        onAction: () => console.log('Todo: implement bulk add tags'),
      },
      {
        content: 'Remove tags',
        onAction: () => console.log('Todo: implement bulk remove tags'),
      },
      {
        content: 'Archive orders',
        onAction: () => console.log('Todo: implement bulk archive'),
      },
    ];

    return (
      <Page
        title="Orders"
        primaryAction={{content: 'View Examples', url: '/examples'}}
      >
        <Card>
          <ResourceList
            resourceName={resourceName}
            items={items}
            renderItem={this.renderItem}
            selectedItems={this.state.selectedItems}
            onSelectionChange={this.handleSelectionChange}
            promotedBulkActions={promotedBulkActions}
            bulkActions={bulkActions}
          />
        </Card>
      </Page>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers

[dpersing]

It looks like in the original issue, the comparison was for a white background. Here, against the light gray background, the yellow technically doesn't pass (it's 4.12:1) for normal sized text (which I should have caught since that's what's used in the actual example in the style guide, doh).

Unfortunately the next darkest shade up in both the yellow and orange families (Darker) just kind of looks brown next to the red example, which doesn't really convey the orange-y warning-ness.

Thoughts, @sarahill?

[chloerice]

It looks like in the original issue, the comparison was for a white background. Here, against the light gray background, the yellow technically doesn't pass (it's 4.12:1) for normal sized text (which I should have caught since that's what's used in the actual example in the style guide, doh).

Oy 😣 I've updated the playground code to be more realistic to make it easier to see the various states/conditions the exception list component can be in. It's typically used inside of a ResourceList.Item or inside of a critical Banner (listing multiple form validation errors at the top of a detail page). The hover, selected, and focus states of ResourceList.Item likely give even worse contrast results than the gray background. @dpersing is that a Chrome extension you're using to inspect the contrast ratio?

[sarahill]

Ok, I messed around with this a bit. I tried using the darker yellows and yellow text but those get muddy and really dark. Reducing the brightness of yellow dark looks the best and passes contrast standards. Thoughts?

And thanks for catching this!

[dpersing]

is that a Chrome extension you're using to inspect the contrast ratio?

@chloerice It's built into Chrome now (was in Canary for a long time)! If you click on a text color swatch in the CSS window it does its best to calculate the contrast based on what the background color appears to be.

[dpersing]

Reducing the brightness of yellow dark looks the best and passes contrast standards.

@sarahill That works for me. Would it be possible to update the hex in the UI kit and style guide to match #8A6166?

[sarahill]

@dpersing I was wondering if we should just update the hex value for yellow dark. It will affect icons and some text in the UI but I don't think it will be a glaringly obvious change that will impact negatively.

@chloerice can you update the value in polaris-react? I'll create issues for the UI Kit, Style guide and Polaris Tokens.

[chloerice]

@chloerice It's built into Chrome now (was in Canary for a long time)! If you click on a text color swatch in the CSS window it does its best to calculate the contrast based on what the background color appears to be.

Ahhh okay! (I was looking for it in the "Accessibility" section of the dev tools.)

[chloerice]

@chloerice can you update the value in polaris-react? I'll create issues for the UI Kit, Style guide and Polaris Tokens.

@sarahill On it!!

[chloerice]

@sarahill Actually it looks like the only change needed to update the color across the board (polaris-react, polaris-rails, and polaris-styleguide) is the update you're working on in polaris-tokens 👊

[sarahill]

@chloerice Ah that makes sense! I'm on it 👊

[sarahill]

Ok, the update to color-yellow-dark has been merged in polaris-tokens Shopify/polaris-tokens#44

[chloerice]

Ok, the update to color-yellow-dark has been merged in polaris-tokens Shopify/polaris-tokens#44

Awesome!! 👏 @dpersing @sarahill I've added an upgrade to the new release of polaris-tokens to this PR if you could please re-review 😃.

[dpersing]

This looks great to me! Thank you so much, @sarahill and @chloerice!

[dpersing]

👍

[sarahill]

Looks good to me!