[Navigation][Badge] update size small badge and status new badge for better readability in navigation

[danrosenthal]

WHY are these changes introduced?

Closes #631

WHAT is this pull request doing?

• updates styling for badge size small to have looser padding, line-height, and a border
• updates status new badge to have sky background and ink text

Screenshot

Navigation

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

import React from 'react';
import {
  ActionList,
  AppProvider,
  Card,
  ContextualSaveBar,
  DisplayText,
  Form,
  FormLayout,
  Frame,
  Label,
  Layout,
  List,
  Badge,
  Loading,
  Modal,
  Navigation,
  Page,
  Stack,
  TextContainer,
  TextField,
  Toast,
  TopBar,
  SkeletonPage,
  SkeletonBodyText,
  SkeletonDisplayText,
} from '@shopify/polaris';

export default class FrameExample extends React.Component {
  defaultState = {
    emailFieldValue: 'ellen@ochoacrafts.com',
    nameFieldValue: 'Ochoa Crafts',
  };

  state = {
    showToast: false,
    isLoading: false,
    isDirty: false,
    searchActive: false,
    searchText: '',
    userMenuOpen: false,
    showMobileNavigation: false,
    modalActive: false,
    nameFieldValue: this.defaultState.nameFieldValue,
    emailFieldValue: this.defaultState.emailFieldValue,
    storeName: this.defaultState.nameFieldValue,
  };

  render() {
    const {
      showToast,
      isLoading,
      isDirty,
      searchActive,
      searchText,
      userMenuOpen,
      showMobileNavigation,
      nameFieldValue,
      emailFieldValue,
      modalActive,
      storeName,
    } = this.state;

    const toastMarkup = showToast ? (
      <Toast
        onDismiss={this.toggleState('showToast')}
        content="Changes saved"
      />
    ) : null;

    const navigationUserMenuMarkup = (
      <Navigation.UserMenu
        actions={[
          {
            id: '123',
            items: [
              {content: 'Your profile', icon: 'profile'},
              {content: 'Log out', icon: 'logOut'},
            ],
          },
          {
            id: '456',
            items: [
              {content: 'Shopify help center'},
              {content: 'Community forums'},
            ],
          },
        ]}
        name="Ellen Ochoa"
        detail={storeName}
        avatarInitials="EO"
      />
    );

    const contextualSaveBarMarkup = isDirty ? (
      <ContextualSaveBar
        message="Unsaved changes"
        saveAction={{
          onAction: this.handleSave,
        }}
        discardAction={{
          onAction: this.handleDiscard,
        }}
      />
    ) : null;

    const userMenuMarkup = (
      <TopBar.UserMenu
        actions={[
          {
            items: [
              {content: 'Your profile', icon: 'profile'},
              {content: 'Log out', icon: 'logOut'},
            ],
          },
          {
            items: [
              {content: 'Shopify help center'},
              {content: 'Community forums'},
            ],
          },
        ]}
        name="Ellen Ochoa"
        detail={storeName}
        initials="EO"
        open={userMenuOpen}
        onToggle={this.toggleState('userMenuOpen')}
      />
    );

    const searchResultsMarkup = (
      <Card>
        <ActionList
          items={[
            {content: 'Shopify help center'},
            {content: 'Community forums'},
          ]}
        />
      </Card>
    );

    const searchFieldMarkup = (
      <TopBar.SearchField
        onChange={this.handleSearchFieldChange}
        value={searchText}
        placeholder="Search"
      />
    );

    const topBarMarkup = (
      <TopBar
        showNavigationToggle
        userMenu={userMenuMarkup}
        searchResultsVisible={searchActive}
        searchField={searchFieldMarkup}
        searchResults={searchResultsMarkup}
        onSearchResultsDismiss={this.handleSearchResultsDismiss}
        onNavigationToggle={this.toggleState('showMobileNavigation')}
      />
    );

    const navigationMarkup = (
      <Navigation location="/" userMenu={navigationUserMenuMarkup}>
        <Navigation.Section
          items={[
            {
              label: 'Dashboard',
              icon: 'home',
              onClick: this.toggleState('isLoading'),
              badge: 'Hello',
              subNavigationItems: [
                {
                  label: 'blarp',
                  new: true,
                  url: 'bleep',
                },
              ],
            },
            {
              label: 'Orders',
              icon: 'orders',
              onClick: this.toggleState('isLoading'),
              badge: '10',
              new: true,
            },
            {
              label: 'Templates',
              icon: 'products',
              onClick: this.toggleState('isLoading'),
            },
          ]}
        />
      </Navigation>
    );

    const loadingMarkup = isLoading ? <Loading /> : null;

    const actualPageMarkup = (
      <Page title="Settings">
        <Layout>
          <Layout.AnnotatedSection
            title="Store details"
            description="Shopify and your customers will use this information to contact you."
          >
            <Card sectioned>
              <FormLayout>
                <TextField
                  label="Store name"
                  value={nameFieldValue}
                  onChange={this.handleNameFieldChange}
                />
                <TextField
                  type="email"
                  label="Account email"
                  value={emailFieldValue}
                  onChange={this.handleEmailFieldChange}
                />
                <Badge status="new" progress="partiallyComplete">
                  10
                </Badge>
              </FormLayout>
            </Card>
          </Layout.AnnotatedSection>
        </Layout>
      </Page>
    );

    const loadingPageMarkup = (
      <SkeletonPage>
        <Layout>
          <Layout.Section>
            <Card sectioned>
              <TextContainer>
                <SkeletonDisplayText size="small" />
                <SkeletonBodyText lines={9} />
              </TextContainer>
            </Card>
          </Layout.Section>
        </Layout>
      </SkeletonPage>
    );

    const pageMarkup = isLoading ? loadingPageMarkup : actualPageMarkup;

    const modalMarkup = (
      <Modal
        open={modalActive}
        onClose={this.toggleState('modalActive')}
        title="Add sales channel"
        primaryAction={{
          content: 'Add Instagram',
          onAction: this.toggleState('modalActive'),
        }}
      >
        <Modal.Section>
          <Stack wrap={false}>
            <Stack.Item>
              <img
                style={{
                  minWidth: '4rem',
                  maxWidth: '4rem',
                  height: '4rem',
                }}
                src="https://cdn.shopify.com/s/files/applications/e47f922e057de8e341967bbd31444fdb.png?1521134959"
                alt="Instagram logo"
              />
            </Stack.Item>
            <Stack.Item fill>
              <p>
                Sell your products directly on Instagram by tagging products in
                your posts, to create a seamless shopping experience for your
                customers.
              </p>
            </Stack.Item>
          </Stack>
        </Modal.Section>
      </Modal>
    );

    const theme = {
      colors: {
        topBar: {
          background: '#1C3D4C',
        },
      },
      logo: {
        width: 124,
        topBarSource:
          'https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-color.svg?6215648040070010999',
        contextualSaveBarSource:
          'https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-gray.svg?6215648040070010999',
        url: 'http://jadedpixel.com',
        accessibilityLabel: 'Jaded Pixel',
      },
    };

    return (
      <AppProvider theme={theme}>
        <Frame
          topBar={topBarMarkup}
          navigation={navigationMarkup}
          showMobileNavigation={showMobileNavigation}
          onNavigationDismiss={this.toggleState('showMobileNavigation')}
        >
          {contextualSaveBarMarkup}
          {loadingMarkup}
          {pageMarkup}
          {toastMarkup}
          {modalMarkup}
        </Frame>
      </AppProvider>
    );
  }

  toggleState = (key) => {
    return () => {
      this.setState((prevState) => ({[key]: !prevState[key]}));
    };
  };

  handleSearchFieldChange = (value) => {
    this.setState({searchText: value});
    if (value.length > 0) {
      this.setState({searchActive: true});
    } else {
      this.setState({searchActive: false});
    }
  };

  handleSearchResultsDismiss = () => {
    this.setState(() => {
      return {
        searchActive: false,
        searchText: '',
      };
    });
  };

  handleEmailFieldChange = (emailFieldValue) => {
    this.setState({emailFieldValue});
    if (emailFieldValue != '') {
      this.setState({isDirty: true});
    }
  };

  handleNameFieldChange = (nameFieldValue) => {
    this.setState({nameFieldValue});
    if (nameFieldValue != '') {
      this.setState({isDirty: true});
    }
  };

  handleSave = () => {
    this.defaultState.nameFieldValue = this.state.nameFieldValue;
    this.defaultState.emailFieldValue = this.state.emailFieldValue;

    this.setState({
      isDirty: false,
      showToast: true,
      storeName: this.defaultState.nameFieldValue,
    });
  };

  handleDiscard = () => {
    this.setState({
      emailFieldValue: this.defaultState.emailFieldValue,
      nameFieldValue: this.defaultState.nameFieldValue,
      isDirty: false,
    });
  };
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated UNRELEASED.md

[dleroux]

Looks Great! ;)

[solonaarmstrong-zz]

I'm still not crazy about these colour choices, but code looks 👍

[sarahill]

I feel like the darker ink would stand out a bit more. Can we make that quick change?

[dpersing]

Text looks good! There's an issue with the icon contrast, but I think that can be addressed separately and is much less of a problem. We can revisit the icon colors as a separate exercise.

[sarahill]

Made a comment above changing to ink darker. If it goes out as is though it's still an improvement. Especially if @dpersing is cool with it 👍

[danrosenthal]

I feel like the darker ink would stand out a bit more. Can we make that quick change?

@sarahhill Definitely.

There's an issue with the icon contrast, but I think that can be addressed separately and is much less of a problem.

@dpersing Agreed this is a problem, and that a separate PR is the way to go

[danrosenthal]

Updated with ink base

😍

[sarahill]

🚢

[AdamWhitcroft]

Yay! Thanks for making this happen so fast :)