From ed6bcc8daac92d8806cb623af61f452629fa55d8 Mon Sep 17 00:00:00 2001
From: Titani <tlabaj@redhat.com>
Date: Mon, 10 Jun 2024 18:15:09 -0400
Subject: [PATCH] feat(Modal Next): Added status variant styling to title

---
 .../src/next/components/Modal/ModalBoxTitle.tsx      |  7 ++++++-
 .../src/next/components/Modal/ModalHeader.tsx        |  2 --
 .../Modal/__tests__/ModalBoxTitle.test.tsx           | 11 +++++++++--
 .../__snapshots__/ModalBoxTitle.test.tsx.snap        | 12 ++++++------
 4 files changed, 21 insertions(+), 11 deletions(-)

diff --git a/packages/react-core/src/next/components/Modal/ModalBoxTitle.tsx b/packages/react-core/src/next/components/Modal/ModalBoxTitle.tsx
index b7f4fcb97ea..ac9cc6b9600 100644
--- a/packages/react-core/src/next/components/Modal/ModalBoxTitle.tsx
+++ b/packages/react-core/src/next/components/Modal/ModalBoxTitle.tsx
@@ -57,7 +57,12 @@ export const ModalBoxTitle: React.FunctionComponent<ModalBoxTitleProps> = ({
     <h1
       id={id}
       ref={h1}
-      className={css(modalStyles.modalBoxTitle, titleIconVariant && modalStyles.modifiers.icon, className)}
+      className={css(
+        modalStyles.modalBoxTitle,
+        titleIconVariant && modalStyles.modifiers.icon,
+        isVariantIcon(titleIconVariant) && modalStyles.modifiers[titleIconVariant],
+        className
+      )}
       {...props}
     >
       {titleIconVariant && (
diff --git a/packages/react-core/src/next/components/Modal/ModalHeader.tsx b/packages/react-core/src/next/components/Modal/ModalHeader.tsx
index c8973d24d81..71fffa70485 100644
--- a/packages/react-core/src/next/components/Modal/ModalHeader.tsx
+++ b/packages/react-core/src/next/components/Modal/ModalHeader.tsx
@@ -54,8 +54,6 @@ export const ModalHeader: React.FunctionComponent<ModalHeaderProps> = ({
     </>
   );
 
-  // TODO: apply variant modifier for icon styling.  Core fix needed first.  similar to this:
-  // className={css(className, isVariantIcon(titleIconVariant) && modalStyles.modifiers[titleIconVariant])}
   return (
     <header className={css(styles.modalBoxHeader, help && styles.modifiers.help, className)} {...props}>
       {help && (
diff --git a/packages/react-core/src/next/components/Modal/__tests__/ModalBoxTitle.test.tsx b/packages/react-core/src/next/components/Modal/__tests__/ModalBoxTitle.test.tsx
index 269d784695d..b0b2c2f0847 100644
--- a/packages/react-core/src/next/components/Modal/__tests__/ModalBoxTitle.test.tsx
+++ b/packages/react-core/src/next/components/Modal/__tests__/ModalBoxTitle.test.tsx
@@ -1,31 +1,38 @@
 import * as React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 
 import { ModalBoxTitle } from '../ModalBoxTitle';
 import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
+import styles from '@patternfly/react-styles/css/components/ModalBox/modal-box';
 
 test('ModalBoxTitle alert variant', () => {
   const { asFragment } = render(<ModalBoxTitle title="Test Modal Box warning" id="boxId" titleIconVariant="warning" />);
+  expect(screen.getByRole('heading')).toHaveClass(styles.modifiers.warning);
   expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBoxTitle info variant', () => {
   const { asFragment } = render(<ModalBoxTitle title="Test Modal Box info" id="boxId" titleIconVariant="info" />);
+  expect(screen.getByRole('heading')).toHaveClass(styles.modifiers.info);
   expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBoxTitle danger variant', () => {
   const { asFragment } = render(<ModalBoxTitle title="Test Modal Box danger" id="boxId" titleIconVariant="danger" />);
+  expect(screen.getByRole('heading')).toHaveClass(styles.modifiers.danger);
   expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBoxTitle custom variant', () => {
-  const { asFragment } = render(<ModalBoxTitle title="Test Modal Box warning" id="boxId" titleIconVariant="custom" />);
+  const { asFragment } = render(<ModalBoxTitle title="Test Modal Box custom" id="boxId" titleIconVariant="custom" />);
+  expect(screen.getByRole('heading')).toHaveClass(styles.modifiers.custom);
   expect(asFragment()).toMatchSnapshot();
 });
 
 test('ModalBoxTitle success variant', () => {
   const { asFragment } = render(<ModalBoxTitle title="Test Modal Box success" id="boxId" titleIconVariant="success" />);
+  expect(screen.getByRole('heading')).toHaveClass(styles.modifiers.success);
   expect(asFragment()).toMatchSnapshot();
 });
 
diff --git a/packages/react-core/src/next/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap b/packages/react-core/src/next/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap
index 112406099e3..56695f1ae48 100644
--- a/packages/react-core/src/next/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap
+++ b/packages/react-core/src/next/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ModalBoxTitle alert variant 1`] = `
 <DocumentFragment>
   <h1
-    class="pf-v5-c-modal-box__title pf-m-icon"
+    class="pf-v5-c-modal-box__title pf-m-icon pf-m-warning"
     id="boxId"
   >
     <span
@@ -72,7 +72,7 @@ exports[`ModalBoxTitle custom icon variant 1`] = `
 exports[`ModalBoxTitle custom variant 1`] = `
 <DocumentFragment>
   <h1
-    class="pf-v5-c-modal-box__title pf-m-icon"
+    class="pf-v5-c-modal-box__title pf-m-icon pf-m-custom"
     id="boxId"
   >
     <span
@@ -100,7 +100,7 @@ exports[`ModalBoxTitle custom variant 1`] = `
     <span
       class="pf-v5-c-modal-box__title-text"
     >
-      Test Modal Box warning
+      Test Modal Box custom
     </span>
   </h1>
 </DocumentFragment>
@@ -109,7 +109,7 @@ exports[`ModalBoxTitle custom variant 1`] = `
 exports[`ModalBoxTitle danger variant 1`] = `
 <DocumentFragment>
   <h1
-    class="pf-v5-c-modal-box__title pf-m-icon"
+    class="pf-v5-c-modal-box__title pf-m-icon pf-m-danger"
     id="boxId"
   >
     <span
@@ -146,7 +146,7 @@ exports[`ModalBoxTitle danger variant 1`] = `
 exports[`ModalBoxTitle info variant 1`] = `
 <DocumentFragment>
   <h1
-    class="pf-v5-c-modal-box__title pf-m-icon"
+    class="pf-v5-c-modal-box__title pf-m-icon pf-m-info"
     id="boxId"
   >
     <span
@@ -183,7 +183,7 @@ exports[`ModalBoxTitle info variant 1`] = `
 exports[`ModalBoxTitle success variant 1`] = `
 <DocumentFragment>
   <h1
-    class="pf-v5-c-modal-box__title pf-m-icon"
+    class="pf-v5-c-modal-box__title pf-m-icon pf-m-success"
     id="boxId"
   >
     <span