[TopBar] Fix justification for UserMenu

[cboltt]

WHY are these changes introduced?

If a TopBar implements a userMenu but not a searchField, the userMenu is left-aligned. It should always remain right-aligned.

Resolves #566

WHAT is this pull request doing?

Sets justify-content: flex-end; on the TopBar's .Contents container (it's already using flexbox)

Before:

After:

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

The Top Bar component can take in three components as props: searchField, secondaryMenu, and userMenu. Be sure to test cases with different combinations of these props (i.e.: using a searchField and nothing else or a secondaryMenu and a userMenu but not a searchField).

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

import * as React from 'react';
import {AppProvider, Frame, TopBar} from '@shopify/polaris';
import {noop} from '@shopify/javascript-utilities/other';

export default class Playground extends React.Component<never, never> {
  render() {
    const userMenuMarkup = (
      <TopBar.UserMenu
        actions={[]}
        name="Playground"
        detail="Wait, where's the slide?"
        initials="P"
        open={false}
        onToggle={noop}
      />
    );

    const secondaryMenuMarkup = (
      <TopBar.Menu
        activatorContent="Toggle menu"
        actions={[
          {
            items: [{content: 'item content'}],
          },
        ]}
        open={false}
        onClose={noop}
        onOpen={noop}
      />
    );

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

    const topBarMarkup = (
      <TopBar
        secondaryMenu={secondaryMenuMarkup}
        searchField={searchFieldMarkup}
        userMenu={userMenuMarkup}
      />
    );

    return (
      <AppProvider>
        <Frame topBar={topBarMarkup} />
      </AppProvider>
    );
  }
}

🎩 checklist

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

[ghost]

👋 Thanks for opening your first pull request. A contributor should give feedback soon. If you haven’t already, please check out the contributing guidelines. You can also join #polaris on the Shopify Partners Slack.

[chloerice]

Code and tophat are 🥇
Rebase && 🚢 🚢 🚢

[BPScott]

A tiny nitpick in the changelog message, but aside from that I love how easy this was to fix. Thanks!

[ghost]

🎉 Thanks for your contribution to Polaris React!