[Page] Sync small screen header with native mobile

[chloerice]

WHY are these changes introduced?

Updates the page component's header to align with the Shopify mobile app's layout, which fixes #706.

WHAT is this pull request doing?

On small screens, the page component's header now rolls up secondary actions and action groups into a plain ellipsis button, which replaces pagination if it exists.

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

• git checkout page-mobile-rollup && yarn dev
• Copy paste the example code collapsed below into /playground/Playground.tsx and navigate to localhost:8080**
• Play with the window size to ensure the actions rollup as expected
• Comment out the breadcrumbs prop to ensure the rollup still aligns right
• Ensure the primary action is aligned left when secondary actions are rolled up

**Click to view collapsed example code

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

interface State {}

export default class Playground extends React.Component<{}, State> {
  render() {
    const content = (
      <Page
        title="Jar With Lock-Lid"
        breadcrumbs={[{content: 'Products', url: '/products'}]}
        pagination={{
          hasPrevious: true,
          hasNext: true,
        }}
        primaryAction={{content: 'Save', disabled: true}}
        secondaryActions={[
          {content: 'Duplicate'},
          {content: 'View on your store'},
        ]}
        actionGroups={[
          {
            title: 'Promote',
            actions: [{content: 'Share on Facebook'}],
          },
        ]}
      >
        <Layout>
          <Layout.Section>
            <Card sectioned>
              <p>Page content</p>
            </Card>
          </Layout.Section>
        </Layout>
      </Page>
    );

    return content;
  }
}

🎩 checklist

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

[tmlayton]

Suggested change

// align-self: stretch;

[sarahill]

This looks good to me. Thanks for doing this!

[dpersing]

Hi all! It looks like this is ready to merge and just needs some Percy review and an UNRELEASED.md update. Can that happen soonish?

[tmlayton]

Before	After	Design
All the things	⚠️ Ellipsis has slight vertical misalignment with breadcrumb ⚠️ Ellipsis icon should be ink color
No breadcrumb	⚠️ Ellipsis should be vertically aligned with title
No breadcrumb or pagination	⚠️ Ellipsis does not render

[tmlayton]

A few things that need to be fixed with alignment, styles, and rendering

[sarahill]

☝️ I'm seeing the same things as @tmlayton when I look at the deployment. When I tested locally with the different variations I wasn't seeing these issues.

[chloerice]

@tmlayton @sarahill I've fixed all issues 👍 Be sure to hard refresh and clear your cache when viewing the examples in the latest deployment 😺

Regarding the difference in fill between the example in the issue and this PR: I don't think it would add value to write smelly Sass in order to override the fill of the plain icon button. All plain buttons have color('ink', 'lighter'), including the breadcrumb it sits across from. Changing that would also make the focus fill color the same as the unfocused fill color.

(Made the requested changes)

[sarahill]

The alignnment is looking good to me just seeing a couple things still.

The example with external link and action groups isn't rolling up.

[sarahill]

This is close!

Left a comment on a couple things.

[chloerice]

The example with external link and action groups isn't rolling up.

Hey @sarahill, the current UX for the rollup is that it only rolls up when the actions don't fit. Is part of the desired outcome of this feature request to change that so that actions (other than the primary) always rollup?

[sarahill]

@chloerice Ah I see. That was my original thought but this makes more sense. Show them if we can and roll them up if they don't fit.

Thanks for clarifying 👍 and thank you again for doing this 🙌

[sarahill]

Clarified the functionality of this with Chloe.

Looks good to me ✅

[chloerice]

@sarahill Dug into it further and I think your original thought was right and updated for consistency's sake. Primary button labels can get pretty lengthy in German, don't want to end up in situations like this:

Rollup always	Rollup when > 1 secondary action/group

[sarahill]

☝️ nice catch!

[sarahill]

@chloerice this looks like it's ready to go.

@tmlayton any objections?

[tmlayton]

Suggested change

	- Updated the `Page.Header` so that actions take up less room on small screens ([#707](https://github.com/Shopify/polaris-react/pull/707))
	- Updated the `Page` so that actions take up less room on small screens ([#707](https://github.com/Shopify/polaris-react/pull/707))

I would just say Page because for a consumer that is the only API they know

[tmlayton]

Just a side note, no need to do anything here, but when I see a comment like this I wonder if we can instead write the code in a more meaningful way like creating a component called AnonymousDivForLayout that just renders a div.

[tmlayton]

Nitpick on the changelog entry, also needs a rebase. Otherwise this looks awesome, so much better! Nice work @chloerice, @HYPD, and @ivymukherjee92