diff --git a/packages/react-core/src/components/Modal/examples/Modal.md b/packages/react-core/src/components/Modal/examples/Modal.md
index e4e167d8fbd..5b293073272 100644
--- a/packages/react-core/src/components/Modal/examples/Modal.md
+++ b/packages/react-core/src/components/Modal/examples/Modal.md
@@ -15,864 +15,82 @@ import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 ### Basic
 
-```js
-import React from 'react';
-import { Modal, Button } from '@patternfly/react-core';
-
-class SimpleModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModalOpen: false
-    };
-    this.handleModalToggle = () => {
-      this.setState(({ isModalOpen }) => ({
-        isModalOpen: !isModalOpen
-      }));
-    };
-  }
-
-  render() {
-    const { isModalOpen } = this.state;
-
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
-          Show modal
-        </Button>
-        <Modal
-          title="Simple modal header"
-          isOpen={isModalOpen}
-          onClose={this.handleModalToggle}
-          actions={[
-            <Button key="confirm" variant="primary" onClick={this.handleModalToggle}>
-              Confirm
-            </Button>,
-            <Button key="cancel" variant="link" onClick={this.handleModalToggle}>
-              Cancel
-            </Button>
-          ]}
-        >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
-        </Modal>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./ModalBasic.tsx"
 ```
 
 ### With description
 
-```js
-import React from 'react';
-import { Modal, Button } from '@patternfly/react-core';
-
-class SimpleModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModalOpen: false
-    };
-    this.handleModalToggle = () => {
-      this.setState(({ isModalOpen }) => ({
-        isModalOpen: !isModalOpen
-      }));
-    };
-  }
-
-  render() {
-    const { isModalOpen } = this.state;
-
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
-          Show modal
-        </Button>
-        <Modal
-          aria-label="My modal context"
-          title="Modal header with description"
-          isOpen={isModalOpen}
-          onClose={this.handleModalToggle}
-          description="A description is used when you want to provide more info about the modal than the title is able to describe. The content in the description is static and will not scroll with the rest of the modal body."
-          actions={[
-            <Button key="confirm" variant="primary" onClick={this.handleModalToggle}>
-              Confirm
-            </Button>,
-            <Button key="cancel" variant="link" onClick={this.handleModalToggle}>
-              Cancel
-            </Button>
-          ]}
-        >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
-        </Modal>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./ModalWithDescription.tsx"
 ```
 
 ### Top aligned
 
-```js
-import React from 'react';
-import { Modal, ModalVariant, Button } from '@patternfly/react-core';
-
-class TopModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModalOpen: false
-    };
-    this.handleModalToggle = () => {
-      this.setState(({ isModalOpen }) => ({
-        isModalOpen: !isModalOpen
-      }));
-    };
-  }
-
-  render() {
-    const { isModalOpen } = this.state;
-
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
-          Show top aligned modal
-        </Button>
-        <Modal
-          position="top"
-          title="Top modal header"
-          isOpen={isModalOpen}
-          onClose={this.handleModalToggle}
-          actions={[
-            <Button key="confirm" variant="primary" onClick={this.handleModalToggle}>
-              Confirm
-            </Button>,
-            <Button key="cancel" variant="link" onClick={this.handleModalToggle}>
-              Cancel
-            </Button>
-          ]}
-        >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
-        </Modal>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./ModalTopAligned.tsx"
 ```
 
 ### Small
 
-```js
-import React from 'react';
-import { Modal, ModalVariant, Button } from '@patternfly/react-core';
-
-class SmallModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModalOpen: false
-    };
-    this.handleModalToggle = () => {
-      this.setState(({ isModalOpen }) => ({
-        isModalOpen: !isModalOpen
-      }));
-    };
-  }
-
-  render() {
-    const { isModalOpen } = this.state;
-
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
-          Show small modal
-        </Button>
-        <Modal
-          variant={ModalVariant.small}
-          title="Small modal header"
-          isOpen={isModalOpen}
-          onClose={this.handleModalToggle}
-          actions={[
-            <Button key="confirm" variant="primary" onClick={this.handleModalToggle}>
-              Confirm
-            </Button>,
-            <Button key="cancel" variant="link" onClick={this.handleModalToggle}>
-              Cancel
-            </Button>
-          ]}
-        >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
-        </Modal>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./ModalSmall.tsx"
 ```
 
 ### Medium
 
-```js
-import React from 'react';
-import { Modal, ModalVariant, Button } from '@patternfly/react-core';
-
-class MediumModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModalOpen: false
-    };
-    this.handleModalToggle = () => {
-      this.setState(({ isModalOpen }) => ({
-        isModalOpen: !isModalOpen
-      }));
-    };
-  }
-
-  render() {
-    const { isModalOpen } = this.state;
-
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
-          Show medium modal
-        </Button>
-        <Modal
-          variant={ModalVariant.medium}
-          title="Medium modal header"
-          isOpen={isModalOpen}
-          onClose={this.handleModalToggle}
-          actions={[
-            <Button key="confirm" variant="primary" onClick={this.handleModalToggle}>
-              Confirm
-            </Button>,
-            <Button key="cancel" variant="link" onClick={this.handleModalToggle}>
-              Cancel
-            </Button>
-          ]}
-        >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
-        </Modal>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./ModalMedium.tsx"
 ```
 
 ### Large
 
-```js
-import React from 'react';
-import { Modal, ModalVariant, Button } from '@patternfly/react-core';
-
-class LargeModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModalOpen: false
-    };
-    this.handleModalToggle = () => {
-      this.setState(({ isModalOpen }) => ({
-        isModalOpen: !isModalOpen
-      }));
-    };
-  }
-
-  render() {
-    const { isModalOpen } = this.state;
-
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
-          Show large modal
-        </Button>
-        <Modal
-          variant={ModalVariant.large}
-          title="Large modal header"
-          isOpen={isModalOpen}
-          onClose={this.handleModalToggle}
-          actions={[
-            <Button key="confirm" variant="primary" onClick={this.handleModalToggle}>
-              Confirm
-            </Button>,
-            <Button key="cancel" variant="link" onClick={this.handleModalToggle}>
-              Cancel
-            </Button>
-          ]}
-        >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
-        </Modal>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./ModalLarge.tsx"
 ```
 
-### Width
-
-```js
-import React from 'react';
-import { Modal, Button } from '@patternfly/react-core';
-
-class WidthModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModalOpen: false
-    };
-    this.handleModalToggle = () => {
-      this.setState(({ isModalOpen }) => ({
-        isModalOpen: !isModalOpen
-      }));
-    };
-  }
-
-  render() {
-    const { isModalOpen } = this.state;
-
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
-          Show 50% width modal
-        </Button>
-        <Modal
-          width={'50%'}
-          title="Modal header for set width example"
-          isOpen={isModalOpen}
-          onClose={this.handleModalToggle}
-          actions={[
-            <Button key="confirm" variant="primary" onClick={this.handleModalToggle}>
-              Confirm
-            </Button>,
-            <Button key="cancel" variant="link" onClick={this.handleModalToggle}>
-              Cancel
-            </Button>
-          ]}
-        >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
-        </Modal>
-      </React.Fragment>
-    );
-  }
-}
+### Custom width
+
+```ts file="./ModalCustomWidth.tsx"
 ```
 
 ### Custom header and footer
 
-```js
-import React from 'react';
-import { Modal, ModalVariant, Button, Title, TitleSizes } from '@patternfly/react-core';
-import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
-
-class CustomHeaderFooter extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModalOpen: false
-    };
-    this.handleModalToggle = () => {
-      this.setState(({ isModalOpen }) => ({
-        isModalOpen: !isModalOpen
-      }));
-    };
-  }
-
-  render() {
-    const { isModalOpen } = this.state;
-
-    const header = (
-      <React.Fragment>
-        <Title id="custom-header-label" headingLevel="h1" size={TitleSizes['2xl']}>
-          With custom modal header/footer
-        </Title>
-        <p className="pf-u-pt-sm">Allows for custom content in the header and/or footer by passing components.</p>
-      </React.Fragment>
-    );
-
-    const footer = (
-      <Title headingLevel="h4" size={TitleSizes.md}>
-        <WarningTriangleIcon />
-        <span className="pf-u-pl-sm">Custom modal footer.</span>
-      </Title>
-    );
-
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
-          Show custom header/footer modal
-        </Button>
-        <Modal
-          variant={ModalVariant.large}
-          isOpen={isModalOpen}
-          header={header}
-          aria-label="My dialog"
-          aria-labelledby="custom-header-label"
-          aria-describedby="custom-header-description"
-          onClose={this.handleModalToggle}
-          footer={footer}
-        >
-          <span id="custom-header-description">
-            When static text describing the modal is available, it can be wrapped with an ID referring to the modal's
-            aria-describedby value.
-          </span>
-          <br />
-          <br />
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-          aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-          occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </Modal>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./ModalCustomHeaderFooter.tsx"
 ```
 
-### No header
-
-```js
-import React from 'react';
-import { Modal, ModalVariant, Button } from '@patternfly/react-core';
-
-class NoHeader extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModalOpen: false
-    };
-    this.handleModalToggle = () => {
-      this.setState(({ isModalOpen }) => ({
-        isModalOpen: !isModalOpen
-      }));
-    };
-  }
-
-  render() {
-    const { isModalOpen } = this.state;
-    const footer = <React.Fragment>Modal Footer</React.Fragment>;
-
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
-          Show no header modal
-        </Button>
-        <Modal
-          variant={ModalVariant.large}
-          isOpen={isModalOpen}
-          aria-label="No header example"
-          showClose={true}
-          aria-describedby="no-header-example"
-          onClose={this.handleModalToggle}
-          footer={footer}
-        >
-          <span id="no-header-example">
-            When static text describing the modal is available, it can be wrapped with an ID referring to the modal's
-            aria-describedby value.
-          </span>
-          <br />
-          <br />
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-          aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-          occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </Modal>
-      </React.Fragment>
-    );
-  }
-}
-```
+### No header or footer
 
-### Custom Icon
+```ts file="./ModalNoHeaderFooter.tsx"
+```
 
-```js
-import React from 'react';
-import { Modal, Button } from '@patternfly/react-core';
-import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
+### Title icon
 
-class NoHeader extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModalOpen: false
-    };
-    this.handleModalToggle = () => {
-      this.setState(({ isModalOpen }) => ({
-        isModalOpen: !isModalOpen
-      }));
-    };
-  }
-
-  render() {
-    const { isModalOpen } = this.state;
-
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
-          Show icon modal
-        </Button>
-        <Modal
-          isOpen={isModalOpen}
-          aria-label="Modal custom icon example"
-          title="Modal Header"
-          titleIconVariant={BullhornIcon}
-          showClose={true}
-          aria-describedby="no-header-example"
-          onClose={this.handleModalToggle}
-        >
-          <span id="no-header-example">
-            When static text describing the modal is available, it can be wrapped with an ID referring to the modal's
-            aria-describedby value.
-          </span>
-          <br />
-          <br />
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-          aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-          occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </Modal>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./ModalTitleIcon.tsx"
 ```
 
-### Warning Alert
-
-```js
-import React from 'react';
-import { Modal, Button } from '@patternfly/react-core';
-
-class NoHeader extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModalOpen: false
-    };
-    this.handleModalToggle = () => {
-      this.setState(({ isModalOpen }) => ({
-        isModalOpen: !isModalOpen
-      }));
-    };
-  }
-
-  render() {
-    const { isModalOpen } = this.state;
-
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
-          Show icon modal
-        </Button>
-        <Modal
-          isOpen={isModalOpen}
-          aria-label="Modal warning example"
-          title="Modal Header"
-          titleIconVariant="warning"
-          showClose={true}
-          aria-describedby="no-header-example"
-          onClose={this.handleModalToggle}
-        >
-          <span id="no-header-example">
-            When static text describing the modal is available, it can be wrapped with an ID referring to the modal's
-            aria-describedby value.
-          </span>
-          <br />
-          <br />
-          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
-          aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-          occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
-        </Modal>
-      </React.Fragment>
-    );
-  }
-}
+### Custom title icon
+
+```ts file="./ModalCustomTitleIcon.tsx"
 ```
 
 ### With wizard
 
-```js
-import React from 'react';
-import { Modal, Button, Wizard } from '@patternfly/react-core';
-
-class WithWizard extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModalOpen: false
-    };
-    this.handleModalToggle = () => {
-      this.setState(({ isModalOpen }) => ({
-        isModalOpen: !isModalOpen
-      }));
-    };
-  }
-
-  render() {
-    const { isModalOpen } = this.state;
-
-    const steps = [
-      { name: 'Step 1', component: <p>Step 1</p> },
-      { name: 'Step 2', component: <p>Step 2</p> },
-      { name: 'Step 3', component: <p>Step 3</p> },
-      { name: 'Step 4', component: <p>Step 4</p> },
-      { name: 'Review', component: <p>Review Step</p>, nextButtonText: 'Finish' }
-    ];
-
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
-          Show modal
-        </Button>
-        <Modal
-          isOpen={isModalOpen}
-          variant={ModalVariant.large}
-          showClose={false}
-          onClose={this.handleModalToggle}
-          hasNoBodyWrapper
-          aria-describedby="wiz-modal-example-description"
-          aria-labelledby="wiz-modal-example-title"
-        >
-          <Wizard
-            titleId="wiz-modal-example-title"
-            descriptionId="wiz-modal-example-description"
-            title="Simple Wizard"
-            description="Simple Wizard Description"
-            steps={steps}
-            onClose={this.handleModalToggle}
-            height={400}
-          />
-        </Modal>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./ModalWithWizard.tsx"
 ```
 
 ### With dropdown
 
-```js
-import React from 'react';
-import { Modal, Button, Dropdown, DropdownToggle, DropdownItem, KebabToggle } from '@patternfly/react-core';
-import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
-
-class WithDropdown extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModalOpen: false,
-      isDropdownOpen: false
-    };
-    this.handleModalToggle = () => {
-      const { isModalOpen } = this.state;
-      this.setState({
-        isModalOpen: !isModalOpen,
-        isDropdownOpen: false
-      });
-    };
-    this.onToggle = isDropdownOpen => {
-      this.setState({
-        isDropdownOpen
-      });
-    };
-    this.onSelect = event => {
-      this.setState({
-        isDropdownOpen: !this.state.isDropdownOpen
-      });
-      this.onFocus();
-    };
-    this.onFocus = () => {
-      const element = document.getElementById('toggle-id-menu-document-body');
-      element.focus();
-    };
-    this.onEscapePress = () => {
-      const { isDropdownOpen } = this.state;
-      if (isDropdownOpen) {
-        this.setState(
-          {
-            isDropdownOpen: !isDropdownOpen
-          },
-          () => {
-            this.onFocus();
-          }
-        );
-      } else {
-        this.handleModalToggle();
-      }
-    };
-  }
-
-  render() {
-    const { isModalOpen, isDropdownOpen } = this.state;
-
-    const dropdownItems = [
-      <DropdownItem key="link">Link</DropdownItem>,
-      <DropdownItem key="action" component="button">
-        Action
-      </DropdownItem>,
-      <DropdownItem key="disabled link" isDisabled>
-        Disabled Link
-      </DropdownItem>,
-      <DropdownItem key="disabled action" isDisabled component="button">
-        Disabled Action
-      </DropdownItem>,
-      <DropdownItem key="separated link">Separated Link</DropdownItem>,
-      <DropdownItem key="separated action" component="button">
-        Separated Action
-      </DropdownItem>
-    ];
-
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
-          Show modal
-        </Button>
-        <Modal
-          title="Modal with dropdown"
-          variant={ModalVariant.small}
-          isOpen={isModalOpen}
-          onClose={this.handleModalToggle}
-          actions={[
-            <Button key="confirm" variant="primary" onClick={this.handleModalToggle}>
-              Confirm
-            </Button>,
-            <Button key="cancel" variant="link" onClick={this.handleModalToggle}>
-              Cancel
-            </Button>
-          ]}
-          onEscapePress={this.onEscapePress}
-        >
-          <div>
-            Set the dropdown <strong>menuAppendTo</strong> prop to <em>parent</em> in order to allow the dropdown menu
-            break out of the modal container. You'll also want to handle closing of the modal yourself, by listening to
-            the <strong>onEscapePress</strong> callback on the Modal component, so you can close the Dropdown first if
-            it's open.
-          </div>
-          <div>
-            <Dropdown
-              onSelect={this.onSelect}
-              toggle={
-                <DropdownToggle
-                  id="toggle-id-menu-document-body"
-                  onToggle={this.onToggle}
-                  toggleIndicator={CaretDownIcon}
-                >
-                  Dropdown with a menu that can break out
-                </DropdownToggle>
-              }
-              isOpen={isDropdownOpen}
-              dropdownItems={dropdownItems}
-              menuAppendTo="parent"
-            />
-          </div>
-        </Modal>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./ModalWithDropdown.tsx"
 ```
 
 ### With help
 
-```js
-import React from 'react';
-import { Modal, Button, Popover } from '@patternfly/react-core';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-
-class HelpModal extends React.Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      isModalOpen: false
-    };
-    this.handleModalToggle = () => {
-      this.setState(({ isModalOpen }) => ({
-        isModalOpen: !isModalOpen
-      }));
-    };
-  }
-
-  render() {
-    const { isModalOpen } = this.state;
-
-    return (
-      <React.Fragment>
-        <Button variant="primary" onClick={this.handleModalToggle}>
-          Show modal
-        </Button>
-        <Modal
-          title="Simple modal header"
-          help={
-            <Popover
-              headerContent={<div>Help Popover</div>}
-              bodyContent={
-                <div>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla
-                  turpis.
-                </div>
-              }
-              footerContent="Popover Footer"
-            >
-              <Button variant="plain" aria-label="Help">
-                <HelpIcon />
-              </Button>
-            </Popover>
-          }
-          isOpen={isModalOpen}
-          onClose={this.handleModalToggle}
-          actions={[
-            <Button key="confirm" variant="primary" onClick={this.handleModalToggle}>
-              Confirm
-            </Button>,
-            <Button key="cancel" variant="link" onClick={this.handleModalToggle}>
-              Cancel
-            </Button>
-          ]}
-        >
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
-          est laborum.
-        </Modal>
-      </React.Fragment>
-    );
-  }
-}
+```ts file="./ModalWithHelp.tsx"
 ```
 
 ### With form
 
 ```ts file="ModalWithForm.tsx"
-
 ```
 
 ### With overflowing content
 
-If the content that you're passing to the modal is likely to overflow the modal content area, pass tabIndex={0} to the modal to enable keyboard accessible scrolling.
+If the content that you're passing to the modal is likely to overflow the modal content area, pass `tabIndex={0}` to the modal to enable keyboard accessible scrolling.
 
 ```ts file="ModalWithOverflowingContent.tsx"
 ```
diff --git a/packages/react-core/src/components/Modal/examples/ModalBasic.tsx b/packages/react-core/src/components/Modal/examples/ModalBasic.tsx
new file mode 100644
index 00000000000..3f584aff168
--- /dev/null
+++ b/packages/react-core/src/components/Modal/examples/ModalBasic.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Modal, Button } from '@patternfly/react-core';
+
+export const ModalBasic: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show basic modal
+      </Button>
+      <Modal
+        title="Basic modal"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/Modal/examples/ModalCustomHeaderFooter.tsx b/packages/react-core/src/components/Modal/examples/ModalCustomHeaderFooter.tsx
new file mode 100644
index 00000000000..d222df5d3c6
--- /dev/null
+++ b/packages/react-core/src/components/Modal/examples/ModalCustomHeaderFooter.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import { Modal, ModalVariant, Button, Title, TitleSizes } from '@patternfly/react-core';
+import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
+
+export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  const header = (
+    <React.Fragment>
+      <Title id="modal-custom-header-label" headingLevel="h1" size={TitleSizes['2xl']}>
+        Custom header/footer modal
+      </Title>
+      <p className="pf-u-pt-sm">Allows for custom content in the header and/or footer by passing components.</p>
+    </React.Fragment>
+  );
+
+  const footer = (
+    <Title headingLevel="h4" size={TitleSizes.md}>
+      <WarningTriangleIcon />
+      <span className="pf-u-pl-sm">Custom modal footer.</span>
+    </Title>
+  );
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show custom header/footer modal
+      </Button>
+      <Modal
+        variant={ModalVariant.large}
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        header={header}
+        aria-labelledby="modal-custom-header-label"
+        aria-describedby="modal-custom-header-description"
+        footer={footer}
+      >
+        <span id="modal-custom-header-description">
+          When static text describing the modal is available outside of the modal header, it can be given an ID that is
+          then passed in as the modal's aria-describedby value.
+        </span>
+        <br />
+        <br />
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/Modal/examples/ModalCustomTitleIcon.tsx b/packages/react-core/src/components/Modal/examples/ModalCustomTitleIcon.tsx
new file mode 100644
index 00000000000..1d1784da2d7
--- /dev/null
+++ b/packages/react-core/src/components/Modal/examples/ModalCustomTitleIcon.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+import { Modal, Button } from '@patternfly/react-core';
+import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
+
+export const ModalCustomTitleIcon: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show custom title icon modal
+      </Button>
+      <Modal
+        title="Custom title icon modal"
+        titleIconVariant={BullhornIcon}
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-describedby="modal-custom-icon-description"
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        <span id="modal-custom-icon-description">
+          When static text describing the modal is available outside of the modal header, it can be given an ID that is
+          then passed in as the modal's aria-describedby value.
+        </span>
+        <br />
+        <br />
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/Modal/examples/ModalCustomWidth.tsx b/packages/react-core/src/components/Modal/examples/ModalCustomWidth.tsx
new file mode 100644
index 00000000000..1b554587039
--- /dev/null
+++ b/packages/react-core/src/components/Modal/examples/ModalCustomWidth.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Modal, Button } from '@patternfly/react-core';
+
+export const ModalCustomWidth: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show custom width modal
+      </Button>
+      <Modal
+        width="50%"
+        title="Custom width modal"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/Modal/examples/ModalLarge.tsx b/packages/react-core/src/components/Modal/examples/ModalLarge.tsx
new file mode 100644
index 00000000000..624642c829a
--- /dev/null
+++ b/packages/react-core/src/components/Modal/examples/ModalLarge.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Modal, ModalVariant, Button } from '@patternfly/react-core';
+
+export const ModalLarge: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show large modal
+      </Button>
+      <Modal
+        variant={ModalVariant.large}
+        title="Large modal"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/Modal/examples/ModalMedium.tsx b/packages/react-core/src/components/Modal/examples/ModalMedium.tsx
new file mode 100644
index 00000000000..b2a96d61fcb
--- /dev/null
+++ b/packages/react-core/src/components/Modal/examples/ModalMedium.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Modal, ModalVariant, Button } from '@patternfly/react-core';
+
+export const ModalMedium: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show medium modal
+      </Button>
+      <Modal
+        variant={ModalVariant.medium}
+        title="Medium modal"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/Modal/examples/ModalNoHeaderFooter.tsx b/packages/react-core/src/components/Modal/examples/ModalNoHeaderFooter.tsx
new file mode 100644
index 00000000000..f82b2df4e35
--- /dev/null
+++ b/packages/react-core/src/components/Modal/examples/ModalNoHeaderFooter.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import { Modal, ModalVariant, Button } from '@patternfly/react-core';
+
+export const ModalNoHeaderFooter: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show no header/footer modal
+      </Button>
+      <Modal
+        variant={ModalVariant.large}
+        isOpen={isModalOpen}
+        aria-label="No header/footer modal"
+        aria-describedby="modal-no-header-description"
+        onClose={handleModalToggle}
+      >
+        <span id="modal-no-header-description">
+          When static text describing the modal is available outside of the modal header, it can be given an ID that is
+          then passed in as the modal's aria-describedby value.
+        </span>
+        <br />
+        <br />
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/Modal/examples/ModalSmall.tsx b/packages/react-core/src/components/Modal/examples/ModalSmall.tsx
new file mode 100644
index 00000000000..0005e0ea141
--- /dev/null
+++ b/packages/react-core/src/components/Modal/examples/ModalSmall.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Modal, ModalVariant, Button } from '@patternfly/react-core';
+
+export const ModalSmall: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show small modal
+      </Button>
+      <Modal
+        variant={ModalVariant.small}
+        title="Small modal"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/Modal/examples/ModalTitleIcon.tsx b/packages/react-core/src/components/Modal/examples/ModalTitleIcon.tsx
new file mode 100644
index 00000000000..43026d48c0e
--- /dev/null
+++ b/packages/react-core/src/components/Modal/examples/ModalTitleIcon.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Modal, Button } from '@patternfly/react-core';
+
+export const ModalTitleIcon: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show title icon modal
+      </Button>
+      <Modal
+        title="Title icon modal"
+        titleIconVariant="warning"
+        isOpen={isModalOpen}
+        aria-describedby="modal-title-icon-description"
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        <span id="modal-title-icon-description">
+          When static text describing the modal is available outside of the modal header, it can be given an ID that is
+          then passed in as the modal's aria-describedby value.
+        </span>
+        <br />
+        <br />
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/Modal/examples/ModalTopAligned.tsx b/packages/react-core/src/components/Modal/examples/ModalTopAligned.tsx
new file mode 100644
index 00000000000..1ff515a137b
--- /dev/null
+++ b/packages/react-core/src/components/Modal/examples/ModalTopAligned.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Modal, Button } from '@patternfly/react-core';
+
+export const ModalTopAligned: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show top aligned modal
+      </Button>
+      <Modal
+        position="top"
+        title="Top aligned modal"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/Modal/examples/ModalWithDescription.tsx b/packages/react-core/src/components/Modal/examples/ModalWithDescription.tsx
new file mode 100644
index 00000000000..fb40d7e53c9
--- /dev/null
+++ b/packages/react-core/src/components/Modal/examples/ModalWithDescription.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import { Modal, Button } from '@patternfly/react-core';
+
+export const ModalWithDescription: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show modal with description
+      </Button>
+      <Modal
+        title="Modal with description"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        description="A description is used when you want to provide more info about the modal than the title is able to describe. The content in the description is static and will not scroll with the rest of the modal body."
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx b/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx
new file mode 100644
index 00000000000..614377231c5
--- /dev/null
+++ b/packages/react-core/src/components/Modal/examples/ModalWithDropdown.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+import { Modal, ModalVariant, Button, Dropdown, DropdownToggle, DropdownItem } from '@patternfly/react-core';
+import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
+
+export const ModalWithDropdown: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+    setIsDropdownOpen(false);
+  };
+
+  const handleDropdownToggle = (isDropdownOpen: boolean) => {
+    setIsDropdownOpen(isDropdownOpen);
+  };
+
+  const onSelect = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+    onFocus();
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('modal-dropdown-toggle');
+    (element as HTMLElement).focus();
+  };
+
+  const onEscapePress = () => {
+    if (isDropdownOpen) {
+      setIsDropdownOpen(!isDropdownOpen);
+      onFocus();
+    } else {
+      handleModalToggle();
+    }
+  };
+
+  const dropdownItems = [
+    <DropdownItem key="link">Link</DropdownItem>,
+    <DropdownItem key="action" component="button">
+      Action
+    </DropdownItem>,
+    <DropdownItem key="disabled link" isDisabled>
+      Disabled Link
+    </DropdownItem>,
+    <DropdownItem key="disabled action" isDisabled component="button">
+      Disabled Action
+    </DropdownItem>
+  ];
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show dropdown modal
+      </Button>
+      <Modal
+        title="Dropdown modal"
+        variant={ModalVariant.small}
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+        onEscapePress={onEscapePress}
+      >
+        <div>
+          Set the dropdown <strong>menuAppendTo</strong> prop to <em>parent</em> in order to allow the dropdown menu
+          break out of the modal container. You'll also want to handle closing of the modal yourself, by listening to
+          the <strong>onEscapePress</strong> callback on the Modal component, so you can close the Dropdown first if
+          it's open without closing the entire modal.
+        </div>
+        <br />
+        <div>
+          <Dropdown
+            onSelect={onSelect}
+            toggle={
+              <DropdownToggle
+                id="modal-dropdown-toggle"
+                onToggle={handleDropdownToggle}
+                toggleIndicator={CaretDownIcon}
+              >
+                Dropdown with a menu that can break out
+              </DropdownToggle>
+            }
+            isOpen={isDropdownOpen}
+            dropdownItems={dropdownItems}
+            menuAppendTo="parent"
+          />
+        </div>
+      </Modal>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx b/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx
index 06ce3e45a24..6b2554fb552 100644
--- a/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx
+++ b/packages/react-core/src/components/Modal/examples/ModalWithForm.tsx
@@ -7,33 +7,26 @@ export const ModalWithForm: React.FunctionComponent = () => {
   const [nameValue, setNameValue] = React.useState('');
   const [emailValue, setEmailValue] = React.useState('');
   const [addressValue, setAddressValue] = React.useState('');
-  const nameInputRef = React.useRef();
 
   const handleModalToggle = () => {
     setModalOpen(!isModalOpen);
   };
 
-  const handleNameInputChange = value => {
+  const handleNameInputChange = (value: string) => {
     setNameValue(value);
   };
 
-  const handleEmailInputChange = value => {
+  const handleEmailInputChange = (value: string) => {
     setEmailValue(value);
   };
-  const handleAddressInputChange = value => {
+  const handleAddressInputChange = (value: string) => {
     setAddressValue(value);
   };
 
-  React.useEffect(() => {
-    if (isModalOpen && nameInputRef && nameInputRef.current) {
-      (nameInputRef.current as HTMLInputElement).focus();
-    }
-  }, [isModalOpen]);
-
   return (
     <React.Fragment>
       <Button variant="primary" onClick={handleModalToggle}>
-        Show modal
+        Show modal with form
       </Button>
       <Modal
         variant={ModalVariant.small}
@@ -102,7 +95,6 @@ export const ModalWithForm: React.FunctionComponent = () => {
               name="modal-with-form-form-name"
               value={nameValue}
               onChange={handleNameInputChange}
-              ref={nameInputRef}
             />
           </FormGroup>
           <FormGroup
diff --git a/packages/react-core/src/components/Modal/examples/ModalWithHelp.tsx b/packages/react-core/src/components/Modal/examples/ModalWithHelp.tsx
new file mode 100644
index 00000000000..f28c07b6af9
--- /dev/null
+++ b/packages/react-core/src/components/Modal/examples/ModalWithHelp.tsx
@@ -0,0 +1,54 @@
+import React from 'react';
+import { Modal, Button, Popover } from '@patternfly/react-core';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+
+export const ModalWithHelp: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show with help modal
+      </Button>
+      <Modal
+        variant="small"
+        title="With help modal"
+        help={
+          <Popover
+            headerContent={<div>Help Popover</div>}
+            bodyContent={
+              <div>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
+              </div>
+            }
+            footerContent="Popover Footer"
+          >
+            <Button variant="plain" aria-label="Help">
+              <HelpIcon />
+            </Button>
+          </Popover>
+        }
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        actions={[
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>,
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        ]}
+      >
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
+      </Modal>
+    </React.Fragment>
+  );
+};
diff --git a/packages/react-core/src/components/Modal/examples/ModalWithWizard.tsx b/packages/react-core/src/components/Modal/examples/ModalWithWizard.tsx
new file mode 100644
index 00000000000..49521fa3410
--- /dev/null
+++ b/packages/react-core/src/components/Modal/examples/ModalWithWizard.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { Modal, ModalVariant, Button, Wizard } from '@patternfly/react-core';
+
+export const ModalWithWizard: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = () => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  const steps = [
+    { name: 'Step 1', component: <p>Step 1</p> },
+    { name: 'Step 2', component: <p>Step 2</p> },
+    { name: 'Step 3', component: <p>Step 3</p> },
+    { name: 'Step 4', component: <p>Step 4</p> },
+    { name: 'Review', component: <p>Review Step</p>, nextButtonText: 'Finish' }
+  ];
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show wizard modal
+      </Button>
+      <Modal
+        variant={ModalVariant.large}
+        showClose={false}
+        isOpen={isModalOpen}
+        aria-labelledby="modal-wizard-label"
+        aria-describedby="modal-wizard-description"
+        onClose={handleModalToggle}
+        hasNoBodyWrapper
+      >
+        <Wizard
+          titleId="modal-wizard-label"
+          descriptionId="modal-wizard-description"
+          title="Wizard modal"
+          description="This is a wizard inside of a modal."
+          steps={steps}
+          onClose={handleModalToggle}
+          height={400}
+        />
+      </Modal>
+    </React.Fragment>
+  );
+};