From aa44f832666d5c6dd1d2eb57ae54e9fdd571498e Mon Sep 17 00:00:00 2001 From: Mitchell Soares Date: Wed, 4 Sep 2019 14:37:27 -0400 Subject: [PATCH] Added appear animation classes to Modal so it works when rendered async --- UNRELEASED.md | 2 ++ src/components/Modal/components/Dialog/Dialog.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/UNRELEASED.md b/UNRELEASED.md index 7e81dbe74b5..e22a6ef38fa 100644 --- a/UNRELEASED.md +++ b/UNRELEASED.md @@ -12,6 +12,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f ### Bug fixes +- Fixed animation for Modal when being rendered asynchronously ([#2076](https://github.com/Shopify/polaris-react/pull/2076)) + ### Documentation ### Development workflow diff --git a/src/components/Modal/components/Dialog/Dialog.tsx b/src/components/Modal/components/Dialog/Dialog.tsx index 0d3a5cfcff8..31d444a20c3 100644 --- a/src/components/Modal/components/Dialog/Dialog.tsx +++ b/src/components/Modal/components/Dialog/Dialog.tsx @@ -80,6 +80,8 @@ export function Dialog({ } const fadeUpClasses = { + appear: classNames(styles.animateFadeUp, styles.entering), + appearActive: classNames(styles.animateFadeUp, styles.entered), enter: classNames(styles.animateFadeUp, styles.entering), enterActive: classNames(styles.animateFadeUp, styles.entered), exit: classNames(styles.animateFadeUp, styles.exiting),