From 95665496538bd658a5373b204d58430064f7b751 Mon Sep 17 00:00:00 2001
From: Michelle Chen <michelle.chen@shopify.com>
Date: Thu, 29 Nov 2018 14:14:07 -0500
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20add=20`forceRender`=20to=20force=20?=
 =?UTF-8?q?render=20of=20the=20title,=20actions=20&=20breadcrumbs=20to=20b?=
 =?UTF-8?q?e=20in=20page=20vs=20in=20the=20top=20bar.?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 UNRELEASED.md                           |  1 +
 src/components/Page/Page.tsx            | 27 +++++++++++++++++++------
 src/components/Page/tests/Page.test.tsx | 14 +++++++++++++
 3 files changed, 36 insertions(+), 6 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 8a42aebf4c9..46c5644abd8 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -17,6 +17,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Added `onKeyPress`, `onKeyDown`, and `onKeyUp` to `Button` ([#860](https://github.com/Shopify/polaris-react/pull/860))
 - Added `monochrome` prop to `Button` and `Link` component ([#821](https://github.com/Shopify/polaris-react/pull/821))
 - Updated `Frame` layout and made `TopBar.UserMenu` visible on mobile ([#852](https://github.com/Shopify/polaris-react/pull/852))
+- Added a `forceRender` prop to `Page` to not delegate to the app bridge TitleBar action ([#695](https://github.com/Shopify/polaris-react/pull/695))
 - Changed `Tabs` example to contain children so the `Panel` renders for accessibility ([#893](https://github.com/Shopify/polaris-react/pull/893))
 - Fixed timezone not being accounted for in `ResourceList` date filter control ([#710](https://github.com/Shopify/polaris-react/pull/710))
 
diff --git a/src/components/Page/Page.tsx b/src/components/Page/Page.tsx
index 1b3af1f48a7..1771167f4c8 100644
--- a/src/components/Page/Page.tsx
+++ b/src/components/Page/Page.tsx
@@ -23,6 +23,13 @@ export interface Props extends HeaderProps {
   fullWidth?: boolean;
   /** Decreases the maximum layout width. Intended for single-column layouts */
   singleColumn?: boolean;
+  /**
+   * Force render in page and do not delegate to the app bridge TitleBar action
+   * @default false
+   * @embeddedAppOnly
+   * @see {@link https://polaris.shopify.com/components/structure/page#section-use-in-an-embedded-application|Shopify Page Component docs}
+   * */
+  forceRender?: boolean;
 }
 
 export type ComposedProps = Props & WithAppProviderProps;
@@ -39,7 +46,7 @@ export class Page extends React.PureComponent<ComposedProps, never> {
   private titlebar: AppBridgeTitleBar.TitleBar | undefined;
 
   componentDidMount() {
-    if (this.props.polaris.appBridge == null) {
+    if (this.delegateToAppbridge === false) {
       return;
     }
 
@@ -50,7 +57,7 @@ export class Page extends React.PureComponent<ComposedProps, never> {
   }
 
   componentDidUpdate(prevProps: ComposedProps) {
-    if (this.props.polaris.appBridge == null || this.titlebar == null) {
+    if (this.titlebar == null || this.delegateToAppbridge === false) {
       return;
     }
 
@@ -64,7 +71,7 @@ export class Page extends React.PureComponent<ComposedProps, never> {
   }
 
   componentWillUnmount() {
-    if (this.props.polaris.appBridge == null || this.titlebar == null) {
+    if (this.titlebar == null || this.delegateToAppbridge === false) {
       return;
     }
 
@@ -81,8 +88,7 @@ export class Page extends React.PureComponent<ComposedProps, never> {
     );
 
     const headerMarkup =
-      this.props.polaris.appBridge ||
-      this.hasHeaderContent() === false ? null : (
+      this.delegateToAppbridge || this.hasHeaderContent() === false ? null : (
         <Header {...rest} />
       );
 
@@ -94,7 +100,16 @@ export class Page extends React.PureComponent<ComposedProps, never> {
     );
   }
 
-  private hasHeaderContent() {
+  private get delegateToAppbridge(): boolean {
+    const {
+      polaris: {appBridge},
+      forceRender = false,
+    } = this.props;
+
+    return appBridge != null && forceRender === false;
+  }
+
+  private hasHeaderContent(): boolean {
     const {
       title,
       primaryAction,
diff --git a/src/components/Page/tests/Page.test.tsx b/src/components/Page/tests/Page.test.tsx
index 059ec5fa001..a245ad8abac 100644
--- a/src/components/Page/tests/Page.test.tsx
+++ b/src/components/Page/tests/Page.test.tsx
@@ -42,6 +42,20 @@ describe('<Page />', () => {
     };
   }
 
+  describe('forceRender renders children in page', () => {
+    const {
+      createSpy: titleBarCreateSpy,
+      restore: restoreTitleBarCreateMock,
+    } = mockTitleBarCreate();
+    const {page} = mountWithAppBridge(
+      <Page {...mockProps} title="new title" forceRender />,
+    );
+
+    expect(page.find(Header).exists()).toBeTruthy();
+    expect(titleBarCreateSpy).not.toHaveBeenCalled();
+    restoreTitleBarCreateMock();
+  });
+
   describe('children', () => {
     it('renders its children', () => {
       const card = <Card />;