@patternfly/react-core 6.0.0-alpha.2 → 6.0.0-alpha.20

package/src/next/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap

@@ -0,0 +1,218 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalBoxTitle alert variant 1`] = `
+<DocumentFragment>
+  <h1
+    class="pf-v5-c-modal-box__title pf-m-icon"
+    id="boxId"
+  >
+    <span
+      class="pf-v5-c-modal-box__title-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 576 512"
+        width="1em"
+      >
+        <path
+          d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+        />
+      </svg>
+    </span>
+    <span
+      class="pf-v5-screen-reader"
+    >
+      Warning alert:
+    </span>
+    <span
+      class="pf-v5-c-modal-box__title-text"
+    >
+      Test Modal Box warning
+    </span>
+  </h1>
+</DocumentFragment>
+`;
+
+exports[`ModalBoxTitle custom icon variant 1`] = `
+<DocumentFragment>
+  <h1
+    class="pf-v5-c-modal-box__title pf-m-icon"
+    id="boxId"
+  >
+    <span
+      class="pf-v5-c-modal-box__title-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 576 512"
+        width="1em"
+      >
+        <path
+          d="M576 240c0-23.63-12.95-44.04-32-55.12V32.01C544 23.26 537.02 0 512 0c-7.12 0-14.19 2.38-19.98 7.02l-85.03 68.03C364.28 109.19 310.66 128 256 128H64c-35.35 0-64 28.65-64 64v96c0 35.35 28.65 64 64 64h33.7c-1.39 10.48-2.18 21.14-2.18 32 0 39.77 9.26 77.35 25.56 110.94 5.19 10.69 16.52 17.06 28.4 17.06h74.28c26.05 0 41.69-29.84 25.9-50.56-16.4-21.52-26.15-48.36-26.15-77.44 0-11.11 1.62-21.79 4.41-32H256c54.66 0 108.28 18.81 150.98 52.95l85.03 68.03a32.023 32.023 0 0 0 19.98 7.02c24.92 0 32-22.78 32-32V295.13C563.05 284.04 576 263.63 576 240zm-96 141.42l-33.05-26.44C392.95 311.78 325.12 288 256 288v-96c69.12 0 136.95-23.78 190.95-66.98L480 98.58v282.84z"
+        />
+      </svg>
+    </span>
+    <span
+      class="pf-v5-c-modal-box__title-text"
+    >
+      Test Modal Box custom
+    </span>
+  </h1>
+</DocumentFragment>
+`;
+
+exports[`ModalBoxTitle custom variant 1`] = `
+<DocumentFragment>
+  <h1
+    class="pf-v5-c-modal-box__title pf-m-icon"
+    id="boxId"
+  >
+    <span
+      class="pf-v5-c-modal-box__title-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 896 1024"
+        width="1em"
+      >
+        <path
+          d="M448,0 C465.333333,0 480.333333,6.33333333 493,19 C505.666667,31.6666667 512,46.6666667 512,64 L512,106 L514.23,106.45 C587.89,121.39 648.48,157.24 696,214 C744,271.333333 768,338.666667 768,416 C768,500 780,568.666667 804,622 C818.666667,652.666667 841.333333,684 872,716 C873.773676,718.829136 875.780658,721.505113 878,724 C890,737.333333 896,752.333333 896,769 C896,785.666667 890,800.333333 878,813 C866,825.666667 850.666667,832 832,832 L63.3,832 C44.9533333,831.84 29.8533333,825.506667 18,813 C6,800.333333 0,785.666667 0,769 C0,752.333333 6,737.333333 18,724 L24,716 L25.06,714.9 C55.1933333,683.28 77.5066667,652.313333 92,622 C116,568.666667 128,500 128,416 C128,338.666667 152,271.333333 200,214 C248,156.666667 309.333333,120.666667 384,106 L384,63.31 C384.166667,46.27 390.5,31.5 403,19 C415.666667,6.33333333 430.666667,0 448,0 Z M576,896 L576,897.08 C575.74,932.6 563.073333,962.573333 538,987 C512.666667,1011.66667 482.666667,1024 448,1024 C413.333333,1024 383.333333,1011.66667 358,987 C332.666667,962.333333 320,932 320,896 L576,896 Z"
+        />
+      </svg>
+    </span>
+    <span
+      class="pf-v5-screen-reader"
+    >
+      Custom alert:
+    </span>
+    <span
+      class="pf-v5-c-modal-box__title-text"
+    >
+      Test Modal Box warning
+    </span>
+  </h1>
+</DocumentFragment>
+`;
+
+exports[`ModalBoxTitle danger variant 1`] = `
+<DocumentFragment>
+  <h1
+    class="pf-v5-c-modal-box__title pf-m-icon"
+    id="boxId"
+  >
+    <span
+      class="pf-v5-c-modal-box__title-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 512 512"
+        width="1em"
+      >
+        <path
+          d="M504 256c0 136.997-111.043 248-248 248S8 392.997 8 256C8 119.083 119.043 8 256 8s248 111.083 248 248zm-248 50c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+        />
+      </svg>
+    </span>
+    <span
+      class="pf-v5-screen-reader"
+    >
+      Danger alert:
+    </span>
+    <span
+      class="pf-v5-c-modal-box__title-text"
+    >
+      Test Modal Box danger
+    </span>
+  </h1>
+</DocumentFragment>
+`;
+
+exports[`ModalBoxTitle info variant 1`] = `
+<DocumentFragment>
+  <h1
+    class="pf-v5-c-modal-box__title pf-m-icon"
+    id="boxId"
+  >
+    <span
+      class="pf-v5-c-modal-box__title-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 512 512"
+        width="1em"
+      >
+        <path
+          d="M256 8C119.043 8 8 119.083 8 256c0 136.997 111.043 248 248 248s248-111.003 248-248C504 119.083 392.957 8 256 8zm0 110c23.196 0 42 18.804 42 42s-18.804 42-42 42-42-18.804-42-42 18.804-42 42-42zm56 254c0 6.627-5.373 12-12 12h-88c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h12v-64h-12c-6.627 0-12-5.373-12-12v-24c0-6.627 5.373-12 12-12h64c6.627 0 12 5.373 12 12v100h12c6.627 0 12 5.373 12 12v24z"
+        />
+      </svg>
+    </span>
+    <span
+      class="pf-v5-screen-reader"
+    >
+      Info alert:
+    </span>
+    <span
+      class="pf-v5-c-modal-box__title-text"
+    >
+      Test Modal Box info
+    </span>
+  </h1>
+</DocumentFragment>
+`;
+
+exports[`ModalBoxTitle success variant 1`] = `
+<DocumentFragment>
+  <h1
+    class="pf-v5-c-modal-box__title pf-m-icon"
+    id="boxId"
+  >
+    <span
+      class="pf-v5-c-modal-box__title-icon"
+    >
+      <svg
+        aria-hidden="true"
+        class="pf-v5-svg"
+        fill="currentColor"
+        height="1em"
+        role="img"
+        viewBox="0 0 512 512"
+        width="1em"
+      >
+        <path
+          d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
+        />
+      </svg>
+    </span>
+    <span
+      class="pf-v5-screen-reader"
+    >
+      Success alert:
+    </span>
+    <span
+      class="pf-v5-c-modal-box__title-text"
+    >
+      Test Modal Box success
+    </span>
+  </h1>
+</DocumentFragment>
+`;

package/src/next/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap

@@ -0,0 +1,128 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Modal Content Test description 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-backdrop"
+  >
+    <div
+      class="pf-v5-l-bullseye"
+    >
+      <div
+        aria-modal="true"
+        class="pf-v5-c-modal-box"
+        data-ouia-component-type="PF5/ModalContent"
+        data-ouia-safe="true"
+        descriptorid="descriptorId"
+        id="boxId"
+        labelid="labelId"
+        role="dialog"
+      >
+        This is a ModalBox header
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Modal Content Test isOpen 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-backdrop"
+  >
+    <div
+      class="pf-v5-l-bullseye"
+    >
+      <div
+        aria-modal="true"
+        class="pf-v5-c-modal-box"
+        data-ouia-component-type="PF5/ModalContent"
+        data-ouia-safe="true"
+        descriptorid="descriptorId"
+        id="boxId"
+        labelid="labelId"
+        role="dialog"
+      >
+        This is a ModalBox header
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Modal Content Test only body 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-backdrop"
+  >
+    <div
+      class="pf-v5-l-bullseye"
+    >
+      <div
+        aria-modal="true"
+        class="pf-v5-c-modal-box"
+        data-ouia-component-type="PF5/ModalContent"
+        data-ouia-safe="true"
+        descriptorid="descriptorId"
+        id="boxId"
+        labelid="labelId"
+        role="dialog"
+      >
+        This is a ModalBox header
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Modal Content Test with onclose 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v5-c-backdrop"
+  >
+    <div
+      class="pf-v5-l-bullseye"
+    >
+      <div
+        aria-modal="true"
+        class="pf-v5-c-modal-box pf-m-lg"
+        data-ouia-component-type="PF5/ModalContent"
+        data-ouia-safe="true"
+        descriptorid="descriptorId"
+        id="boxId"
+        labelid="labelId"
+        role="dialog"
+      >
+        <div
+          class="pf-v5-c-modal-box__close"
+        >
+          <button
+            aria-disabled="false"
+            aria-label="Close"
+            class="pf-v5-c-button pf-m-plain"
+            data-ouia-component-id="OUIA-Generated-Button-plain-1"
+            data-ouia-component-type="PF5/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              class="pf-v5-svg"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              viewBox="0 0 352 512"
+              width="1em"
+            >
+              <path
+                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+              />
+            </svg>
+          </button>
+        </div>
+        This is a ModalBox header
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/next/components/Modal/__tests__/__snapshots__/ModalFooter.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ModalFooter Test 1`] = `
+<DocumentFragment>
+  <footer
+    class="pf-v5-c-modal-box__footer test-box-footer-class"
+  >
+    This is a ModalBox Footer
+  </footer>
+</DocumentFragment>
+`;

package/src/next/components/Modal/examples/Modal.md

@@ -0,0 +1,148 @@
+---
+id: Modal
+section: components
+cssPrefix: pf-v5-c-modal-box
+propComponents: ['Modal', 'ModalBody', 'ModalHeader', 'ModalFooter']
+ouia: true
+beta: true
+---
+
+import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
+import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
+import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import formStyles from '@patternfly/react-styles/css/components/Form/form';
+
+## Examples
+
+### Basic modals
+
+Basic modals give users the option to either confirm or cancel an action. 
+
+To flag an open modal, use the `isOpen` property. To execute a callback when a modal is closed, use the `onClose` property.
+
+A modal must have a `<ModalBody>`, containing the main content of the modal. The `<ModalHeader>` and `<ModalFooter>` components are not required, but are typically used to display the modal title and any button actions, respectively. 
+
+```ts file="./ModalBasic.tsx"
+
+```
+
+### Scrollable modals
+
+To enable keyboard-accessible scrolling of a modal’s content, pass `tabIndex={0}` to the `<ModalBody>`.
+
+```ts file="ModalWithOverflowingContent.tsx"
+
+```
+
+### With a static description
+
+To provide additional information about a modal, use the `description` property. Descriptions are static and do not scroll with other modal content.
+
+```ts file="./ModalWithDescription.tsx"
+
+```
+
+### Top aligned
+
+To override a modal's default center alignment, use the `position` property. In this example, `position` is set to "top", which moves the modal to the top of the screen.
+
+```ts file="./ModalTopAligned.tsx"
+
+```
+
+### Modal sizes
+
+To adjust the size of a modal, use the `variant` property. Modal variants include "small", "medium", "large", and "default".
+
+In the following example, you can display each modal size option. To launch a modal with a specific size, first select the respective radio button, followed by the "Show modal" button.
+
+```ts file="./ModalSize.tsx"
+
+```
+
+### Custom width
+
+To choose a specific width for a modal, use the `width` property. The following example has a `width` of "50%".
+
+```ts file="./ModalCustomWidth.tsx"
+
+```
+
+### Custom header
+
+To add a custom header to a modal, your custom content must be passed as a child of the `<ModalHeader>` component. Do not pass the `title` property to `<ModalHeader>` when using a custom header. 
+
+```ts file="./ModalCustomHeader.tsx"
+
+```
+
+### No header or footer
+
+To exclusively present information in a modal, remove the header and/or footer.
+
+When a modal has no header or footer, make sure to add an `aria-label` explicitly stating this, so that those using assistive technologies can understand this context.
+
+```ts file="./ModalNoHeaderFooter.tsx"
+
+```
+
+### Title icon
+
+To add an icon before a modal’s title, use the `titleIconVariant` property, which can be set to a "success", "danger", "warning", or "info" variant. The following example uses a "warning" variant.
+
+```ts file="./ModalTitleIcon.tsx"
+
+```
+
+### Custom title icon
+
+To add a custom icon before a modal’s title, set `titleIconVariant` to an imported custom icon. The following example imports and uses a bullhorn icon.
+
+```ts file="./ModalCustomTitleIcon.tsx"
+
+```
+
+### With wizard
+
+To guide users through a series of steps in a modal, you can add a [wizard](/components/wizard) to a modal. To configure the `<Wizard>`, pass an array that contains a “name” and “component” value for each step into the `steps` property.
+
+```ts file="./ModalWithWizard.tsx"
+
+```
+
+### With dropdown
+
+To present a menu of actions or links to a user, you can add a [dropdown](/components/menus/dropdown) to a modal. 
+
+To allow the dropdown to visually break out of the modal container, set the `menuAppendTo` property to “parent”. Handle the modal’s closing behavior by listening to the `onEscapePress` callback on the `<Modal>` component. This allows the "escape" key to collapse the dropdown without closing the entire modal.
+
+```ts file="./ModalWithDropdown.tsx"
+
+```
+
+### With help
+
+To help simplify and explain complex models, add a help [popover](/components/popover). Only place a help icon at the modal level if its information applies to all content in the modal. If the help popover is specific to a particular modal section, place the help icon beside that section instead.
+
+```ts file="./ModalWithHelp.tsx"
+
+```
+
+### With form
+
+To collect user input within a modal, you can add a [form](/components/forms/form).
+
+To enable form submission from a button in the modal's footer (outside of the `<Form>`), set the button's `form` property equal to the form's id.
+
+```ts file="ModalWithForm.tsx"
+
+```
+
+### Custom focus
+
+To customize which element inside the modal receives focus when initially opened, use the `elementToFocus` property`. 
+
+```ts file="./ModalCustomFocus.tsx"
+
+```

package/src/next/components/Modal/examples/ModalBasic.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 ModalBasic: 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 basic modal
+      </Button>
+      <Modal
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        ouiaId="BasicModal"
+        aria-labelledby="basic-modal-title"
+        aria-describedby="modal-box-body-basic"
+      >
+        <ModalHeader title="Basic modal" labelId="basic-modal-title" />
+        <ModalBody id="modal-box-body-basic">
+          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/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>
+  );
+};