add breakpoint mixin for frame with nav max width

[patsissons]

WHY are these changes introduced?

We can currently use the page-when-not-max-width mixin to break pages as soon as they being to resize, but this is not applicable for layouts that use a frame with the nav section. For these cases we need to also take the nav width in account for the breaking width.

WHAT is this pull request doing?

This PR adds a new breakpoint variable $frame-with-nav-max-width as well as a new mixin to break before that defined width frame-with-nav-when-not-max-width().

🎩 checklist

• [ ] Tested on mobile
• [ ] Tested on multiple browsers
• [ ] Tested for accessibility

The actual breakpoint doesn't line up perfectly in storybook due to the extra margins/padding involved, but the intent is still pretty clear from the screenshots above. We want the break to occur as soon as the page content begins to resize and become responsive.

Paste code into playground/Playground.tsx → yarn dev → open storybook → 🎩

import * as React from 'react';

import {Banner, Frame, Navigation, Page, TopBar} from '../src';
import * as styles from './Playground.scss';

export default class Playground extends React.PureComponent {
  render() {
    return (
      <Frame navigation={<Navigation location="/" />} topBar={<TopBar />}>
        <Page title="Playground">
          <Banner>
            <p className={styles.Content} />
          </Banner>
        </Page>
      </Frame>
    );
  }
}

Requires the following Playground.scss content

.Content::after {
  content: 'Frame Max Width Page';

  @include frame-with-nav-when-not-max-width {
    content: '*** Frame Condensed Page ***';
  }
}

[chloerice]

Hey Pat 👋Is this a WIP?

[patsissons]

@chloerice not exactly. It could be ready to go (with a changelog update). But i wanted to get feedback from the Polaris team if this was something that belonged or not before pushing forward. IMO i think it belongs somewhere central, but i know that all these breakpoints are a bit of a pain point already. If you want me to get this prepped for merging i can do that!

[chloerice]

Since it's a breakpoint that's dependent on the width of Polaris components, I don't see a reason not to add it here 👍.

Can you add some playground code or some other way to test that this breaks when you expect it to?

[patsissons]

can do!

[chloerice]

I'm not sure I'm clear on exactly when you want this to break, but it looks good to me and if you've tested the mixin in web ** and it works as you expect it to then 👌 👌

** You'll need to kill the web server and then run yarn run build-consumer web in a terminal tab in this polaris-react branch while in a branch of web that has the view you want to test it in. DM me if you want some help doing that 😀

[patsissons]

🎩 in web confirmed 👍 I will queue this up first thing Monday.