From b8eb46cf5dc752de35168bd783de375ac2d053b0 Mon Sep 17 00:00:00 2001
From: Zein Sleiman <zsleiman@redhat.com>
Date: Tue, 23 Jan 2024 15:55:13 -0600
Subject: [PATCH 1/9] feat(WarningModal): add RemoveModal features to
 WarningModal

---
 .../examples/RemoveModal/RemoveModal.md       | 35 ++++++++
 .../RemoveModalCheckboxExample.tsx            | 22 +++++
 .../RemoveModal/RemoveModalExample.tsx        | 22 +++++
 .../src/RemoveModal/RemoveModal.test.tsx      | 21 +++++
 .../module/src/RemoveModal/RemoveModal.tsx    | 83 +++++++++++++++++++
 packages/module/src/RemoveModal/index.ts      |  2 +
 packages/module/src/index.ts                  |  3 +
 7 files changed, 188 insertions(+)
 create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModal.md
 create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalCheckboxExample.tsx
 create mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalExample.tsx
 create mode 100644 packages/module/src/RemoveModal/RemoveModal.test.tsx
 create mode 100644 packages/module/src/RemoveModal/RemoveModal.tsx
 create mode 100644 packages/module/src/RemoveModal/index.ts

diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModal.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModal.md
new file mode 100644
index 00000000..21a06a74
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModal.md
@@ -0,0 +1,35 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: extensions
+subsection: Component groups
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: Remove modal
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['RemoveModal']
+---
+
+import RemoveModal from '@patternfly/react-component-groups/dist/dynamic/RemoveModal';
+
+A **remove modal** component displays a modal when a user performs a removal of a object, which asks them to confirm or cancel the action.
+
+## Examples
+
+### Basic remove modal
+
+A basic remove modal is triggered when a user tries to perform a removal of an object.
+
+```js file="./RemoveModalExample.tsx"
+
+```
+
+### Remove modal with checkbox
+A basic remove modal that requires a checkbox before confirming. 
+```js file="./RemoveModalCheckboxExample.tsx"
+
+```
+
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalCheckboxExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalCheckboxExample.tsx
new file mode 100644
index 00000000..c8df5044
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalCheckboxExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import RemoveModal from '@patternfly/react-component-groups/dist/dynamic/RemoveModal';
+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>
+    <RemoveModal
+      isOpen={isOpen}
+      title='Remove Item?'
+      text='Do you want to remove this item?'
+      confirmButtonLabel='Yup'
+      onClose={() => setIsOpen(false)}
+      onSubmit={() => setIsOpen(false)}
+      withCheckbox={true}
+      confirmCheckMessage='checked'
+    >
+    </RemoveModal>
+  </>
+  
+}
\ No newline at end of file
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalExample.tsx
new file mode 100644
index 00000000..26636d1a
--- /dev/null
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalExample.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import RemoveModal from '@patternfly/react-component-groups/dist/dynamic/RemoveModal';
+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>
+    <RemoveModal
+      isOpen={isOpen}
+      title='Remove Item?'
+      text='Do you want to remove this item?'
+      confirmButtonLabel='Yup'
+      onClose={() => setIsOpen(false)}
+      onSubmit={() => setIsOpen(false)}
+      withCheckbox={false}
+      confirmCheckMessage='checked'
+    >
+    </RemoveModal>
+  </>
+  
+}
\ No newline at end of file
diff --git a/packages/module/src/RemoveModal/RemoveModal.test.tsx b/packages/module/src/RemoveModal/RemoveModal.test.tsx
new file mode 100644
index 00000000..84d736cc
--- /dev/null
+++ b/packages/module/src/RemoveModal/RemoveModal.test.tsx
@@ -0,0 +1,21 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import RemoveModal from './RemoveModal';
+
+describe('RemoveModal component', () => {
+  const initialProps = {
+    title: 'Delete Item',
+    text: 'do you want to delete?',
+    confirmButtonLabel: '',
+    confirmCheckMessage: 'checked',
+    onClose: () => null,
+    onConfirm: () => null,
+    onSubmit: () => null,
+    withCheckbox: false,
+  };
+  
+  it('should render', () => {
+    const container = render(<RemoveModal isOpen={true} {...initialProps}></RemoveModal>);
+    expect(container).toMatchSnapshot();
+  });
+});
\ No newline at end of file
diff --git a/packages/module/src/RemoveModal/RemoveModal.tsx b/packages/module/src/RemoveModal/RemoveModal.tsx
new file mode 100644
index 00000000..edd57296
--- /dev/null
+++ b/packages/module/src/RemoveModal/RemoveModal.tsx
@@ -0,0 +1,83 @@
+import React, { useState } from 'react';
+import { Button, Checkbox, Modal, ModalProps, ModalVariant, Split, SplitItem, Stack, TextContent } from '@patternfly/react-core';
+import { createUseStyles } from 'react-jss'
+
+
+const useStyles = createUseStyles({
+  rbacDeleteIcon: {
+    color: 'var(--pf-v5-global--warning-color--100)',
+    marginRight: 'var(--pf-v5-global--spacer--xs)'
+  },
+})
+
+export interface RemoveModalProps extends Omit<ModalProps, 'ref'|'children'> {
+  /** Title for the Remove Modal. */
+  title: string;
+  /** Text inside the Remove Modal */
+  text: string;
+  /** Custom label for the cancel action button */
+  confirmButtonLabel: string;
+  /** Callback for the submit action button */
+  onSubmit: () => void;
+  /** Callback for the close action button */
+  onClose: () => void;
+  /** Whether Modal requires a checkbox before confirming */
+  withCheckbox: boolean,
+  /** Custom message after confirmation */
+  confirmCheckMessage: string,
+}
+
+const RemoveModal: React.FunctionComponent<RemoveModalProps> = ({
+  title,
+  text,
+  onClose,
+  onSubmit,
+  isOpen,
+  confirmButtonLabel,
+  withCheckbox=false,
+  confirmCheckMessage,
+  ...props
+}: RemoveModalProps) => {
+  const classes = useStyles();
+  const [ checked, setChecked ] = useState(false);
+
+  return (
+    <Modal
+      className={classes.rbacDeleteIcon}
+      title={title}
+      titleIconVariant="warning"
+      isOpen={isOpen}
+      variant={ModalVariant.small}
+      onClose={onClose}
+      actions={[
+        <Button key="confirm" ouiaId="primary-confirm-button" isDisabled={withCheckbox && !checked} variant="danger" onClick={onSubmit}>
+          {confirmButtonLabel}
+        </Button>,
+        <Button key="cancel" ouiaId="secondary-cancel-button" variant="link" onClick={onClose}>
+          Cancel
+        </Button>,
+      ]}
+      {...props}
+    >
+      <Split hasGutter>
+        <SplitItem isFilled>
+          <Stack hasGutter>
+            <TextContent>{text}</TextContent>
+          </Stack>
+        </SplitItem>
+      </Split>
+      {withCheckbox ? (
+        <Checkbox
+          isChecked={checked}
+          onChange={() => setChecked(!checked)}
+          label={confirmCheckMessage}
+          id="remove-modal-check"
+          className="pf-v5-u-mt-lg"
+        />
+      ) : null}
+    </Modal>
+  );
+};
+
+export default RemoveModal;
+
diff --git a/packages/module/src/RemoveModal/index.ts b/packages/module/src/RemoveModal/index.ts
new file mode 100644
index 00000000..1ffc6ec4
--- /dev/null
+++ b/packages/module/src/RemoveModal/index.ts
@@ -0,0 +1,2 @@
+export { default } from './RemoveModal';
+export * from './RemoveModal';
\ No newline at end of file
diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts
index 168bfd0a..5691fd6f 100644
--- a/packages/module/src/index.ts
+++ b/packages/module/src/index.ts
@@ -39,6 +39,9 @@ export * from './NotAuthorized';
 export { default as NotFoundIcon } from './NotFoundIcon';
 export * from './NotFoundIcon';
 
+export { default as RemoveModal } from './RemoveModal';
+export * from './RemoveModal';
+
 export { default as SkeletonTable } from './SkeletonTable';
 export * from './SkeletonTable';
 

From a222c8c10ff9b65d2c4540b775dd021f042f3bc3 Mon Sep 17 00:00:00 2001
From: Zein Sleiman <zsleiman@redhat.com>
Date: Tue, 23 Jan 2024 16:03:32 -0600
Subject: [PATCH 2/9] add snapshot

---
 .../__snapshots__/RemoveModal.test.tsx.snap   | 197 ++++++++++++++++++
 1 file changed, 197 insertions(+)
 create mode 100644 packages/module/src/RemoveModal/__snapshots__/RemoveModal.test.tsx.snap

diff --git a/packages/module/src/RemoveModal/__snapshots__/RemoveModal.test.tsx.snap b/packages/module/src/RemoveModal/__snapshots__/RemoveModal.test.tsx.snap
new file mode 100644
index 00000000..a4829b9d
--- /dev/null
+++ b/packages/module/src/RemoveModal/__snapshots__/RemoveModal.test.tsx.snap
@@ -0,0 +1,197 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`RemoveModal component should render 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body
+    class="pf-v5-c-backdrop__open"
+  >
+    <div
+      aria-hidden="true"
+    />
+    <div>
+      <div
+        class="pf-v5-c-backdrop"
+      >
+        <div
+          class="pf-v5-l-bullseye"
+        >
+          <div
+            aria-describedby="pf-modal-part-2"
+            aria-labelledby="pf-modal-part-1"
+            aria-modal="true"
+            class="pf-v5-c-modal-box rbacDeleteIcon-0-2-1 pf-m-warning pf-m-sm"
+            data-ouia-component-id="OUIA-Generated-Modal-small-1"
+            data-ouia-component-type="PF5/ModalContent"
+            data-ouia-safe="true"
+            id="pf-modal-part-0"
+            role="dialog"
+          >
+            <div
+              class="pf-v5-c-modal-box__close"
+            >
+              <button
+                aria-disabled="false"
+                aria-label="Close"
+                class="pf-v5-c-button pf-m-plain"
+                data-ouia-component-id="OUIA-Generated-Modal-small-1-ModalBoxCloseButton"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                <svg
+                  aria-hidden="true"
+                  class="pf-v5-svg"
+                  fill="currentColor"
+                  height="1em"
+                  role="img"
+                  viewBox="0 0 352 512"
+                  width="1em"
+                >
+                  <path
+                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                  />
+                </svg>
+              </button>
+            </div>
+            <header
+              class="pf-v5-c-modal-box__header"
+            >
+              <h1
+                class="pf-v5-c-modal-box__title pf-m-icon"
+                id="pf-modal-part-1"
+              >
+                <span
+                  class="pf-v5-c-modal-box__title-icon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class="pf-v5-svg"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    viewBox="0 0 576 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
+                    />
+                  </svg>
+                </span>
+                <span
+                  class="pf-v5-screen-reader"
+                >
+                  Warning alert:
+                </span>
+                <span
+                  class="pf-v5-c-modal-box__title-text"
+                >
+                  Delete Item
+                </span>
+              </h1>
+            </header>
+            <div
+              class="pf-v5-c-modal-box__body"
+              id="pf-modal-part-2"
+            >
+              <div
+                class="pf-v5-l-split pf-m-gutter"
+              >
+                <div
+                  class="pf-v5-l-split__item pf-m-fill"
+                >
+                  <div
+                    class="pf-v5-l-stack pf-m-gutter"
+                  >
+                    <div
+                      class="pf-v5-c-content"
+                    >
+                      do you want to delete?
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <footer
+              class="pf-v5-c-modal-box__footer"
+            >
+              <button
+                aria-disabled="false"
+                class="pf-v5-c-button pf-m-danger"
+                data-ouia-component-id="primary-confirm-button"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              />
+              <button
+                aria-disabled="false"
+                class="pf-v5-c-button pf-m-link"
+                data-ouia-component-id="secondary-cancel-button"
+                data-ouia-component-type="PF5/Button"
+                data-ouia-safe="true"
+                type="button"
+              >
+                Cancel
+              </button>
+            </footer>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>,
+  "container": <div
+    aria-hidden="true"
+  />,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;

From fc7c3b8569a95b4dc80d57bb10c1397594e91d92 Mon Sep 17 00:00:00 2001
From: Zein Sleiman <zsleiman@redhat.com>
Date: Wed, 24 Jan 2024 14:00:59 -0600
Subject: [PATCH 3/9] fix font style; make checkbox variable optional

---
 .../examples/RemoveModal/RemoveModalExample.tsx                | 1 -
 packages/module/src/RemoveModal/RemoveModal.tsx                | 3 +--
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalExample.tsx
index 26636d1a..d3639574 100644
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalExample.tsx
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalExample.tsx
@@ -13,7 +13,6 @@ export const BasicExample: React.FunctionComponent = () => {
       confirmButtonLabel='Yup'
       onClose={() => setIsOpen(false)}
       onSubmit={() => setIsOpen(false)}
-      withCheckbox={false}
       confirmCheckMessage='checked'
     >
     </RemoveModal>
diff --git a/packages/module/src/RemoveModal/RemoveModal.tsx b/packages/module/src/RemoveModal/RemoveModal.tsx
index edd57296..b79f411e 100644
--- a/packages/module/src/RemoveModal/RemoveModal.tsx
+++ b/packages/module/src/RemoveModal/RemoveModal.tsx
@@ -5,7 +5,6 @@ import { createUseStyles } from 'react-jss'
 
 const useStyles = createUseStyles({
   rbacDeleteIcon: {
-    color: 'var(--pf-v5-global--warning-color--100)',
     marginRight: 'var(--pf-v5-global--spacer--xs)'
   },
 })
@@ -22,7 +21,7 @@ export interface RemoveModalProps extends Omit<ModalProps, 'ref'|'children'> {
   /** Callback for the close action button */
   onClose: () => void;
   /** Whether Modal requires a checkbox before confirming */
-  withCheckbox: boolean,
+  withCheckbox?: boolean,
   /** Custom message after confirmation */
   confirmCheckMessage: string,
 }

From 728c6c5ba6e86bb2fb850049366fbbe512d9242b Mon Sep 17 00:00:00 2001
From: Zein Sleiman <zsleiman@redhat.com>
Date: Wed, 24 Jan 2024 14:34:57 -0600
Subject: [PATCH 4/9] replace text prop with children

---
 .../examples/RemoveModal/RemoveModalCheckboxExample.tsx   | 2 +-
 .../examples/RemoveModal/RemoveModalExample.tsx           | 2 +-
 packages/module/src/RemoveModal/RemoveModal.test.tsx      | 2 +-
 packages/module/src/RemoveModal/RemoveModal.tsx           | 8 +++-----
 4 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalCheckboxExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalCheckboxExample.tsx
index c8df5044..979e50ea 100644
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalCheckboxExample.tsx
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalCheckboxExample.tsx
@@ -9,13 +9,13 @@ export const BasicExample: React.FunctionComponent = () => {
     <RemoveModal
       isOpen={isOpen}
       title='Remove Item?'
-      text='Do you want to remove this item?'
       confirmButtonLabel='Yup'
       onClose={() => setIsOpen(false)}
       onSubmit={() => setIsOpen(false)}
       withCheckbox={true}
       confirmCheckMessage='checked'
     >
+      Do you want to remove this item?
     </RemoveModal>
   </>
   
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalExample.tsx
index d3639574..87a8ddeb 100644
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalExample.tsx
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalExample.tsx
@@ -9,12 +9,12 @@ export const BasicExample: React.FunctionComponent = () => {
     <RemoveModal
       isOpen={isOpen}
       title='Remove Item?'
-      text='Do you want to remove this item?'
       confirmButtonLabel='Yup'
       onClose={() => setIsOpen(false)}
       onSubmit={() => setIsOpen(false)}
       confirmCheckMessage='checked'
     >
+      Do you want to remove this item?
     </RemoveModal>
   </>
   
diff --git a/packages/module/src/RemoveModal/RemoveModal.test.tsx b/packages/module/src/RemoveModal/RemoveModal.test.tsx
index 84d736cc..f9636802 100644
--- a/packages/module/src/RemoveModal/RemoveModal.test.tsx
+++ b/packages/module/src/RemoveModal/RemoveModal.test.tsx
@@ -15,7 +15,7 @@ describe('RemoveModal component', () => {
   };
   
   it('should render', () => {
-    const container = render(<RemoveModal isOpen={true} {...initialProps}></RemoveModal>);
+    const container = render(<RemoveModal isOpen={true} {...initialProps}>delete?</RemoveModal>);
     expect(container).toMatchSnapshot();
   });
 });
\ No newline at end of file
diff --git a/packages/module/src/RemoveModal/RemoveModal.tsx b/packages/module/src/RemoveModal/RemoveModal.tsx
index b79f411e..b7ee414c 100644
--- a/packages/module/src/RemoveModal/RemoveModal.tsx
+++ b/packages/module/src/RemoveModal/RemoveModal.tsx
@@ -9,11 +9,9 @@ const useStyles = createUseStyles({
   },
 })
 
-export interface RemoveModalProps extends Omit<ModalProps, 'ref'|'children'> {
+export interface RemoveModalProps extends Omit<ModalProps, 'ref'> {
   /** Title for the Remove Modal. */
   title: string;
-  /** Text inside the Remove Modal */
-  text: string;
   /** Custom label for the cancel action button */
   confirmButtonLabel: string;
   /** Callback for the submit action button */
@@ -28,13 +26,13 @@ export interface RemoveModalProps extends Omit<ModalProps, 'ref'|'children'> {
 
 const RemoveModal: React.FunctionComponent<RemoveModalProps> = ({
   title,
-  text,
   onClose,
   onSubmit,
   isOpen,
   confirmButtonLabel,
   withCheckbox=false,
   confirmCheckMessage,
+  children,
   ...props
 }: RemoveModalProps) => {
   const classes = useStyles();
@@ -61,7 +59,7 @@ const RemoveModal: React.FunctionComponent<RemoveModalProps> = ({
       <Split hasGutter>
         <SplitItem isFilled>
           <Stack hasGutter>
-            <TextContent>{text}</TextContent>
+            <TextContent>{children}</TextContent>
           </Stack>
         </SplitItem>
       </Split>

From 7025489c5a1b8c0caad9e97313609a594c414af4 Mon Sep 17 00:00:00 2001
From: Zein Sleiman <zsleiman@redhat.com>
Date: Thu, 25 Jan 2024 14:17:55 -0600
Subject: [PATCH 5/9] integrate removemodal functionality into warningmodal

---
 .../examples/RemoveModal/RemoveModal.md       |  35 ----
 .../examples/WarningModal/WarningModal.md     |  18 ++
 .../WarningModalCheckboxExample.tsx}          |  19 +-
 .../WarningModalDangerExample.tsx}            |  19 +-
 .../src/RemoveModal/RemoveModal.test.tsx      |  21 --
 .../module/src/RemoveModal/RemoveModal.tsx    |  80 -------
 .../__snapshots__/RemoveModal.test.tsx.snap   | 197 ------------------
 packages/module/src/RemoveModal/index.ts      |   2 -
 .../src/WarningModal/WarningModal.test.tsx    |   1 +
 .../module/src/WarningModal/WarningModal.tsx  |  92 +++++---
 packages/module/src/index.ts                  |   3 -
 11 files changed, 94 insertions(+), 393 deletions(-)
 delete mode 100644 packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModal.md
 rename packages/module/patternfly-docs/content/extensions/component-groups/examples/{RemoveModal/RemoveModalCheckboxExample.tsx => WarningModal/WarningModalCheckboxExample.tsx} (51%)
 rename packages/module/patternfly-docs/content/extensions/component-groups/examples/{RemoveModal/RemoveModalExample.tsx => WarningModal/WarningModalDangerExample.tsx} (52%)
 delete mode 100644 packages/module/src/RemoveModal/RemoveModal.test.tsx
 delete mode 100644 packages/module/src/RemoveModal/RemoveModal.tsx
 delete mode 100644 packages/module/src/RemoveModal/__snapshots__/RemoveModal.test.tsx.snap
 delete mode 100644 packages/module/src/RemoveModal/index.ts

diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModal.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModal.md
deleted file mode 100644
index 21a06a74..00000000
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModal.md
+++ /dev/null
@@ -1,35 +0,0 @@
----
-# Sidenav top-level section
-# should be the same for all markdown files
-section: extensions
-subsection: Component groups
-# Sidenav secondary level section
-# should be the same for all markdown files
-id: Remove modal
-# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
-source: react
-# If you use typescript, the name of the interface to display props for
-# These are found through the sourceProps function provided in patternfly-docs.source.js
-propComponents: ['RemoveModal']
----
-
-import RemoveModal from '@patternfly/react-component-groups/dist/dynamic/RemoveModal';
-
-A **remove modal** component displays a modal when a user performs a removal of a object, which asks them to confirm or cancel the action.
-
-## Examples
-
-### Basic remove modal
-
-A basic remove modal is triggered when a user tries to perform a removal of an object.
-
-```js file="./RemoveModalExample.tsx"
-
-```
-
-### Remove modal with checkbox
-A basic remove modal that requires a checkbox before confirming. 
-```js file="./RemoveModalCheckboxExample.tsx"
-
-```
-
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/RemoveModal/RemoveModalCheckboxExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalCheckboxExample.tsx
similarity index 51%
rename from packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalCheckboxExample.tsx
rename to packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalCheckboxExample.tsx
index 979e50ea..da4d059f 100644
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalCheckboxExample.tsx
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalCheckboxExample.tsx
@@ -1,22 +1,21 @@
 import React from 'react';
-import RemoveModal from '@patternfly/react-component-groups/dist/dynamic/RemoveModal';
+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>
-    <RemoveModal
+    <WarningModal
       isOpen={isOpen}
-      title='Remove Item?'
-      confirmButtonLabel='Yup'
+      title='Unsaved changes'
       onClose={() => setIsOpen(false)}
-      onSubmit={() => setIsOpen(false)}
+      onConfirm={() => setIsOpen(false)}
       withCheckbox={true}
-      confirmCheckMessage='checked'
+      confirmCheckMessage='Are you sure?'
+      dangerButtonVariant={true}
     >
-      Do you want to remove this item?
-    </RemoveModal>
+      Your page contains unsaved changes. Do you want to leave?
+    </WarningModal>
   </>
-  
-}
\ No newline at end of file
+};
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalDangerExample.tsx
similarity index 52%
rename from packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalExample.tsx
rename to packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalDangerExample.tsx
index 87a8ddeb..ca324cce 100644
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/RemoveModal/RemoveModalExample.tsx
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/WarningModal/WarningModalDangerExample.tsx
@@ -1,21 +1,18 @@
 import React from 'react';
-import RemoveModal from '@patternfly/react-component-groups/dist/dynamic/RemoveModal';
+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>
-    <RemoveModal
+    <WarningModal
       isOpen={isOpen}
-      title='Remove Item?'
-      confirmButtonLabel='Yup'
+      title='Unsaved changes'
+      dangerButtonVariant={true}
       onClose={() => setIsOpen(false)}
-      onSubmit={() => setIsOpen(false)}
-      confirmCheckMessage='checked'
-    >
-      Do you want to remove this item?
-    </RemoveModal>
+      onConfirm={() => setIsOpen(false)}>
+      Your page contains unsaved changes. Do you want to leave?
+    </WarningModal>
   </>
-  
-}
\ No newline at end of file
+};
diff --git a/packages/module/src/RemoveModal/RemoveModal.test.tsx b/packages/module/src/RemoveModal/RemoveModal.test.tsx
deleted file mode 100644
index f9636802..00000000
--- a/packages/module/src/RemoveModal/RemoveModal.test.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import RemoveModal from './RemoveModal';
-
-describe('RemoveModal component', () => {
-  const initialProps = {
-    title: 'Delete Item',
-    text: 'do you want to delete?',
-    confirmButtonLabel: '',
-    confirmCheckMessage: 'checked',
-    onClose: () => null,
-    onConfirm: () => null,
-    onSubmit: () => null,
-    withCheckbox: false,
-  };
-  
-  it('should render', () => {
-    const container = render(<RemoveModal isOpen={true} {...initialProps}>delete?</RemoveModal>);
-    expect(container).toMatchSnapshot();
-  });
-});
\ No newline at end of file
diff --git a/packages/module/src/RemoveModal/RemoveModal.tsx b/packages/module/src/RemoveModal/RemoveModal.tsx
deleted file mode 100644
index b7ee414c..00000000
--- a/packages/module/src/RemoveModal/RemoveModal.tsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React, { useState } from 'react';
-import { Button, Checkbox, Modal, ModalProps, ModalVariant, Split, SplitItem, Stack, TextContent } from '@patternfly/react-core';
-import { createUseStyles } from 'react-jss'
-
-
-const useStyles = createUseStyles({
-  rbacDeleteIcon: {
-    marginRight: 'var(--pf-v5-global--spacer--xs)'
-  },
-})
-
-export interface RemoveModalProps extends Omit<ModalProps, 'ref'> {
-  /** Title for the Remove Modal. */
-  title: string;
-  /** Custom label for the cancel action button */
-  confirmButtonLabel: string;
-  /** Callback for the submit action button */
-  onSubmit: () => void;
-  /** Callback for the close action button */
-  onClose: () => void;
-  /** Whether Modal requires a checkbox before confirming */
-  withCheckbox?: boolean,
-  /** Custom message after confirmation */
-  confirmCheckMessage: string,
-}
-
-const RemoveModal: React.FunctionComponent<RemoveModalProps> = ({
-  title,
-  onClose,
-  onSubmit,
-  isOpen,
-  confirmButtonLabel,
-  withCheckbox=false,
-  confirmCheckMessage,
-  children,
-  ...props
-}: RemoveModalProps) => {
-  const classes = useStyles();
-  const [ checked, setChecked ] = useState(false);
-
-  return (
-    <Modal
-      className={classes.rbacDeleteIcon}
-      title={title}
-      titleIconVariant="warning"
-      isOpen={isOpen}
-      variant={ModalVariant.small}
-      onClose={onClose}
-      actions={[
-        <Button key="confirm" ouiaId="primary-confirm-button" isDisabled={withCheckbox && !checked} variant="danger" onClick={onSubmit}>
-          {confirmButtonLabel}
-        </Button>,
-        <Button key="cancel" ouiaId="secondary-cancel-button" variant="link" onClick={onClose}>
-          Cancel
-        </Button>,
-      ]}
-      {...props}
-    >
-      <Split hasGutter>
-        <SplitItem isFilled>
-          <Stack hasGutter>
-            <TextContent>{children}</TextContent>
-          </Stack>
-        </SplitItem>
-      </Split>
-      {withCheckbox ? (
-        <Checkbox
-          isChecked={checked}
-          onChange={() => setChecked(!checked)}
-          label={confirmCheckMessage}
-          id="remove-modal-check"
-          className="pf-v5-u-mt-lg"
-        />
-      ) : null}
-    </Modal>
-  );
-};
-
-export default RemoveModal;
-
diff --git a/packages/module/src/RemoveModal/__snapshots__/RemoveModal.test.tsx.snap b/packages/module/src/RemoveModal/__snapshots__/RemoveModal.test.tsx.snap
deleted file mode 100644
index a4829b9d..00000000
--- a/packages/module/src/RemoveModal/__snapshots__/RemoveModal.test.tsx.snap
+++ /dev/null
@@ -1,197 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`RemoveModal component should render 1`] = `
-{
-  "asFragment": [Function],
-  "baseElement": <body
-    class="pf-v5-c-backdrop__open"
-  >
-    <div
-      aria-hidden="true"
-    />
-    <div>
-      <div
-        class="pf-v5-c-backdrop"
-      >
-        <div
-          class="pf-v5-l-bullseye"
-        >
-          <div
-            aria-describedby="pf-modal-part-2"
-            aria-labelledby="pf-modal-part-1"
-            aria-modal="true"
-            class="pf-v5-c-modal-box rbacDeleteIcon-0-2-1 pf-m-warning pf-m-sm"
-            data-ouia-component-id="OUIA-Generated-Modal-small-1"
-            data-ouia-component-type="PF5/ModalContent"
-            data-ouia-safe="true"
-            id="pf-modal-part-0"
-            role="dialog"
-          >
-            <div
-              class="pf-v5-c-modal-box__close"
-            >
-              <button
-                aria-disabled="false"
-                aria-label="Close"
-                class="pf-v5-c-button pf-m-plain"
-                data-ouia-component-id="OUIA-Generated-Modal-small-1-ModalBoxCloseButton"
-                data-ouia-component-type="PF5/Button"
-                data-ouia-safe="true"
-                type="button"
-              >
-                <svg
-                  aria-hidden="true"
-                  class="pf-v5-svg"
-                  fill="currentColor"
-                  height="1em"
-                  role="img"
-                  viewBox="0 0 352 512"
-                  width="1em"
-                >
-                  <path
-                    d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
-                  />
-                </svg>
-              </button>
-            </div>
-            <header
-              class="pf-v5-c-modal-box__header"
-            >
-              <h1
-                class="pf-v5-c-modal-box__title pf-m-icon"
-                id="pf-modal-part-1"
-              >
-                <span
-                  class="pf-v5-c-modal-box__title-icon"
-                >
-                  <svg
-                    aria-hidden="true"
-                    class="pf-v5-svg"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    viewBox="0 0 576 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M569.517 440.013C587.975 472.007 564.806 512 527.94 512H48.054c-36.937 0-59.999-40.055-41.577-71.987L246.423 23.985c18.467-32.009 64.72-31.951 83.154 0l239.94 416.028zM288 354c-25.405 0-46 20.595-46 46s20.595 46 46 46 46-20.595 46-46-20.595-46-46-46zm-43.673-165.346l7.418 136c.347 6.364 5.609 11.346 11.982 11.346h48.546c6.373 0 11.635-4.982 11.982-11.346l7.418-136c.375-6.874-5.098-12.654-11.982-12.654h-63.383c-6.884 0-12.356 5.78-11.981 12.654z"
-                    />
-                  </svg>
-                </span>
-                <span
-                  class="pf-v5-screen-reader"
-                >
-                  Warning alert:
-                </span>
-                <span
-                  class="pf-v5-c-modal-box__title-text"
-                >
-                  Delete Item
-                </span>
-              </h1>
-            </header>
-            <div
-              class="pf-v5-c-modal-box__body"
-              id="pf-modal-part-2"
-            >
-              <div
-                class="pf-v5-l-split pf-m-gutter"
-              >
-                <div
-                  class="pf-v5-l-split__item pf-m-fill"
-                >
-                  <div
-                    class="pf-v5-l-stack pf-m-gutter"
-                  >
-                    <div
-                      class="pf-v5-c-content"
-                    >
-                      do you want to delete?
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-            <footer
-              class="pf-v5-c-modal-box__footer"
-            >
-              <button
-                aria-disabled="false"
-                class="pf-v5-c-button pf-m-danger"
-                data-ouia-component-id="primary-confirm-button"
-                data-ouia-component-type="PF5/Button"
-                data-ouia-safe="true"
-                type="button"
-              />
-              <button
-                aria-disabled="false"
-                class="pf-v5-c-button pf-m-link"
-                data-ouia-component-id="secondary-cancel-button"
-                data-ouia-component-type="PF5/Button"
-                data-ouia-safe="true"
-                type="button"
-              >
-                Cancel
-              </button>
-            </footer>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>,
-  "container": <div
-    aria-hidden="true"
-  />,
-  "debug": [Function],
-  "findAllByAltText": [Function],
-  "findAllByDisplayValue": [Function],
-  "findAllByLabelText": [Function],
-  "findAllByPlaceholderText": [Function],
-  "findAllByRole": [Function],
-  "findAllByTestId": [Function],
-  "findAllByText": [Function],
-  "findAllByTitle": [Function],
-  "findByAltText": [Function],
-  "findByDisplayValue": [Function],
-  "findByLabelText": [Function],
-  "findByPlaceholderText": [Function],
-  "findByRole": [Function],
-  "findByTestId": [Function],
-  "findByText": [Function],
-  "findByTitle": [Function],
-  "getAllByAltText": [Function],
-  "getAllByDisplayValue": [Function],
-  "getAllByLabelText": [Function],
-  "getAllByPlaceholderText": [Function],
-  "getAllByRole": [Function],
-  "getAllByTestId": [Function],
-  "getAllByText": [Function],
-  "getAllByTitle": [Function],
-  "getByAltText": [Function],
-  "getByDisplayValue": [Function],
-  "getByLabelText": [Function],
-  "getByPlaceholderText": [Function],
-  "getByRole": [Function],
-  "getByTestId": [Function],
-  "getByText": [Function],
-  "getByTitle": [Function],
-  "queryAllByAltText": [Function],
-  "queryAllByDisplayValue": [Function],
-  "queryAllByLabelText": [Function],
-  "queryAllByPlaceholderText": [Function],
-  "queryAllByRole": [Function],
-  "queryAllByTestId": [Function],
-  "queryAllByText": [Function],
-  "queryAllByTitle": [Function],
-  "queryByAltText": [Function],
-  "queryByDisplayValue": [Function],
-  "queryByLabelText": [Function],
-  "queryByPlaceholderText": [Function],
-  "queryByRole": [Function],
-  "queryByTestId": [Function],
-  "queryByText": [Function],
-  "queryByTitle": [Function],
-  "rerender": [Function],
-  "unmount": [Function],
-}
-`;
diff --git a/packages/module/src/RemoveModal/index.ts b/packages/module/src/RemoveModal/index.ts
deleted file mode 100644
index 1ffc6ec4..00000000
--- a/packages/module/src/RemoveModal/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from './RemoveModal';
-export * from './RemoveModal';
\ No newline at end of file
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..eb1f0528 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<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 message after confirmation */
+  confirmCheckMessage?: string;
+  /** Whether confirm button will show up as red or not */
+  dangerButtonVariant?: boolean;
 }
 
 const WarningModal: React.FunctionComponent<WarningModalProps> = ({
@@ -19,37 +25,55 @@ const WarningModal: React.FunctionComponent<WarningModalProps> = ({
   cancelButtonLabel = 'Cancel',
   variant = ModalVariant.small,
   titleIconVariant = 'warning',
+  withCheckbox = false,
+  confirmCheckMessage='',
+  dangerButtonVariant = 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={dangerButtonVariant ? 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={confirmCheckMessage}
+          id="remove-modal-check"
+          className="pf-v5-u-mt-lg"
+        />
+      ) : null}
+    </Modal>
+  )
+  
+};
 
 
 export default WarningModal;
diff --git a/packages/module/src/index.ts b/packages/module/src/index.ts
index 5691fd6f..168bfd0a 100644
--- a/packages/module/src/index.ts
+++ b/packages/module/src/index.ts
@@ -39,9 +39,6 @@ export * from './NotAuthorized';
 export { default as NotFoundIcon } from './NotFoundIcon';
 export * from './NotFoundIcon';
 
-export { default as RemoveModal } from './RemoveModal';
-export * from './RemoveModal';
-
 export { default as SkeletonTable } from './SkeletonTable';
 export * from './SkeletonTable';
 

From 7aeea299ec26ba73c0261a0989c0766ae2750f4f Mon Sep 17 00:00:00 2001
From: Zein Sleiman <zsleiman@redhat.com>
Date: Mon, 29 Jan 2024 08:41:30 -0600
Subject: [PATCH 6/9] rename some props; enhance example

---
 .../WarningModalCheckboxExample.tsx            |  4 ++--
 .../WarningModal/WarningModalDangerExample.tsx |  2 +-
 .../WarningModal/WarningModalExample.tsx       |  2 ++
 .../module/src/WarningModal/WarningModal.tsx   | 18 +++++++++---------
 4 files changed, 14 insertions(+), 12 deletions(-)

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
index da4d059f..3bfdeb8e 100644
--- 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
@@ -12,8 +12,8 @@ export const BasicExample: React.FunctionComponent = () => {
       onClose={() => setIsOpen(false)}
       onConfirm={() => setIsOpen(false)}
       withCheckbox={true}
-      confirmCheckMessage='Are you sure?'
-      dangerButtonVariant={true}
+      checkboxLabel='Are you sure?'
+      confirmButtonVariant
     >
       Your page contains unsaved changes. Do you want to leave?
     </WarningModal>
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
index ca324cce..b6312f2c 100644
--- 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
@@ -9,7 +9,7 @@ export const BasicExample: React.FunctionComponent = () => {
     <WarningModal
       isOpen={isOpen}
       title='Unsaved changes'
-      dangerButtonVariant={true}
+      confirmButtonVariant
       onClose={() => 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 = () => {
     <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?
diff --git a/packages/module/src/WarningModal/WarningModal.tsx b/packages/module/src/WarningModal/WarningModal.tsx
index eb1f0528..845061fa 100644
--- a/packages/module/src/WarningModal/WarningModal.tsx
+++ b/packages/module/src/WarningModal/WarningModal.tsx
@@ -8,12 +8,12 @@ export interface WarningModalProps extends Omit<ModalProps, 'ref'> {
   confirmButtonLabel?: string;
   /** Custom label for the cancel action button */
   cancelButtonLabel?: string;
-  /** Whether Modal requires a checkbox before confirming */
+  /** Whether modal requires a checkbox before confirming */
   withCheckbox?: boolean;
-  /** Custom message after confirmation */
-  confirmCheckMessage?: string;
+  /** Custom checkbox label */
+  checkboxLabel?: string;
   /** Whether confirm button will show up as red or not */
-  dangerButtonVariant?: boolean;
+  confirmButtonVariant?: boolean;
 }
 
 const WarningModal: React.FunctionComponent<WarningModalProps> = ({
@@ -26,8 +26,8 @@ const WarningModal: React.FunctionComponent<WarningModalProps> = ({
   variant = ModalVariant.small,
   titleIconVariant = 'warning',
   withCheckbox = false,
-  confirmCheckMessage='',
-  dangerButtonVariant = false,
+  checkboxLabel='I understand that this action cannot be undone',
+  confirmButtonVariant = false,
   ...props
 }: WarningModalProps) => {
   const [ checked, setChecked ] = useState(false);
@@ -43,7 +43,7 @@ const WarningModal: React.FunctionComponent<WarningModalProps> = ({
         <Button
           ouiaId="primary-confirm-button"
           key="confirm"
-          variant={dangerButtonVariant ? ButtonVariant.danger : ButtonVariant.primary}
+          variant={confirmButtonVariant ? ButtonVariant.danger : ButtonVariant.primary}
           onClick={onConfirm}
           isDisabled={withCheckbox && !checked}
         >
@@ -65,8 +65,8 @@ const WarningModal: React.FunctionComponent<WarningModalProps> = ({
         <Checkbox
           isChecked={checked}
           onChange={() => setChecked(!checked)}
-          label={confirmCheckMessage}
-          id="remove-modal-check"
+          label={checkboxLabel}
+          id="warning-modal-check"
           className="pf-v5-u-mt-lg"
         />
       ) : null}

From 8d635394f0bdf690c9a34e0c86331f10b9b69096 Mon Sep 17 00:00:00 2001
From: Zein Sleiman <zsleiman@redhat.com>
Date: Mon, 29 Jan 2024 08:52:15 -0600
Subject: [PATCH 7/9] update snapshot

---
 .../src/WarningModal/__snapshots__/WarningModal.test.tsx.snap    | 1 +
 1 file changed, 1 insertion(+)

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`] = `
             </header>
             <div
               class="pf-v5-c-modal-box__body"
+              confirmcheckmessage="hi there"
               id="pf-modal-part-2"
             >
               Warning modal content

From 89a3d951dc18583c95cb196493cf8d29d2a96949 Mon Sep 17 00:00:00 2001
From: Zein Sleiman <zsleiman@redhat.com>
Date: Mon, 29 Jan 2024 09:56:33 -0600
Subject: [PATCH 8/9] fix example

---
 .../examples/WarningModal/WarningModalCheckboxExample.tsx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

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
index 3bfdeb8e..3b1b08b4 100644
--- 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
@@ -11,7 +11,7 @@ export const BasicExample: React.FunctionComponent = () => {
       title='Unsaved changes'
       onClose={() => setIsOpen(false)}
       onConfirm={() => setIsOpen(false)}
-      withCheckbox={true}
+      withCheckbox
       checkboxLabel='Are you sure?'
       confirmButtonVariant
     >

From 5227df7243587a4e51130b5b57d287cee9513057 Mon Sep 17 00:00:00 2001
From: Filip Hlavac <50696716+fhlavac@users.noreply.github.com>
Date: Mon, 29 Jan 2024 22:51:43 +0100
Subject: [PATCH 9/9] Update packages/module/src/WarningModal/WarningModal.tsx

---
 packages/module/src/WarningModal/WarningModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/module/src/WarningModal/WarningModal.tsx b/packages/module/src/WarningModal/WarningModal.tsx
index 845061fa..ec8c6733 100644
--- a/packages/module/src/WarningModal/WarningModal.tsx
+++ b/packages/module/src/WarningModal/WarningModal.tsx
@@ -12,7 +12,7 @@ export interface WarningModalProps extends Omit<ModalProps, 'ref'> {
   withCheckbox?: boolean;
   /** Custom checkbox label */
   checkboxLabel?: string;
-  /** Whether confirm button will show up as red or not */
+  /** Visual variant of the confirm button */
   confirmButtonVariant?: boolean;
 }