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