@patternfly/react-core 6.0.0-alpha.65 → 6.0.0-alpha.66

package/src/{next → deprecated}/components/Modal/examples/Modal.md

@@ -2,26 +2,24 @@
 id: Modal
 section: components
 cssPrefix: pf-v5-c-modal-box
-propComponents: ['Modal', 'ModalBody', 'ModalHeader', 'ModalFooter']
+propComponents: ['Modal']
 ouia: true
-beta: true
+deprecated: true
 ---
 
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 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 spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 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. 
+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.
 
 ```ts file="./ModalBasic.tsx"
 
@@ -29,7 +27,7 @@ A modal must have a `<ModalBody>`, containing the main content of the modal. The
 
 ### Scrollable modals
 
-To enable keyboard-accessible scrolling of a modal’s content, pass `tabIndex={0}` to the `<ModalBody>`.
+To enable keyboard-accessible scrolling of a modal’s content, pass `tabIndex={0}` to the `<Modal>`.
 
 ```ts file="ModalWithOverflowingContent.tsx"
 
@@ -51,13 +49,29 @@ To override a modal's default center alignment, use the `position` property. In
 
 ```
 
-### Modal sizes
+### Small modal
 
 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.
+The following example displays a "small" modal by passing in `variant={ModalVariant.small}`.
+
+```ts file="./ModalSmall.tsx"
+
+```
+
+### Medium modal
+
+The following example displays a "medium" modal by passing in `variant={ModalVariant.medium}`.
 
-```ts file="./ModalSize.tsx"
+```ts file="./ModalMedium.tsx"
+
+```
+
+### Large modal
+
+The following example displays a "large" modal by passing in `variant={ModalVariant.large}`.
+
+```ts file="./ModalLarge.tsx"
 
 ```
 
@@ -69,19 +83,17 @@ To choose a specific width for a modal, use the `width` property. The following
 
 ```
 
-### Custom header
+### Custom header and footer
 
-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. 
+To add a custom header and footer to a modal, set the `header` and `footer` properties to a custom implementation. The following example passes title components into both the header and the footer and also passes an icon to the footer.
 
-```ts file="./ModalCustomHeader.tsx"
+```ts file="./ModalCustomHeaderFooter.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.
+To exclusively present information in a modal, remove the `header` and/or `footer`.
 
 ```ts file="./ModalNoHeaderFooter.tsx"
 
@@ -89,7 +101,7 @@ When a modal has no header or footer, make sure to add an `aria-label` explicitl
 
 ### 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.
+To add an icon before a modal’s title, use the `titleIconVariant`, which can be set to one of the predefined variants -- "success", "danger", "warning", "info", and "custom" -- or to an imported custom icon. The following example uses a "warning" variant.
 
 ```ts file="./ModalTitleIcon.tsx"
 
@@ -113,9 +125,7 @@ To guide users through a series of steps in a modal, you can add a [wizard](/com
 
 ### 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.
+To present a menu of actions or links to a user, you can add a [dropdown](/components/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"
 
@@ -131,9 +141,9 @@ To help simplify and explain complex models, add a help [popover](/components/po
 
 ### With form
 
-To collect user input within a modal, you can add a [form](/components/forms/form).
+To collect user input within a modal, you can add a [form](/components/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.
+To submit the form 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"
 
@@ -141,7 +151,7 @@ To enable form submission from a button in the modal's footer (outside of the `<
 
 ### Custom focus
 
-To customize which element inside the modal receives focus when initially opened, use the `elementToFocus` property`. 
+Use the `elementToFocus` property to customize which element inside the Modal receives focus when initially opened.
 
 ```ts file="./ModalCustomFocus.tsx"
 

package/src/deprecated/components/Modal/examples/ModalBasic.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
+
+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>
+      <ModalDeprecated
+        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>
+        ]}
+        ouiaId="BasicModal"
+      >
+        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.
+      </ModalDeprecated>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
+
+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>
+      <ModalDeprecated
+        elementToFocus="#modal-custom-focus-confirm-button"
+        title="Modal with custom focus"
+        isOpen={isModalOpen}
+        onClose={handleModalToggle}
+        actions={[
+          <Button id="modal-custom-focus-confirm-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.
+      </ModalDeprecated>
+    </React.Fragment>
+  );
+};

package/src/{components → deprecated/components}/Modal/examples/ModalCustomHeaderFooter.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Modal, ModalVariant, Button, Title, TitleSizes } from '@patternfly/react-core';
+import { Button, Title, TitleSizes } from '@patternfly/react-core';
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 
@@ -31,8 +32,8 @@ export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
       <Button variant="primary" onClick={handleModalToggle}>
         Show custom header/footer modal
       </Button>
-      <Modal
-        variant={ModalVariant.large}
+      <ModalDeprecated
+        variant={ModalVariantDeprecated.large}
         isOpen={isModalOpen}
         onClose={handleModalToggle}
         header={header}
@@ -51,7 +52,7 @@ export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
         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>
+      </ModalDeprecated>
     </React.Fragment>
   );
 };

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
+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>
+      <ModalDeprecated
+        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.
+      </ModalDeprecated>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
+
+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>
+      <ModalDeprecated
+        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.
+      </ModalDeprecated>
+    </React.Fragment>
+  );
+};

package/src/{components → deprecated/components}/Modal/examples/ModalLarge.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Modal, ModalVariant, Button } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 
 export const ModalLarge: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -13,8 +14,8 @@ export const ModalLarge: React.FunctionComponent = () => {
       <Button variant="primary" onClick={handleModalToggle}>
         Show large modal
       </Button>
-      <Modal
-        variant={ModalVariant.large}
+      <ModalDeprecated
+        variant={ModalVariantDeprecated.large}
         title="Large modal"
         isOpen={isModalOpen}
         onClose={handleModalToggle}
@@ -32,7 +33,7 @@ export const ModalLarge: React.FunctionComponent = () => {
         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>
+      </ModalDeprecated>
     </React.Fragment>
   );
 };

package/src/{components → deprecated/components}/Modal/examples/ModalMedium.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Modal, ModalVariant, Button } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 
 export const ModalMedium: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -13,8 +14,8 @@ export const ModalMedium: React.FunctionComponent = () => {
       <Button variant="primary" onClick={handleModalToggle}>
         Show medium modal
       </Button>
-      <Modal
-        variant={ModalVariant.medium}
+      <ModalDeprecated
+        variant={ModalVariantDeprecated.medium}
         title="Medium modal"
         isOpen={isModalOpen}
         onClose={handleModalToggle}
@@ -32,7 +33,7 @@ export const ModalMedium: React.FunctionComponent = () => {
         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>
+      </ModalDeprecated>
     </React.Fragment>
   );
 };

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
+
+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>
+      <ModalDeprecated
+        variant={ModalVariantDeprecated.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.
+      </ModalDeprecated>
+    </React.Fragment>
+  );
+};

package/src/{components → deprecated/components}/Modal/examples/ModalSmall.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Modal, ModalVariant, Button } from '@patternfly/react-core';
+import { Button } from '@patternfly/react-core';
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 
 export const ModalSmall: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -13,8 +14,8 @@ export const ModalSmall: React.FunctionComponent = () => {
       <Button variant="primary" onClick={handleModalToggle}>
         Show small modal
       </Button>
-      <Modal
-        variant={ModalVariant.small}
+      <ModalDeprecated
+        variant={ModalVariantDeprecated.small}
         title="Small modal"
         isOpen={isModalOpen}
         onClose={handleModalToggle}
@@ -32,7 +33,7 @@ export const ModalSmall: React.FunctionComponent = () => {
         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>
+      </ModalDeprecated>
     </React.Fragment>
   );
 };

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

@@ -0,0 +1,46 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
+
+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>
+      <ModalDeprecated
+        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.
+      </ModalDeprecated>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
+
+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>
+      <ModalDeprecated
+        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.
+      </ModalDeprecated>
+    </React.Fragment>
+  );
+};

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

@@ -0,0 +1,39 @@
+import React from 'react';
+import { Button } from '@patternfly/react-core';
+import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
+
+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>
+      <ModalDeprecated
+        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.
+      </ModalDeprecated>
+    </React.Fragment>
+  );
+};