Polaris-react: Modal example doesn't work

[BarryCarlyon]

Modal example doesn't work

Expected behavior

https://polaris.shopify.com/components/overlays/modal

Actual behavior

Steps to reproduce the problem

1. Copy/paste the example modal

Specifications

• Polaris version: 2.1.1
• React version: 16.3.2
• Browser: Chrome
• Device: Desktop
• Operating System: Mac

[BarryCarlyon]

In addition:

These required properties are missing from Modal: src

is raised in console, but it's not actually required according to the documentation.

Either as a "overlays modal" or a "embedded modal"

[AndrewMusgrave]

Hi @BarryCarlyon, sorry for the confusion. The modal component will always accept a src prop however inside an embedded app it's required because modal inside an embedded app won't accept children. As Chloe mentioned here we're looking into a feature that would make the process of using a modal inside an embedded app easier.

[BarryCarlyon]

So I'm a plane helically wrapped around a shaft as Polaris modals only support iframe'ed content?

[ry5n]

Modals must be rendered outside of the embedded app so that they behave the way merchants expect (whole screen greyed out below the modal, not just the iframe contents). Because of this, the modal contents has to render content from your app in an iframe inside the modal.

We’re working on ways to make this more ergonomic. For the moment you can refer to this example:

https://polaris.shopify.com/components/embedded/embedded-modal#navigation

[chloerice]

Closing as this is a duplicate of https://github.com/Shopify/polaris/issues/320.