@atlaskit/modal-dialog 12.0.2

package/LICENSE

@@ -0,0 +1,13 @@
+Copyright 2019 Atlassian Pty Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.

package/README.md

@@ -0,0 +1,13 @@
+# Modal dialog
+
+A modal dialog displays content that requires user interaction, in a layer above the page.
+
+# Installation
+
+```sh
+yarn add @atlaskit/modal-dialog
+```
+
+## Usage
+
+Detailed docs and example usage can be found [here](https://atlassian.design/components/modal-dialog/).

package/__perf__/default.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+
+import Button from '@atlaskit/button/standard-button';
+
+import Modal, {
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+  ModalTransition,
+} from '../src';
+
+export default function Example() {
+  const [isOpen, setIsOpen] = useState(false);
+  const close = () => setIsOpen(false);
+  const open = () => setIsOpen(true);
+
+  return (
+    <>
+      <button onClick={open}>open modal</button>
+
+      <ModalTransition>
+        {isOpen && (
+          <Modal onClose={close}>
+            <ModalHeader>
+              <ModalTitle>Modal title</ModalTitle>
+            </ModalHeader>
+            <ModalBody>A simple Modal</ModalBody>
+            <ModalFooter>
+              <Button testId="primary" appearance="primary" onClick={close}>
+                Close
+              </Button>
+              <Button testId="secondary" appearance="subtle">
+                Secondary Action
+              </Button>
+            </ModalFooter>
+          </Modal>
+        )}
+      </ModalTransition>
+    </>
+  );
+}

package/__perf__/interactions.tsx

@@ -0,0 +1,136 @@
+import React, { useCallback, useState } from 'react';
+
+import { findByText, fireEvent } from '@testing-library/dom';
+import {
+  InteractionTaskArgs,
+  PublicInteractionTask,
+} from 'storybook-addon-performance';
+
+import Button from '@atlaskit/button/standard-button';
+
+import Modal, {
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+  ModalTransition,
+} from '../src';
+
+const modalText = (index: number) => `Hello, world (${index})`;
+const closeText = (index: number) => `Close (${index})`;
+const openText = (index: number) => `Open (${index})`;
+
+const InteractionPerformance = ({ index = 0 }: { index?: number }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => setIsOpen(false), []);
+
+  return (
+    <>
+      <button data-testid="open-button" onClick={open}>
+        {openText(index)}
+      </button>
+
+      <ModalTransition>
+        {isOpen && (
+          <Modal onClose={close}>
+            <ModalHeader>
+              <ModalTitle>Modal dialog</ModalTitle>
+            </ModalHeader>
+            <ModalBody>
+              {modalText(index)}
+              <InteractionPerformance index={index + 1} />
+            </ModalBody>
+            <ModalFooter>
+              <Button testId="primary" appearance="primary" onClick={close}>
+                {closeText(index)}
+              </Button>
+            </ModalFooter>
+          </Modal>
+        )}
+      </ModalTransition>
+    </>
+  );
+};
+
+const interactionTasks: PublicInteractionTask[] = [
+  {
+    name: 'Open first',
+    description: 'Opens the modal dialog',
+    run: async ({
+      container,
+      controls,
+    }: InteractionTaskArgs): Promise<void> => {
+      const openButton = await findByText(container, openText(0));
+
+      await controls.time(async () => {
+        fireEvent.click(openButton);
+        await findByText(document.body, modalText(0));
+      });
+    },
+  },
+  {
+    name: 'Close first',
+    description: 'Closes the modal dialog',
+    run: async ({
+      container,
+      controls,
+    }: InteractionTaskArgs): Promise<void> => {
+      const openButton = await findByText(container, openText(0));
+      fireEvent.click(openButton);
+
+      await controls.time(async () => {
+        const closeButton = await findByText(document.body, closeText(0));
+        fireEvent.click(closeButton);
+      });
+    },
+  },
+  {
+    name: 'Open second',
+    description: 'Opens the a second modal',
+    run: async ({
+      container,
+      controls,
+    }: InteractionTaskArgs): Promise<void> => {
+      const openButton = await findByText(container, openText(0));
+      fireEvent.click(openButton);
+      await findByText(document.body, modalText(0));
+      const secondOpenButton = await findByText(document.body, openText(1));
+
+      await controls.time(async () => {
+        fireEvent.click(secondOpenButton);
+        await findByText(document.body, modalText(1));
+      });
+    },
+  },
+  {
+    name: 'Close second',
+    description: 'Closes the a second modal',
+    run: async ({
+      container,
+      controls,
+    }: InteractionTaskArgs): Promise<void> => {
+      const openButton = await findByText(container, openText(0));
+      fireEvent.click(openButton);
+      await findByText(document.body, modalText(0));
+      const secondOpenButton = await findByText(document.body, openText(1));
+      fireEvent.click(secondOpenButton);
+      await findByText(document.body, modalText(1));
+
+      await controls.time(async () => {
+        const closeButton = await findByText(document.body, closeText(1));
+        fireEvent.click(closeButton);
+      });
+    },
+  },
+];
+
+InteractionPerformance.story = {
+  parameters: {
+    performance: {
+      interactions: interactionTasks,
+    },
+  },
+};
+
+export default InteractionPerformance;

package/__perf__/scroll.tsx

@@ -0,0 +1,98 @@
+import React, { useCallback, useRef, useState } from 'react';
+
+import { findByTestId, findByText, fireEvent } from '@testing-library/dom';
+import Lorem from 'react-lorem-component';
+import {
+  InteractionTaskArgs,
+  PublicInteractionTask,
+} from 'storybook-addon-performance';
+
+import Button from '@atlaskit/button/standard-button';
+
+import Modal, {
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+  ModalTransition,
+} from '../src';
+
+const openText = 'Open modal';
+const closeText = 'Close';
+const scrollToBottomText = 'Scroll to bottom';
+
+const ScrollPerformance = () => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const bottomRef = useRef<HTMLDivElement>(null);
+
+  const open = useCallback(() => setIsOpen(true), []);
+  const close = useCallback(() => setIsOpen(false), []);
+
+  const scrollToBottom = () =>
+    bottomRef.current && bottomRef.current.scrollIntoView(true);
+
+  return (
+    <>
+      <button data-testid="open" onClick={open}>
+        {openText}
+      </button>
+
+      <ModalTransition>
+        {isOpen && (
+          <Modal onClose={close} testId="modal">
+            <ModalHeader>
+              <ModalTitle>Modal dialog</ModalTitle>
+            </ModalHeader>
+            <ModalBody>
+              <Lorem count={10} />
+              <div ref={bottomRef} />
+            </ModalBody>
+            <ModalFooter>
+              <Button testId="close" appearance="primary" onClick={close}>
+                {closeText}
+              </Button>
+              <Button
+                testId="scroll-to-bottom"
+                appearance="subtle"
+                onClick={scrollToBottom}
+              >
+                {scrollToBottomText}
+              </Button>
+            </ModalFooter>
+          </Modal>
+        )}
+      </ModalTransition>
+    </>
+  );
+};
+
+const interactionTasks: PublicInteractionTask[] = [
+  {
+    name: 'Scroll to bottom',
+    description: 'Opens the modal dialog',
+    run: async ({
+      container,
+      controls,
+    }: InteractionTaskArgs): Promise<void> => {
+      const openButton = await findByText(container, openText);
+      fireEvent.click(openButton);
+
+      const content = await findByTestId(document.body, 'modal--scrollable');
+
+      await controls.time(async () => {
+        content.scrollTo(0, content.scrollHeight);
+      });
+    },
+  },
+];
+
+ScrollPerformance.story = {
+  parameters: {
+    performance: {
+      interactions: interactionTasks,
+    },
+  },
+};
+
+export default ScrollPerformance;

package/codemods/12.0.0-lite-mode.ts

@@ -0,0 +1,51 @@
+import { JSCodeshift } from 'jscodeshift';
+import { Collection } from 'jscodeshift/src/Collection';
+
+import {
+  createTransformer,
+  hasImportDeclaration,
+} from '@atlaskit/codemod-utils';
+
+import { handlePropSpread } from './migrations/handle-prop-spread';
+import { inlineWidthNamesDeclaration } from './migrations/inline-WidthNames-declaration';
+import { mapActionsProp } from './migrations/map-actions-prop';
+import { mapBodyFromProps } from './migrations/map-body-from-props';
+import { mapContainerFromProps } from './migrations/map-container-from-props';
+import { mapFooterFromProps } from './migrations/map-footer-from-props';
+import { mapHeaderFromProps } from './migrations/map-header-from-props';
+import { mapHeadingPropToModalTitle } from './migrations/map-heading-prop';
+import { removeAppearanceProp } from './migrations/remove-appearance-prop';
+import { removeComponentOverrideProps } from './migrations/remove-component-override-props';
+import { removeIsChromeless } from './migrations/remove-is-chromeless';
+import { renameAppearanceType } from './migrations/rename-appearance-type';
+import { renameInnerComponentPropTypes } from './migrations/rename-inner-component-prop-types';
+import { renameScrollBehaviorToShouldScrollInViewport } from './migrations/rename-scrollBehavior-to-shouldScrollInViewport';
+
+/**
+ * The order of these migrations matters!
+ * Mapping the container usage, along with removal of key props
+ * such as the 'components' and 'appearance' should come last
+ * after the other migrations.
+ */
+const transformer = createTransformer(
+  [
+    mapBodyFromProps,
+    mapHeaderFromProps,
+    mapFooterFromProps,
+    renameScrollBehaviorToShouldScrollInViewport,
+    renameAppearanceType,
+    renameInnerComponentPropTypes,
+    inlineWidthNamesDeclaration,
+    mapHeadingPropToModalTitle,
+    mapActionsProp,
+    mapContainerFromProps,
+    removeComponentOverrideProps,
+    removeAppearanceProp,
+    removeIsChromeless,
+    handlePropSpread,
+  ],
+  (j: JSCodeshift, source: Collection<Node>) =>
+    hasImportDeclaration(j, source, '@atlaskit/modal-dialog'),
+);
+
+export default transformer;

package/codemods/__tests__/12.0.0-lite-mode.test.ts

@@ -0,0 +1,493 @@
+import transformer from '../12.0.0-lite-mode';
+
+const defineInlineTest = require('jscodeshift/dist/testUtils').defineInlineTest;
+
+describe('12.0.0-lite-mode', () => {
+  ['tsx', 'babylon'].forEach((parser) => {
+    describe(`parser: ${parser}`, () => {
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+      import React, { useState } from 'react';
+
+      import ModalDialog from '@atlaskit/modal-dialog';
+
+      const Container = (props) => (<form>{props.children}</form>);
+      const Header = (props) => (<div><h1>{props.children}</h1></div>);
+      const Footer = (props) => (<div>{props.children}</div>);
+
+      export default function modalDialog() {
+        const [appearance, setAppearance] = useState(null);
+
+        return (
+          <ModalDialog
+            appearance={appearance}
+            scrollBehavior="outside"
+            onClose={noop}
+            components={{ Container }}
+            header={Header}
+            footer={Footer}>
+            <p>Content #1</p>
+            <p>Content #2</p>
+          </ModalDialog>
+        );
+      }
+      `,
+        `
+      /* TODO: (from codemod)\u0020
+      We have converted this file as best we could but you might still need
+      to manually complete migrating this usage of ModalDialog.
+
+      This file uses one or more of the following ModalDialog props: 'components', 'header',
+      'footer', 'body'. These props have been removed as part of moving to
+      a compositional API.
+
+      The render props that used to be exposed by the custom component APIs are
+      now accessible using the 'useModal' hook instead: 'testId', 'titleId', and 'onClose'.
+
+      We are also no longer exposing 'appearance' as render prop, so this needs to be
+      manually passed to your custom components.
+
+      If you are using the 'container' value of 'components' to wrap ModalDialog in something
+      other than a 'form', you'll need to add the style 'all: inherit;' for scrolling to function.
+
+      For a complete guide on customization using the new compositional API, refer to the docs at
+      https://atlassian.design/components/modal-dialog/examples. */
+      import React, { useState } from 'react';
+
+      import ModalDialog, { ModalBody } from "@atlaskit/modal-dialog";
+
+      const Container = (props) => (<form>{props.children}</form>);
+      const Header = (props) => (<div><h1>{props.children}</h1></div>);
+      const Footer = (props) => (<div>{props.children}</div>);
+
+      export default function modalDialog() {
+        const [appearance, setAppearance] = useState(null);
+
+        return (
+          <ModalDialog shouldScrollInViewport onClose={noop}>
+            {Container({
+              children: <>
+                {Header({
+                  appearance: appearance
+                })}
+                <ModalBody>
+                  <p>Content #1</p>
+                  <p>Content #2</p>
+                </ModalBody>
+                {Footer({
+                  appearance: appearance
+                })}
+              </>
+            })}
+          </ModalDialog>
+        );
+      }
+      `,
+        'should change custom usages in the appropriate order',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+      import React, { useState } from 'react';
+
+      import ModalDialog, {
+        AppearanceType,
+        HeaderComponentProps,
+        FooterComponentProps,
+        BodyComponentProps
+      } from '@atlaskit/modal-dialog';
+
+      const Container = (props) => (<form>{props.children}</form>);
+      const Header = (props: HeaderComponentProps) => (<div><h1>{props.children}</h1></div>);
+      const Footer = (props: FooterComponentProps) => (<div>{props.children}</div>);
+
+      export default function modalDialog() {
+        const [appearance, setAppearance] = useState<AppearanceType | null>(null);
+
+        return (
+          <ModalDialog
+            appearance={appearance}
+            scrollBehavior="outside"
+            onClose={noop}
+            components={{ Container }}
+            header={Header}
+            footer={Footer} />
+        );
+      }
+      `,
+        `
+      /* TODO: (from codemod)\u0020
+      We have converted this file as best we could but you might still need
+      to manually complete migrating this usage of ModalDialog.
+
+      This file uses one or more of the following ModalDialog props: 'components', 'header',
+      'footer', 'body'. These props have been removed as part of moving to
+      a compositional API.
+
+      The render props that used to be exposed by the custom component APIs are
+      now accessible using the 'useModal' hook instead: 'testId', 'titleId', and 'onClose'.
+
+      We are also no longer exposing 'appearance' as render prop, so this needs to be
+      manually passed to your custom components.
+
+      If you are using the 'container' value of 'components' to wrap ModalDialog in something
+      other than a 'form', you'll need to add the style 'all: inherit;' for scrolling to function.
+
+      For a complete guide on customization using the new compositional API, refer to the docs at
+      https://atlassian.design/components/modal-dialog/examples. */
+      import React, { useState } from 'react';
+
+      import ModalDialog, {
+        Appearance as AppearanceType,
+        ModalHeaderProps as HeaderComponentProps,
+        ModalFooterProps as FooterComponentProps,
+        ModalBodyProps as BodyComponentProps
+      } from '@atlaskit/modal-dialog';
+
+      const Container = (props) => (<form>{props.children}</form>);
+      const Header = (props: HeaderComponentProps) => (<div><h1>{props.children}</h1></div>);
+      const Footer = (props: FooterComponentProps) => (<div>{props.children}</div>);
+
+      export default function modalDialog() {
+        const [appearance, setAppearance] = useState<AppearanceType | null>(null);
+
+        return (
+          <ModalDialog shouldScrollInViewport onClose={noop}>
+            {Container({
+              children: <>
+                {Header({
+                  appearance: appearance
+                })}{Footer({
+                  appearance: appearance
+                })}
+              </>
+            })}
+          </ModalDialog>
+        );
+      }
+      `,
+        'should change custom usages for a self-closing modal without body',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+      import React, { useState } from 'react';
+
+      import ModalDialog, { ModalTransition } from '@atlaskit/modal-dialog';
+
+      export default function modalDialog(props) {
+        const [isOpen, toggleOpen] = useState<boolean>(false);
+        const { appearance, multiline, onClose } = props;
+
+        const actions = [
+          { text: 'Close', onClick: close, testId: 'primary' },
+          {
+            text: 'Secondary Action',
+            onClick: noop,
+            testId: 'secondary',
+          },
+        ];
+
+        return (
+          <ModalTransition>
+          {isOpen &&
+            <ModalDialog
+              appearance={appearance}
+              actions={actions}
+              onClose={onClose}
+              heading="Modal dialog"
+              isHeadingMultiline={multiline}
+              isChromeless={false}
+              scrollBehavior="outside"
+              {...props}
+            >
+              <div>Content #1</div>
+              <div>Content #2</div>
+            </ModalDialog>
+          }
+          </ModalTransition>
+        );
+      }
+      `,
+        `
+      /* TODO: (from codemod)\u0020
+      This file is spreading props on the ModalDialog component, so we could not
+      automatically convert this usage to the new API.
+
+      The following props have been deprecated as part of moving to a compositional API:
+
+      - 'heading' prop has been replaced by ModalHeader and ModalTitle components.
+      - 'actions' prop has been replaced by ModalFooter component, with Button components from @atlaskit/button.
+      - 'scrollBehavior' prop has been replaced by 'shouldScrollInViewport', where "outside" from the previous prop maps to true in the new prop.
+      - 'isHeadingMultiline' prop has been replaced by 'isMultiline' prop on the ModalTitle component.
+      - 'appearance' prop has been moved to the ModalTitle component. To achieve the feature parity, pass the 'appearance' prop directly to ModalTitle and Button components inside ModalFooter.
+
+      Refer to the docs for the new API at https://atlassian.design/components/modal-dialog/examples
+      to complete the migration and use the new composable components. */
+      import React, { useState } from 'react';
+
+      import Button from "@atlaskit/button/standard-button";
+      import ModalDialog, { ModalTransition, ModalBody, ModalTitle, ModalHeader, ModalFooter } from "@atlaskit/modal-dialog";
+
+      export default function modalDialog(props) {
+        const [isOpen, toggleOpen] = useState<boolean>(false);
+        const { appearance, multiline, onClose } = props;
+
+        const actions = [
+          { text: 'Close', onClick: close, testId: 'primary' },
+          {
+            text: 'Secondary Action',
+            onClick: noop,
+            testId: 'secondary',
+          },
+        ];
+
+        return (
+          <ModalTransition>
+          {isOpen &&
+            <ModalDialog onClose={onClose} shouldScrollInViewport {...props}>
+              <ModalHeader>
+                <ModalTitle appearance={appearance} isMultiline={multiline}>
+                  Modal dialog
+                </ModalTitle>
+              </ModalHeader>
+
+              <ModalBody>
+                <div>Content #1</div>
+                <div>Content #2</div>
+              </ModalBody>
+              <ModalFooter>
+                {actions.map((props, index) => <Button
+                  {...props}
+                  autoFocus={index === 0}
+                  appearance={index === 0 ? appearance || "primary" : "subtle"}>{props.text}</Button>).reverse()}
+              </ModalFooter>
+            </ModalDialog>
+          }
+          </ModalTransition>
+        );
+      }
+      `,
+        'should change default usages for modal dialog',
+      );
+
+      defineInlineTest(
+        { default: transformer, parser },
+        {},
+        `
+      import React, { useState } from 'react';
+
+      import ModalDialog, { ModalTransition, ModalBody } from '@atlaskit/modal-dialog';
+
+      import { getModalDialogActions } from './utils';
+
+      const Container = (props) => (<form>{props.children}</form>);
+      const CustomBody = (props) => (<div><ModalBody>{props.children}</ModalBody></div>);
+
+      export default function modalDialog(props) {
+        const [isOpen, toggleOpen] = useState<boolean>(false);
+        const { appearance, onClose } = props;
+
+        return (
+          <ModalTransition>
+          {isOpen &&
+            <ModalDialog
+              components={{ Container, Body: CustomBody }}
+              actions={getModalDialogActions(onClose)}
+              onClose={onClose}
+              heading="Modal dialog"
+              isChromeless={true}
+              scrollBehavior="outside"
+            >
+              <div>Content #1</div>
+              <div>Content #2</div>
+            </ModalDialog>
+          }
+          </ModalTransition>
+        );
+      }
+      `,
+        `
+      /* TODO: (from codemod)\u0020
+      We have converted this file as best we could but you might still need
+      to manually complete migrating this usage of ModalDialog.
+
+      This file uses one or more of the following ModalDialog props: 'components', 'header',
+      'footer', 'body'. These props have been removed as part of moving to
+      a compositional API.
+
+      The render props that used to be exposed by the custom component APIs are
+      now accessible using the 'useModal' hook instead: 'testId', 'titleId', and 'onClose'.
+
+      We are also no longer exposing 'appearance' as render prop, so this needs to be
+      manually passed to your custom components.
+
+      If you are using the 'container' value of 'components' to wrap ModalDialog in something
+      other than a 'form', you'll need to add the style 'all: inherit;' for scrolling to function.
+
+      For a complete guide on customization using the new compositional API, refer to the docs at
+      https://atlassian.design/components/modal-dialog/examples. */
+      import React, { useState } from 'react';
+
+      import Button from "@atlaskit/button/standard-button";
+      import ModalDialog, { ModalTransition, ModalBody, ModalTitle, ModalHeader, ModalFooter } from "@atlaskit/modal-dialog";
+
+      import { getModalDialogActions } from './utils';
+
+      const Container = (props) => (<form>{props.children}</form>);
+      const CustomBody = (props) => (<div><ModalBody>{props.children}</ModalBody></div>);
+
+      export default function modalDialog(props) {
+        const [isOpen, toggleOpen] = useState<boolean>(false);
+        const { appearance, onClose } = props;
+
+        return (
+          <ModalTransition>
+          {isOpen &&
+            /* TODO: (from codemod)\u0020
+            ModalDialog has a new compositional API and the 'isChromeless' prop is no longer supported.
+            To have the functionality of the 'isChromeless' prop, you can choose to not use any of the default exports (ModalBody, ModalHeader and ModalFooter).
+            The only other change is that ModalDialog's children should have a border radius of 3px to match the box shadow.
+            For more information, check the documentation at https://atlassian.design/components/modal-dialog/examples */
+            <ModalDialog onClose={onClose} shouldScrollInViewport>
+              {Container({
+                children: <>
+                  <ModalHeader>
+                    <ModalTitle>
+                      Modal dialog
+                    </ModalTitle>
+                  </ModalHeader>
+
+                  {CustomBody({
+                    children: <>
+                      <div>Content #1</div>
+                      <div>Content #2</div>
+                    </>
+                  })}
+                  <ModalFooter>
+                    {getModalDialogActions(onClose).map((props, index) => <Button
+                      {...props}
+                      appearance={index === 0 ? props.appearance || "primary" : props.appearance || "subtle"}>{props.text}</Button>)}
+                  </ModalFooter>
+                </>
+              })}
+            </ModalDialog>
+          }
+          </ModalTransition>
+        );
+      }
+      `,
+        'should change mixed usages (custom + default) for modal dialog',
+      );
+    });
+  });
+
+  // Only support ts for this case
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React, { useState } from 'react';
+
+    import ModalDialog, {
+      AppearanceType,
+      HeaderComponentProps,
+      FooterComponentProps,
+    } from '@atlaskit/modal-dialog';
+
+    import { WidthNames } from '@atlaskit/modal-dialog/shared-variables';
+
+    interface CustomHeaderProps extends HeaderComponentProps {
+      size?: WidthNames;
+    }
+
+    const Container = (props) => (<form>{props.children}</form>);
+    const Header = (props: CustomHeaderProps) => (<div><h1>{props.children}</h1></div>);
+    const Footer = (props: FooterComponentProps) => (<div>{props.children}</div>);
+
+    export default function modalDialog() {
+      const [appearance, setAppearance] = useState<AppearanceType | null>(null);
+
+      return (
+        <ModalDialog
+          appearance={appearance}
+          scrollBehavior="outside"
+          onClose={noop}
+          components={{ Container }}
+          header={Header}
+          footer={Footer}>
+          <p>Content #1</p>
+          <p>Content #2</p>
+        </ModalDialog>
+      );
+    }
+    `,
+    `
+    /* TODO: (from codemod)\u0020
+    We have converted this file as best we could but you might still need
+    to manually complete migrating this usage of ModalDialog.
+
+    This file uses one or more of the following ModalDialog props: 'components', 'header',
+    'footer', 'body'. These props have been removed as part of moving to
+    a compositional API.
+
+    The render props that used to be exposed by the custom component APIs are
+    now accessible using the 'useModal' hook instead: 'testId', 'titleId', and 'onClose'.
+
+    We are also no longer exposing 'appearance' as render prop, so this needs to be
+    manually passed to your custom components.
+
+    If you are using the 'container' value of 'components' to wrap ModalDialog in something
+    other than a 'form', you'll need to add the style 'all: inherit;' for scrolling to function.
+
+    For a complete guide on customization using the new compositional API, refer to the docs at
+    https://atlassian.design/components/modal-dialog/examples. */
+    import React, { useState } from 'react';
+
+    import ModalDialog, {
+      Appearance as AppearanceType,
+      ModalHeaderProps as HeaderComponentProps,
+      ModalFooterProps as FooterComponentProps,
+      ModalBody,
+    } from "@atlaskit/modal-dialog";
+
+    interface CustomHeaderProps extends HeaderComponentProps {
+      size?: "small" | "medium" | "large" | "x-large";
+    }
+
+    const Container = (props) => (<form>{props.children}</form>);
+    const Header = (props: CustomHeaderProps) => (<div><h1>{props.children}</h1></div>);
+    const Footer = (props: FooterComponentProps) => (<div>{props.children}</div>);
+
+    export default function modalDialog() {
+      const [appearance, setAppearance] = useState<AppearanceType | null>(null);
+
+      return (
+        <ModalDialog shouldScrollInViewport onClose={noop}>
+          {Container({
+            children: <>
+              {Header({
+                appearance: appearance
+              })}
+              <ModalBody>
+                <p>Content #1</p>
+                <p>Content #2</p>
+              </ModalBody>
+              {Footer({
+                appearance: appearance
+              })}
+            </>
+          })}
+        </ModalDialog>
+      );
+    }
+    `,
+    'should change custom usages and types in the appropriate order',
+  );
+});