[Modal] Fixed animation issue present in async Modal rendering

[mitchmaps]

Why are these changes introduced?

Fixes #1897

What issue is this pull request addressing?

The normal fade up animation present in the modal component currently doesn't appear when setting the component directly to true.

What is this pull request doing?

This PR addresses this by appending additional appear animation classes to the component so its consistent throughout. S/o to @dleroux for suggesting this solution in the issue 🙏

Click to view collapsed before and after gifs

Before

After

If you have any questions reach out to @ mitchell.soares on Slack!

[chloerice]

Thanks for taking this on, @mitchmaps!! 🎩 👀 👍Add a note to UNRELEASED.md &&

[loic-d]

I would probably just say 'when being mounted with open:true directly' or something like that?
Rendering the modal asynchronously using react-async is one of the scenario where it's mounted directly with open:true but there are others.

[mitchmaps]

Great catch, thanks!

[loic-d]

❤️

[loic-d]

🎩 💯

I noticed that we have the same transition issue when closing the Modal using the open && <Modal open ... /> pattern.

import React, {useState} from 'react';
import {Page, Modal, Button} from '../src';

export function Playground() {
  const [active, setActive] = useState(false);
  const handleChange = () => {
    setActive(!active);
  };

  return (
    <Page title="Playground">
      <div style={{height: '500px'}}>
        <Button onClick={handleChange}>Open</Button>
        {active && (
          <Modal
            open
            onClose={handleChange}
            title="Reach more shoppers with Instagram product tags"
            primaryAction={{
              content: 'Add Instagram',
              onAction: handleChange,
            }}
            secondaryActions={[
              {
                content: 'Learn more',
                onAction: handleChange,
              },
            ]}
          >
            <Modal.Section>
              <p>
                Use Instagram posts to share your products with millions of
                people. Let shoppers buy from your store without leaving
                Instagram.
              </p>
            </Modal.Section>
          </Modal>
        )}
      </div>
    </Page>
  );
}

I would still 🚢 this PR in the meantime 👍

[mitchmaps]

Talked to @dleroux about the lack of a matching exit animation brought up by @loic-d above. We agreed to just ship this one that fixes the opening animation error and open a second issue addressing the closing one. 🚢

[ghost]

🎉 Thanks for your contribution to Polaris React!