From 43a5d07eb05b78714ca4bf5f93d54a682d4f47cf Mon Sep 17 00:00:00 2001 From: mfrances Date: Mon, 2 Dec 2024 17:54:28 -0500 Subject: [PATCH 1/2] feat(Wizard): replace deprecations in examples --- .../src/components/Wizard/examples/Wizard.md | 4 +- .../Wizard/examples/WizardWithinModal.tsx | 65 +++++++++---------- 2 files changed, 35 insertions(+), 34 deletions(-) diff --git a/packages/react-core/src/components/Wizard/examples/Wizard.md b/packages/react-core/src/components/Wizard/examples/Wizard.md index 3597f20bfd9..a1b31a5f272 100644 --- a/packages/react-core/src/components/Wizard/examples/Wizard.md +++ b/packages/react-core/src/components/Wizard/examples/Wizard.md @@ -34,6 +34,9 @@ DrawerColorVariant, DrawerHead, DrawerActions, DrawerCloseButton, +Modal, +ModalBody, +ModalVariant, Wizard, WizardFooter, WizardFooterWrapper, @@ -46,7 +49,6 @@ 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'; diff --git a/packages/react-core/src/components/Wizard/examples/WizardWithinModal.tsx b/packages/react-core/src/components/Wizard/examples/WizardWithinModal.tsx index 41289391e65..2d3ba8c4522 100644 --- a/packages/react-core/src/components/Wizard/examples/WizardWithinModal.tsx +++ b/packages/react-core/src/components/Wizard/examples/WizardWithinModal.tsx @@ -1,49 +1,48 @@ import React from 'react'; -import { Button, Wizard, WizardStep, WizardHeader } from '@patternfly/react-core'; -import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated'; +import { Button, Modal, ModalBody, ModalVariant, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core'; -export const WizardWithinModal = () => { +export const WizardWithinModal: React.FunctionComponent = () => { const [isModelOpen, setIsModalOpen] = React.useState(false); return ( <> - setIsModalOpen(false)} - variant={ModalVariantDeprecated.medium} + variant={ModalVariant.medium} > - setIsModalOpen(false)} - title="In modal wizard" - header={ - setIsModalOpen(false)} - title="Wizard in modal" - description="Simple wizard description" - /> - } - > - - Step 1 content - - - Step 2 content - - setIsModalOpen(false) }} + + setIsModalOpen(false)} + title="In modal wizard" + header={ + setIsModalOpen(false)} + title="Wizard in modal" + description="Simple wizard description" + /> + } > - Review step content - - - + + Step 1 content + + + Step 2 content + + setIsModalOpen(false) }} + > + Review step content + + + + ); }; From 099dd9d6050e61d6c6b79ff6343851a2c491c314 Mon Sep 17 00:00:00 2001 From: mfrances Date: Wed, 4 Dec 2024 09:55:09 -0500 Subject: [PATCH 2/2] rm modalbody from example and revise modal doc --- .../src/components/Modal/examples/Modal.md | 2 +- .../src/components/Wizard/examples/Wizard.md | 1 - .../Wizard/examples/WizardWithinModal.tsx | 54 +++++++++---------- 3 files changed, 27 insertions(+), 30 deletions(-) diff --git a/packages/react-core/src/components/Modal/examples/Modal.md b/packages/react-core/src/components/Modal/examples/Modal.md index a01abf79698..e3e77986fa9 100644 --- a/packages/react-core/src/components/Modal/examples/Modal.md +++ b/packages/react-core/src/components/Modal/examples/Modal.md @@ -20,7 +20,7 @@ Basic modals give users the option to either confirm or cancel an action. To flag an open modal, use the `isOpen` property. To execute a callback when a modal is closed, use the `onClose` property. -A modal must have a ``, containing the main content of the modal. The `` and `` components are not required, but are typically used to display the modal title and any button actions, respectively. +The ``, ``, and `` components are not required, but are typically used to display the main content of the modal, modal title, and any button actions, respectively. ```ts file="./ModalBasic.tsx" diff --git a/packages/react-core/src/components/Wizard/examples/Wizard.md b/packages/react-core/src/components/Wizard/examples/Wizard.md index a1b31a5f272..28ba35d252f 100644 --- a/packages/react-core/src/components/Wizard/examples/Wizard.md +++ b/packages/react-core/src/components/Wizard/examples/Wizard.md @@ -35,7 +35,6 @@ DrawerHead, DrawerActions, DrawerCloseButton, Modal, -ModalBody, ModalVariant, Wizard, WizardFooter, diff --git a/packages/react-core/src/components/Wizard/examples/WizardWithinModal.tsx b/packages/react-core/src/components/Wizard/examples/WizardWithinModal.tsx index 2d3ba8c4522..fcccc015852 100644 --- a/packages/react-core/src/components/Wizard/examples/WizardWithinModal.tsx +++ b/packages/react-core/src/components/Wizard/examples/WizardWithinModal.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, Modal, ModalBody, ModalVariant, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core'; +import { Button, Modal, ModalVariant, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core'; export const WizardWithinModal: React.FunctionComponent = () => { const [isModelOpen, setIsModalOpen] = React.useState(false); @@ -14,34 +14,32 @@ export const WizardWithinModal: React.FunctionComponent = () => { onEscapePress={() => setIsModalOpen(false)} variant={ModalVariant.medium} > - - setIsModalOpen(false)} - title="In modal wizard" - header={ - setIsModalOpen(false)} - title="Wizard in modal" - description="Simple wizard description" - /> - } + setIsModalOpen(false)} + title="In modal wizard" + header={ + setIsModalOpen(false)} + title="Wizard in modal" + description="Simple wizard description" + /> + } + > + + Step 1 content + + + Step 2 content + + setIsModalOpen(false) }} > - - Step 1 content - - - Step 2 content - - setIsModalOpen(false) }} - > - Review step content - - - + Review step content + + );