[Page]✨ add forceRender to force render of the title, actions & breadcrumbs to be in page vs in the top bar.

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))
 

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,

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 />;