chore(Modal): updated deprecated usage to promoted version

patternfly · Dec 3, 2024 · c4e0a69 · c4e0a69
1 parent c7e2452
commit c4e0a69
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 44 deletions.
diff --git a/packages/react-core/src/components/AboutModal/AboutModal.tsx b/packages/react-core/src/components/AboutModal/AboutModal.tsx
@@ -6,7 +6,7 @@ import { AboutModalBoxHeader } from './AboutModalBoxHeader';
 import { AboutModalBoxBrand } from './AboutModalBoxBrand';
 import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton';
 import { AboutModalBox } from './AboutModalBox';
-import { Modal, ModalVariant } from '../../deprecated/components/Modal';
+import { Modal, ModalVariant } from '../Modal';
 import { GenerateId } from '../../helpers/GenerateId/GenerateId';
 
 export interface AboutModalProps extends React.HTMLProps<HTMLDivElement> {
@@ -82,10 +82,8 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
           {...(productName && { 'aria-labelledby': ariaLabelledBy })}
           aria-label={ariaLabel}
           onEscapePress={onClose}
-          showClose={false}
           appendTo={appendTo}
           disableFocusTrap={disableFocusTrap}
-          hasNoBodyWrapper
         >
           <AboutModalBox
             style={

diff --git a/packages/react-core/src/demos/DatePicker/examples/DateTimePickerInModal.tsx b/packages/react-core/src/demos/DatePicker/examples/DateTimePickerInModal.tsx
@@ -1,6 +1,16 @@
 import React from 'react';
-import { DatePicker, Button, TimePicker, InputGroup, InputGroupItem } from '@patternfly/react-core';
-import { Modal as ModalDeprecated, ModalVariant as ModalVariantDeprecated } from '@patternfly/react-core/deprecated';
+import {
+  DatePicker,
+  Button,
+  TimePicker,
+  InputGroup,
+  InputGroupItem,
+  Modal,
+  ModalVariant,
+  ModalHeader,
+  ModalBody,
+  ModalFooter
+} from '@patternfly/react-core';
 
 export const SimpleModal = () => {
   const [isModalOpen, setIsModalOpen] = React.useState(false);
@@ -26,31 +36,37 @@ export const SimpleModal = () => {
       <Button variant="primary" onClick={handleModalToggle}>
         Launch modal
       </Button>
-      <ModalDeprecated
+      <Modal
         id="date-time-picker-modal"
-        variant={ModalVariantDeprecated.small}
-        title="Generic modal header"
+        variant={ModalVariant.small}
         isOpen={isModalOpen}
         onEscapePress={onEscapePress}
         onClose={handleModalToggle}
-        actions={[
+      >
+        <ModalHeader title="Generic modal header" />
+        <ModalBody>
+          <InputGroup>
+            <InputGroupItem>
+              <DatePicker ref={dateRef} appendTo={() => document.body} />
+            </InputGroupItem>
+            <InputGroupItem>
+              <TimePicker
+                menuAppendTo={() => document.body}
+                isOpen={isTimePickerOpen}
+                setIsOpen={setIsTimePickerOpen}
+              />
+            </InputGroupItem>
+          </InputGroup>
+        </ModalBody>
+        <ModalFooter>
           <Button key="confirm" variant="primary" onClick={handleModalToggle}>
             Confirm
-          </Button>,
+          </Button>
           <Button key="cancel" variant="link" onClick={handleModalToggle}>
             Cancel
           </Button>
-        ]}
-      >
-        <InputGroup>
-          <InputGroupItem>
-            <DatePicker ref={dateRef} appendTo={() => document.getElementById('date-time-picker-modal')} />
-          </InputGroupItem>
-          <InputGroupItem>
-            <TimePicker menuAppendTo="parent" isOpen={isTimePickerOpen} setIsOpen={setIsTimePickerOpen} />
-          </InputGroupItem>
-        </InputGroup>
-      </ModalDeprecated>
+        </ModalFooter>
+      </Modal>
     </React.Fragment>
   );
 };
diff --git a/packages/react-core/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx b/packages/react-core/src/demos/examples/MultipleFileUpload/MultipleFileUploadRejectedFile.tsx
@@ -6,9 +6,11 @@ import {
   MultipleFileUploadStatus,
   MultipleFileUploadStatusItem,
   Checkbox,
-  DropEvent
+  DropEvent,
+  Modal,
+  ModalHeader,
+  ModalBody
 } from '@patternfly/react-core';
-import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
 interface readFile {
@@ -135,16 +137,10 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
             ))}
           </MultipleFileUploadStatus>
         )}
-        <ModalDeprecated
-          isOpen={!!modalText}
-          title="Unsupported file"
-          titleIconVariant="warning"
-          showClose
-          aria-label="unsupported file upload attempted"
-          onClose={() => setModalText('')}
-        >
-          {modalText}
-        </ModalDeprecated>
+        <Modal isOpen={!!modalText} aria-label="unsupported file upload attempted" onClose={() => setModalText('')}>
+          <ModalHeader title="Unsupported file" titleIconVariant="warning" />
+          <ModalBody>{modalText}</ModalBody>
+        </Modal>
       </MultipleFileUpload>
       <Checkbox
         id="horizontal-checkbox"

diff --git a/packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/WizardDemo/WizardDemo.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
-import { Button, Wizard, WizardHeader, WizardStep } from '@patternfly/react-core';
-import { Modal as ModalDeprecated } from '@patternfly/react-core/deprecated';
+import { Button, Wizard, WizardHeader, WizardStep, Modal } from '@patternfly/react-core';
 
 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';
@@ -38,7 +37,7 @@ class WizardDemo extends React.Component<React.HTMLProps<HTMLDivElement>, Wizard
         <Button id="launchWiz" variant="primary" onClick={this.handleModalToggle}>
           Show Modal
         </Button>
-        <ModalDeprecated isOpen={isOpen} showClose={false} hasNoBodyWrapper onEscapePress={this.handleModalToggle}>
+        <Modal isOpen={isOpen} onEscapePress={this.handleModalToggle}>
           <Wizard
             id="modalWizId"
             width={710}
@@ -73,7 +72,7 @@ class WizardDemo extends React.Component<React.HTMLProps<HTMLDivElement>, Wizard
               <p>Step 5</p>
             </WizardStep>
           </Wizard>
-        </ModalDeprecated>
+        </Modal>
         <br />
         <br />
         <Wizard id="inPageWizId" height={500}>
@@ -263,12 +262,7 @@ class WizardDemo extends React.Component<React.HTMLProps<HTMLDivElement>, Wizard
         <Button id="launchWizOverflow" variant="primary" onClick={this.handleRoleWizardToggle}>
           Show Modal with Overflow
         </Button>
-        <ModalDeprecated
-          isOpen={isOpenWithRole}
-          showClose={false}
-          hasNoBodyWrapper
-          onEscapePress={this.handleRoleWizardToggle}
-        >
+        <Modal isOpen={isOpenWithRole} onEscapePress={this.handleRoleWizardToggle}>
           <Wizard
             id="inModalWizWithOverflow"
             height={400}
@@ -478,7 +472,7 @@ class WizardDemo extends React.Component<React.HTMLProps<HTMLDivElement>, Wizard
               </div>
             </WizardStep>
           </Wizard>
-        </ModalDeprecated>
+        </Modal>
       </>
     );
   }