Adds contextControl prop to <TopBar /> and <Navigation />

[kvendrik]

WHY are these changes introduced?

As part of the context switching updates (details) this PR proposes a contextControl prop thats is added to the <TopBar /> and <Navigation /> components and accepts a component that is ideally used to provide a way for users to switch between admin contexts.

WHAT is this pull request doing?

Adds the contextControl prop to <TopBar /> and <Navigation />.

How to 🎩

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

import * as React from 'react';
import {TopBar, AppProvider, Frame, Navigation, Button} from '../src';

interface State {}

export default class Playground extends React.Component<{}, State> {
  render() {
    const topBar = (
      <TopBar
        contextControl={
          <TopBar.Menu
            action={[]}
            activatorContent="Click here to switch from one context to another"
          />
        }
      />
    );

    const nav = (
      <Navigation
        location="/"
        contextControl={
          <Button>Click here to switch from one context to another</Button>
        }
      />
    );

    return (
      <AppProvider
        theme={{
          logo: {
            width: 124,
            topBarSource:
              'https://cdn.shopify.com/s/files/1/0446/6937/files/jaded-pixel-logo-color.svg?6215648040070010999',
          },
        }}
      >
        <Frame topBar={topBar} navigation={nav} showMobileNavigation />
      </AppProvider>
    );
  }
}

2. Run yarn dev and navigate to http://localhost:6006/iframe.html?selectedKind=Playground&selectedStory=Playground.
3. Make sure the <TopBar.Menu /> shows up in the far left corner of the top bar.
4. Remove the contextControl prop from the top bar.
5. Make sure the logo shows up and looks/works as you would expect.
6. Make sure the Button that was passed into Navigation doesn't show up on the page.
7. Resize the screen to a mobile size.
8. Make sure the Button that was passed into Navigation shows up in the side nav.

[danrosenthal]

Having some issues with the 🎩 instructions. The playground code has some TS linting errors around Topbar.Menu missing required props. Also the playground itself errors out with React.Children.only expected to receive a single React element child.

Could you fix these up and then ping me again for review?

[kvendrik]

@danrosenthal I pasted in the Playground code from the description and ran yarn dev and it seems to work well for me. The TopBar.Menu is missing props but none of them are critical for the playground to render. Could you perhaps try again? Feel free to ping me on Slack if it doesn't work.

[tmlayton]

We will want to use if-else flow control here:

if context control -> render context control
else if logo -> render logo
else -> null

[kvendrik]

Makes sense that makes it a bit clearer and resolves the no contextControl nor logo case.

[tmlayton]

We are missing a test case for top bar without context control and without logo. Currently that code path with still render and empty context control div.

[kvendrik]

We are missing a test case for top bar without context control and without logo. Currently that code path with still render and empty context control div.

Yes good catch! Will fix that!

[tmlayton]

Didn’t 🎩 but code LGTM

[danrosenthal]

During my 🎩 I noticed this was able to be gotten into a weird state if the initial render was on desktop and you resize it to mobile, where the Backdrop was visible but not the Navigation. When initial render is on mobile, the Navigation renders as expected. This was pretty weird, but I don't see how it could be related to these changes.

(I think it is related to how CSSTransition handles being open before it is allowed to finish its lifecycle. Something we should look into as a followup @tmlayton)