{"action":"created","comment":{"url":"https://api.github.com/repos/Shopify/polaris-react/pulls/comments/242624582","pull_request_review_id":186180962,"id":242624582,"node_id":"MDI0OlB1bGxSZXF1ZXN0UmV2aWV3Q29tbWVudDI0MjYyNDU4Mg==","diff_hunk":"@@ -7,6 +7,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f\n ### Enhancements\n \n - Moved icons to a separate npm package ([#686](https://github.com/Shopify/polaris-react/pull/686))\n+- Updated the `Page.Header` so that actions take up less room on small screens ([#707](https://github.com/Shopify/polaris-react/pull/707))","path":"UNRELEASED.md","position":4,"original_position":4,"commit_id":"42000da8c6c53f7f555bb69a67199a40c69bdfd1","original_commit_id":"42000da8c6c53f7f555bb69a67199a40c69bdfd1","user":{"login":"tmlayton","id":344839,"node_id":"MDQ6VXNlcjM0NDgzOQ==","avatar_url":"https://avatars2.githubusercontent.com/u/344839?v=4","gravatar_id":"","url":"https://api.github.com/users/tmlayton","html_url":"https://github.com/tmlayton","followers_url":"https://api.github.com/users/tmlayton/followers","following_url":"https://api.github.com/users/tmlayton/following{/other_user}","gists_url":"https://api.github.com/users/tmlayton/gists{/gist_id}","starred_url":"https://api.github.com/users/tmlayton/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/tmlayton/subscriptions","organizations_url":"https://api.github.com/users/tmlayton/orgs","repos_url":"https://api.github.com/users/tmlayton/repos","events_url":"https://api.github.com/users/tmlayton/events{/privacy}","received_events_url":"https://api.github.com/users/tmlayton/received_events","type":"User","site_admin":false},"body":"```suggestion\r\n- Updated the `Page` so that actions take up less room on small screens ([#707](https://github.com/Shopify/polaris-react/pull/707))\r\n```\r\n\r\nI would just say `Page` because for a consumer that is the only API they know","created_at":"2018-12-18T17:07:20Z","updated_at":"2018-12-18T17:07:20Z","html_url":"https://github.com/Shopify/polaris-react/pull/707#discussion_r242624582","pull_request_url":"https://api.github.com/repos/Shopify/polaris-react/pulls/707","author_association":"MEMBER","_links":{"self":{"href":"https://api.github.com/repos/Shopify/polaris-react/pulls/comments/242624582"},"html":{"href":"https://github.com/Shopify/polaris-react/pull/707#discussion_r242624582"},"pull_request":{"href":"https://api.github.com/repos/Shopify/polaris-react/pulls/707"}}},"pull_request":{"url":"https://api.github.com/repos/Shopify/polaris-react/pulls/707","id":235120970,"node_id":"MDExOlB1bGxSZXF1ZXN0MjM1MTIwOTcw","html_url":"https://github.com/Shopify/polaris-react/pull/707","diff_url":"https://github.com/Shopify/polaris-react/pull/707.diff","patch_url":"https://github.com/Shopify/polaris-react/pull/707.patch","issue_url":"https://api.github.com/repos/Shopify/polaris-react/issues/707","number":707,"state":"open","locked":false,"title":"[Page] Sync small screen header with native mobile","user":{"login":"chloerice","id":18447883,"node_id":"MDQ6VXNlcjE4NDQ3ODgz","avatar_url":"https://avatars3.githubusercontent.com/u/18447883?v=4","gravatar_id":"","url":"https://api.github.com/users/chloerice","html_url":"https://github.com/chloerice","followers_url":"https://api.github.com/users/chloerice/followers","following_url":"https://api.github.com/users/chloerice/following{/other_user}","gists_url":"https://api.github.com/users/chloerice/gists{/gist_id}","starred_url":"https://api.github.com/users/chloerice/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/chloerice/subscriptions","organizations_url":"https://api.github.com/users/chloerice/orgs","repos_url":"https://api.github.com/users/chloerice/repos","events_url":"https://api.github.com/users/chloerice/events{/privacy}","received_events_url":"https://api.github.com/users/chloerice/received_events","type":"User","site_admin":false},"body":"### WHY are these changes introduced?\r\n\r\nUpdates the page component's header to align with the Shopify mobile app's layout, which fixes #706.\r\n\r\n### WHAT is this pull request doing?\r\nOn 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.\r\n\r\n### How to 🎩\r\n\r\n🖥 [Local development instructions](https://github.com/Shopify/polaris-react/blob/master/README.md#development)\r\n🗒 [General tophatting guidelines](https://github.com/Shopify/polaris-react/blob/master/documentation/Tophatting.md)\r\n📄 [Changelog guidelines](https://github.com/Shopify/polaris-react/blob/master/documentation/Versioning%20and%20changelog.md)\r\n\r\n- `git checkout page-mobile-rollup && yarn dev`\r\n- Copy paste the example code collapsed below into `/playground/Playground.tsx` and navigate to localhost:8080**\r\n- Play with the window size to ensure the actions rollup as expected\r\n- Comment out the `breadcrumbs` prop to ensure the rollup still aligns right\r\n- Ensure the primary action is aligned left when secondary actions are rolled up\r\n\r\n<details>\r\n<summary><strong>**Click to view collapsed example code</strong></summary>\r\n\r\n```jsx\r\nimport * as React from 'react';\r\nimport {Page, Layout, Card} from '@shopify/polaris';\r\n\r\ninterface State {}\r\n\r\nexport default class Playground extends React.Component<{}, State> {\r\n  render() {\r\n    const content = (\r\n      <Page\r\n        title=\"Jar With Lock-Lid\"\r\n        breadcrumbs={[{content: 'Products', url: '/products'}]}\r\n        pagination={{\r\n          hasPrevious: true,\r\n          hasNext: true,\r\n        }}\r\n        primaryAction={{content: 'Save', disabled: true}}\r\n        secondaryActions={[\r\n          {content: 'Duplicate'},\r\n          {content: 'View on your store'},\r\n        ]}\r\n        actionGroups={[\r\n          {\r\n            title: 'Promote',\r\n            actions: [{content: 'Share on Facebook'}],\r\n          },\r\n        ]}\r\n      >\r\n        <Layout>\r\n          <Layout.Section>\r\n            <Card sectioned>\r\n              <p>Page content</p>\r\n            </Card>\r\n          </Layout.Section>\r\n        </Layout>\r\n      </Page>\r\n    );\r\n\r\n    return content;\r\n  }\r\n}\r\n```\r\n\r\n</details>\r\n\r\n### 🎩 checklist\r\n\r\n* [x] Tested on [mobile](https://github.com/Shopify/polaris-react/blob/master/documentation/Tophatting.md#cross-browser-testing)\r\n* [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/intro-to-shopify/shopify-admin/supported-browsers)\r\n* [x] Tested for [accessibility](https://github.com/Shopify/polaris-react/blob/master/documentation/Accessibility%20testing.md)\r\n* [x] Updated [UNRELEASED.md](https://github.com/Shopify/polaris-react/blob/master/UNRELEASED.md)\r\n","created_at":"2018-11-30T21:31:10Z","updated_at":"2018-12-18T17:07:20Z","closed_at":null,"merged_at":null,"merge_commit_sha":"425f937531b978dc913b4984866687da858b765d","assignee":null,"assignees":[],"requested_reviewers":[{"login":"ivymukherjee92","id":36046036,"node_id":"MDQ6VXNlcjM2MDQ2MDM2","avatar_url":"https://avatars2.githubusercontent.com/u/36046036?v=4","gravatar_id":"","url":"https://api.github.com/users/ivymukherjee92","html_url":"https://github.com/ivymukherjee92","followers_url":"https://api.github.com/users/ivymukherjee92/followers","following_url":"https://api.github.com/users/ivymukherjee92/following{/other_user}","gists_url":"https://api.github.com/users/ivymukherjee92/gists{/gist_id}","starred_url":"https://api.github.com/users/ivymukherjee92/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/ivymukherjee92/subscriptions","organizations_url":"https://api.github.com/users/ivymukherjee92/orgs","repos_url":"https://api.github.com/users/ivymukherjee92/repos","events_url":"https://api.github.com/users/ivymukherjee92/events{/privacy}","received_events_url":"https://api.github.com/users/ivymukherjee92/received_events","type":"User","site_admin":false}],"requested_teams":[],"labels":[],"milestone":null,"commits_url":"https://api.github.com/repos/Shopify/polaris-react/pulls/707/commits","review_comments_url":"https://api.github.com/repos/Shopify/polaris-react/pulls/707/comments","review_comment_url":"https://api.github.com/repos/Shopify/polaris-react/pulls/comments{/number}","comments_url":"https://api.github.com/repos/Shopify/polaris-react/issues/707/comments","statuses_url":"https://api.github.com/repos/Shopify/polaris-react/statuses/42000da8c6c53f7f555bb69a67199a40c69bdfd1","head":{"label":"Shopify:page-mobile-rollup","ref":"page-mobile-rollup","sha":"42000da8c6c53f7f555bb69a67199a40c69bdfd1","user":{"login":"Shopify","id":8085,"node_id":"MDEyOk9yZ2FuaXphdGlvbjgwODU=","avatar_url":"https://avatars1.githubusercontent.com/u/8085?v=4","gravatar_id":"","url":"https://api.github.com/users/Shopify","html_url":"https://github.com/Shopify","followers_url":"https://api.github.com/users/Shopify/followers","following_url":"https://api.github.com/users/Shopify/following{/other_user}","gists_url":"https://api.github.com/users/Shopify/gists{/gist_id}","starred_url":"https://api.github.com/users/Shopify/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Shopify/subscriptions","organizations_url":"https://api.github.com/users/Shopify/orgs","repos_url":"https://api.github.com/users/Shopify/repos","events_url":"https://api.github.com/users/Shopify/events{/privacy}","received_events_url":"https://api.github.com/users/Shopify/received_events","type":"Organization","site_admin":false},"repo":{"id":88897663,"node_id":"MDEwOlJlcG9zaXRvcnk4ODg5NzY2Mw==","name":"polaris-react","full_name":"Shopify/polaris-react","private":false,"owner":{"login":"Shopify","id":8085,"node_id":"MDEyOk9yZ2FuaXphdGlvbjgwODU=","avatar_url":"https://avatars1.githubusercontent.com/u/8085?v=4","gravatar_id":"","url":"https://api.github.com/users/Shopify","html_url":"https://github.com/Shopify","followers_url":"https://api.github.com/users/Shopify/followers","following_url":"https://api.github.com/users/Shopify/following{/other_user}","gists_url":"https://api.github.com/users/Shopify/gists{/gist_id}","starred_url":"https://api.github.com/users/Shopify/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Shopify/subscriptions","organizations_url":"https://api.github.com/users/Shopify/orgs","repos_url":"https://api.github.com/users/Shopify/repos","events_url":"https://api.github.com/users/Shopify/events{/privacy}","received_events_url":"https://api.github.com/users/Shopify/received_events","type":"Organization","site_admin":false},"html_url":"https://github.com/Shopify/polaris-react","description":"Shopify’s product component library","fork":false,"url":"https://api.github.com/repos/Shopify/polaris-react","forks_url":"https://api.github.com/repos/Shopify/polaris-react/forks","keys_url":"https://api.github.com/repos/Shopify/polaris-react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Shopify/polaris-react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Shopify/polaris-react/teams","hooks_url":"https://api.github.com/repos/Shopify/polaris-react/hooks","issue_events_url":"https://api.github.com/repos/Shopify/polaris-react/issues/events{/number}","events_url":"https://api.github.com/repos/Shopify/polaris-react/events","assignees_url":"https://api.github.com/repos/Shopify/polaris-react/assignees{/user}","branches_url":"https://api.github.com/repos/Shopify/polaris-react/branches{/branch}","tags_url":"https://api.github.com/repos/Shopify/polaris-react/tags","blobs_url":"https://api.github.com/repos/Shopify/polaris-react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Shopify/polaris-react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Shopify/polaris-react/git/refs{/sha}","trees_url":"https://api.github.com/repos/Shopify/polaris-react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Shopify/polaris-react/statuses/{sha}","languages_url":"https://api.github.com/repos/Shopify/polaris-react/languages","stargazers_url":"https://api.github.com/repos/Shopify/polaris-react/stargazers","contributors_url":"https://api.github.com/repos/Shopify/polaris-react/contributors","subscribers_url":"https://api.github.com/repos/Shopify/polaris-react/subscribers","subscription_url":"https://api.github.com/repos/Shopify/polaris-react/subscription","commits_url":"https://api.github.com/repos/Shopify/polaris-react/commits{/sha}","git_commits_url":"https://api.github.com/repos/Shopify/polaris-react/git/commits{/sha}","comments_url":"https://api.github.com/repos/Shopify/polaris-react/comments{/number}","issue_comment_url":"https://api.github.com/repos/Shopify/polaris-react/issues/comments{/number}","contents_url":"https://api.github.com/repos/Shopify/polaris-react/contents/{+path}","compare_url":"https://api.github.com/repos/Shopify/polaris-react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Shopify/polaris-react/merges","archive_url":"https://api.github.com/repos/Shopify/polaris-react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Shopify/polaris-react/downloads","issues_url":"https://api.github.com/repos/Shopify/polaris-react/issues{/number}","pulls_url":"https://api.github.com/repos/Shopify/polaris-react/pulls{/number}","milestones_url":"https://api.github.com/repos/Shopify/polaris-react/milestones{/number}","notifications_url":"https://api.github.com/repos/Shopify/polaris-react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Shopify/polaris-react/labels{/name}","releases_url":"https://api.github.com/repos/Shopify/polaris-react/releases{/id}","deployments_url":"https://api.github.com/repos/Shopify/polaris-react/deployments","created_at":"2017-04-20T18:26:34Z","updated_at":"2018-12-18T15:58:53Z","pushed_at":"2018-12-18T16:05:27Z","git_url":"git://github.com/Shopify/polaris-react.git","ssh_url":"git@github.com:Shopify/polaris-react.git","clone_url":"https://github.com/Shopify/polaris-react.git","svn_url":"https://github.com/Shopify/polaris-react","homepage":"https://polaris.shopify.com","size":10250,"stargazers_count":2080,"watchers_count":2080,"language":"TypeScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":323,"mirror_url":null,"archived":false,"open_issues_count":123,"license":{"key":"other","name":"Other","spdx_id":"NOASSERTION","url":null,"node_id":"MDc6TGljZW5zZTA="},"forks":323,"open_issues":123,"watchers":2080,"default_branch":"master"}},"base":{"label":"Shopify:master","ref":"master","sha":"8590cbb685ac4e9dcac2661b66c2db125ca4cab7","user":{"login":"Shopify","id":8085,"node_id":"MDEyOk9yZ2FuaXphdGlvbjgwODU=","avatar_url":"https://avatars1.githubusercontent.com/u/8085?v=4","gravatar_id":"","url":"https://api.github.com/users/Shopify","html_url":"https://github.com/Shopify","followers_url":"https://api.github.com/users/Shopify/followers","following_url":"https://api.github.com/users/Shopify/following{/other_user}","gists_url":"https://api.github.com/users/Shopify/gists{/gist_id}","starred_url":"https://api.github.com/users/Shopify/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Shopify/subscriptions","organizations_url":"https://api.github.com/users/Shopify/orgs","repos_url":"https://api.github.com/users/Shopify/repos","events_url":"https://api.github.com/users/Shopify/events{/privacy}","received_events_url":"https://api.github.com/users/Shopify/received_events","type":"Organization","site_admin":false},"repo":{"id":88897663,"node_id":"MDEwOlJlcG9zaXRvcnk4ODg5NzY2Mw==","name":"polaris-react","full_name":"Shopify/polaris-react","private":false,"owner":{"login":"Shopify","id":8085,"node_id":"MDEyOk9yZ2FuaXphdGlvbjgwODU=","avatar_url":"https://avatars1.githubusercontent.com/u/8085?v=4","gravatar_id":"","url":"https://api.github.com/users/Shopify","html_url":"https://github.com/Shopify","followers_url":"https://api.github.com/users/Shopify/followers","following_url":"https://api.github.com/users/Shopify/following{/other_user}","gists_url":"https://api.github.com/users/Shopify/gists{/gist_id}","starred_url":"https://api.github.com/users/Shopify/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/Shopify/subscriptions","organizations_url":"https://api.github.com/users/Shopify/orgs","repos_url":"https://api.github.com/users/Shopify/repos","events_url":"https://api.github.com/users/Shopify/events{/privacy}","received_events_url":"https://api.github.com/users/Shopify/received_events","type":"Organization","site_admin":false},"html_url":"https://github.com/Shopify/polaris-react","description":"Shopify’s product component library","fork":false,"url":"https://api.github.com/repos/Shopify/polaris-react","forks_url":"https://api.github.com/repos/Shopify/polaris-react/forks","keys_url":"https://api.github.com/repos/Shopify/polaris-react/keys{/key_id}","collaborators_url":"https://api.github.com/repos/Shopify/polaris-react/collaborators{/collaborator}","teams_url":"https://api.github.com/repos/Shopify/polaris-react/teams","hooks_url":"https://api.github.com/repos/Shopify/polaris-react/hooks","issue_events_url":"https://api.github.com/repos/Shopify/polaris-react/issues/events{/number}","events_url":"https://api.github.com/repos/Shopify/polaris-react/events","assignees_url":"https://api.github.com/repos/Shopify/polaris-react/assignees{/user}","branches_url":"https://api.github.com/repos/Shopify/polaris-react/branches{/branch}","tags_url":"https://api.github.com/repos/Shopify/polaris-react/tags","blobs_url":"https://api.github.com/repos/Shopify/polaris-react/git/blobs{/sha}","git_tags_url":"https://api.github.com/repos/Shopify/polaris-react/git/tags{/sha}","git_refs_url":"https://api.github.com/repos/Shopify/polaris-react/git/refs{/sha}","trees_url":"https://api.github.com/repos/Shopify/polaris-react/git/trees{/sha}","statuses_url":"https://api.github.com/repos/Shopify/polaris-react/statuses/{sha}","languages_url":"https://api.github.com/repos/Shopify/polaris-react/languages","stargazers_url":"https://api.github.com/repos/Shopify/polaris-react/stargazers","contributors_url":"https://api.github.com/repos/Shopify/polaris-react/contributors","subscribers_url":"https://api.github.com/repos/Shopify/polaris-react/subscribers","subscription_url":"https://api.github.com/repos/Shopify/polaris-react/subscription","commits_url":"https://api.github.com/repos/Shopify/polaris-react/commits{/sha}","git_commits_url":"https://api.github.com/repos/Shopify/polaris-react/git/commits{/sha}","comments_url":"https://api.github.com/repos/Shopify/polaris-react/comments{/number}","issue_comment_url":"https://api.github.com/repos/Shopify/polaris-react/issues/comments{/number}","contents_url":"https://api.github.com/repos/Shopify/polaris-react/contents/{+path}","compare_url":"https://api.github.com/repos/Shopify/polaris-react/compare/{base}...{head}","merges_url":"https://api.github.com/repos/Shopify/polaris-react/merges","archive_url":"https://api.github.com/repos/Shopify/polaris-react/{archive_format}{/ref}","downloads_url":"https://api.github.com/repos/Shopify/polaris-react/downloads","issues_url":"https://api.github.com/repos/Shopify/polaris-react/issues{/number}","pulls_url":"https://api.github.com/repos/Shopify/polaris-react/pulls{/number}","milestones_url":"https://api.github.com/repos/Shopify/polaris-react/milestones{/number}","notifications_url":"https://api.github.com/repos/Shopify/polaris-react/notifications{?since,all,participating}","labels_url":"https://api.github.com/repos/Shopify/polaris-react/labels{/name}","releases_url":"https://api.github.com/repos/Shopify/polaris-react/releases{/id}","deployments_url":"https://api.github.com/repos/Shopify/polaris-react/deployments","created_at":"2017-04-20T18:26:34Z","updated_at":"2018-12-18T15:58:53Z","pushed_at":"2018-12-18T16:05:27Z","git_url":"git://github.com/Shopify/polaris-react.git","ssh_url":"git@github.com:Shopify/polaris-react.git","clone_url":"https://github.com/Shopify/polaris-react.git","svn_url":"https://github.com/Shopify/polaris-react","homepage":"https://polaris.shopify.com","size":10250,"stargazers_count":2080,"watchers_count":2080,"language":"TypeScript","has_issues":true,"has_projects":true,"has_downloads":true,"has_wiki":false,"has_pages":false,"forks_count":323,"mirror_url":null,"archived":false,"open_issues_count":123,"license":{"key":"other","name":"Other","spdx_id":"NOASSERTION","url":null,"node_id":"MDc6TGljZW5zZTA="},"forks":323,"open_issues":123,"watchers":2080,"default_branch":"master"}},"_links":{"self":{"href":"https://api.github.com/repos/Shopify/polaris-react/pulls/707"},"html":{"href":"https://github.com/Shopify/polaris-react/pull/707"},"issue":{"href":"https://api.github.com/repos/Shopify/polaris-react/issues/707"},"comments":{"href":"https://api.github.com/repos/Shopify/polaris-react/issues/707/comments"},"review_comments":{"href":"https://api.github.com/repos/Shopify/polaris-react/pulls/707/comments"},"review_comment":{"href":"https://api.github.com/repos/Shopify/polaris-react/pulls/comments{/number}"},"commits":{"href":"https://api.github.com/repos/Shopify/polaris-react/pulls/707/commits"},"statuses":{"href":"https://api.github.com/repos/Shopify/polaris-react/statuses/42000da8c6c53f7f555bb69a67199a40c69bdfd1"}},"author_association":"MEMBER"}}
{"actor":{"display_login":"tmlayton"}}