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

package/src/components/Modal/examples/ModalWithForm.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import {
-  Modal,
-  ModalVariant,
   Button,
   Form,
   FormGroup,
   FormGroupLabelHelp,
+  Modal,
+  ModalBody,
+  ModalFooter,
+  ModalHeader,
+  ModalVariant,
   Popover,
   TextInput
 } from '@patternfly/react-core';
@@ -41,150 +44,158 @@ export const ModalWithForm: React.FunctionComponent = () => {
       </Button>
       <Modal
         variant={ModalVariant.small}
-        title="Create account"
-        description="Enter your personal information below to create an account."
         isOpen={isModalOpen}
         onClose={handleModalToggle}
-        actions={[
+        aria-labelledby="form-modal-title"
+        aria-describedby="modal-box-description-form"
+      >
+        <ModalHeader
+          title="Create account"
+          description="Enter your personal information below to create an account."
+          descriptorId="modal-box-description-form"
+          labelId="form-modal-title"
+        />
+        <ModalBody>
+          <Form id="modal-with-form-form">
+            <FormGroup
+              label="Name"
+              labelHelp={
+                <Popover
+                  triggerRef={nameLabelHelpRef}
+                  headerContent={
+                    <div>
+                      The
+                      <a href="https://schema.org/name" target="_blank" rel="noopener noreferrer">
+                        name
+                      </a>
+                      of a
+                      <a href="https://schema.org/Person" target="_blank" rel="noopener noreferrer">
+                        Person
+                      </a>
+                    </div>
+                  }
+                  bodyContent={
+                    <div>
+                      Often composed of
+                      <a href="https://schema.org/givenName" target="_blank" rel="noopener noreferrer">
+                        givenName
+                      </a>
+                      and
+                      <a href="https://schema.org/familyName" target="_blank" rel="noopener noreferrer">
+                        familyName
+                      </a>
+                      .
+                    </div>
+                  }
+                >
+                  <FormGroupLabelHelp ref={nameLabelHelpRef} aria-label="More info for name field" />
+                </Popover>
+              }
+              isRequired
+              fieldId="modal-with-form-form-name"
+            >
+              <TextInput
+                isRequired
+                type="email"
+                id="modal-with-form-form-name"
+                name="modal-with-form-form-name"
+                value={nameValue}
+                onChange={handleNameInputChange}
+              />
+            </FormGroup>
+            <FormGroup
+              label="E-mail"
+              labelHelp={
+                <Popover
+                  triggerRef={emailLabelHelpRef}
+                  headerContent={
+                    <div>
+                      The
+                      <a href="https://schema.org/email" target="_blank" rel="noopener noreferrer">
+                        e-mail
+                      </a>
+                      of a
+                      <a href="https://schema.org/Person" target="_blank" rel="noopener noreferrer">
+                        person
+                      </a>
+                    </div>
+                  }
+                  bodyContent={
+                    <div>
+                      Valid
+                      <a href="https://schema.org/email" target="_blank" rel="noopener noreferrer">
+                        e-mail
+                      </a>
+                      address.
+                    </div>
+                  }
+                >
+                  <FormGroupLabelHelp ref={emailLabelHelpRef} aria-label="More info for e-mail field" />
+                </Popover>
+              }
+              isRequired
+              fieldId="modal-with-form-form-email"
+            >
+              <TextInput
+                isRequired
+                type="email"
+                id="modal-with-form-form-email"
+                name="modal-with-form-form-email"
+                value={emailValue}
+                onChange={handleEmailInputChange}
+              />
+            </FormGroup>
+            <FormGroup
+              label="Address"
+              labelHelp={
+                <Popover
+                  triggerRef={addressLabelHelpRef}
+                  headerContent={
+                    <div>
+                      The
+                      <a href="https://schema.org/address" target="_blank" rel="noopener noreferrer">
+                        adress
+                      </a>
+                      of a
+                      <a href="https://schema.org/Person" target="_blank" rel="noopener noreferrer">
+                        person
+                      </a>
+                    </div>
+                  }
+                  bodyContent={
+                    <div>
+                      Valid
+                      <a href="https://schema.org/PostalAddress" target="_blank" rel="noopener noreferrer">
+                        postal address.
+                      </a>
+                    </div>
+                  }
+                >
+                  <FormGroupLabelHelp ref={addressLabelHelpRef} aria-label="More info for address field" />
+                </Popover>
+              }
+              isRequired
+              fieldId="modal-with-form-form-address"
+            >
+              <TextInput
+                isRequired
+                type="email"
+                id="modal-with-form-form-address"
+                name="modal-with-form-form-address"
+                value={addressValue}
+                onChange={handleAddressInputChange}
+              />
+            </FormGroup>
+          </Form>
+        </ModalBody>
+        <ModalFooter>
           <Button key="create" variant="primary" form="modal-with-form-form" onClick={handleModalToggle}>
             Confirm
-          </Button>,
+          </Button>
           <Button key="cancel" variant="link" onClick={handleModalToggle}>
             Cancel
           </Button>
-        ]}
-      >
-        <Form id="modal-with-form-form">
-          <FormGroup
-            label="Name"
-            labelHelp={
-              <Popover
-                triggerRef={nameLabelHelpRef}
-                headerContent={
-                  <div>
-                    The
-                    <a href="https://schema.org/name" target="_blank" rel="noopener noreferrer">
-                      name
-                    </a>
-                    of a
-                    <a href="https://schema.org/Person" target="_blank" rel="noopener noreferrer">
-                      Person
-                    </a>
-                  </div>
-                }
-                bodyContent={
-                  <div>
-                    Often composed of
-                    <a href="https://schema.org/givenName" target="_blank" rel="noopener noreferrer">
-                      givenName
-                    </a>
-                    and
-                    <a href="https://schema.org/familyName" target="_blank" rel="noopener noreferrer">
-                      familyName
-                    </a>
-                    .
-                  </div>
-                }
-              >
-                <FormGroupLabelHelp ref={nameLabelHelpRef} aria-label="More info for name field" />
-              </Popover>
-            }
-            isRequired
-            fieldId="modal-with-form-form-name"
-          >
-            <TextInput
-              isRequired
-              type="email"
-              id="modal-with-form-form-name"
-              name="modal-with-form-form-name"
-              value={nameValue}
-              onChange={handleNameInputChange}
-            />
-          </FormGroup>
-          <FormGroup
-            label="E-mail"
-            labelHelp={
-              <Popover
-                triggerRef={emailLabelHelpRef}
-                headerContent={
-                  <div>
-                    The
-                    <a href="https://schema.org/email" target="_blank" rel="noopener noreferrer">
-                      e-mail
-                    </a>
-                    of a
-                    <a href="https://schema.org/Person" target="_blank" rel="noopener noreferrer">
-                      person
-                    </a>
-                  </div>
-                }
-                bodyContent={
-                  <div>
-                    Valid
-                    <a href="https://schema.org/email" target="_blank" rel="noopener noreferrer">
-                      e-mail
-                    </a>
-                    address.
-                  </div>
-                }
-              >
-                <FormGroupLabelHelp ref={emailLabelHelpRef} aria-label="More info for e-mail field" />
-              </Popover>
-            }
-            isRequired
-            fieldId="modal-with-form-form-email"
-          >
-            <TextInput
-              isRequired
-              type="email"
-              id="modal-with-form-form-email"
-              name="modal-with-form-form-email"
-              value={emailValue}
-              onChange={handleEmailInputChange}
-            />
-          </FormGroup>
-          <FormGroup
-            label="Address"
-            labelHelp={
-              <Popover
-                triggerRef={addressLabelHelpRef}
-                headerContent={
-                  <div>
-                    The
-                    <a href="https://schema.org/address" target="_blank" rel="noopener noreferrer">
-                      adress
-                    </a>
-                    of a
-                    <a href="https://schema.org/Person" target="_blank" rel="noopener noreferrer">
-                      person
-                    </a>
-                  </div>
-                }
-                bodyContent={
-                  <div>
-                    Valid
-                    <a href="https://schema.org/PostalAddress" target="_blank" rel="noopener noreferrer">
-                      postal address.
-                    </a>
-                  </div>
-                }
-              >
-                <FormGroupLabelHelp ref={addressLabelHelpRef} aria-label="More info for address field" />
-              </Popover>
-            }
-            isRequired
-            fieldId="modal-with-form-form-address"
-          >
-            <TextInput
-              isRequired
-              type="email"
-              id="modal-with-form-form-address"
-              name="modal-with-form-form-address"
-              value={addressValue}
-              onChange={handleAddressInputChange}
-            />
-          </FormGroup>
-        </Form>
+        </ModalFooter>
       </Modal>
     </React.Fragment>
   );

package/src/components/Modal/examples/ModalWithHelp.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal, Button, Popover } from '@patternfly/react-core';
+import { Button, Modal, ModalBody, ModalFooter, ModalHeader, Popover } from '@patternfly/react-core';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 
 export const ModalWithHelp: React.FunctionComponent = () => {
@@ -16,38 +16,46 @@ export const ModalWithHelp: React.FunctionComponent = () => {
       </Button>
       <Modal
         variant="small"
-        title="With help modal"
-        help={
-          <Popover
-            headerContent={<div>Help Popover</div>}
-            bodyContent={
-              <div>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla turpis.
-              </div>
-            }
-            footerContent="Popover Footer"
-          >
-            <Button variant="plain" aria-label="Help">
-              <HelpIcon />
-            </Button>
-          </Popover>
-        }
         isOpen={isModalOpen}
         onClose={handleModalToggle}
-        actions={[
+        aria-labelledby="with-help-modal-title"
+        aria-describedby="modal-box-body-with-help"
+      >
+        <ModalHeader
+          title="With help modal"
+          labelId="with-help-modal-title"
+          help={
+            <Popover
+              headerContent={<div>Help Popover</div>}
+              bodyContent={
+                <div>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id feugiat augue, nec fringilla
+                  turpis.
+                </div>
+              }
+              footerContent="Popover Footer"
+            >
+              <Button variant="plain" aria-label="Help">
+                <HelpIcon />
+              </Button>
+            </Popover>
+          }
+        />
+        <ModalBody id="modal-box-body-with-help">
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
+        </ModalBody>
+        <ModalFooter>
           <Button key="confirm" variant="primary" onClick={handleModalToggle}>
             Confirm
-          </Button>,
+          </Button>
           <Button key="cancel" variant="link" onClick={handleModalToggle}>
             Cancel
           </Button>
-        ]}
-      >
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
-        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
-        laborum.
+        </ModalFooter>
       </Modal>
     </React.Fragment>
   );

package/src/components/Modal/examples/ModalWithOverflowingContent.tsx

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

package/src/components/Modal/examples/ModalWithWizard.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { Modal, ModalVariant, Button, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';
+import { Button, Modal, ModalVariant, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';
 
 export const ModalWithWizard: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -25,12 +25,9 @@ export const ModalWithWizard: React.FunctionComponent = () => {
       </Button>
       <Modal
         variant={ModalVariant.large}
-        showClose={false}
         isOpen={isModalOpen}
         aria-labelledby="modal-wizard-label"
         aria-describedby="modal-wizard-description"
-        onClose={handleModalToggle}
-        hasNoBodyWrapper
       >
         <Wizard
           height={400}
@@ -39,6 +36,7 @@ export const ModalWithWizard: React.FunctionComponent = () => {
               title="Wizard modal"
               titleId="modal-wizard-label"
               description="This is a wizard inside of a modal."
+              descriptionId="modal-wizard-description"
               onClose={handleWizardToggle}
               closeButtonAriaLabel="Close wizard"
             />

package/src/components/Modal/index.ts

@@ -1,7 +1,4 @@
 export * from './Modal';
-export * from './ModalBox';
-export * from './ModalBoxBody';
-export * from './ModalBoxCloseButton';
-export * from './ModalBoxHeader';
-export * from './ModalBoxFooter';
-export * from './ModalContent';
+export * from './ModalBody';
+export * from './ModalHeader';
+export * from './ModalFooter';

package/src/components/Wizard/examples/Wizard.md

@@ -46,6 +46,7 @@ WizardNavItem,
 WizardNav,
 WizardHeader
 } from '@patternfly/react-core';
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
 import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';

package/src/components/Wizard/examples/WizardWithinModal.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
-import { Button, Modal, ModalVariant, Wizard, WizardStep, WizardHeader } from '@patternfly/react-core';
+import { Button, Wizard, WizardStep, WizardHeader } from '@patternfly/react-core';
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 
 export const WizardWithinModal = () => {
   const [isModelOpen, setIsModalOpen] = React.useState(false);
@@ -8,13 +9,13 @@ export const WizardWithinModal = () => {
     <>
       <Button onClick={() => setIsModalOpen(true)}>Show Modal</Button>
 
-      <Modal
+      <ModalDeprecated
         isOpen={isModelOpen}
         showClose={false}
         aria-label="Wizard modal"
         hasNoBodyWrapper
         onEscapePress={() => setIsModalOpen(false)}
-        variant={ModalVariant.medium}
+        variant={ModalVariantDeprecated.medium}
       >
         <Wizard
           height={400}
@@ -42,7 +43,7 @@ export const WizardWithinModal = () => {
             Review step content
           </WizardStep>
         </Wizard>
-      </Modal>
+      </ModalDeprecated>
     </>
   );
 };

package/src/demos/DatePicker/DatePicker.md

@@ -4,6 +4,8 @@ section: components
 subsection: date-and-time
 ---
 
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
+
 ## Demos
 
 ### Date range picker
@@ -58,8 +60,6 @@ DateRangePicker = () => {
 };
 ```
 
-
-
 ### Date and time pickers in modal
 
 Modals trap focus and watch a few document level events. In order to place a date picker in a modal:

package/src/demos/DatePicker/examples/DateTimePickerInModal.tsx

@@ -1,13 +1,6 @@
 import React from 'react';
-import {
-  DatePicker,
-  Modal,
-  ModalVariant,
-  Button,
-  TimePicker,
-  InputGroup,
-  InputGroupItem
-} from '@patternfly/react-core';
+import { DatePicker, Button, TimePicker, InputGroup, InputGroupItem } from '@patternfly/react-core';
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 
 export const SimpleModal = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -33,9 +26,9 @@ export const SimpleModal = () => {
       <Button variant="primary" onClick={handleModalToggle}>
         Launch modal
       </Button>
-      <Modal
+      <ModalDeprecated
         id="date-time-picker-modal"
-        variant={ModalVariant.small}
+        variant={ModalVariantDeprecated.small}
         title="Generic modal header"
         isOpen={isModalOpen}
         onEscapePress={onEscapePress}
@@ -57,7 +50,7 @@ export const SimpleModal = () => {
             <TimePicker menuAppendTo="parent" isOpen={isTimePickerOpen} setIsOpen={setIsTimePickerOpen} />
           </InputGroupItem>
         </InputGroup>
-      </Modal>
+      </ModalDeprecated>
     </React.Fragment>
   );
 };

package/src/demos/LabelGroupDemos.md

@@ -3,6 +3,7 @@ id: Label
 section: components
 ---
 
+import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
 import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
 
 ## Demos
@@ -10,9 +11,11 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-i
 ### Editable labels with add dropdown
 
 ```ts file="../components/Label/examples/LabelGroupEditableAddDropdown.tsx"
+
 ```
 
 ### Editable labels with add modal
 
 ```ts file="../components/Label/examples/LabelGroupEditableAddModal.tsx"
+
 ```