@patternfly/react-core 6.5.0-prerelease.6 → 6.5.0-prerelease.61

package/helpers/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.5","private":true}
+{"name":"@patternfly/react-core-helpers","main":"../dist/js/helpers/index.js","module":"../dist/esm/helpers/index.js","typings":"../dist/esm/helpers/index.d.ts","version":"6.5.0-prerelease.60","private":true}

package/layouts/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.5","private":true}
+{"name":"@patternfly/react-core-layouts","main":"../dist/js/layouts/index.js","module":"../dist/esm/layouts/index.js","typings":"../dist/esm/layouts/index.d.ts","version":"6.5.0-prerelease.60","private":true}

package/next/package.json

@@ -1 +1 @@
-{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.5","private":true}
+{"name":"@patternfly/react-core-next","main":"../dist/js/next/index.js","module":"../dist/esm/next/index.js","typings":"../dist/esm/next/index.d.ts","version":"6.5.0-prerelease.60","private":true}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.6",
+  "version": "6.5.0-prerelease.61",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -46,22 +46,22 @@
     "subpaths": "node ../../scripts/exportSubpaths.mjs --config subpaths.config.json"
   },
   "dependencies": {
-    "@patternfly/react-icons": "^6.5.0-prerelease.2",
-    "@patternfly/react-styles": "^6.5.0-prerelease.2",
-    "@patternfly/react-tokens": "^6.5.0-prerelease.2",
-    "focus-trap": "7.6.4",
+    "@patternfly/react-icons": "^6.5.0-prerelease.26",
+    "@patternfly/react-styles": "^6.5.0-prerelease.20",
+    "@patternfly/react-tokens": "^6.5.0-prerelease.19",
+    "focus-trap": "7.6.6",
     "react-dropzone": "^14.3.5",
     "tslib": "^2.8.1"
   },
   "devDependencies": {
-    "@patternfly/patternfly": "6.5.0-prerelease.12",
+    "@patternfly/patternfly": "6.5.0-prerelease.75",
     "case-anything": "^3.1.2",
     "css": "^3.0.0",
-    "fs-extra": "^11.3.0"
+    "fs-extra": "^11.3.3"
   },
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
-  "gitHead": "070b384f310888ebad56fff18677a08c49d35883"
+  "gitHead": "69b6225ca40cfbb583516375a59b95c9590a2592"
 }

package/src/components/AboutModal/AboutModal.tsx

@@ -6,7 +6,7 @@ import { AboutModalBoxBrand } from './AboutModalBoxBrand';
 import { AboutModalBoxCloseButton } from './AboutModalBoxCloseButton';
 import { AboutModalBox } from './AboutModalBox';
 import { Modal, ModalVariant } from '../Modal';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useSSRSafeId } from '../../helpers';
 
 export interface AboutModalProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the about modal */
@@ -56,6 +56,8 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
   disableFocusTrap,
   ...props
 }: AboutModalProps) => {
+  const ariaLabelledBy = useSSRSafeId('pf-about-modal-title-');
+
   if (brandImageSrc && !brandImageAlt) {
     // eslint-disable-next-line no-console
     console.error(
@@ -73,35 +75,29 @@ export const AboutModal: React.FunctionComponent<AboutModalProps> = ({
     return null;
   }
   return (
-    <GenerateId prefix="pf-about-modal-title-">
-      {(ariaLabelledBy) => (
-        <Modal
-          isOpen={isOpen}
-          variant={ModalVariant.large}
-          {...(productName && { 'aria-labelledby': ariaLabelledBy })}
-          aria-label={ariaLabel}
-          onEscapePress={onClose}
-          appendTo={appendTo}
-          disableFocusTrap={disableFocusTrap}
-        >
-          <AboutModalBox
-            style={
-              backgroundImageSrc
-                ? ({ [backgroundImage.name]: `url(${backgroundImageSrc})` } as React.CSSProperties)
-                : {}
-            }
-            className={css(className)}
-          >
-            <AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
-            <AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} onClose={onClose} />
-            {productName && <AboutModalBoxHeader id={ariaLabelledBy} productName={productName} />}
-            <AboutModalBoxContent trademark={trademark} hasNoContentContainer={hasNoContentContainer} {...props}>
-              {children}
-            </AboutModalBoxContent>
-          </AboutModalBox>
-        </Modal>
-      )}
-    </GenerateId>
+    <Modal
+      isOpen={isOpen}
+      variant={ModalVariant.large}
+      {...(productName && { 'aria-labelledby': ariaLabelledBy })}
+      aria-label={ariaLabel}
+      onEscapePress={onClose}
+      appendTo={appendTo}
+      disableFocusTrap={disableFocusTrap}
+    >
+      <AboutModalBox
+        style={
+          backgroundImageSrc ? ({ [backgroundImage.name]: `url(${backgroundImageSrc})` } as React.CSSProperties) : {}
+        }
+        className={css(className)}
+      >
+        <AboutModalBoxBrand src={brandImageSrc} alt={brandImageAlt} />
+        <AboutModalBoxCloseButton aria-label={closeButtonAriaLabel} onClose={onClose} />
+        {productName && <AboutModalBoxHeader id={ariaLabelledBy} productName={productName} />}
+        <AboutModalBoxContent trademark={trademark} hasNoContentContainer={hasNoContentContainer} {...props}>
+          {children}
+        </AboutModalBoxContent>
+      </AboutModalBox>
+    </Modal>
   );
 };
 AboutModal.displayName = 'AboutModal';

package/src/components/AboutModal/AboutModalBoxCloseButton.tsx

@@ -1,7 +1,7 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-modal-box';
 import { Button } from '../Button';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export interface AboutModalBoxCloseButtonProps extends React.HTMLProps<HTMLDivElement> {
   /** A callback for when the close button is clicked  */
@@ -16,7 +16,7 @@ export const AboutModalBoxCloseButton: React.FunctionComponent<AboutModalBoxClos
   ...props
 }: AboutModalBoxCloseButtonProps) => (
   <div className={css(styles.aboutModalBoxClose)} {...props}>
-    <Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<TimesIcon />} />
+    <Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<RhMicronsCloseIcon />} />
   </div>
 );
 AboutModalBoxCloseButton.displayName = 'AboutModalBoxCloseButton';

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
     <button
       aria-label="Close Dialog"
       class="pf-v6-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-1"
+      data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -22,11 +22,11 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 352 512"
+          viewBox="0 0 20 20"
           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"
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
           />
         </svg>
       </span>
@@ -43,7 +43,7 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
     <button
       aria-label="Klose Daylok"
       class="pf-v6-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-3"
+      data-ouia-component-id="OUIA-Generated-Button-plain-:r2:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -57,11 +57,11 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 352 512"
+          viewBox="0 0 20 20"
           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"
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
           />
         </svg>
       </span>
@@ -78,7 +78,7 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
     <button
       aria-label="Close Dialog"
       class="pf-v6-c-button pf-m-plain"
-      data-ouia-component-id="OUIA-Generated-Button-plain-2"
+      data-ouia-component-id="OUIA-Generated-Button-plain-:r1:"
       data-ouia-component-type="PF6/Button"
       data-ouia-safe="true"
       type="button"
@@ -92,11 +92,11 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 352 512"
+          viewBox="0 0 20 20"
           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"
+            d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
           />
         </svg>
       </span>

package/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxHeader.test.tsx.snap

@@ -7,7 +7,7 @@ exports[`AboutModalBoxHeader Test 1`] = `
   >
     <h1
       class="pf-v6-c-title pf-m-4xl"
-      data-ouia-component-id="OUIA-Generated-Title-1"
+      data-ouia-component-id="OUIA-Generated-Title-:r0:"
       data-ouia-component-type="PF6/Title"
       data-ouia-safe="true"
       id="id"

package/src/components/Accordion/Accordion.tsx

@@ -15,6 +15,10 @@ export interface AccordionProps extends React.HTMLProps<HTMLDListElement> {
   asDefinitionList?: boolean;
   /** Flag to indicate the accordion had a border */
   isBordered?: boolean;
+  /** @beta Flag to prevent the accordion from automatically applying plain styling when glass theme is enabled. */
+  isNoPlainOnGlass?: boolean;
+  /** @beta Flag to add plain styling to the accordion. */
+  isPlain?: boolean;
   /** Display size variant. */
   displaySize?: 'default' | 'lg';
   /** Sets the toggle icon position for all accordion toggles. */
@@ -28,6 +32,8 @@ export const Accordion: React.FunctionComponent<AccordionProps> = ({
   headingLevel = 'h3',
   asDefinitionList = true,
   isBordered = false,
+  isNoPlainOnGlass = false,
+  isPlain = false,
   displaySize = 'default',
   togglePosition = 'end',
   ...props
@@ -38,6 +44,8 @@ export const Accordion: React.FunctionComponent<AccordionProps> = ({
       className={css(
         styles.accordion,
         isBordered && styles.modifiers.bordered,
+        isNoPlainOnGlass && styles.modifiers.noPlainOnGlass,
+        isPlain && styles.modifiers.plain,
         togglePosition === 'start' && styles.modifiers.toggleStart,
         displaySize === 'lg' && styles.modifiers.displayLg,
         className

package/src/components/Accordion/AccordionToggle.tsx

@@ -1,11 +1,13 @@
 import { useContext } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import { AccordionContext, AccordionItemContext } from './AccordionContext';
 
-export interface AccordionToggleProps
-  extends React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
+export interface AccordionToggleProps extends React.DetailedHTMLProps<
+  React.ButtonHTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> {
   /** Content rendered inside the Accordion toggle  */
   children?: React.ReactNode;
   /** Additional classes added to the Accordion Toggle  */
@@ -25,7 +27,7 @@ export const AccordionToggle: React.FunctionComponent<AccordionToggleProps> = ({
 }: AccordionToggleProps) => {
   const renderToggleIcon = () => (
     <span className={css(styles.accordionToggleIcon)}>
-      <AngleRightIcon />
+      <RhMicronsCaretDownIcon />
     </span>
   );
 

package/src/components/Accordion/__tests__/Accordion.test.tsx

@@ -1,3 +1,4 @@
+import '@testing-library/jest-dom';
 import { render, screen } from '@testing-library/react';
 
 import { Accordion } from '../Accordion';
@@ -121,6 +122,41 @@ test('Renders with pf-m-bordered when isBordered=true', () => {
   expect(screen.getByText('Test')).toHaveClass('pf-m-bordered');
 });
 
+test(`Renders without class ${styles.modifiers.noPlainOnGlass} by default`, () => {
+  render(<Accordion>Test</Accordion>);
+
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.noPlainOnGlass);
+});
+
+test(`Renders with class ${styles.modifiers.noPlainOnGlass} when isNoPlainOnGlass`, () => {
+  render(<Accordion isNoPlainOnGlass>Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noPlainOnGlass);
+});
+
+test(`Renders without class ${styles.modifiers.plain} by default`, () => {
+  render(<Accordion>Test</Accordion>);
+
+  expect(screen.getByText('Test')).not.toHaveClass(styles.modifiers.plain);
+});
+
+test(`Renders with class ${styles.modifiers.plain} when isPlain`, () => {
+  render(<Accordion isPlain>Test</Accordion>);
+
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.plain);
+});
+
+test(`applies both ${styles.modifiers.plain} and ${styles.modifiers.noPlainOnGlass} when both isPlain and isNoPlainOnGlass are true`, () => {
+  render(
+    <Accordion isPlain isNoPlainOnGlass>
+      Test
+    </Accordion>
+  );
+
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.plain);
+  expect(screen.getByText('Test')).toHaveClass(styles.modifiers.noPlainOnGlass);
+});
+
 test('Renders without pf-m-display-lg by default', () => {
   render(<Accordion>Test</Accordion>);
 

package/src/components/Accordion/__tests__/AccordionToggle.test.tsx

@@ -4,7 +4,7 @@ import { AccordionToggle } from '../AccordionToggle';
 import { AccordionContext, AccordionItemContext } from '../AccordionContext';
 import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
 
-jest.mock('@patternfly/react-icons/dist/esm/icons/angle-right-icon', () => () => 'Icon mock');
+jest.mock('@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon', () => () => 'Icon mock');
 
 test('Renders without children', () => {
   render(

package/src/components/ActionList/examples/ActionList.md

@@ -6,7 +6,7 @@ propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
 ---
 
 import { Fragment, useState } from 'react';
-import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/js/icons/rh-microns-close-icon';
 import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 

package/src/components/ActionList/examples/ActionListVertical.tsx

@@ -1,6 +1,6 @@
 import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const ActionListVertical: React.FunctionComponent = () => (
   <>
@@ -27,7 +27,7 @@ export const ActionListVertical: React.FunctionComponent = () => (
     <ActionList isVertical>
       <ActionListGroup>
         <ActionListItem>
-          <Button aria-label="Close vertical action list group 1" variant="plain" icon={<TimesIcon />} />
+          <Button aria-label="Close vertical action list group 1" variant="plain" icon={<RhMicronsCloseIcon />} />
         </ActionListItem>
         <ActionListItem>
           <Button aria-label="Toggle vertical action list example group 1" variant="plain" icon={<CheckIcon />} />
@@ -35,7 +35,7 @@ export const ActionListVertical: React.FunctionComponent = () => (
       </ActionListGroup>
       <ActionListGroup>
         <ActionListItem>
-          <Button aria-label="Close vertical action list group 2" variant="plain" icon={<TimesIcon />} />
+          <Button aria-label="Close vertical action list group 2" variant="plain" icon={<RhMicronsCloseIcon />} />
         </ActionListItem>
         <ActionListItem>
           <Button aria-label="Toggle vertical action list example group 2" variant="plain" icon={<CheckIcon />} />

package/src/components/ActionList/examples/ActionListWithIcons.tsx

@@ -1,5 +1,5 @@
 import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 
 export const ActionListWithIcons: React.FunctionComponent = () => (
@@ -7,7 +7,12 @@ export const ActionListWithIcons: React.FunctionComponent = () => (
     <h4>With list icons wrapper</h4>
     <ActionList isIconList>
       <ActionListItem>
-        <Button variant="plain" id="with-icons-times-button" aria-label="times icon button" icon={<TimesIcon />} />
+        <Button
+          variant="plain"
+          id="with-icons-times-button"
+          aria-label="times icon button"
+          icon={<RhMicronsCloseIcon />}
+        />
       </ActionListItem>
       <ActionListItem>
         <Button variant="plain" id="with-icons-check-button" aria-label="check icon button" icon={<CheckIcon />} />
@@ -22,7 +27,7 @@ export const ActionListWithIcons: React.FunctionComponent = () => (
             variant="plain"
             id="with-icons-list-times-button"
             aria-label="times icon button"
-            icon={<TimesIcon />}
+            icon={<RhMicronsCloseIcon />}
           />
         </ActionListItem>
         <ActionListItem>
@@ -40,7 +45,7 @@ export const ActionListWithIcons: React.FunctionComponent = () => (
             variant="plain"
             id="with-icons-group-times-button"
             aria-label="times icon button"
-            icon={<TimesIcon />}
+            icon={<RhMicronsCloseIcon />}
           />
         </ActionListItem>
         <ActionListItem>

package/src/components/Alert/AlertActionCloseButton.tsx

@@ -1,6 +1,6 @@
 import { useRef, useContext } from 'react';
 import { Button, ButtonVariant, ButtonProps } from '../Button';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import { AlertContext } from './AlertContext';
 import { AlertGroupContext } from './AlertGroupContext';
 import alertGroupStyles from '@patternfly/react-styles/css/components/Alert/alert-group';
@@ -50,7 +50,7 @@ export const AlertActionCloseButton: React.FunctionComponent<AlertActionCloseBut
           onClick={handleOnClick}
           aria-label={ariaLabel === '' ? `Close ${variantLabel || alertVariantLabel} alert: ${title}` : ariaLabel}
           className={className}
-          icon={<TimesIcon />}
+          icon={<RhMicronsCloseIcon />}
           {...props}
         />
       )}

package/src/components/Alert/AlertIcon.tsx

@@ -1,17 +1,17 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Alert/alert';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-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 InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const variantIcons = {
-  success: CheckCircleIcon,
-  danger: ExclamationCircleIcon,
-  warning: ExclamationTriangleIcon,
-  info: InfoCircleIcon,
-  custom: BellIcon
+  success: RhUiCheckCircleFillIcon,
+  danger: RhUiErrorFillIcon,
+  warning: RhUiWarningFillIcon,
+  info: RhUiInformationFillIcon,
+  custom: RhUiNotificationFillIcon
 };
 
 export interface AlertIconProps extends React.HTMLProps<HTMLDivElement> {

package/src/components/Alert/AlertToggleExpandButton.tsx

@@ -1,7 +1,7 @@
 import { useContext } from 'react';
 import { Button, ButtonProps, ButtonVariant } from '../Button';
 import { AlertContext } from './AlertContext';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Alert/alert';
 
@@ -33,7 +33,7 @@ export const AlertToggleExpandButton: React.FunctionComponent<AlertToggleExpandB
       {...props}
       icon={
         <span className={css(styles.alertToggleIcon)}>
-          <AngleRightIcon />
+          <RhMicronsCaretDownIcon />
         </span>
       }
     />

package/src/components/Alert/__tests__/AlertIcon.test.tsx

@@ -3,14 +3,14 @@ import { render, screen } from '@testing-library/react';
 import { AlertIcon } from '../AlertIcon';
 import styles from '@patternfly/react-styles/css/components/Alert/alert';
 
-jest.mock('@patternfly/react-icons/dist/esm/icons/check-circle-icon', () => () => 'Check circle icon mock');
-jest.mock('@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon', () => () => 'Exclamation circle icon mock');
+jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon', () => () => 'Check circle icon mock');
+jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon', () => () => 'Exclamation circle icon mock');
 jest.mock(
-  '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon',
+  '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon',
   () => () => 'Exclamation triangle icon mock'
 );
-jest.mock('@patternfly/react-icons/dist/esm/icons/info-circle-icon', () => () => 'Info circle icon mock');
-jest.mock('@patternfly/react-icons/dist/esm/icons/bell-icon', () => () => 'Bell icon mock');
+jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon', () => () => 'Info circle icon mock');
+jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon', () => () => 'Bell icon mock');
 
 test('Renders without children', () => {
   render(

package/src/components/Alert/__tests__/AlertToggleExpandButton.test.tsx

@@ -7,7 +7,7 @@ import styles from '@patternfly/react-styles/css/components/Alert/alert';
 
 jest.mock('../../Button');
 
-jest.mock('@patternfly/react-icons/dist/esm/icons/angle-right-icon', () => () => 'Icon mock');
+jest.mock('@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon', () => () => 'Icon mock');
 
 test('Renders without children', () => {
   render(

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
   <button
     aria-label="Close some label alert: test title"
     class="pf-v6-c-button pf-m-plain"
-    data-ouia-component-id="OUIA-Generated-Button-plain-1"
+    data-ouia-component-id="OUIA-Generated-Button-plain-:r0:"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"
@@ -19,11 +19,11 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 352 512"
+        viewBox="0 0 20 20"
         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"
+          d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
         />
       </svg>
     </span>

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionLink.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`AlertActionLink should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <button
     class="pf-v6-c-button pf-m-link pf-m-inline ''"
-    data-ouia-component-id="OUIA-Generated-Button-link-1"
+    data-ouia-component-id="OUIA-Generated-Button-link-:r0:"
     data-ouia-component-type="PF6/Button"
     data-ouia-safe="true"
     type="button"

package/src/components/Alert/__tests__/Generated/__snapshots__/AlertIcon.test.tsx.snap

@@ -11,11 +11,11 @@ exports[`AlertIcon should match snapshot (auto-generated) 1`] = `
       fill="currentColor"
       height="1em"
       role="img"
-      viewBox="0 0 512 512"
+      viewBox="0 0 32 32"
       width="1em"
     >
       <path
-        d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"
+        d="M16 1C7.729 1 1 7.729 1 16s6.729 15 15 15 15-6.729 15-15S24.271 1 16 1Zm7.795 11.795-8.646 8.646c-.317.317-.733.475-1.149.475s-.832-.158-1.149-.475l-4.646-4.646a1.126 1.126 0 0 1 1.591-1.591l4.205 4.205 8.205-8.205a1.126 1.126 0 0 1 1.591 1.591Z"
       />
     </svg>
   </div>

package/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap

@@ -28,11 +28,11 @@ exports[`Matches the snapshot 1`] = `
       fill="currentColor"
       height="1em"
       role="img"
-      viewBox="0 0 352 512"
+      viewBox="0 0 20 20"
       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"
+        d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
       />
     </svg>
   </div>

package/src/components/Alert/examples/AlertAsyncLiveRegion.tsx

@@ -42,13 +42,7 @@ export const AsyncLiveRegionAlert: React.FunctionComponent = () => {
           text="Async alerts on"
           buttonId="async-alerts-on"
           isSelected={isActive}
-          onChange={() => setIsActive(true)}
-        />
-        <ToggleGroupItem
-          text="Async alerts off"
-          buttonId="async-alerts-off"
-          isSelected={!isActive}
-          onChange={() => setIsActive(false)}
+          onChange={() => setIsActive(!isActive)}
         />
       </ToggleGroup>
       <AlertGroup hasAnimations isLiveRegion>