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

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

@@ -0,0 +1,554 @@
+import React from 'react';
+import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfly/documentation-framework/components';
+import { Fragment, useRef, useState } from 'react';
+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 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 spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
+import formStyles from '@patternfly/react-styles/css/components/Form/form';
+const pageData = {
+  "id": "Modal",
+  "section": "components",
+  "subsection": "",
+  "deprecated": true,
+  "template": false,
+  "beta": false,
+  "demo": false,
+  "newImplementationLink": false,
+  "source": "react-deprecated",
+  "tabName": null,
+  "slug": "/components/modal/react-deprecated",
+  "sourceLink": "https://github.com/patternfly/patternfly-react/blob/main/packages/react-core/src/deprecated/components/Modal/examples/Modal.md",
+  "relPath": "packages/react-core/src/deprecated/components/Modal/examples/Modal.md",
+  "propComponents": [
+    {
+      "name": "Modal",
+      "description": "",
+      "props": [
+        {
+          "name": "actions",
+          "type": "any",
+          "description": "Action buttons to add to the standard modal footer. Ignored if the footer property\nis passed in.",
+          "defaultValue": "[]"
+        },
+        {
+          "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 descriptor.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "aria-label",
+          "type": "string",
+          "description": "Accessible descriptor of the modal.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "aria-labelledby",
+          "type": "string",
+          "description": "Id to use for the modal box label.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "bodyAriaLabel",
+          "type": "string",
+          "description": "Accessible label applied to the modal box body. This should be used to communicate\nimportant information about the modal box body div element if needed, such as that it\nis scrollable."
+        },
+        {
+          "name": "bodyAriaRole",
+          "type": "string",
+          "description": "Accessible role applied to the modal box body. This will default to \"region\" if the\nbodyAriaLabel property is passed in. Set to a more appropriate role as applicable\nbased on the modal content and context."
+        },
+        {
+          "name": "children",
+          "type": "React.ReactNode",
+          "description": "Content rendered inside the modal.",
+          "required": true
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "description": "Additional classes added to the modal.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "description",
+          "type": "React.ReactNode",
+          "description": "Description of 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": "footer",
+          "type": "React.ReactNode",
+          "description": "Custom footer."
+        },
+        {
+          "name": "hasNoBodyWrapper",
+          "type": "boolean",
+          "description": "Flag indicating if modal content should be placed in a modal box body wrapper.",
+          "defaultValue": "false"
+        },
+        {
+          "name": "header",
+          "type": "React.ReactNode",
+          "description": "Complex header (more than just text), supersedes the title property for header content."
+        },
+        {
+          "name": "help",
+          "type": "React.ReactNode",
+          "description": "Optional help section for the modal header."
+        },
+        {
+          "name": "id",
+          "type": "string",
+          "description": "An id to use for the modal box container.",
+          "defaultValue": "undefined"
+        },
+        {
+          "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": "A callback for when the close button is clicked.",
+          "defaultValue": "() => undefined as any"
+        },
+        {
+          "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": "showClose",
+          "type": "boolean",
+          "description": "Flag to show the close button in the header area of the modal.",
+          "defaultValue": "true"
+        },
+        {
+          "name": "title",
+          "type": "React.ReactNode",
+          "description": "Text content of the modal header.",
+          "defaultValue": "''"
+        },
+        {
+          "name": "titleIconVariant",
+          "type": "'success' | 'danger' | 'warning' | 'info' | 'custom' | React.ComponentType<any>",
+          "description": "Optional alert icon (or other) to show before the title of the modal header. When the\npredefined alert types are used the default styling will be automatically applied.",
+          "defaultValue": "null"
+        },
+        {
+          "name": "titleLabel",
+          "type": "string",
+          "description": "Optional title label text for screen readers.",
+          "defaultValue": "''"
+        },
+        {
+          "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."
+        }
+      ]
+    }
+  ],
+  "cssPrefix": [
+    "pf-v6-c-modal-box"
+  ],
+  "examples": [
+    "Basic modals",
+    "Scrollable modals",
+    "With a static description",
+    "Top aligned",
+    "Small modal",
+    "Medium modal",
+    "Large modal",
+    "Custom width",
+    "Custom header and footer",
+    "No header or footer",
+    "Title icon",
+    "Custom title icon",
+    "With wizard",
+    "With dropdown",
+    "With help",
+    "With form",
+    "Custom focus"
+  ]
+};
+pageData.liveContext = {
+  Fragment,
+  useRef,
+  useState,
+  ModalDeprecated,
+  ModalVariantDeprecated,
+  WarningTriangleIcon,
+  RhMicronsCaretDownIcon,
+  RhUiAttentionBellFillIcon,
+  HelpIcon,
+  spacing,
+  formStyles
+};
+pageData.examples = {
+  'Basic modals': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button } from '@patternfly/react-core';\nimport { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';\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      <ModalDeprecated\n        title=\"Basic modal\"\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\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        ]}\n        ouiaId=\"BasicModal\"\n      >\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 est\n        laborum.\n      </ModalDeprecated>\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. 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>
+    </Example>,
+  'Scrollable modals': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button } from '@patternfly/react-core';\nimport { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';\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      <ModalDeprecated\n        bodyAriaLabel=\"Scrollable modal content\"\n        tabIndex={0}\n        variant={ModalVariantDeprecated.small}\n        title=\"Modal with overflowing content\"\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\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        ]}\n      >\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 tempus.\n        Diam donec adipiscing tristique risus. Augue eget arcu dictum varius duis. Ut enim blandit volutpat maecenas\n        volutpat blandit aliquam. Sit amet mauris commodo quis imperdiet massa tincidunt. Habitant morbi tristique\n        senectus et netus. Fames ac turpis egestas sed tempus urna. Neque laoreet suspendisse interdum consectetur\n        libero id. Volutpat lacus laoreet non curabitur gravida arcu ac tortor. Porta nibh venenatis cras sed felis eget\n        velit. Nullam non nisi est sit amet facilisis. Nunc mi ipsum faucibus vitae. Lorem sed risus ultricies tristique\n        nulla aliquet enim tortor at. Egestas sed tempus urna et pharetra pharetra massa massa ultricies. Lacinia quis\n        vel eros donec ac odio tempor orci. Malesuada fames ac turpis egestas integer eget 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. Quis\n        varius quam quisque id diam vel quam elementum. Viverra nam libero justo laoreet sit amet cursus. Sollicitudin\n        tempor id eu nisl nunc. Orci nulla pellentesque dignissim enim sit amet venenatis. Dignissim enim sit amet\n        venenatis urna cursus eget. Iaculis at erat pellentesque adipiscing commodo elit. Faucibus pulvinar elementum\n        integer enim neque volutpat. Nullam vehicula ipsum a arcu cursus vitae congue mauris. Nunc mattis enim ut tellus\n        elementum sagittis vitae. Blandit cursus risus at ultrices. Tellus mauris a diam maecenas sed enim. Non diam\n        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 morbi\n        tempus iaculis urna. Enim ut tellus elementum sagittis vitae et leo duis ut. Lectus arcu bibendum at varius vel\n        pharetra vel turpis. Morbi tristique senectus et netus et. Eget aliquet nibh praesent tristique magna sit amet\n        purus gravida. Nisl purus in mollis nunc sed id semper risus. Id neque aliquam vestibulum morbi. Mauris a diam\n        maecenas sed enim ut sem. Egestas tellus rutrum tellus pellentesque.\n      </ModalDeprecated>\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 "}}>
+          {`<Modal>`}
+        </code>
+        {`.`}
+      </p>
+    </Example>,
+  'With a static description': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button } from '@patternfly/react-core';\nimport { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';\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      <ModalDeprecated\n        title=\"Modal with description\"\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\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        actions={[\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        ]}\n      >\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 est\n        laborum.\n      </ModalDeprecated>\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 } from '@patternfly/react-core';\nimport { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';\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      <ModalDeprecated\n        position=\"top\"\n        title=\"Top aligned modal\"\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\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        ]}\n      >\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 est\n        laborum.\n      </ModalDeprecated>\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>,
+  'Small modal': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button } from '@patternfly/react-core';\nimport { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';\n\nexport const ModalSmall: 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 small modal\n      </Button>\n      <ModalDeprecated\n        variant={ModalVariantDeprecated.small}\n        title=\"Small modal\"\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\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        ]}\n      >\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 est\n        laborum.\n      </ModalDeprecated>\n    </Fragment>\n  );\n};\n","title":"Small modal","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 "}}>
+        {`The following example displays a "small" modal by passing in `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`variant={ModalVariant.small}`}
+        </code>
+        {`.`}
+      </p>
+    </Example>,
+  'Medium modal': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button } from '@patternfly/react-core';\nimport { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';\n\nexport const ModalMedium: 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 medium modal\n      </Button>\n      <ModalDeprecated\n        variant={ModalVariantDeprecated.medium}\n        title=\"Medium modal\"\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\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        ]}\n      >\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 est\n        laborum.\n      </ModalDeprecated>\n    </Fragment>\n  );\n};\n","title":"Medium modal","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The following example displays a "medium" modal by passing in `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`variant={ModalVariant.medium}`}
+        </code>
+        {`.`}
+      </p>
+    </Example>,
+  'Large modal': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button } from '@patternfly/react-core';\nimport { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';\n\nexport const ModalLarge: 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 large modal\n      </Button>\n      <ModalDeprecated\n        variant={ModalVariantDeprecated.large}\n        title=\"Large modal\"\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\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        ]}\n      >\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 est\n        laborum.\n      </ModalDeprecated>\n    </Fragment>\n  );\n};\n","title":"Large modal","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`The following example displays a "large" modal by passing in `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`variant={ModalVariant.large}`}
+        </code>
+        {`.`}
+      </p>
+    </Example>,
+  'Custom width': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button } from '@patternfly/react-core';\nimport { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';\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      <ModalDeprecated\n        width=\"50%\"\n        title=\"Custom width modal\"\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\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        ]}\n      >\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 est\n        laborum.\n      </ModalDeprecated>\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 and footer': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button, Title, TitleSizes } from '@patternfly/react-core';\nimport { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';\nimport WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';\nimport spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';\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  const header = (\n    <Fragment>\n      <Title id=\"modal-custom-header-label\" headingLevel=\"h1\" size={TitleSizes['2xl']}>\n        Custom header/footer modal\n      </Title>\n      <p className={spacing.ptSm}>Allows for custom content in the header and/or footer by passing components.</p>\n    </Fragment>\n  );\n\n  const footer = (\n    <Title headingLevel=\"h4\" size={TitleSizes.md}>\n      <WarningTriangleIcon />\n      <span className={spacing.plSm}>Custom modal footer.</span>\n    </Title>\n  );\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={handleModalToggle}>\n        Show custom header/footer modal\n      </Button>\n      <ModalDeprecated\n        variant={ModalVariantDeprecated.large}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        header={header}\n        aria-labelledby=\"modal-custom-header-label\"\n        aria-describedby=\"modal-custom-header-description\"\n        footer={footer}\n      >\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 is\n          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 est\n        laborum.\n      </ModalDeprecated>\n    </Fragment>\n  );\n};\n","title":"Custom header and footer","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`To add a custom header and footer to a modal, set the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`header`}
+        </code>
+        {` and `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`footer`}
+        </code>
+        {` 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.`}
+      </p>
+    </Example>,
+  'No header or footer': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button } from '@patternfly/react-core';\nimport { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';\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      <ModalDeprecated\n        variant={ModalVariantDeprecated.large}\n        isOpen={isModalOpen}\n        aria-label=\"No header/footer modal\"\n        aria-describedby=\"modal-no-header-description\"\n        onClose={handleModalToggle}\n      >\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 is\n          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 est\n        laborum.\n      </ModalDeprecated>\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 `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`header`}
+        </code>
+        {` and/or `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`footer`}
+        </code>
+        {`.`}
+      </p>
+    </Example>,
+  'Title icon': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button } from '@patternfly/react-core';\nimport { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';\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      <ModalDeprecated\n        title=\"Title icon modal\"\n        titleIconVariant=\"warning\"\n        isOpen={isModalOpen}\n        aria-describedby=\"modal-title-icon-description\"\n        onClose={handleModalToggle}\n        actions={[\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        ]}\n      >\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 is\n          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 est\n        laborum.\n      </ModalDeprecated>\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>
+        {`, 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.`}
+      </p>
+    </Example>,
+  'Custom title icon': props => 
+    <Example {...pageData} {...props} {...{"code":"import { Fragment, useState } from 'react';\nimport { Button } from '@patternfly/react-core';\nimport { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';\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      <ModalDeprecated\n        title=\"Custom title icon modal\"\n        titleIconVariant={RhUiAttentionBellFillIcon}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        aria-describedby=\"modal-custom-icon-description\"\n        actions={[\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        ]}\n      >\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 is\n          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 est\n        laborum.\n      </ModalDeprecated>\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, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';\nimport { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';\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      <ModalDeprecated\n        variant={ModalVariantDeprecated.large}\n        showClose={false}\n        isOpen={isModalOpen}\n        aria-labelledby=\"modal-wizard-label\"\n        aria-describedby=\"modal-wizard-description\"\n        onClose={handleModalToggle}\n        hasNoBodyWrapper\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              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      </ModalDeprecated>\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 { Button, Dropdown, DropdownList, DropdownItem, MenuToggle, MenuToggleElement } from '@patternfly/react-core';\nimport { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';\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    const element = document.getElementById('modal-dropdown-toggle');\n    (element as HTMLElement).focus();\n  };\n\n  const onEscapePress = (event: KeyboardEvent) => {\n    if (isDropdownOpen) {\n      setIsDropdownOpen(!isDropdownOpen);\n      onFocus();\n    } else {\n      handleModalToggle(event);\n    }\n  };\n\n  return (\n    <Fragment>\n      <Button variant=\"primary\" onClick={handleModalToggle}>\n        Show dropdown modal\n      </Button>\n      <ModalDeprecated\n        title=\"Dropdown modal\"\n        variant={ModalVariantDeprecated.small}\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\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        ]}\n        onEscapePress={onEscapePress}\n      >\n        <div>\n          Set the dropdown <strong>menuAppendTo</strong> prop to <em>parent</em> in order to allow the dropdown menu\n          break out of the modal container. You'll also want to handle closing of the modal yourself, by listening to\n          the <strong>onEscapePress</strong> callback on the Modal component, so you can close the Dropdown first if\n          it's open 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 ref={toggleRef} onClick={handleDropdownToggle} isExpanded={isDropdownOpen}>\n                Dropdown\n              </MenuToggle>\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      </ModalDeprecated>\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. To allow the dropdown to visually break out of the modal container, set the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`menuAppendTo`}
+        </code>
+        {` property to “parent”. 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, Popover } from '@patternfly/react-core';\nimport { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';\n\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      <ModalDeprecated\n        variant=\"small\"\n        title=\"With help modal\"\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 turpis.\n              </div>\n            }\n            footerContent=\"Popover Footer\"\n          >\n            <Button variant=\"plain\" aria-label=\"Help\" icon={<HelpIcon />} />\n          </Popover>\n        }\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\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        ]}\n      >\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 est\n        laborum.\n      </ModalDeprecated>\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 { Button, Form, FormGroup, FormGroupLabelHelp, Popover, TextInput } from '@patternfly/react-core';\nimport { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';\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      <ModalDeprecated\n        variant={ModalVariantDeprecated.small}\n        title=\"Create account\"\n        description=\"Enter your personal information below to create an account.\"\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\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        ]}\n      >\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      </ModalDeprecated>\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 submit the form 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 } from '@patternfly/react-core';\nimport { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';\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      <ModalDeprecated\n        elementToFocus=\"#modal-custom-focus-confirm-button\"\n        title=\"Modal with custom focus\"\n        isOpen={isModalOpen}\n        onClose={handleModalToggle}\n        actions={[\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        ]}\n      >\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 est\n        laborum.\n      </ModalDeprecated>\n    </Fragment>\n  );\n};\n","title":"Custom focus","lang":"ts","className":""}}>
+      
+      <p {...{"className":"pf-v6-c-content--p pf-m-editorial ws-p "}}>
+        {`Use the `}
+        
+        <code {...{"className":"ws-code "}}>
+          {`elementToFocus`}
+        </code>
+        {` property to customize which element inside the Modal receives focus when initially opened.`}
+      </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["Small modal"])}
+    {React.createElement(pageData.examples["Medium modal"])}
+    {React.createElement(pageData.examples["Large modal"])}
+    {React.createElement(pageData.examples["Custom width"])}
+    {React.createElement(pageData.examples["Custom header and footer"])}
+    {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 = 'ComponentsModalReactDeprecatedDocs';
+Component.pageData = pageData;
+
+export default Component;