[Page] Access to Page layout while using embedded app

[michenly]

I love the polaris Page layout and would love to use this throughout my app to display header, breadcrumbs, primary + secondary actions.

However, because the application is an embedded app (and I do need some app-bridge functionalities ie. modal, toast), the Page component default to embedded app view that add breadcrumbs in the same line with app name.

I have temporarily resolved the issues by copy & pasting the current Page component and calling
this.context.easdk.Bar.update({icon: 'icon_url'}); myself.

Ideally, I can also pass the icon once as part of AppProvider, and have this icon persist throughout the entire app.

[michenly]

moved from https://github.com/Shopify/polaris-react-deprecated/issues/2468
cc @tmlayton

[danrosenthal]

👋 Hey @michelleyschen, thanks for the issue. As with other feature requests, I'm going to close this issue and allow voting on the original comment using the 👍 emoji to indicate support for making this change. We'll evaluate the demand for such a feature and prioritize accordingly.

Also, I'd like to loop in @davekilljoy and @markiiikram as they may have opinions on whether this is something the App and Partner Platform team would like to see done.

[jennaleeb]

Oh hai @danrosenthal , @davekilljoy and @markiiikram ! We were also surprised by the removal of this title. Were previously using it and then upgraded our polaris to use app-bridge directly and it went away. Thoughts?

[markiiikram]

Prior to Polaris v3 there was an Embedded page component. I added it in this PR Add embedded page section. As you can see from this PR, I do think it's important. @danrosenthal is updating the documentation for the Page component with this PR #653 (comment)

[michenly]

This issue may have to re-write. Because really I documented an approach, where there may be other things we can do here rather than separating the component.

Mainly the question here is: if an embedded app want to use the visual style of Page

but also secondary navigation.

Is this possible to do in Polaris without forking?

[markiiikram]

@michelleyschen From my understanding there is no way to use the standalone page component inside an embedded app. I think the approach would be as Dan said, for us to vote on the original comment for Polaris to make a change. Maybe everyone on your, my and @jennaleeb's teams could up 👍?

[michenly]

In my app, we 🍴 the Page component just for the visual style.
@ry5n was award of the 🍴 and had commented that there wasn't any UX conern
https://github.com/Shopify/facebook-marketplace/pull/553#issuecomment-430802046

[jennaleeb]

Re-opening this issue after chatting IRL with @danrosenthal and @markiiikram !

Historically, the embedded page was different from the polaris/core-web component due to some technical constraints and design decisions.

Given the need to support 1P apps (e.g., those developed by Shopify), it would be great if, when possible, components in embedded apps had parity whenever possible. It also makes dev life less confusing when devs/designers are searching for components to use but then are not actually available, or, even worse, are slightly different.

Going to shop this around other projects and see if the issue of the <Page/> component is affecting anyone else.

On a higher level note, given A&PP's focus on 3P developers, and other teams developing within core, there is a gap in understanding of who owns the full stack used by 1P Shopify app developers.

[danrosenthal]

Removed the Feature request label as this is a more complex problem than a simple feature request. Thanks @jennaleeb for the context. We encourage all first party app developers within Shopify to weigh in on this problem here, even if that's just with a 👍 on the original comment to show support.

[tmlayton]

There are 5 components which, instead of rendering, delegate to App Bridge when in an embedded context: Page, Modal, Toast, Loading, and ResourcePicker. Of those, Page is the only component which could potentially be used in both the renders and delegated state simultaneously. ResourcePicker is only for embedded apps and Toast and Loading require a Frame. And Modal should never be used in a rendered state in an embedded app.

That being said, does a forceRender prop on Page do the trick? That would cause it to delegate to the App Bridge and render. Or do you need control to pick and choose?