@patternfly/react-core 5.4.0-prerelease.2 → 5.4.0-prerelease.20

package/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 && (

package/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 && (

package/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();
 });
 

package/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