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 { 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 { } 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 { } 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 { ); const headerMarkup = - this.props.polaris.appBridge || - this.hasHeaderContent() === false ? null : ( + this.delegateToAppbridge || this.hasHeaderContent() === false ? null : (
); @@ -94,7 +100,16 @@ export class Page extends React.PureComponent { ); } - 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('', () => { }; } + describe('forceRender renders children in page', () => { + const { + createSpy: titleBarCreateSpy, + restore: restoreTitleBarCreateMock, + } = mockTitleBarCreate(); + const {page} = mountWithAppBridge( + , + ); + + expect(page.find(Header).exists()).toBeTruthy(); + expect(titleBarCreateSpy).not.toHaveBeenCalled(); + restoreTitleBarCreateMock(); + }); + describe('children', () => { it('renders its children', () => { const card = ;