@patternfly/react-docs 7.6.0-prerelease.6 → 7.6.0-prerelease.8

package/patternfly-docs/generated/components/modal/react.js

@@ -0,0 +1,597 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useRef, useState } from 'react';
+import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
+import RhUiAttentionBellFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-attention-bell-fill-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import formStyles from '@patternfly/react-styles/css/components/Form/form';
+const pageData = {
+  "id": "Modal",
+  "section": "components",
+  "subsection": "",
+  "deprecated": false,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react",
+  "tabName": null,
+  "slug": "/components/modal/react",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/components/Modal/examples/Modal.md",
+  "relPath": "packages/react-core/src/components/Modal/examples/Modal.md",
+  "propComponents": [
+    {
+      "name": "Modal",
+      "description": "",
+      "props": [
+        {
+          "name": "appendTo",
+          "type": "HTMLElement | (() => HTMLElement)",
+          "description": "The parent container to append the modal to. Defaults to \"document.body\".",
+          "defaultValue": "() => document.body"
+        },
+        {
+          "name": "aria-describedby",
+          "type": "string",
+          "description": "Id to use for the modal box description. This should match the ModalHeader labelId or descriptorId."
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Adds an accessible name to the modal when there is no title in the ModalHeader."
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "description": "Id to use for the modal box label. This should include the ModalHeader labelId."
+        },
+        {
+          "name": "backdropClassName",
+          "type": "string",
+          "description": "Additional classes added to the modal backdrop."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the modal.",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the modal."
+        },
+        {
+          "name": "disableFocusTrap",
+          "type": "boolean",
+          "description": "Flag to disable focus trap."
+        },
+        {
+          "name": "elementToFocus",
+          "type": "HTMLElement | SVGElement | string",
+          "description": "The element to focus when the modal opens. By default the first\nfocusable element will receive focus."
+        },
+        {
+          "name": "focusTrapId",
+          "type": "string",
+          "description": "Id of the focus trap in the ModalContent component"
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "An id to use for the modal box container."
+        },
+        {
+          "name": "isOpen",
+          "type": "boolean",
+          "description": "Flag to show the modal.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "maxWidth",
+          "type": "number | string",
+          "description": "Maximum width of the modal."
+        },
+        {
+          "name": "onClose",
+          "type": "(event: KeyboardEvent | React.MouseEvent) => void",
+          "description": "Add callback for when the close button is clicked. This prop needs to be passed to render the close button"
+        },
+        {
+          "name": "onEscapePress",
+          "type": "(event: KeyboardEvent) => void",
+          "description": "Modal handles pressing of the escape key and closes the modal. If you want to handle\nthis yourself you can use this callback function."
+        },
+        {
+          "name": "ouiaId",
+          "type": "number | string",
+          "description": "Value to overwrite the randomly generated data-ouia-component-id."
+        },
+        {
+          "name": "ouiaSafe",
+          "type": "boolean",
+          "description": "Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "position",
+          "type": "'default' | 'top'",
+          "description": "Position of the modal. By default a modal will be positioned vertically and horizontally centered.",
+          "defaultValue": "'default'"
+        },
+        {
+          "name": "positionOffset",
+          "type": "string",
+          "description": "Offset from alternate position. Can be any valid CSS length/percentage."
+        },
+        {
+          "name": "variant",
+          "type": "'small' | 'medium' | 'large' | 'default'",
+          "description": "Variant of the modal.",
+          "defaultValue": "'default'"
+        },
+        {
+          "name": "width",
+          "type": "number | string",
+          "description": "Default width of the modal."
+        }
+      ]
+    },
+    {
+      "name": "ModalBody",
+      "description": "Renders content in the body of the modal",
+      "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Accessible label applied to the modal body. This should be used to communicate\nimportant information about the modal body div element if needed, such as when it is scrollable."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the modal body."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the modal body."
+        },
+        {
+          "name": "role",
+          "type": "string",
+          "description": "Accessible role applied to the modal body. This will default to \"region\" if the\naria-label property is passed in. Set to a more appropriate role as applicable\nbased on the modal content and context."
+        }
+      ]
+    },
+    {
+      "name": "ModalHeader",
+      "description": "Renders content in the header of the modal",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Custom content rendered inside the modal header. If children are supplied then the tile, tileIconVariant and titleScreenReaderText props are ignored."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the modal header."
+        },
+        {
+          "name": "description",
+          "type": "React.ReactNode",
+          "description": "Description of the modal."
+        },
+        {
+          "name": "descriptorId",
+          "type": "string",
+          "description": "Id of the modal description."
+        },
+        {
+          "name": "help",
+          "type": "React.ReactNode",
+          "description": "Optional help section for the modal header."
+        },
+        {
+          "name": "labelId",
+          "type": "string",
+          "description": "Id of the modal title."
+        },
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the modal title."
+        },
+        {
+          "name": "titleIconVariant",
+          "type": "'success' | 'danger' | 'warning' | 'info' | 'custom' | React.ComponentType<any>",
+          "description": "Optional alert icon (or other) to show before the title. When the predefined alert types\nare used the default styling will be automatically applied."
+        },
+        {
+          "name": "titleScreenReaderText",
+          "type": "string",
+          "description": "Optional title label text for screen readers."
+        }
+      ]
+    },
+    {
+      "name": "ModalFooter",
+      "description": "Renders content in the footer of the modal",
+      "props": [
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the modal footer."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the modal footer."
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-modal-box"
+  ],
+  "examples": [
+    "Basic modals",
+    "Scrollable modals",
+    "With a static description",
+    "Top aligned",
+    "Modal sizes",
+    "Custom width",
+    "Custom header",
+    "No header or footer",
+    "Title icon",
+    "Custom title icon",
+    "With wizard",
+    "With dropdown",
+    "With help",
+    "With form",
+    "Custom focus"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useRef,
+  useState,
+  WarningTriangleIcon,
+  RhMicronsCaretDownIcon,
+  RhUiAttentionBellFillIcon,
+  HelpIcon,
+  formStyles
+};
+pageData.examples = {
+  'Basic modals': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';\n\nexport const ModalBasic: React.FunctionComponent = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={handleModalToggle} ouiaId=\"ShowBasicModal\">\n        Show basic modal\n      </Button>\n      <Modal\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        ouiaId=\"BasicModal\"\n        aria-labelledby=\"basic-modal-title\"\n        aria-describedby=\"modal-box-body-basic\"\n      >\n        <ModalHeader title=\"Basic modal\" labelId=\"basic-modal-title\" />\n        <ModalBody id=\"modal-box-body-basic\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        </ModalBody>\n        <ModalFooter>\n          <Button key=\"confirm\" variant=\"primary\" onClick={handleModalToggle}>\n            Confirm\n          </Button>\n          <Button key=\"cancel\" variant=\"link\" onClick={handleModalToggle}>\n            Cancel\n          </Button>\n        </ModalFooter>\n      </Modal>\n    </Fragment>\n  );\n};\n","title":"Basic modals","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Basic modals give users the option to either confirm or cancel an action.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To flag an open modal, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`isOpen`}
+        </code>
+        {` property. To execute a callback when a modal is closed, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`onClose`}
+        </code>
+        {` property.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<ModalBody>`}
+        </code>
+        {`, `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<ModalHeader>`}
+        </code>
+        {`, and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<ModalFooter>`}
+        </code>
+        {` components are not required, but are typically used to display the main content of the modal, modal title, and any button actions, respectively.`}
+      </p>
+    </Example>,
+  'Scrollable modals': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button, Modal, ModalBody, ModalHeader, ModalFooter, ModalVariant } from '@patternfly/react-core';\n\nexport const ModalWithOverflowingContent: React.FunctionComponent = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {\n    setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);\n  };\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={handleModalToggle}>\n        Show modal\n      </Button>\n      <Modal\n        variant={ModalVariant.small}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\"scrollable-modal-title\"\n        aria-describedby=\"modal-box-body-scrollable\"\n      >\n        <ModalHeader title=\"Modal with overflowing content\" labelId=\"scrollable-modal-title\" />\n        <ModalBody tabIndex={0} id=\"modal-box-body-scrollable\" aria-label=\"Scrollable modal content\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Semper auctor neque vitae\n          tempus. Diam donec adipiscing tristique risus. Augue eget arcu dictum varius duis. Ut enim blandit volutpat\n          maecenas volutpat blandit aliquam. Sit amet mauris commodo quis imperdiet massa tincidunt. Habitant morbi\n          tristique senectus et netus. Fames ac turpis egestas sed tempus urna. Neque laoreet suspendisse interdum\n          consectetur libero id. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Porta nibh venenatis cras\n          sed felis eget velit. Nullam non nisi est sit amet facilisis. Nunc mi ipsum faucibus vitae. Lorem sed risus\n          ultricies tristique nulla aliquet enim tortor at. Egestas sed tempus urna et pharetra pharetra massa massa\n          ultricies. Lacinia quis vel eros donec ac odio tempor orci. Malesuada fames ac turpis egestas integer eget\n          aliquet.\n          <br />\n          <br />\n          Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Molestie at elementum eu facilisis sed odio\n          morbi. Elit pellentesque habitant morbi tristique. Consequat nisl vel pretium lectus quam id leo in vitae.\n          Quis varius quam quisque id diam vel quam elementum. Viverra nam libero justo laoreet sit amet cursus.\n          Sollicitudin tempor id eu nisl nunc. Orci nulla pellentesque dignissim enim sit amet venenatis. Dignissim enim\n          sit amet venenatis urna cursus eget. Iaculis at erat pellentesque adipiscing commodo elit. Faucibus pulvinar\n          elementum integer enim neque volutpat. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Nunc mattis\n          enim ut tellus elementum sagittis vitae. Blandit cursus risus at ultrices. Tellus mauris a diam maecenas sed\n          enim. Non diam phasellus vestibulum lorem sed risus ultricies tristique nulla.\n          <br />\n          <br />\n          Nulla pharetra diam sit amet nisl suscipit adipiscing. Ac tortor vitae purus faucibus ornare suspendisse sed\n          nisi. Sed felis eget velit aliquet sagittis id consectetur purus. Tincidunt tortor aliquam nulla facilisi cras\n          fermentum. Volutpat est velit egestas dui id ornare arcu odio. Pharetra magna ac placerat vestibulum. Ultrices\n          sagittis orci a scelerisque purus semper eget duis at. Nisi est sit amet facilisis magna etiam tempor orci eu.\n          Convallis tellus id interdum velit. Facilisis sed odio morbi quis commodo odio aenean sed.\n          <br />\n          <br />\n          Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Facilisi etiam dignissim diam quis enim\n          lobortis scelerisque fermentum. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Magna\n          etiam tempor orci eu lobortis elementum. Quis auctor elit sed vulputate mi sit. Eleifend quam adipiscing vitae\n          proin sagittis nisl rhoncus mattis rhoncus. Erat velit scelerisque in dictum non. Sit amet nulla facilisi\n          morbi tempus iaculis urna. Enim ut tellus elementum sagittis vitae et leo duis ut. Lectus arcu bibendum at\n          varius vel pharetra vel turpis. Morbi tristique senectus et netus et. Eget aliquet nibh praesent tristique\n          magna sit amet purus gravida. Nisl purus in mollis nunc sed id semper risus. Id neque aliquam vestibulum\n          morbi. Mauris a diam maecenas sed enim ut sem. Egestas tellus rutrum tellus pellentesque.\n        </ModalBody>\n        <ModalFooter>\n          <Button key=\"confirm\" variant=\"primary\" onClick={handleModalToggle}>\n            Confirm\n          </Button>\n          <Button key=\"cancel\" variant=\"link\" onClick={handleModalToggle}>\n            Cancel\n          </Button>\n        </ModalFooter>\n      </Modal>\n    </Fragment>\n  );\n};\n","title":"Scrollable modals","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To enable keyboard-accessible scrolling of a modal’s content, pass `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`tabIndex={0}`}
+        </code>
+        {` to the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<ModalBody>`}
+        </code>
+        {`.`}
+      </p>
+    </Example>,
+  'With a static description': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button, Modal, ModalBody, ModalHeader, ModalFooter, ModalVariant } from '@patternfly/react-core';\n\nexport const ModalWithDescription: React.FunctionComponent = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={handleModalToggle}>\n        Show modal with description\n      </Button>\n      <Modal\n        variant={ModalVariant.small}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\"modal-with-description-title\"\n        aria-describedby=\"modal-box-body-with-description\"\n      >\n        <ModalHeader\n          title=\"Modal with description\"\n          labelId=\"modal-with-description-title\"\n          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.\"\n        />\n\n        <ModalBody tabIndex={0} id=\"modal-box-body-with-description\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Quis eleifend quam adipiscing vitae proin sagittis nisl rhoncus. Semper auctor neque vitae\n          tempus. Diam donec adipiscing tristique risus. Augue eget arcu dictum varius duis. Ut enim blandit volutpat\n          maecenas volutpat blandit aliquam. Sit amet mauris commodo quis imperdiet massa tincidunt. Habitant morbi\n          tristique senectus et netus. Fames ac turpis egestas sed tempus urna. Neque laoreet suspendisse interdum\n          consectetur libero id. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Porta nibh venenatis cras\n          sed felis eget velit. Nullam non nisi est sit amet facilisis. Nunc mi ipsum faucibus vitae. Lorem sed risus\n          ultricies tristique nulla aliquet enim tortor at. Egestas sed tempus urna et pharetra pharetra massa massa\n          ultricies. Lacinia quis vel eros donec ac odio tempor orci. Malesuada fames ac turpis egestas integer eget\n          aliquet.\n          <br />\n          <br />\n          Neque aliquam vestibulum morbi blandit cursus risus at ultrices. Molestie at elementum eu facilisis sed odio\n          morbi. Elit pellentesque habitant morbi tristique. Consequat nisl vel pretium lectus quam id leo in vitae.\n          Quis varius quam quisque id diam vel quam elementum. Viverra nam libero justo laoreet sit amet cursus.\n          Sollicitudin tempor id eu nisl nunc. Orci nulla pellentesque dignissim enim sit amet venenatis. Dignissim enim\n          sit amet venenatis urna cursus eget. Iaculis at erat pellentesque adipiscing commodo elit. Faucibus pulvinar\n          elementum integer enim neque volutpat. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Nunc mattis\n          enim ut tellus elementum sagittis vitae. Blandit cursus risus at ultrices. Tellus mauris a diam maecenas sed\n          enim. Non diam phasellus vestibulum lorem sed risus ultricies tristique nulla.\n          <br />\n          <br />\n          Nulla pharetra diam sit amet nisl suscipit adipiscing. Ac tortor vitae purus faucibus ornare suspendisse sed\n          nisi. Sed felis eget velit aliquet sagittis id consectetur purus. Tincidunt tortor aliquam nulla facilisi cras\n          fermentum. Volutpat est velit egestas dui id ornare arcu odio. Pharetra magna ac placerat vestibulum. Ultrices\n          sagittis orci a scelerisque purus semper eget duis at. Nisi est sit amet facilisis magna etiam tempor orci eu.\n          Convallis tellus id interdum velit. Facilisis sed odio morbi quis commodo odio aenean sed.\n          <br />\n          <br />\n          Eu scelerisque felis imperdiet proin fermentum leo vel orci porta. Facilisi etiam dignissim diam quis enim\n          lobortis scelerisque fermentum. Eleifend donec pretium vulputate sapien nec sagittis aliquam malesuada. Magna\n          etiam tempor orci eu lobortis elementum. Quis auctor elit sed vulputate mi sit. Eleifend quam adipiscing vitae\n          proin sagittis nisl rhoncus mattis rhoncus. Erat velit scelerisque in dictum non. Sit amet nulla facilisi\n          morbi tempus iaculis urna. Enim ut tellus elementum sagittis vitae et leo duis ut. Lectus arcu bibendum at\n          varius vel pharetra vel turpis. Morbi tristique senectus et netus et. Eget aliquet nibh praesent tristique\n          magna sit amet purus gravida. Nisl purus in mollis nunc sed id semper risus. Id neque aliquam vestibulum\n          morbi. Mauris a diam maecenas sed enim ut sem. Egestas tellus rutrum tellus pellentesque.\n        </ModalBody>\n        <ModalFooter>\n          <Button key=\"confirm\" variant=\"primary\" onClick={handleModalToggle}>\n            Confirm\n          </Button>\n          <Button key=\"cancel\" variant=\"link\" onClick={handleModalToggle}>\n            Cancel\n          </Button>\n        </ModalFooter>\n      </Modal>\n    </Fragment>\n  );\n};\n","title":"With a static description","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To provide additional information about a modal, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`description`}
+        </code>
+        {` property. Descriptions are static and do not scroll with other modal content.`}
+      </p>
+    </Example>,
+  'Top aligned': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';\n\nexport const ModalTopAligned: React.FunctionComponent = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={handleModalToggle}>\n        Show top aligned modal\n      </Button>\n      <Modal\n        position=\"top\"\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\"top-aligned-modal-title\"\n        aria-describedby=\"modal-box-body-top-aligned\"\n      >\n        <ModalHeader title=\"Top aligned modal\" labelId=\"top-aligned-modal-title\" />\n        <ModalBody id=\"modal-box-body-top-aligned\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        </ModalBody>\n        <ModalFooter>\n          <Button key=\"confirm\" variant=\"primary\" onClick={handleModalToggle}>\n            Confirm\n          </Button>\n          <Button key=\"cancel\" variant=\"link\" onClick={handleModalToggle}>\n            Cancel\n          </Button>\n        </ModalFooter>\n      </Modal>\n    </Fragment>\n  );\n};\n","title":"Top aligned","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To override a modal's default center alignment, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`position`}
+        </code>
+        {` property. In this example, `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`position`}
+        </code>
+        {` is set to "top", which moves the modal to the top of the screen.`}
+      </p>
+    </Example>,
+  'Modal sizes': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader, ModalVariant, Radio } from '@patternfly/react-core';\n\nexport const ModalSize: React.FunctionComponent = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [selectedVariant, setSelectedVariant] = useState(ModalVariant.small);\n\n  const capitalize = (input: string) => input[0].toUpperCase() + input.substring(1);\n  const formatSizeVariantName = (variant: string) => capitalize(variant);\n\n  const variantOptions = [ModalVariant.small, ModalVariant.medium, ModalVariant.large];\n\n  const renderSizeOptions = variantOptions.map((variant) => (\n    <Radio\n      id={`modal-size-${variant}-selector`}\n      label={`${formatSizeVariantName(variant)} variant`}\n      isChecked={variant === selectedVariant}\n      onChange={() => setSelectedVariant(variant)}\n      key={formatSizeVariantName(variant)}\n      name=\"Variant options\"\n    />\n  ));\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    <Fragment>\n      {renderSizeOptions}\n      <br />\n      <Button variant=\"primary\" onClick={handleModalToggle}>\n        Show modal\n      </Button>\n      <Modal\n        variant={selectedVariant}\n        title=\"Variant modal\"\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\"variant-modal-title\"\n        aria-describedby=\"modal-box-body-variant\"\n      >\n        <ModalHeader title=\"Small modal\" labelId=\"variant-modal-title\" />\n        <ModalBody id=\"modal-box-body-variant\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        </ModalBody>\n        <ModalFooter>\n          <Button key=\"confirm\" variant=\"primary\" onClick={handleModalToggle}>\n            Confirm\n          </Button>\n          <Button key=\"cancel\" variant=\"link\" onClick={handleModalToggle}>\n            Cancel\n          </Button>\n        </ModalFooter>\n      </Modal>\n    </Fragment>\n  );\n};\n","title":"Modal sizes","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To adjust the size of a modal, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`variant`}
+        </code>
+        {` property. Modal variants include "small", "medium", "large", and "default".`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`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.`}
+      </p>
+    </Example>,
+  'Custom width': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';\n\nexport const ModalCustomWidth: React.FunctionComponent = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={handleModalToggle}>\n        Show custom width modal\n      </Button>\n      <Modal\n        width=\"50%\"\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\"custom-width-modal-title\"\n        aria-describedby=\"modal-box-body-custom-width\"\n      >\n        <ModalHeader title=\"Custom width modal\" labelId=\"custom-width-modal-title\" />\n        <ModalBody id=\"modal-box-body-custom-width\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        </ModalBody>\n        <ModalFooter>\n          <Button key=\"confirm\" variant=\"primary\" onClick={handleModalToggle}>\n            Confirm\n          </Button>\n          <Button key=\"cancel\" variant=\"link\" onClick={handleModalToggle}>\n            Cancel\n          </Button>\n        </ModalFooter>\n      </Modal>\n    </Fragment>\n  );\n};\n","title":"Custom width","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To choose a specific width for a modal, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`width`}
+        </code>
+        {` property. The following example has a `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`width`}
+        </code>
+        {` of "50%".`}
+      </p>
+    </Example>,
+  'Custom header': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Button,\n  Modal,\n  ModalBody,\n  ModalFooter,\n  ModalHeader,\n  ModalVariant,\n  Title,\n  TitleSizes,\n  Content,\n  Flex\n} from '@patternfly/react-core';\n\nimport WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';\n\nexport const ModalCustomHeaderFooter: React.FunctionComponent = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={handleModalToggle}>\n        Show custom header/footer modal\n      </Button>\n      <Modal\n        variant={ModalVariant.large}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\"modal-custom-header-label\"\n        aria-describedby=\"modal-custom-header-description\"\n      >\n        <ModalHeader>\n          <Content>\n            <h1 id=\"modal-custom-header-label\">Custom header modal</h1>\n            <p>Add custom content to the header by not passing the titles prop the modal box header component.</p>\n          </Content>\n        </ModalHeader>\n        <ModalBody>\n          <span id=\"modal-custom-header-description\">\n            When static text describing the modal is available outside of the modal header, it can be given an ID that\n            is then passed in as the modal's aria-describedby value.\n          </span>\n          <br />\n          <br />\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        </ModalBody>\n        <ModalFooter>\n          <Title headingLevel=\"h4\" size={TitleSizes.md}>\n            <Flex spaceItems={{ default: 'spaceItemsSm' }}>\n              <WarningTriangleIcon />\n              <span>Custom modal footer.</span>\n            </Flex>\n          </Title>\n        </ModalFooter>\n      </Modal>\n    </Fragment>\n  );\n};\n","title":"Custom header","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To add a custom header to a modal, your custom content must be passed as a child of the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<ModalHeader>`}
+        </code>
+        {` component. Do not pass the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`title`}
+        </code>
+        {` property to `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<ModalHeader>`}
+        </code>
+        {` when using a custom header.`}
+      </p>
+    </Example>,
+  'No header or footer': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button, Modal, ModalBody, ModalVariant } from '@patternfly/react-core';\n\nexport const ModalNoHeaderFooter: React.FunctionComponent = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={handleModalToggle}>\n        Show no header/footer modal\n      </Button>\n      <Modal\n        variant={ModalVariant.large}\n        isOpen={isModalOpen}\n        aria-label=\"No header/footer modal\"\n        aria-describedby=\"modal-no-header-description\"\n        onClose={handleModalToggle}\n      >\n        <ModalBody>\n          <span id=\"modal-no-header-description\">\n            When static text describing the modal is available outside of the modal header, it can be given an ID that\n            is then passed in as the modal's aria-describedby value.\n          </span>\n          <br />\n          <br />\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        </ModalBody>\n      </Modal>\n    </Fragment>\n  );\n};\n","title":"No header or footer","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To exclusively present information in a modal, remove the header and/or footer.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`When a modal has no header or footer, make sure to add an `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`aria-label`}
+        </code>
+        {` explicitly stating this, so that those using assistive technologies can understand this context.`}
+      </p>
+    </Example>,
+  'Title icon': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';\n\nexport const ModalTitleIcon: React.FunctionComponent = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={handleModalToggle}>\n        Show title icon modal\n      </Button>\n      <Modal\n        isOpen={isModalOpen}\n        aria-describedby=\"modal-title-icon-description\"\n        aria-labelledby=\"title-icon-modal-title\"\n        onClose={handleModalToggle}\n      >\n        <ModalHeader title=\"Title icon modal\" titleIconVariant=\"warning\" labelId=\"title-icon-modal-title\" />\n        <ModalBody>\n          <span id=\"modal-title-icon-description\">\n            When static text describing the modal is available outside of the modal header, it can be given an ID that\n            is then passed in as the modal's aria-describedby value.\n          </span>\n          <br />\n          <br />\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        </ModalBody>\n        <ModalFooter>\n          <Button key=\"confirm\" variant=\"primary\" onClick={handleModalToggle}>\n            Confirm\n          </Button>\n          <Button key=\"cancel\" variant=\"link\" onClick={handleModalToggle}>\n            Cancel\n          </Button>\n        </ModalFooter>\n      </Modal>\n    </Fragment>\n  );\n};\n","title":"Title icon","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To add an icon before a modal’s title, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`titleIconVariant`}
+        </code>
+        {` property, which can be set to a "success", "danger", "warning", or "info" variant. The following example uses a "warning" variant.`}
+      </p>
+    </Example>,
+  'Custom title icon': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';\nimport RhUiAttentionBellFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-attention-bell-fill-icon';\n\nexport const ModalCustomTitleIcon: React.FunctionComponent = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={handleModalToggle}>\n        Show custom title icon modal\n      </Button>\n      <Modal\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-describedby=\"modal-custom-icon-description\"\n        aria-labelledby=\"custom-title-icon-modal-title\"\n      >\n        <ModalHeader\n          title=\"Custom title icon modal\"\n          titleIconVariant={RhUiAttentionBellFillIcon}\n          labelId=\"custom-title-icon-modal-title\"\n        />\n        <ModalBody>\n          <span id=\"modal-custom-icon-description\">\n            When static text describing the modal is available outside of the modal header, it can be given an ID that\n            is then passed in as the modal's aria-describedby value.\n          </span>\n          <br />\n          <br />\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        </ModalBody>\n        <ModalFooter>\n          <Button key=\"confirm\" variant=\"primary\" onClick={handleModalToggle}>\n            Confirm\n          </Button>\n          <Button key=\"cancel\" variant=\"link\" onClick={handleModalToggle}>\n            Cancel\n          </Button>\n        </ModalFooter>\n      </Modal>\n    </Fragment>\n  );\n};\n","title":"Custom title icon","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To add a custom icon before a modal’s title, set `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`titleIconVariant`}
+        </code>
+        {` to an imported custom icon. The following example imports and uses an icon.`}
+      </p>
+    </Example>,
+  'With wizard': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button, Modal, ModalVariant, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';\n\nexport const ModalWithWizard: React.FunctionComponent = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {\n    setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);\n  };\n\n  const handleWizardToggle = () => {\n    setIsModalOpen((prevIsModalOpen) => !prevIsModalOpen);\n  };\n\n  const numberedSteps = [1, 2, 3, 4].map((stepNumber) => (\n    <WizardStep name={`Step ${stepNumber}`} key={`Step ${stepNumber}`} id={`with-wizard-step-${stepNumber}`}>\n      {`Step ${stepNumber}`}\n    </WizardStep>\n  ));\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={handleModalToggle}>\n        Show wizard modal\n      </Button>\n      <Modal\n        variant={ModalVariant.large}\n        isOpen={isModalOpen}\n        aria-labelledby=\"modal-wizard-label\"\n        aria-describedby=\"modal-wizard-description\"\n      >\n        <Wizard\n          height={400}\n          header={\n            <WizardHeader\n              title=\"Wizard modal\"\n              titleId=\"modal-wizard-label\"\n              description=\"This is a wizard inside of a modal.\"\n              descriptionId=\"modal-wizard-description\"\n              onClose={handleWizardToggle}\n              closeButtonAriaLabel=\"Close wizard\"\n            />\n          }\n          onClose={handleWizardToggle}\n        >\n          {numberedSteps}\n          <WizardStep\n            name=\"Review\"\n            id=\"with-wizard-review-step\"\n            footer={{ nextButtonText: 'Finish', onNext: handleWizardToggle }}\n          >\n            Review step\n          </WizardStep>\n        </Wizard>\n      </Modal>\n    </Fragment>\n  );\n};\n","title":"With wizard","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To guide users through a series of steps in a modal, you can add a `}
+        
+        <PatternflyThemeLink {...{"to":"/components/wizard","className":""}}>
+          {`wizard`}
+        </PatternflyThemeLink>
+        {` to a modal. To configure the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Wizard>`}
+        </code>
+        {`, pass an array that contains a “name” and “component” value for each step into the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`steps`}
+        </code>
+        {` property.`}
+      </p>
+    </Example>,
+  'With dropdown': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport {\n  Button,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement,\n  Modal,\n  ModalBody,\n  ModalHeader,\n  ModalFooter,\n  ModalVariant\n} from '@patternfly/react-core';\n\nexport const ModalWithDropdown: React.FunctionComponent = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {\n    setIsModalOpen(!isModalOpen);\n    setIsDropdownOpen(false);\n  };\n\n  const handleDropdownToggle = () => {\n    setIsDropdownOpen(!isDropdownOpen);\n  };\n\n  const onSelect = () => {\n    setIsDropdownOpen(!isDropdownOpen);\n    onFocus();\n  };\n\n  const onFocus = () => {\n    if (typeof document !== 'undefined') {\n      const element = document.getElementById('modal-dropdown-toggle');\n      (element as HTMLElement)?.focus();\n    }\n  };\n\n  const onEscapePress = (event: KeyboardEvent) => {\n    if (isDropdownOpen) {\n      setIsDropdownOpen(!isDropdownOpen);\n      onFocus();\n    } else {\n      handleModalToggle(event);\n    }\n  };\n\n  const getAppendLocation = () => {\n    // document doesn't exist when PatternFly website docs framework gets pre-rendered\n    // this is just to avoid that issue - works fine at runtime without it\n    if (typeof document !== 'undefined' && document.getElementById) {\n      return document.getElementById('modal-with-dropdown-focus-trap');\n    } else {\n      return 'inline';\n    }\n  };\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={handleModalToggle}>\n        Show dropdown modal\n      </Button>\n      <Modal\n        variant={ModalVariant.small}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        onEscapePress={onEscapePress}\n        aria-labelledby=\"modal-with-dropdown\"\n        aria-describedby=\"modal-box-body-with-dropdown\"\n        focusTrapId=\"modal-with-dropdown-focus-trap\"\n      >\n        <ModalHeader title=\"Dropdown modal\" labelId=\"modal-with-dropdown\" />\n        <ModalBody id=\"modal-box-body-with-dropdown\">\n          <div>\n            Using the Dropdown's default append location will interfere with keyboard accessibility due to the modal's\n            built-in focus trap. To allow the dropdown to visually break out of the modal container, set the Dropdown's\n            popperProps appendTo property to id of the focus trap for the modal. This can be done by adding prop\n            focusTrapId to the modal, and then setting the append location to that as per this example. Otherwise you\n            can use \"inline\" to allow it to scroll within the modal itself. Appending to the focus trap should allow the\n            menu to expand visually outside the Modal (no scrollbar created in the Modal itself), and still allow\n            focusing the content within that menu via keyboard. You should also handle the modal's closing behavior by\n            listening to the\n            <em>onEscapePress</em> callback on the Modal component. This allows the \"escape\" key to collapse the\n            dropdown without closing the entire modal.\n          </div>\n          <br />\n          <div>\n            <Dropdown\n              isOpen={isDropdownOpen}\n              onSelect={onSelect}\n              onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}\n              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (\n                <MenuToggle\n                  id=\"modal-dropdown-toggle\"\n                  ref={toggleRef}\n                  onClick={handleDropdownToggle}\n                  isExpanded={isDropdownOpen}\n                >\n                  Dropdown\n                </MenuToggle>\n              )}\n              popperProps={{\n                appendTo: getAppendLocation()\n              }}\n            >\n              <DropdownList>\n                <DropdownItem value={0} key=\"action\">\n                  Action\n                </DropdownItem>\n                <DropdownItem\n                  value={1}\n                  key=\"link\"\n                  to=\"#default-link2\"\n                  // Prevent the default onClick functionality for example purposes\n                  onClick={(ev: any) => ev.preventDefault()}\n                >\n                  Link\n                </DropdownItem>\n                <DropdownItem value={2} isDisabled key=\"disabled action\">\n                  Disabled Action\n                </DropdownItem>\n                <DropdownItem value={3} isDisabled key=\"disabled link\" to=\"#default-link4\">\n                  Disabled Link\n                </DropdownItem>\n              </DropdownList>\n            </Dropdown>\n          </div>\n        </ModalBody>\n        <ModalFooter>\n          <Button key=\"confirm\" variant=\"primary\" onClick={handleModalToggle}>\n            Confirm\n          </Button>\n          <Button key=\"cancel\" variant=\"link\" onClick={handleModalToggle}>\n            Cancel\n          </Button>\n        </ModalFooter>\n      </Modal>\n    </Fragment>\n  );\n};\n","title":"With dropdown","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To present a menu of actions or links to a user, you can add a `}
+        
+        <PatternflyThemeLink {...{"to":"/components/menus/dropdown","className":""}}>
+          {`dropdown`}
+        </PatternflyThemeLink>
+        {` to a modal.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Using the Dropdown's default append location will interfere with keyboard accessibility due to the modal's
+built-in focus trap. To allow the dropdown to visually break out of the modal container, set the Dropdown's
+`}
+        
+        <code {...{"className":"ws-code "}}>
+          {`popperProps appendTo`}
+        </code>
+        {` property to id of the focus trap for the modal. This can be done by adding prop
+`}
+        
+        <code {...{"className":"ws-code "}}>
+          {`focusTrapId`}
+        </code>
+        {` to the modal, and then setting the append location to that as per this example. Otherwise you
+can use `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`inline`}
+        </code>
+        {` to allow it to scroll within the modal itself. Appending to the focus trap should allow the
+menu to expand visually outside the Modal (no scrollbar created in the Modal itself), and still allow
+focusing the content within that menu via keyboard. You should also handle the modal's closing behavior by
+listening to the
+`}
+        
+        <code {...{"className":"ws-code "}}>
+          {`onEscapePress`}
+        </code>
+        {` callback on the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Modal>`}
+        </code>
+        {` component. This allows the "escape" key to collapse the
+dropdown without closing the entire modal.`}
+      </p>
+    </Example>,
+  'With help': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader, Popover } from '@patternfly/react-core';\nimport HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';\n\nexport const ModalWithHelp: React.FunctionComponent = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={handleModalToggle}>\n        Show with help modal\n      </Button>\n      <Modal\n        variant=\"small\"\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\"with-help-modal-title\"\n        aria-describedby=\"modal-box-body-with-help\"\n      >\n        <ModalHeader\n          title=\"With help modal\"\n          labelId=\"with-help-modal-title\"\n          help={\n            <Popover\n              headerContent={<div>Help Popover</div>}\n              bodyContent={\n                <div>\n                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla\n                  turpis.\n                </div>\n              }\n              footerContent=\"Popover Footer\"\n            >\n              <Button variant=\"plain\" aria-label=\"Help\" icon={<HelpIcon />} />\n            </Popover>\n          }\n        />\n        <ModalBody id=\"modal-box-body-with-help\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n        </ModalBody>\n        <ModalFooter>\n          <Button key=\"confirm\" variant=\"primary\" onClick={handleModalToggle}>\n            Confirm\n          </Button>\n          <Button key=\"cancel\" variant=\"link\" onClick={handleModalToggle}>\n            Cancel\n          </Button>\n        </ModalFooter>\n      </Modal>\n    </Fragment>\n  );\n};\n","title":"With help","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To help simplify and explain complex models, add a help `}
+        
+        <PatternflyThemeLink {...{"to":"/components/popover","className":""}}>
+          {`popover`}
+        </PatternflyThemeLink>
+        {`. 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.`}
+      </p>
+    </Example>,
+  'With form': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useRef, useState } from 'react';\nimport {\n  Button,\n  Form,\n  FormGroup,\n  FormGroupLabelHelp,\n  Modal,\n  ModalBody,\n  ModalFooter,\n  ModalHeader,\n  ModalVariant,\n  Popover,\n  TextInput\n} from '@patternfly/react-core';\n\nexport const ModalWithForm: React.FunctionComponent = () => {\n  const [isModalOpen, setModalOpen] = useState(false);\n  const [nameValue, setNameValue] = useState('');\n  const [emailValue, setEmailValue] = useState('');\n  const [addressValue, setAddressValue] = useState('');\n  const nameLabelHelpRef = useRef(null);\n  const emailLabelHelpRef = useRef(null);\n  const addressLabelHelpRef = useRef(null);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {\n    setModalOpen(!isModalOpen);\n  };\n\n  const handleNameInputChange = (_event, value: string) => {\n    setNameValue(value);\n  };\n\n  const handleEmailInputChange = (_event, value: string) => {\n    setEmailValue(value);\n  };\n  const handleAddressInputChange = (_event, value: string) => {\n    setAddressValue(value);\n  };\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={handleModalToggle}>\n        Show modal with form\n      </Button>\n      <Modal\n        variant={ModalVariant.small}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\"form-modal-title\"\n        aria-describedby=\"modal-box-description-form\"\n      >\n        <ModalHeader\n          title=\"Create account\"\n          description=\"Enter your personal information below to create an account.\"\n          descriptorId=\"modal-box-description-form\"\n          labelId=\"form-modal-title\"\n        />\n        <ModalBody>\n          <Form id=\"modal-with-form-form\">\n            <FormGroup\n              label=\"Name\"\n              labelHelp={\n                <Popover\n                  triggerRef={nameLabelHelpRef}\n                  headerContent={\n                    <div>\n                      The\n                      <a href=\"https://schema.org/name\" target=\"_blank\" rel=\"noopener noreferrer\">\n                        name\n                      </a>\n                      of a\n                      <a href=\"https://schema.org/Person\" target=\"_blank\" rel=\"noopener noreferrer\">\n                        Person\n                      </a>\n                    </div>\n                  }\n                  bodyContent={\n                    <div>\n                      Often composed of\n                      <a href=\"https://schema.org/givenName\" target=\"_blank\" rel=\"noopener noreferrer\">\n                        givenName\n                      </a>\n                      and\n                      <a href=\"https://schema.org/familyName\" target=\"_blank\" rel=\"noopener noreferrer\">\n                        familyName\n                      </a>\n                      .\n                    </div>\n                  }\n                >\n                  <FormGroupLabelHelp ref={nameLabelHelpRef} aria-label=\"More info for name field\" />\n                </Popover>\n              }\n              isRequired\n              fieldId=\"modal-with-form-form-name\"\n            >\n              <TextInput\n                isRequired\n                type=\"email\"\n                id=\"modal-with-form-form-name\"\n                name=\"modal-with-form-form-name\"\n                value={nameValue}\n                onChange={handleNameInputChange}\n              />\n            </FormGroup>\n            <FormGroup\n              label=\"E-mail\"\n              labelHelp={\n                <Popover\n                  triggerRef={emailLabelHelpRef}\n                  headerContent={\n                    <div>\n                      The\n                      <a href=\"https://schema.org/email\" target=\"_blank\" rel=\"noopener noreferrer\">\n                        e-mail\n                      </a>\n                      of a\n                      <a href=\"https://schema.org/Person\" target=\"_blank\" rel=\"noopener noreferrer\">\n                        person\n                      </a>\n                    </div>\n                  }\n                  bodyContent={\n                    <div>\n                      Valid\n                      <a href=\"https://schema.org/email\" target=\"_blank\" rel=\"noopener noreferrer\">\n                        e-mail\n                      </a>\n                      address.\n                    </div>\n                  }\n                >\n                  <FormGroupLabelHelp ref={emailLabelHelpRef} aria-label=\"More info for e-mail field\" />\n                </Popover>\n              }\n              isRequired\n              fieldId=\"modal-with-form-form-email\"\n            >\n              <TextInput\n                isRequired\n                type=\"email\"\n                id=\"modal-with-form-form-email\"\n                name=\"modal-with-form-form-email\"\n                value={emailValue}\n                onChange={handleEmailInputChange}\n              />\n            </FormGroup>\n            <FormGroup\n              label=\"Address\"\n              labelHelp={\n                <Popover\n                  triggerRef={addressLabelHelpRef}\n                  headerContent={\n                    <div>\n                      The\n                      <a href=\"https://schema.org/address\" target=\"_blank\" rel=\"noopener noreferrer\">\n                        address\n                      </a>\n                      of a\n                      <a href=\"https://schema.org/Person\" target=\"_blank\" rel=\"noopener noreferrer\">\n                        person\n                      </a>\n                    </div>\n                  }\n                  bodyContent={\n                    <div>\n                      Valid\n                      <a href=\"https://schema.org/PostalAddress\" target=\"_blank\" rel=\"noopener noreferrer\">\n                        postal address.\n                      </a>\n                    </div>\n                  }\n                >\n                  <FormGroupLabelHelp ref={addressLabelHelpRef} aria-label=\"More info for address field\" />\n                </Popover>\n              }\n              isRequired\n              fieldId=\"modal-with-form-form-address\"\n            >\n              <TextInput\n                isRequired\n                type=\"email\"\n                id=\"modal-with-form-form-address\"\n                name=\"modal-with-form-form-address\"\n                value={addressValue}\n                onChange={handleAddressInputChange}\n              />\n            </FormGroup>\n          </Form>\n        </ModalBody>\n        <ModalFooter>\n          <Button key=\"create\" variant=\"primary\" form=\"modal-with-form-form\" onClick={handleModalToggle}>\n            Confirm\n          </Button>\n          <Button key=\"cancel\" variant=\"link\" onClick={handleModalToggle}>\n            Cancel\n          </Button>\n        </ModalFooter>\n      </Modal>\n    </Fragment>\n  );\n};\n","title":"With form","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To collect user input within a modal, you can add a `}
+        
+        <PatternflyThemeLink {...{"to":"/components/forms/form","className":""}}>
+          {`form`}
+        </PatternflyThemeLink>
+        {`.`}
+      </p>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To enable form submission from a button in the modal's footer (outside of the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`<Form>`}
+        </code>
+        {`), set the button's `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`form`}
+        </code>
+        {` property equal to the form's id.`}
+      </p>
+    </Example>,
+  'Custom focus': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button, Modal, ModalBody, ModalFooter, ModalHeader } from '@patternfly/react-core';\n\nexport const ModalCustomFocus: React.FunctionComponent = () => {\n  const [isModalOpen, setIsModalOpen] = useState(false);\n\n  const handleModalToggle = (_event: KeyboardEvent | React.MouseEvent) => {\n    setIsModalOpen(!isModalOpen);\n  };\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={handleModalToggle} ouiaId=\"ShowBasicModal\">\n        Show modal with custom focus\n      </Button>\n      <Modal\n        elementToFocus=\"#modal-custom-focus-confirm-button\"\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-labelledby=\"custom-focus-modal-title\"\n        aria-describedby=\"modal-box-body-custom-focus\"\n      >\n        <ModalHeader title=\"Modal with custom focus\" labelId=\"custom-focus-modal-title\" />\n        <ModalBody id=\"modal-box-body-custom-focus\">\n          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore\n          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo\n          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla\n          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id\n          est laborum.\n          <ModalFooter>\n            <Button id=\"modal-custom-focus-confirm-button\" key=\"confirm\" variant=\"primary\" onClick={handleModalToggle}>\n              Confirm\n            </Button>\n            <Button key=\"cancel\" variant=\"link\" onClick={handleModalToggle}>\n              Cancel\n            </Button>\n          </ModalFooter>\n        </ModalBody>\n      </Modal>\n    </Fragment>\n  );\n};\n","title":"Custom focus","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To customize which element inside the modal receives focus when initially opened, use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`elementToFocus`}
+        </code>
+        {` property\`.`}
+      </p>
+    </Example>
+};
+
+const Component = () => (
+  <React.Fragment>
+    <AutoLinkHeader {...{"id":"examples","headingLevel":"h2","className":"ws-title ws-h2"}}>
+      {`Examples`}
+    </AutoLinkHeader>
+    {React.createElement(pageData.examples["Basic modals"])}
+    {React.createElement(pageData.examples["Scrollable modals"])}
+    {React.createElement(pageData.examples["With a static description"])}
+    {React.createElement(pageData.examples["Top aligned"])}
+    {React.createElement(pageData.examples["Modal sizes"])}
+    {React.createElement(pageData.examples["Custom width"])}
+    {React.createElement(pageData.examples["Custom header"])}
+    {React.createElement(pageData.examples["No header or footer"])}
+    {React.createElement(pageData.examples["Title icon"])}
+    {React.createElement(pageData.examples["Custom title icon"])}
+    {React.createElement(pageData.examples["With wizard"])}
+    {React.createElement(pageData.examples["With dropdown"])}
+    {React.createElement(pageData.examples["With help"])}
+    {React.createElement(pageData.examples["With form"])}
+    {React.createElement(pageData.examples["Custom focus"])}
+  </React.Fragment>
+);
+Component.displayName = 'ComponentsModalReactDocs';
+Component.pageData = pageData;
+
+export default Component;