Merge pull request #95 from patternfly/add-removemodal

add RemoveModal

Author: InsaneZein

packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModal.md

@@ -28,3 +28,21 @@ You can customize the contents of the modal to fit your use cases. To adjust the
 ```js file="./WarningModalExample.tsx"
 
 ```
+
+### Warning Modal with danger button variant
+
+You can customize the modal to have a confirm button with a danger color
+
+```js file="./WarningModalDangerExample.tsx"
+
+```
+
+
+### Warning Modal with checkbox
+
+You can customize the Warning Modal to include a checkbox to double check the user wants to use the selected action.
+
+```js file="./WarningModalCheckboxExample.tsx"
+
+```
+

packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalCheckboxExample.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import WarningModal from '@patternfly/react-component-groups/dist/dynamic/WarningModal';
+import { Button } from '@patternfly/react-core';
+
+export const BasicExample: React.FunctionComponent = () => {
+  const [ isOpen, setIsOpen ] = React.useState(false);
+  return <>
+    <Button onClick={() => setIsOpen(true)}>Open modal</Button>
+    <WarningModal
+      isOpen={isOpen}
+      title='Unsaved changes'
+      onClose={() => setIsOpen(false)}
+      onConfirm={() => setIsOpen(false)}
+      withCheckbox
+      checkboxLabel='Are you sure?'
+      confirmButtonVariant
+    >
+      Your page contains unsaved changes. Do you want to leave?
+    </WarningModal>
+  </>
+};

packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalDangerExample.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import WarningModal from '@patternfly/react-component-groups/dist/dynamic/WarningModal';
+import { Button } from '@patternfly/react-core';
+
+export const BasicExample: React.FunctionComponent = () => {
+  const [ isOpen, setIsOpen ] = React.useState(false);
+  return <>
+    <Button onClick={() => setIsOpen(true)}>Open modal</Button>
+    <WarningModal
+      isOpen={isOpen}
+      title='Unsaved changes'
+      confirmButtonVariant
+      onClose={() => setIsOpen(false)}
+      onConfirm={() => setIsOpen(false)}>
+      Your page contains unsaved changes. Do you want to leave?
+    </WarningModal>
+  </>
+};

packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalExample.tsx

@@ -9,6 +9,8 @@ export const BasicExample: React.FunctionComponent = () => {
     <WarningModal
       isOpen={isOpen}
       title='Unsaved changes'
+      confirmButtonLabel='Yes'
+      cancelButtonLabel='No'
       onClose={() => setIsOpen(false)}
       onConfirm={() => setIsOpen(false)}>
       Your page contains unsaved changes. Do you want to leave?

packages/module/src/WarningModal/WarningModal.test.tsx

@@ -7,6 +7,7 @@ describe('WarningModal component', () => {
     title: 'Unsaved changes',
     onClose: () => null,
     onConfirm: () => null,
+    confirmCheckMessage: 'hi there',
   };
 
   it('should render', () => {

packages/module/src/WarningModal/WarningModal.tsx

@@ -1,13 +1,19 @@
-import React from 'react';
-import { Button, ModalProps, Modal, ModalVariant, ButtonVariant } from '@patternfly/react-core';
+import React, { useState } from 'react';
+import { Button, ModalProps, Modal, ModalVariant, ButtonVariant, Checkbox } from '@patternfly/react-core';
 
 export interface WarningModalProps extends Omit<ModalProps, 'ref'> {
   /** Callback for the confirm action button. */
   onConfirm?: () => void;
   /** Custom label for the confirm action button */
-  confirmButtonLabel? : string;
+  confirmButtonLabel?: string;
   /** Custom label for the cancel action button */
-  cancelButtonLabel? : string;
+  cancelButtonLabel?: string;
+  /** Whether modal requires a checkbox before confirming */
+  withCheckbox?: boolean;
+  /** Custom checkbox label */
+  checkboxLabel?: string;
+  /** Visual variant of the confirm button */
+  confirmButtonVariant?: boolean;
 }
 
 const WarningModal: React.FunctionComponent<WarningModalProps> = ({
@@ -19,37 +25,55 @@ const WarningModal: React.FunctionComponent<WarningModalProps> = ({
   cancelButtonLabel = 'Cancel',
   variant = ModalVariant.small,
   titleIconVariant = 'warning',
+  withCheckbox = false,
+  checkboxLabel='I understand that this action cannot be undone',
+  confirmButtonVariant = false,
   ...props
-}: WarningModalProps) => (
-  <Modal
-    variant={variant}
-    isOpen={isOpen}
-    onClose={onClose}
-    onEscapePress={onClose}
-    titleIconVariant={titleIconVariant}
-    actions={[
-      <Button
-        ouiaId="primary-confirm-button"
-        key="confirm"
-        variant={ButtonVariant.primary}
-        onClick={onConfirm}
-      >
-        {confirmButtonLabel}
-      </Button>,
-      <Button
-        ouiaId="secondary-cancel-button"
-        key="cancel"
-        variant={ButtonVariant.link}
-        onClick={onClose}
-      >
-        {cancelButtonLabel}
-      </Button>,
-    ]}
-    {...props}
-  >
-    {children}
-  </Modal>
-);
+}: WarningModalProps) => {
+  const [ checked, setChecked ] = useState(false);
+
+  return (
+    <Modal
+      variant={variant}
+      isOpen={isOpen}
+      onClose={onClose}
+      onEscapePress={onClose}
+      titleIconVariant={titleIconVariant}
+      actions={[
+        <Button
+          ouiaId="primary-confirm-button"
+          key="confirm"
+          variant={confirmButtonVariant ? ButtonVariant.danger : ButtonVariant.primary}
+          onClick={onConfirm}
+          isDisabled={withCheckbox && !checked}
+        >
+          {confirmButtonLabel}
+        </Button>,
+        <Button
+          ouiaId="secondary-cancel-button"
+          key="cancel"
+          variant={ButtonVariant.link}
+          onClick={onClose}
+        >
+          {cancelButtonLabel}
+        </Button>,
+      ]}
+      {...props}
+    >
+      {children}
+      {withCheckbox ? (
+        <Checkbox
+          isChecked={checked}
+          onChange={() => setChecked(!checked)}
+          label={checkboxLabel}
+          id="warning-modal-check"
+          className="pf-v5-u-mt-lg"
+        />
+      ) : null}
+    </Modal>
+  )
+  
+};
 
 
 export default WarningModal;

packages/module/src/WarningModal/__snapshots__/WarningModal.test.tsx.snap

@@ -92,6 +92,7 @@ exports[`WarningModal component should render 1`] = `
             </header>
             <div
               class="pf-v5-c-modal-box__body"
+              confirmcheckmessage="hi there"
               id="pf-modal-part-2"
             >
               Warning modal content