[Modal] / Missing animation when component is rendered with `open` set to true directly

[loic-d]

Issue summary

Modal is not properly animated when rendered with open set to true directly.

open && <Modal open ... />

<Modal open={open}

For performance optimizations, we often defer the loading of the Modal and its content using createAsyncComponent from react-async. When following this recipe, you will loose the animation on Modal.

Expected behavior

Modal should always be animated when opened, wether the component is directly mounted with open set to true or open is toggled from false to true.

Actual behavior

The Modal is not properly animated (missing vertical translation).

Steps to reproduce the problem

See code sandbox link below.

Reduced test case

https://codesandbox.io/s/ancient-violet-z8te6

Specifications

• Are you using the React components? (Y/N): Y
• Polaris version number: "@shopify/polaris": "3.20.0",
• Browser: Chrome
• Device: Mac
• Operating System: 10.14.5

Or run npx envinfo --system --binaries --browsers --npmPackages react,react-dom,@shopify/polaris to provide specifications on your environment including version numbers, browser, device, and operating system.

Paste the results here:

[loic-d]

cc/ @posth for visibility.

[dleroux]

I'm currently away on holidays, on my computer 🙈 and saw this come in. So I quickly tried adding:

 appear: classNames(styles.animateFadeUp, styles.entering),
 appearActive: classNames(styles.animateFadeUp, styles.entered),

to:

https://github.com/Shopify/polaris-react/blob/master/src/components/Modal/components/Dialog/Dialog.tsx#L83

And it looks like it worked. I'd like to 🎩 properly before committing but just wanted to share in case someone wants to take this on. If not it'll be on my todos when I return.

Note: Looks like the 'instant' prop still worked too.