diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModal.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModal.md
index ffd710d4..fadda3d6 100644
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModal.md
+++ b/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"
+
+```
+
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalCheckboxExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalCheckboxExample.tsx
new file mode 100644
index 00000000..3b1b08b4
--- /dev/null
+++ b/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 <>
+
+ setIsOpen(false)}
+ onConfirm={() => setIsOpen(false)}
+ withCheckbox
+ checkboxLabel='Are you sure?'
+ confirmButtonVariant
+ >
+ Your page contains unsaved changes. Do you want to leave?
+
+ >
+};
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalDangerExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalDangerExample.tsx
new file mode 100644
index 00000000..b6312f2c
--- /dev/null
+++ b/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 <>
+
+ setIsOpen(false)}
+ onConfirm={() => setIsOpen(false)}>
+ Your page contains unsaved changes. Do you want to leave?
+
+ >
+};
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalExample.tsx
index 92b3079b..5c46c29e 100644
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalExample.tsx
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalExample.tsx
@@ -9,6 +9,8 @@ export const BasicExample: React.FunctionComponent = () => {
setIsOpen(false)}
onConfirm={() => setIsOpen(false)}>
Your page contains unsaved changes. Do you want to leave?
diff --git a/packages/module/src/WarningModal/WarningModal.test.tsx b/packages/module/src/WarningModal/WarningModal.test.tsx
index 9467870e..216921aa 100644
--- a/packages/module/src/WarningModal/WarningModal.test.tsx
+++ b/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', () => {
diff --git a/packages/module/src/WarningModal/WarningModal.tsx b/packages/module/src/WarningModal/WarningModal.tsx
index 5f5f25b6..ec8c6733 100644
--- a/packages/module/src/WarningModal/WarningModal.tsx
+++ b/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 {
/** 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 = ({
@@ -19,37 +25,55 @@ const WarningModal: React.FunctionComponent = ({
cancelButtonLabel = 'Cancel',
variant = ModalVariant.small,
titleIconVariant = 'warning',
+ withCheckbox = false,
+ checkboxLabel='I understand that this action cannot be undone',
+ confirmButtonVariant = false,
...props
-}: WarningModalProps) => (
-
- {confirmButtonLabel}
- ,
- ,
- ]}
- {...props}
- >
- {children}
-
-);
+}: WarningModalProps) => {
+ const [ checked, setChecked ] = useState(false);
+
+ return (
+
+ {confirmButtonLabel}
+ ,
+ ,
+ ]}
+ {...props}
+ >
+ {children}
+ {withCheckbox ? (
+ setChecked(!checked)}
+ label={checkboxLabel}
+ id="warning-modal-check"
+ className="pf-v5-u-mt-lg"
+ />
+ ) : null}
+
+ )
+
+};
export default WarningModal;
diff --git a/packages/module/src/WarningModal/__snapshots__/WarningModal.test.tsx.snap b/packages/module/src/WarningModal/__snapshots__/WarningModal.test.tsx.snap
index 251fd504..dafa2265 100644
--- a/packages/module/src/WarningModal/__snapshots__/WarningModal.test.tsx.snap
+++ b/packages/module/src/WarningModal/__snapshots__/WarningModal.test.tsx.snap
@@ -92,6 +92,7 @@ exports[`WarningModal component should render 1`] = `
Warning modal content