@patternfly/react-core 6.0.0-alpha.3 → 6.0.0-alpha.31

package/src/next/components/Modal/examples/ModalCustomFocus.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
+
+export const ModalCustomFocus: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle} ouiaId="ShowBasicModal">
+        Show modal with custom focus
+      </Button>
+      <Modal
+        elementToFocus="#modal-custom-focus-confirm-button"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-labelledby="custom-focus-modal-title"
+        aria-describedby="modal-box-body-custom-focus"
+      >
+        <ModalHeader title="Modal with custom focus" labelId="custom-focus-modal-title" />
+        <ModalBody id="modal-box-body-custom-focus">
+          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.
+          <ModalFooter>
+            <Button id="modal-custom-focus-confirm-button" key="confirm" variant="primary" onClick={handleModalToggle}>
+              Confirm
+            </Button>
+            <Button key="cancel" variant="link" onClick={handleModalToggle}>
+              Cancel
+            </Button>
+          </ModalFooter>
+        </ModalBody>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/next/components/Modal/examples/ModalCustomHeader.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { Button, Title, TitleSizes, TextContent, Flex } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core/next';
+
+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 = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show custom header/footer modal
+      </Button>
+      <Modal
+        variant={ModalVariant.large}
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-labelledby="modal-custom-header-label"
+        aria-describedby="modal-custom-header-description"
+      >
+        <ModalHeader>
+          <TextContent>
+            <Title id="modal-custom-header-label" headingLevel="h1" size={TitleSizes['2xl']}>
+              Custom header modal
+            </Title>
+            <p>Add custom content to the header by not passing the titles prop the modal box header component.</p>
+          </TextContent>
+        </ModalHeader>
+        <ModalBody>
+          <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.
+        </ModalBody>
+        <ModalFooter>
+          <Title headingLevel="h4" size={TitleSizes.md}>
+            <Flex spaceItems={{ default: 'spaceItemsSm' }}>
+              <WarningTriangleIcon />
+              <span>Custom modal footer.</span>
+            </Flex>
+          </Title>
+        </ModalFooter>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/next/components/Modal/examples/ModalCustomTitleIcon.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
+
+import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
+
+export const ModalCustomTitleIcon: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show custom title icon modal
+      </Button>
+      <Modal
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-describedby="modal-custom-icon-description"
+        aria-labelledby="custom-title-icon-modal-title"
+      >
+        <ModalHeader
+          title="Custom title icon modal"
+          titleIconVariant={BullhornIcon}
+          labelId="custom-title-icon-modal-title"
+        />
+        <ModalBody>
+          <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.
+        </ModalBody>
+        <ModalFooter>
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/next/components/Modal/examples/ModalCustomWidth.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
+
+export const ModalCustomWidth: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show custom width modal
+      </Button>
+      <Modal
+        width="50%"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-labelledby="custom-width-modal-title"
+        aria-describedby="modal-box-body-custom-width"
+      >
+        <ModalHeader title="Custom width modal" labelId="custom-width-modal-title" />
+        <ModalBody id="modal-box-body-custom-width">
+          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.
+        </ModalBody>
+        <ModalFooter>
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/next/components/Modal/examples/ModalNoHeaderFooter.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalVariant } from '@patternfly/react-core/next';
+
+export const ModalNoHeaderFooter: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    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}
+      >
+        <ModalBody>
+          <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.
+        </ModalBody>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/next/components/Modal/examples/ModalSize.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { Button, Radio } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant } from '@patternfly/react-core/next';
+
+export const ModalSize: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [selectedVariant, setSelectedVariant] = React.useState(ModalVariant.small);
+
+  const capitalize = (input: string) => input[0].toUpperCase() + input.substring(1);
+  const formatSizeVariantName = (variant: string) => capitalize(variant);
+
+  const variantOptions = [ModalVariant.small, ModalVariant.medium, ModalVariant.large];
+
+  const renderSizeOptions = variantOptions.map((variant) => (
+    <Radio
+      id={`modal-size-${variant}-selector`}
+      label={`${formatSizeVariantName(variant)} variant`}
+      isChecked={variant === selectedVariant}
+      onChange={() => setSelectedVariant(variant)}
+      key={formatSizeVariantName(variant)}
+      name="Variant options"
+    />
+  ));
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      {renderSizeOptions}
+      <br />
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show modal
+      </Button>
+      <Modal
+        variant={selectedVariant}
+        title="Variant modal"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-labelledby="variant-modal-title"
+        aria-describedby="modal-box-body-variant"
+      >
+        <ModalHeader title="Small modal" labelId="variant-modal-title" />
+        <ModalBody id="modal-box-body-variant">
+          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.
+        </ModalBody>
+        <ModalFooter>
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/next/components/Modal/examples/ModalTitleIcon.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
+
+export const ModalTitleIcon: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show title icon modal
+      </Button>
+      <Modal
+        isOpen={isModalOpen}
+        aria-describedby="modal-title-icon-description"
+        aria-labelledby="title-icon-modal-title"
+        onClose={handleModalToggle}
+      >
+        <ModalHeader title="Title icon modal" titleIconVariant="warning" labelId="title-icon-modal-title" />
+        <ModalBody>
+          <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.
+        </ModalBody>
+        <ModalFooter>
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/next/components/Modal/examples/ModalTopAligned.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core/next';
+
+export const ModalTopAligned: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show top aligned modal
+      </Button>
+      <Modal
+        position="top"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-labelledby="top-aligned-modal-title"
+        aria-describedby="modal-box-body-top-aligned"
+      >
+        <ModalHeader title="Top aligned modal" labelId="top-aligned-modal-title" />
+        <ModalBody id="modal-box-body-top-aligned">
+          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.
+        </ModalBody>
+        <ModalFooter>
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/next/components/Modal/examples/ModalWithDescription.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal, ModalBody, ModalHeader, ModalFooter, ModalVariant } from '@patternfly/react-core/next';
+
+export const ModalWithDescription: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show modal with description
+      </Button>
+      <Modal
+        variant={ModalVariant.small}
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        aria-labelledby="modal-with-description-title"
+        aria-describedby="modal-box-body-with-description"
+      >
+        <ModalHeader
+          title="Modal with description"
+          labelId="modal-with-description-title"
+          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."
+        />
+
+        <ModalBody tabIndex={0} id="modal-box-body-with-description">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Semper auctor neque vitae
+          tempus. Diam donec adipiscing tristique risus. Augue eget arcu dictum varius duis. Ut enim blandit volutpat
+          maecenas volutpat blandit aliquam. Sit amet mauris commodo quis imperdiet massa tincidunt. Habitant morbi
+          tristique senectus et netus. Fames ac turpis egestas sed tempus urna. Neque laoreet suspendisse interdum
+          consectetur libero id. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Porta nibh venenatis cras
+          sed felis eget velit. Nullam non nisi est sit amet facilisis. Nunc mi ipsum faucibus vitae. Lorem sed risus
+          ultricies tristique nulla aliquet enim tortor at. Egestas sed tempus urna et pharetra pharetra massa massa
+          ultricies. Lacinia quis vel eros donec ac odio tempor orci. Malesuada fames ac turpis egestas integer eget
+          aliquet.
+          <br />
+          <br />
+          Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Molestie at elementum eu facilisis sed odio
+          morbi. Elit pellentesque habitant morbi tristique. Consequat nisl vel pretium lectus quam id leo in vitae.
+          Quis varius quam quisque id diam vel quam elementum. Viverra nam libero justo laoreet sit amet cursus.
+          Sollicitudin tempor id eu nisl nunc. Orci nulla pellentesque dignissim enim sit amet venenatis. Dignissim enim
+          sit amet venenatis urna cursus eget. Iaculis at erat pellentesque adipiscing commodo elit. Faucibus pulvinar
+          elementum integer enim neque volutpat. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Nunc mattis
+          enim ut tellus elementum sagittis vitae. Blandit cursus risus at ultrices. Tellus mauris a diam maecenas sed
+          enim. Non diam phasellus vestibulum lorem sed risus ultricies tristique nulla.
+          <br />
+          <br />
+          Nulla pharetra diam sit amet nisl suscipit adipiscing. Ac tortor vitae purus faucibus ornare suspendisse sed
+          nisi. Sed felis eget velit aliquet sagittis id consectetur purus. Tincidunt tortor aliquam nulla facilisi cras
+          fermentum. Volutpat est velit egestas dui id ornare arcu odio. Pharetra magna ac placerat vestibulum. Ultrices
+          sagittis orci a scelerisque purus semper eget duis at. Nisi est sit amet facilisis magna etiam tempor orci eu.
+          Convallis tellus id interdum velit. Facilisis sed odio morbi quis commodo odio aenean sed.
+          <br />
+          <br />
+          Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Facilisi etiam dignissim diam quis enim
+          lobortis scelerisque fermentum. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Magna
+          etiam tempor orci eu lobortis elementum. Quis auctor elit sed vulputate mi sit. Eleifend quam adipiscing vitae
+          proin sagittis nisl rhoncus mattis rhoncus. Erat velit scelerisque in dictum non. Sit amet nulla facilisi
+          morbi tempus iaculis urna. Enim ut tellus elementum sagittis vitae et leo duis ut. Lectus arcu bibendum at
+          varius vel pharetra vel turpis. Morbi tristique senectus et netus et. Eget aliquet nibh praesent tristique
+          magna sit amet purus gravida. Nisl purus in mollis nunc sed id semper risus. Id neque aliquam vestibulum
+          morbi. Mauris a diam maecenas sed enim ut sem. Egestas tellus rutrum tellus pellentesque.
+        </ModalBody>
+        <ModalFooter>
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </React.Fragment>
+  );
+};

package/src/next/components/Modal/examples/ModalWithDropdown.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { Button, Dropdown, DropdownList, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
+
+import { Modal, ModalBody, ModalHeader, ModalFooter, ModalVariant } from '@patternfly/react-core/next';
+
+export const ModalWithDropdown: React.FunctionComponent = () => {
+  const [isModalOpen, setIsModalOpen] = React.useState(false);
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+
+  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {
+    setIsModalOpen(!isModalOpen);
+    setIsDropdownOpen(false);
+  };
+
+  const handleDropdownToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  const onSelect = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+    onFocus();
+  };
+
+  const onFocus = () => {
+    const element = document.getElementById('modal-dropdown-toggle');
+    (element as HTMLElement).focus();
+  };
+
+  const onEscapePress = (event: KeyboardEvent) => {
+    if (isDropdownOpen) {
+      setIsDropdownOpen(!isDropdownOpen);
+      onFocus();
+    } else {
+      handleModalToggle(event);
+    }
+  };
+
+  return (
+    <React.Fragment>
+      <Button variant="primary" onClick={handleModalToggle}>
+        Show dropdown modal
+      </Button>
+      <Modal
+        variant={ModalVariant.small}
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        onEscapePress={onEscapePress}
+        aria-labelledby="modal-with-dropdown"
+        aria-describedby="modal-box-body-with-dropdown"
+      >
+        <ModalHeader title="Dropdown modal" labelId="modal-with-dropdown" />
+        <ModalBody id="modal-box-body-with-dropdown">
+          <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
+              isOpen={isDropdownOpen}
+              onSelect={onSelect}
+              onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle ref={toggleRef} onClick={handleDropdownToggle} isExpanded={isDropdownOpen}>
+                  Dropdown
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>
+                <DropdownItem value={0} key="action">
+                  Action
+                </DropdownItem>
+                <DropdownItem
+                  value={1}
+                  key="link"
+                  to="#default-link2"
+                  // Prevent the default onClick functionality for example purposes
+                  onClick={(ev: any) => ev.preventDefault()}
+                >
+                  Link
+                </DropdownItem>
+                <DropdownItem value={2} isDisabled key="disabled action">
+                  Disabled Action
+                </DropdownItem>
+                <DropdownItem value={3} isDisabled key="disabled link" to="#default-link4">
+                  Disabled Link
+                </DropdownItem>
+              </DropdownList>
+            </Dropdown>
+          </div>
+        </ModalBody>
+        <ModalFooter>
+          <Button key="confirm" variant="primary" onClick={handleModalToggle}>
+            Confirm
+          </Button>
+          <Button key="cancel" variant="link" onClick={handleModalToggle}>
+            Cancel
+          </Button>
+        </ModalFooter>
+      </Modal>
+    </React.Fragment>
+  );
+};