@patternfly/react-core 5.4.0-prerelease.9 → 5.4.1

package/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx

@@ -0,0 +1,322 @@
+import React from 'react';
+import {
+  Avatar,
+  Brand,
+  Breadcrumb,
+  BreadcrumbItem,
+  Button,
+  ButtonVariant,
+  Card,
+  CardBody,
+  Divider,
+  Dropdown,
+  DropdownGroup,
+  DropdownItem,
+  DropdownList,
+  Gallery,
+  GalleryItem,
+  Masthead,
+  MastheadBrand,
+  MastheadContent,
+  MastheadMain,
+  MenuToggle,
+  MenuToggleElement,
+  Nav,
+  NavItem,
+  NavList,
+  Page,
+  PageSection,
+  PageSectionVariants,
+  SkipToContent,
+  Text,
+  TextContent,
+  Toolbar,
+  ToolbarContent,
+  ToolbarGroup,
+  ToolbarItem
+} from '@patternfly/react-core';
+import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon';
+import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg';
+import pfLogo from '@patternfly/react-core/src/demos/assets/pf-logo.svg';
+
+interface NavOnSelectProps {
+  groupId: number | string;
+  itemId: number | string;
+  to: string;
+}
+
+export const MastheadWithHorizontalNav: React.FunctionComponent = () => {
+  const [isDropdownOpen, setIsDropdownOpen] = React.useState(false);
+  const [isKebabDropdownOpen, setIsKebabDropdownOpen] = React.useState(false);
+  const [isFullKebabDropdownOpen, setIsFullKebabDropdownOpen] = React.useState(false);
+  const [activeItem, setActiveItem] = React.useState(0);
+
+  const [isOpen, setIsOpen] = React.useState<boolean>(false);
+  const menuRef = React.useRef<HTMLDivElement>(null);
+  const toggleRef = React.useRef<HTMLButtonElement>(null);
+
+  const onNavSelect = (_event: React.FormEvent<HTMLInputElement>, selectedItem: NavOnSelectProps) => {
+    typeof selectedItem.itemId === 'number' && setActiveItem(selectedItem.itemId);
+  };
+
+  const onDropdownToggle = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  const onDropdownSelect = () => {
+    setIsDropdownOpen(!isDropdownOpen);
+  };
+
+  const onKebabDropdownToggle = () => {
+    setIsKebabDropdownOpen(!isKebabDropdownOpen);
+  };
+
+  const onKebabDropdownSelect = () => {
+    setIsKebabDropdownOpen(!isKebabDropdownOpen);
+  };
+
+  const onFullKebabDropdownToggle = () => {
+    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
+  };
+
+  const onFullKebabDropdownSelect = () => {
+    setIsFullKebabDropdownOpen(!isFullKebabDropdownOpen);
+  };
+
+  const handleMenuKeys = (event: KeyboardEvent) => {
+    if (!isOpen) {
+      return;
+    }
+    if (menuRef.current?.contains(event.target as Node) || toggleRef.current?.contains(event.target as Node)) {
+      if (event.key === 'Escape') {
+        setIsOpen(!isOpen);
+        toggleRef.current?.focus();
+      }
+    }
+  };
+
+  const handleClickOutside = (event: MouseEvent) => {
+    if (isOpen && !menuRef.current?.contains(event.target as Node)) {
+      setIsOpen(false);
+    }
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('keydown', handleMenuKeys);
+    window.addEventListener('click', handleClickOutside);
+
+    return () => {
+      window.removeEventListener('keydown', handleMenuKeys);
+      window.removeEventListener('click', handleClickOutside);
+    };
+  }, [isOpen, menuRef]);
+
+  const dashboardBreadcrumb = (
+    <Breadcrumb>
+      <BreadcrumbItem>Section home</BreadcrumbItem>
+      <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+      <BreadcrumbItem to="#">Section title</BreadcrumbItem>
+      <BreadcrumbItem to="#" isActive>
+        Section landing
+      </BreadcrumbItem>
+    </Breadcrumb>
+  );
+
+  const kebabDropdownItems = (
+    <>
+      <DropdownItem key="settings">
+        <CogIcon /> Settings
+      </DropdownItem>
+      <DropdownItem key="help">
+        <HelpIcon /> Help
+      </DropdownItem>
+    </>
+  );
+  const userDropdownItems = [
+    <>
+      <DropdownItem key="group 2 profile">My profile</DropdownItem>
+      <DropdownItem key="group 2 user">User management</DropdownItem>
+      <DropdownItem key="group 2 logout">Logout</DropdownItem>
+    </>
+  ];
+
+  const PageHorizontalNav = () => (
+    <ToolbarItem isOverflowContainer>
+      <Nav
+        id="page-layout-horizontal-nav-horizontal-nav"
+        onSelect={onNavSelect}
+        aria-label="Global"
+        variant="horizontal"
+      >
+        <NavList>
+          <NavItem itemId={0} isActive={activeItem === 0} to="#horizontal-1">
+            Horizontal nav item 1
+          </NavItem>
+          <NavItem itemId={1} isActive={activeItem === 1} to="#horizontal-2">
+            Horizontal nav item 2
+          </NavItem>
+          <NavItem itemId={2} isActive={activeItem === 2} to="#horizontal-3">
+            Horizontal nav item 3
+          </NavItem>
+          <NavItem itemId={3} isActive={activeItem === 3} to="#horizontal-4">
+            Horizontal nav item 4
+          </NavItem>
+          <NavItem itemId={4} isActive={activeItem === 4} to="#horizontal-5">
+            Horizontal nav item 5
+          </NavItem>
+          <NavItem itemId={5} isActive={activeItem === 4} to="#horizontal-6">
+            Horizontal nav item 6
+          </NavItem>
+          <NavItem itemId={6} isActive={activeItem === 4} to="#horizontal-7">
+            Horizontal nav item 7
+          </NavItem>
+        </NavList>
+      </Nav>
+    </ToolbarItem>
+  );
+
+  const headerToolbar = (
+    <Toolbar id="toolbar" isFullHeight>
+      <ToolbarContent>
+        <PageHorizontalNav />
+        <ToolbarGroup
+          variant="icon-button-group"
+          align={{ default: 'alignRight' }}
+          spacer={{ default: 'spacerNone', md: 'spacerMd' }}
+        >
+          <ToolbarItem>
+            <Button aria-label="Notifications" variant={ButtonVariant.plain} icon={<BellIcon />} />
+          </ToolbarItem>
+          <ToolbarGroup variant="icon-button-group" visibility={{ default: 'hidden', lg: 'visible' }}>
+            <ToolbarItem>
+              <Button aria-label="Settings" variant={ButtonVariant.plain} icon={<CogIcon />} />
+            </ToolbarItem>
+            <ToolbarItem>
+              <Button aria-label="Help" variant={ButtonVariant.plain} icon={<QuestionCircleIcon />} />
+            </ToolbarItem>
+          </ToolbarGroup>
+          <ToolbarItem visibility={{ default: 'hidden', md: 'visible', lg: 'hidden' }}>
+            <Dropdown
+              isOpen={isKebabDropdownOpen}
+              onSelect={onKebabDropdownSelect}
+              onOpenChange={(isOpen: boolean) => setIsKebabDropdownOpen(isOpen)}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={onKebabDropdownToggle}
+                  isExpanded={isKebabDropdownOpen}
+                  variant="plain"
+                  aria-label="Settings and help"
+                >
+                  <EllipsisVIcon aria-hidden="true" />
+                </MenuToggle>
+              )}
+            >
+              <DropdownList>{kebabDropdownItems}</DropdownList>
+            </Dropdown>
+          </ToolbarItem>
+          <ToolbarItem visibility={{ md: 'hidden' }}>
+            <Dropdown
+              isOpen={isFullKebabDropdownOpen}
+              onSelect={onFullKebabDropdownSelect}
+              onOpenChange={(isOpen: boolean) => setIsFullKebabDropdownOpen(isOpen)}
+              popperProps={{ position: 'right' }}
+              toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+                <MenuToggle
+                  ref={toggleRef}
+                  onClick={onFullKebabDropdownToggle}
+                  isExpanded={isFullKebabDropdownOpen}
+                  variant="plain"
+                  aria-label="Toolbar menu"
+                >
+                  <EllipsisVIcon aria-hidden="true" />
+                </MenuToggle>
+              )}
+            >
+              <DropdownGroup key="group 2" aria-label="User actions">
+                <DropdownList>{userDropdownItems}</DropdownList>
+              </DropdownGroup>
+              <Divider />
+              <DropdownList>{kebabDropdownItems}</DropdownList>
+            </Dropdown>
+          </ToolbarItem>
+        </ToolbarGroup>
+        <ToolbarItem visibility={{ default: 'hidden', md: 'visible' }}>
+          <Dropdown
+            isOpen={isDropdownOpen}
+            onSelect={onDropdownSelect}
+            onOpenChange={(isOpen: boolean) => setIsDropdownOpen(isOpen)}
+            popperProps={{ position: 'right' }}
+            toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
+              <MenuToggle
+                ref={toggleRef}
+                onClick={onDropdownToggle}
+                isFullHeight
+                isExpanded={isDropdownOpen}
+                icon={<Avatar src={imgAvatar} alt="" />}
+              >
+                Ned Username
+              </MenuToggle>
+            )}
+          >
+            <DropdownList>{userDropdownItems}</DropdownList>
+          </Dropdown>
+        </ToolbarItem>
+      </ToolbarContent>
+    </Toolbar>
+  );
+
+  const masthead = (
+    <Masthead>
+      <MastheadMain>
+        <MastheadBrand>
+          <Brand src={pfLogo} alt="PatternFly" heights={{ default: '36px' }} />
+        </MastheadBrand>
+      </MastheadMain>
+      <MastheadContent>{headerToolbar}</MastheadContent>
+    </Masthead>
+  );
+
+  const mainContainerId = 'main-content-page-layout-tertiary-nav';
+
+  const pageSkipToContent = <SkipToContent href={`#${mainContainerId}`}>Skip to content</SkipToContent>;
+
+  return (
+    <Page
+      header={masthead}
+      isManagedSidebar
+      skipToContent={pageSkipToContent}
+      breadcrumb={dashboardBreadcrumb}
+      mainContainerId={mainContainerId}
+      isTertiaryNavWidthLimited
+      isBreadcrumbWidthLimited
+      isTertiaryNavGrouped
+      isBreadcrumbGrouped
+      additionalGroupedContent={
+        <PageSection variant={PageSectionVariants.light}>
+          <TextContent>
+            <Text component="h1">Main title</Text>
+            <Text component="p">This is a full page demo.</Text>
+          </TextContent>
+        </PageSection>
+      }
+    >
+      <PageSection>
+        <Gallery hasGutter>
+          {Array.from({ length: 10 }).map((_value, index) => (
+            <GalleryItem key={index}>
+              <Card>
+                <CardBody>This is a card</CardBody>
+              </Card>
+            </GalleryItem>
+          ))}
+        </Gallery>
+      </PageSection>
+    </Page>
+  );
+};

package/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsx

@@ -1,14 +1,5 @@
 import React from 'react';
-import {
-  Form,
-  FormGroup,
-  FormHelperText,
-  HelperText,
-  Popover,
-  HelperTextItem,
-  TextInput
-} from '@patternfly/react-core';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
@@ -89,20 +80,6 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
     }
   };
 
-  const iconPopover = (
-    <Popover headerContent={<div>Password Requirements</div>} bodyContent={<div>Password rules</div>}>
-      <button
-        type="button"
-        aria-label="More info for name field"
-        onClick={(e) => e.preventDefault()}
-        aria-describedby="password-field"
-        className="pf-v5-c-form__group-label-help"
-      >
-        <HelpIcon />
-      </button>
-    </Popover>
-  );
-
   const passStrLabel = (
     <HelperText>
       <HelperTextItem variant={passStrength.variant} icon={passStrength.icon}>
@@ -115,7 +92,6 @@ export const PasswordStrengthDemo: React.FunctionComponent = () => {
     <Form>
       <FormGroup
         label="Password"
-        labelIcon={iconPopover}
         isRequired
         fieldId="password-field"
         {...(ruleLength === 'success' &&

package/src/deprecated/components/ApplicationLauncher/ApplicationLauncher.tsx

@@ -75,10 +75,10 @@ class ApplicationLauncher extends React.Component<ApplicationLauncherProps> {
     items: [] as React.ReactNode[],
     isOpen: false,
     position: DropdownPosition.left,
-    /* eslint-disable @typescript-eslint/no-unused-vars */
+
     onSelect: (_event: any): any => undefined,
     onToggle: (_event: any, _value: boolean): any => undefined,
-    /* eslint-enable @typescript-eslint/no-unused-vars */
+
     'aria-label': 'Application launcher',
     isGrouped: false,
     toggleIcon: <ThIcon />,

package/src/deprecated/components/ContextSelector/ContextSelectorItem.tsx

@@ -35,7 +35,6 @@ class ContextSelectorItem extends React.Component<ContextSelectorItemProps> {
   ref: React.RefObject<HTMLButtonElement & HTMLAnchorElement> = React.createRef();
 
   componentDidMount() {
-    /* eslint-disable-next-line */
     this.props.sendRef(this.props.index, this.ref.current);
   }
 

package/src/deprecated/components/Dropdown/DropdownToggle.tsx

@@ -67,9 +67,9 @@ export const DropdownToggle: React.FunctionComponent<DropdownToggleProps> = ({
   isPlain = false,
   isText = false,
   toggleVariant = 'default',
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   isActive = false,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   onToggle = (_evt: any, _isOpen: boolean) => undefined as any,
   icon = null,
   toggleIndicator: ToggleIndicator = CaretDownIcon,

package/src/deprecated/components/OptionsMenu/OptionsMenuItemGroup.tsx

@@ -11,7 +11,7 @@ export interface OptionsMenuItemGroupProps extends React.HTMLProps<HTMLElement>
   /** Provides an accessible name for the options menu items group */
   'aria-label'?: string;
   /** Optional title for the options menu items group */
-  groupTitle?: string | React.ReactNode;
+  groupTitle?: React.ReactNode;
   /** Flag indicating this options menu items group will be followed by a horizontal separator */
   hasSeparator?: boolean;
 }

package/src/deprecated/components/OptionsMenu/OptionsMenuToggle.tsx

@@ -37,7 +37,7 @@ export const OptionsMenuToggle: React.FunctionComponent<OptionsMenuToggleProps>
   parentId = '',
   toggleTemplate = <React.Fragment />,
   hideCaret = false,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   isActive = false,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   isSplitButton = false,

package/src/deprecated/components/PageHeader/PageHeader.tsx

@@ -1,4 +1,3 @@
-/* eslint-disable no-console */
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Page/page';
 import { css } from '@patternfly/react-styles';

package/src/deprecated/components/Select/Select.tsx

@@ -86,7 +86,7 @@ export interface SelectProps
   /** Text displayed in typeahead select to prompt the user to create an item */
   createText?: string;
   /** Title text of Select */
-  placeholderText?: string | React.ReactNode;
+  placeholderText?: React.ReactNode;
   /** Text to display in typeahead select when no results are found */
   noResultsFoundText?: string;
   /** Array of selected items for multi select variants. */

package/src/deprecated/components/Select/SelectOption.tsx

@@ -187,7 +187,7 @@ class SelectOption extends React.Component<SelectOptionProps> {
       isLoad,
       isLoading,
       setViewMoreNextIndex,
-      // eslint-disable-next-line no-console
+
       isLastOptionBeforeFooter,
       isGrouped = false,
       ...props

package/src/deprecated/components/Select/SelectToggle.tsx

@@ -297,7 +297,6 @@ class SelectToggleBase extends React.Component<SelectToggleProps> {
             )}
             aria-label={ariaLabel}
             onBlur={onBlur}
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             onClick={(event) => {
               onToggle(event, !isOpen);
               if (isOpen) {
@@ -324,7 +323,6 @@ class SelectToggleBase extends React.Component<SelectToggleProps> {
               className
             )}
             onBlur={onBlur}
-            // eslint-disable-next-line @typescript-eslint/no-unused-vars
             onClick={(event) => {
               if (!isDisabled) {
                 onToggle(event, !isOpen);

package/src/deprecated/components/Wizard/__tests__/Wizard.test.tsx

@@ -30,7 +30,6 @@ describe('Wizard', () => {
       { name: 'D', id: 'step-D', component: <p>Step 5</p> }
     ];
     const onBack: WizardStepFunctionType = (step) => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const name = { step };
     };
 
@@ -63,7 +62,6 @@ describe('Wizard', () => {
       { name: 'D', component: <p>Step 5</p> }
     ];
     const onBack: WizardStepFunctionType = (step) => {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const name = { step };
     };
 

package/src/helpers/__tests__/util.test.ts

@@ -89,7 +89,6 @@ test('sideElementIsOutOfView Returns NONE when in view', () => {
 });
 
 test('fillTemplate interpolates strings correctly', () => {
-  // eslint-disable-next-line no-template-curly-in-string
   const templateString = 'My name is ${firstName} ${lastName}';
   const expected = 'My name is Jon Dough';
   const templatVars = {

package/src/helpers/resizeObserver.tsx

@@ -1,4 +1,4 @@
-import { canUseDOM } from './util';
+import { canUseDOM, debounce } from './util';
 
 /**
  * This function creates a ResizeObserver used to handle resize events for the given containerRef. If ResizeObserver
@@ -83,7 +83,7 @@ export const getResizeObserver = (
         if (useRequestAnimationFrame) {
           window.requestAnimationFrame(() => {
             if (Array.isArray(entries) && entries.length > 0) {
-              handleResize();
+              debounce(handleResize, 100);
             }
           });
           // Avoid wrapping function in requestAnimationFrame if the function is debounced

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