@patternfly/react-core 6.6.0 → 6.6.1-prerelease.0

package/src/components/MenuToggle/examples/MenuTogglePlainTextLabel.tsx

@@ -3,13 +3,13 @@ import { MenuToggle } from '@patternfly/react-core';
 
 export const MenuTogglePlainTextLabel: React.FunctionComponent = () => (
   <Fragment>
-    <MenuToggle variant="plainText" isDisabled aria-label="Disabled plain menu toggle">
+    <MenuToggle aria-haspopup={false} variant="plainText" isDisabled aria-label="Disabled plain menu toggle">
       Disabled
     </MenuToggle>{' '}
-    <MenuToggle variant="plainText" aria-label="Plain menu toggle">
+    <MenuToggle aria-haspopup={false} variant="plainText" aria-label="Plain menu toggle">
       Custom text
     </MenuToggle>{' '}
-    <MenuToggle variant="plainText" isExpanded aria-label="Expanded plain menu toggle">
+    <MenuToggle aria-haspopup={false} variant="plainText" isExpanded aria-label="Expanded plain menu toggle">
       Custom text (expanded)
     </MenuToggle>
   </Fragment>

package/src/components/MenuToggle/examples/MenuToggleSettings.tsx

@@ -3,6 +3,9 @@ import { MenuToggle } from '@patternfly/react-core';
 
 export const MenuToggleSettings: React.FunctionComponent = () => (
   <Fragment>
-    <MenuToggle isSettings>Settings</MenuToggle> <MenuToggle isSettings variant="plain" aria-label="Settings" />
+    <MenuToggle aria-haspopup={false} isSettings>
+      Settings
+    </MenuToggle>{' '}
+    <MenuToggle aria-haspopup={false} isSettings variant="plain" aria-label="Settings" />
   </Fragment>
 );

package/src/components/MenuToggle/examples/MenuToggleSmall.tsx

@@ -1,3 +1,7 @@
 import { MenuToggle } from '@patternfly/react-core';
 
-export const MenuToggleSmall: React.FunctionComponent = () => <MenuToggle size="sm">Small toggle</MenuToggle>;
+export const MenuToggleSmall: React.FunctionComponent = () => (
+  <MenuToggle aria-haspopup={false} size="sm">
+    Small toggle
+  </MenuToggle>
+);

package/src/components/MenuToggle/examples/MenuToggleStatus.tsx

@@ -3,16 +3,22 @@ import { MenuToggle, HelperText, HelperTextItem } from '@patternfly/react-core';
 
 export const MenuToggleStatus: React.FunctionComponent = () => (
   <Fragment>
-    <MenuToggle status="success">Success</MenuToggle>
+    <MenuToggle aria-haspopup={false} status="success">
+      Success
+    </MenuToggle>
     <br />
     <br />
-    <MenuToggle status="warning">Warning</MenuToggle>
+    <MenuToggle aria-haspopup={false} status="warning">
+      Warning
+    </MenuToggle>
     <HelperText>
       <HelperTextItem variant="warning">Warning text that explains the issue.</HelperTextItem>
     </HelperText>
     <br />
     <br />
-    <MenuToggle status="danger">Danger</MenuToggle>
+    <MenuToggle aria-haspopup={false} status="danger">
+      Danger
+    </MenuToggle>
     <HelperText>
       <HelperTextItem variant="error">Danger text that explains the issue.</HelperTextItem>
     </HelperText>

package/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx

@@ -16,7 +16,7 @@ export const MenuToggleTypeahead: React.FunctionComponent = () => {
   };
 
   return (
-    <MenuToggle variant="typeahead" isFullWidth aria-label="Typeahead menu toggle">
+    <MenuToggle aria-haspopup={false} variant="typeahead" isFullWidth aria-label="Typeahead menu toggle">
       <TextInputGroup isPlain>
         <TextInputGroupMain
           value={inputValue}

package/src/components/MenuToggle/examples/MenuToggleVariantStyles.tsx

@@ -3,11 +3,13 @@ import { MenuToggle } from '@patternfly/react-core';
 
 export const MenuToggleVariantStyles: React.FunctionComponent = () => (
   <Fragment>
-    <MenuToggle variant="primary">Collapsed</MenuToggle>{' '}
-    <MenuToggle variant="primary" isExpanded>
+    <MenuToggle aria-haspopup={false} variant="primary">
+      Collapsed
+    </MenuToggle>{' '}
+    <MenuToggle aria-haspopup={false} variant="primary" isExpanded>
       Expanded
     </MenuToggle>{' '}
-    <MenuToggle variant="primary" isDisabled>
+    <MenuToggle aria-haspopup={false} variant="primary" isDisabled>
       Disabled
     </MenuToggle>
   </Fragment>

package/src/components/Modal/Modal.tsx

@@ -111,7 +111,8 @@ class Modal extends Component<ModalProps, ModalState> {
     const target: HTMLElement = this.getElement(appendTo);
     const bodyChildren = target.children;
     for (const child of Array.from(bodyChildren)) {
-      if (child.id !== this.backdropId) {
+      const isPopperElement = child.hasAttribute('data-popper-placement');
+      if (child.id !== this.backdropId && !isPopperElement) {
         hide ? child.setAttribute('aria-hidden', '' + hide) : child.removeAttribute('aria-hidden');
       }
     }

package/src/components/Modal/examples/Modal.md

@@ -7,9 +7,9 @@ ouia: true
 ---
 
 import { Fragment, useRef, useState } from 'react';
-import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
+import RhUiWarningIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-icon';
 import RhUiAttentionBellFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-attention-bell-fill-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 import formStyles from '@patternfly/react-styles/css/components/Form/form';
 
 ## Examples

package/src/components/Modal/examples/ModalCustomHeader.tsx

@@ -12,7 +12,7 @@ import {
   Flex
 } from '@patternfly/react-core';
 
-import WarningTriangleIcon from '@patternfly/react-icons/dist/esm/icons/warning-triangle-icon';
+import RhUiWarningIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-icon';
 
 export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -55,7 +55,7 @@ export const ModalCustomHeaderFooter: React.FunctionComponent = () => {
         <ModalFooter>
           <Title headingLevel="h4" size={TitleSizes.md}>
             <Flex spaceItems={{ default: 'spaceItemsSm' }}>
-              <WarningTriangleIcon />
+              <RhUiWarningIcon />
               <span>Custom modal footer.</span>
             </Flex>
           </Title>

package/src/components/Modal/examples/ModalWithHelp.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useState } from 'react';
 import { Button, Modal, ModalBody, ModalFooter, ModalHeader, Popover } from '@patternfly/react-core';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
 
 export const ModalWithHelp: React.FunctionComponent = () => {
   const [isModalOpen, setIsModalOpen] = useState(false);
@@ -35,7 +35,7 @@ export const ModalWithHelp: React.FunctionComponent = () => {
               }
               footerContent="Popover Footer"
             >
-              <Button variant="plain" aria-label="Help" icon={<HelpIcon />} />
+              <Button variant="plain" aria-label="Help" icon={<RhUiQuestionMarkCircleIcon />} />
             </Popover>
           }
         />

package/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsx

@@ -5,7 +5,7 @@ import { ExpandableSection } from '../ExpandableSection';
 import { useSSRSafeId } from '../../helpers';
 import RhUiInProgressIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-in-progress-icon';
 import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
-import TimesCircleIcon from '@patternfly/react-icons/dist/esm/icons/times-circle-icon';
+import RhUiCloseCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-close-circle-fill-icon';
 
 /** Acts as an expandable container for all uploaded file statuses.
  * An optional text and/or icon can also be passed into this sub-component.
@@ -41,7 +41,7 @@ export const MultipleFileUploadStatus: React.FunctionComponent<MultipleFileUploa
   useEffect(() => {
     switch (statusToggleIcon) {
       case 'danger':
-        setIcon(<TimesCircleIcon />);
+        setIcon(<RhUiCloseCircleFillIcon />);
         break;
       case 'success':
         setIcon(<RhUiCheckCircleFillIcon />);

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/m
 import { css } from '@patternfly/react-styles';
 import { Progress } from '../Progress';
 import { Button } from '../Button';
-import FileIcon from '@patternfly/react-icons/dist/esm/icons/file-icon';
+import RhUiDocumentFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-document-fill-icon';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 /** Automatically reads an uploaded file to render a visual representation of it, including
@@ -149,7 +149,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
 
   return (
     <li className={css(styles.multipleFileUploadStatusItem, className)} {...props}>
-      <div className={styles.multipleFileUploadStatusItemIcon}>{fileIcon || <FileIcon />}</div>
+      <div className={styles.multipleFileUploadStatusItemIcon}>{fileIcon || <RhUiDocumentFillIcon />}</div>
       <div className={styles.multipleFileUploadStatusItemMain}>
         <div className="pf-v6-screen-reader" aria-live="polite">
           {progressAriaLiveMessage &&

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx

@@ -1,7 +1,7 @@
 import { render, screen } from '@testing-library/react';
 
 import { MultipleFileUploadStatusItem } from '../MultipleFileUploadStatusItem';
-import FileImageIcon from '@patternfly/react-icons/dist/esm/icons/file-image-icon';
+import RhUiImageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-image-fill-icon';
 
 describe('MultipleFileUploadStatusItem', () => {
   test('renders with expected class names', () => {
@@ -26,7 +26,7 @@ describe('MultipleFileUploadStatusItem', () => {
     const { asFragment } = render(
       <MultipleFileUploadStatusItem
         file={testFile}
-        fileIcon={<FileImageIcon />}
+        fileIcon={<RhUiImageFillIcon />}
         fileName="testCustomFileName.txt"
         fileSize={42}
         progressId="test-progress-id"
@@ -42,7 +42,7 @@ describe('MultipleFileUploadStatusItem', () => {
     const { asFragment } = render(
       <MultipleFileUploadStatusItem
         file={testFile}
-        fileIcon={<FileImageIcon />}
+        fileIcon={<RhUiImageFillIcon />}
         fileName="testCustomFileName.txt"
         fileSize={42}
         progressId="test-progress-id"
@@ -58,7 +58,7 @@ describe('MultipleFileUploadStatusItem', () => {
     const { asFragment } = render(
       <MultipleFileUploadStatusItem
         file={testFile}
-        fileIcon={<FileImageIcon />}
+        fileIcon={<RhUiImageFillIcon />}
         fileName="testCustomFileName.txt"
         fileSize={42}
         progressId="test-progress-id"

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snap

@@ -7,6 +7,8 @@ exports[`MultipleFileUploadStatus renders custom class names 1`] = `
   >
     <div
       class="pf-v6-c-expandable-section pf-m-expanded"
+      data-ouia-component-type="PF6/ExpandableSection"
+      data-ouia-safe="true"
     >
       <div
         class="pf-v6-c-expandable-section__toggle"
@@ -83,6 +85,8 @@ exports[`MultipleFileUploadStatus renders status toggle icon 1`] = `
   >
     <div
       class="pf-v6-c-expandable-section pf-m-expanded"
+      data-ouia-component-type="PF6/ExpandableSection"
+      data-ouia-safe="true"
     >
       <div
         class="pf-v6-c-expandable-section__toggle"
@@ -173,6 +177,8 @@ exports[`MultipleFileUploadStatus renders status toggle text 1`] = `
   >
     <div
       class="pf-v6-c-expandable-section pf-m-expanded"
+      data-ouia-component-type="PF6/ExpandableSection"
+      data-ouia-safe="true"
     >
       <div
         class="pf-v6-c-expandable-section__toggle"
@@ -251,6 +257,8 @@ exports[`MultipleFileUploadStatus renders with expected class names 1`] = `
   >
     <div
       class="pf-v6-c-expandable-section pf-m-expanded"
+      data-ouia-component-type="PF6/ExpandableSection"
+      data-ouia-safe="true"
     >
       <div
         class="pf-v6-c-expandable-section__toggle"

package/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap

@@ -14,24 +14,12 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
+        viewBox="0 0 32 32"
         width="1em"
       >
-        <svg
-          class="pf-v6-icon-default"
-          viewBox="0 0 384 512"
-        >
-          <path
-            d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"
-          />
-        </svg>
-        <svg
-          class="pf-v6-icon-rh-ui"
-          viewBox="0 0 32 32"
-        >
-          <path
-            d="M26.5 1H12a1.001 1.001 0 0 0-.708.294L4.294 8.292A1.001 1.001 0 0 0 4 9v20.5c0 .827.673 1.5 1.5 1.5h21c.827 0 1.5-.673 1.5-1.5v-27c0-.827-.673-1.5-1.5-1.5ZM11 4.414V8H7.414L11 4.414ZM26 29H6V10h5.5c.827 0 1.5-.673 1.5-1.5V3h13v26Z"
-          />
-        </svg>
+        <path
+          d="M4.275 8.875a.738.738 0 0 1 .195-.405l7-7a.738.738 0 0 1 .405-.195v7.6h-7.6ZM26.5 1.25H14.125V9.5c0 .896-.729 1.625-1.625 1.625H4.25V29.5c0 .689.561 1.25 1.25 1.25h21c.689 0 1.25-.561 1.25-1.25v-27c0-.689-.561-1.25-1.25-1.25Z"
+        />
       </svg>
     </div>
     <div
@@ -145,24 +133,12 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
+        viewBox="0 0 32 32"
         width="1em"
       >
-        <svg
-          class="pf-v6-icon-default"
-          viewBox="0 0 384 512"
-        >
-          <path
-            d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"
-          />
-        </svg>
-        <svg
-          class="pf-v6-icon-rh-ui"
-          viewBox="0 0 32 32"
-        >
-          <path
-            d="M26.5 1H12a1.001 1.001 0 0 0-.708.294L4.294 8.292A1.001 1.001 0 0 0 4 9v20.5c0 .827.673 1.5 1.5 1.5h21c.827 0 1.5-.673 1.5-1.5v-27c0-.827-.673-1.5-1.5-1.5ZM11 4.414V8H7.414L11 4.414ZM26 29H6V10h5.5c.827 0 1.5-.673 1.5-1.5V3h13v26Z"
-          />
-        </svg>
+        <path
+          d="M4.275 8.875a.738.738 0 0 1 .195-.405l7-7a.738.738 0 0 1 .405-.195v7.6h-7.6ZM26.5 1.25H14.125V9.5c0 .896-.729 1.625-1.625 1.625H4.25V29.5c0 .689.561 1.25 1.25 1.25h21c.689 0 1.25-.561 1.25-1.25v-27c0-.689-.561-1.25-1.25-1.25Z"
+        />
       </svg>
     </div>
     <div
@@ -273,11 +249,11 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 384 512"
+        viewBox="0 0 32 32"
         width="1em"
       >
         <path
-          d="M384 121.941V128H256V0h6.059a24 24 0 0 1 16.97 7.029l97.941 97.941a24.002 24.002 0 0 1 7.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"
+          d="M29.5 3h-27C1.673 3 1 3.673 1 4.5v23c0 .827.673 1.5 1.5 1.5h27c.827 0 1.5-.673 1.5-1.5v-23c0-.827-.673-1.5-1.5-1.5ZM21 7c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3Zm7 17.75c0 .689-.561 1.25-1.25 1.25H5.25C4.561 26 4 25.439 4 24.75V18c0-.266.105-.52.293-.707l4.823-4.823a1.279 1.279 0 0 1 1.768 0L18 19.586l3.116-3.116a1.279 1.279 0 0 1 1.768 0l4.823 4.823A.997.997 0 0 1 28 22v2.75Z"
         />
       </svg>
     </div>
@@ -391,11 +367,11 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 384 512"
+        viewBox="0 0 32 32"
         width="1em"
       >
         <path
-          d="M384 121.941V128H256V0h6.059a24 24 0 0 1 16.97 7.029l97.941 97.941a24.002 24.002 0 0 1 7.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"
+          d="M29.5 3h-27C1.673 3 1 3.673 1 4.5v23c0 .827.673 1.5 1.5 1.5h27c.827 0 1.5-.673 1.5-1.5v-23c0-.827-.673-1.5-1.5-1.5ZM21 7c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3Zm7 17.75c0 .689-.561 1.25-1.25 1.25H5.25C4.561 26 4 25.439 4 24.75V18c0-.266.105-.52.293-.707l4.823-4.823a1.279 1.279 0 0 1 1.768 0L18 19.586l3.116-3.116a1.279 1.279 0 0 1 1.768 0l4.823 4.823A.997.997 0 0 1 28 22v2.75Z"
         />
       </svg>
     </div>
@@ -509,24 +485,12 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
         fill="currentColor"
         height="1em"
         role="img"
+        viewBox="0 0 32 32"
         width="1em"
       >
-        <svg
-          class="pf-v6-icon-default"
-          viewBox="0 0 384 512"
-        >
-          <path
-            d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"
-          />
-        </svg>
-        <svg
-          class="pf-v6-icon-rh-ui"
-          viewBox="0 0 32 32"
-        >
-          <path
-            d="M26.5 1H12a1.001 1.001 0 0 0-.708.294L4.294 8.292A1.001 1.001 0 0 0 4 9v20.5c0 .827.673 1.5 1.5 1.5h21c.827 0 1.5-.673 1.5-1.5v-27c0-.827-.673-1.5-1.5-1.5ZM11 4.414V8H7.414L11 4.414ZM26 29H6V10h5.5c.827 0 1.5-.673 1.5-1.5V3h13v26Z"
-          />
-        </svg>
+        <path
+          d="M4.275 8.875a.738.738 0 0 1 .195-.405l7-7a.738.738 0 0 1 .405-.195v7.6h-7.6ZM26.5 1.25H14.125V9.5c0 .896-.729 1.625-1.625 1.625H4.25V29.5c0 .689.561 1.25 1.25 1.25h21c.689 0 1.25-.561 1.25-1.25v-27c0-.689-.561-1.25-1.25-1.25Z"
+        />
       </svg>
     </div>
     <div
@@ -656,24 +620,12 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
         fill="currentColor"
         height="1em"
         role="img"
+        viewBox="0 0 32 32"
         width="1em"
       >
-        <svg
-          class="pf-v6-icon-default"
-          viewBox="0 0 384 512"
-        >
-          <path
-            d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"
-          />
-        </svg>
-        <svg
-          class="pf-v6-icon-rh-ui"
-          viewBox="0 0 32 32"
-        >
-          <path
-            d="M26.5 1H12a1.001 1.001 0 0 0-.708.294L4.294 8.292A1.001 1.001 0 0 0 4 9v20.5c0 .827.673 1.5 1.5 1.5h21c.827 0 1.5-.673 1.5-1.5v-27c0-.827-.673-1.5-1.5-1.5ZM11 4.414V8H7.414L11 4.414ZM26 29H6V10h5.5c.827 0 1.5-.673 1.5-1.5V3h13v26Z"
-          />
-        </svg>
+        <path
+          d="M4.275 8.875a.738.738 0 0 1 .195-.405l7-7a.738.738 0 0 1 .405-.195v7.6h-7.6ZM26.5 1.25H14.125V9.5c0 .896-.729 1.625-1.625 1.625H4.25V29.5c0 .689.561 1.25 1.25 1.25h21c.689 0 1.25-.561 1.25-1.25v-27c0-.689-.561-1.25-1.25-1.25Z"
+        />
       </svg>
     </div>
     <div
@@ -786,24 +738,12 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
+        viewBox="0 0 32 32"
         width="1em"
       >
-        <svg
-          class="pf-v6-icon-default"
-          viewBox="0 0 384 512"
-        >
-          <path
-            d="M224 136V0H24C10.7 0 0 10.7 0 24v464c0 13.3 10.7 24 24 24h336c13.3 0 24-10.7 24-24V160H248c-13.2 0-24-10.8-24-24zm160-14.1v6.1H256V0h6.1c6.4 0 12.5 2.5 17 7l97.9 98c4.5 4.5 7 10.6 7 16.9z"
-          />
-        </svg>
-        <svg
-          class="pf-v6-icon-rh-ui"
-          viewBox="0 0 32 32"
-        >
-          <path
-            d="M26.5 1H12a1.001 1.001 0 0 0-.708.294L4.294 8.292A1.001 1.001 0 0 0 4 9v20.5c0 .827.673 1.5 1.5 1.5h21c.827 0 1.5-.673 1.5-1.5v-27c0-.827-.673-1.5-1.5-1.5ZM11 4.414V8H7.414L11 4.414ZM26 29H6V10h5.5c.827 0 1.5-.673 1.5-1.5V3h13v26Z"
-          />
-        </svg>
+        <path
+          d="M4.275 8.875a.738.738 0 0 1 .195-.405l7-7a.738.738 0 0 1 .405-.195v7.6h-7.6ZM26.5 1.25H14.125V9.5c0 .896-.729 1.625-1.625 1.625H4.25V29.5c0 .689.561 1.25 1.25 1.25h21c.689 0 1.25-.561 1.25-1.25v-27c0-.689-.561-1.25-1.25-1.25Z"
+        />
       </svg>
     </div>
     <div
@@ -914,11 +854,11 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 384 512"
+        viewBox="0 0 32 32"
         width="1em"
       >
         <path
-          d="M384 121.941V128H256V0h6.059a24 24 0 0 1 16.97 7.029l97.941 97.941a24.002 24.002 0 0 1 7.03 16.971zM248 160c-13.2 0-24-10.8-24-24V0H24C10.745 0 0 10.745 0 24v464c0 13.255 10.745 24 24 24h336c13.255 0 24-10.745 24-24V160H248zm-135.455 16c26.51 0 48 21.49 48 48s-21.49 48-48 48-48-21.49-48-48 21.491-48 48-48zm208 240h-256l.485-48.485L104.545 328c4.686-4.686 11.799-4.201 16.485.485L160.545 368 264.06 264.485c4.686-4.686 12.284-4.686 16.971 0L320.545 304v112z"
+          d="M29.5 3h-27C1.673 3 1 3.673 1 4.5v23c0 .827.673 1.5 1.5 1.5h27c.827 0 1.5-.673 1.5-1.5v-23c0-.827-.673-1.5-1.5-1.5ZM21 7c1.654 0 3 1.346 3 3s-1.346 3-3 3-3-1.346-3-3 1.346-3 3-3Zm7 17.75c0 .689-.561 1.25-1.25 1.25H5.25C4.561 26 4 25.439 4 24.75V18c0-.266.105-.52.293-.707l4.823-4.823a1.279 1.279 0 0 1 1.768 0L18 19.586l3.116-3.116a1.279 1.279 0 0 1 1.768 0l4.823 4.823A.997.997 0 0 1 28 22v2.75Z"
         />
       </svg>
     </div>

package/src/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -8,7 +8,7 @@ propComponents:
 ---
 
 import { useEffect, useState } from 'react';
-import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
+import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
 
 Multiple file upload is able to:
 

package/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx

@@ -9,7 +9,7 @@ import {
   HelperTextItem,
   DropEvent
 } from '@patternfly/react-core';
-import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
+import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
 
 interface readFile {
   fileName: string;
@@ -124,7 +124,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
         isHorizontal={isHorizontal}
       >
         <MultipleFileUploadMain
-          titleIcon={<UploadIcon />}
+          titleIcon={<RhUiUploadIcon />}
           titleText="Drag and drop files here"
           titleTextSeparator="or"
           infoText="Accepted file types: JPEG, Doc, PDF, PNG"

package/src/components/Nav/NavExpandable.tsx

@@ -7,6 +7,7 @@ import { PageSidebarContext } from '../Page/PageSidebar';
 import { PickOptional } from '../../helpers/typeUtils';
 import { getOUIAProps, OUIAProps } from '../../helpers';
 import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
+import { IS_INERT } from '../../helpers/inert';
 
 export interface NavExpandableProps
   extends Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, 'title'>, OUIAProps {
@@ -149,7 +150,7 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
                     className={css(styles.navSubnav)}
                     aria-labelledby={navId}
                     hidden={expandedState ? null : true}
-                    {...(!expandedState && { inert: '' })}
+                    {...(!expandedState && { inert: IS_INERT })}
                   >
                     {srText && (
                       <h2 className="pf-v6-screen-reader" id={navId}>

package/src/components/Nav/examples/Nav.md

@@ -10,9 +10,9 @@ import { useState } from 'react';
 import './nav.css';
 import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
-import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
-import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
+import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon';
+import RhUiFolderOpenFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-open-fill-icon';
+import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon';
 import RhUiLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-link-icon';
 
 ## Examples
@@ -81,7 +81,6 @@ A flyout should be a `Menu` component. Press `space` or `right arrow` to open a
 
 ```
 
-
 ## Types
 
 ### NavSelectClickHandler

package/src/components/Nav/examples/NavIcons.tsx

@@ -1,9 +1,9 @@
 import { useState } from 'react';
 import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
-import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
-import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon';
-import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
+import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon';
+import RhUiFolderOpenFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-open-fill-icon';
+import RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon';
 import RhUiLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-link-icon';
 
 export const NavIcons: React.FunctionComponent = () => {
@@ -32,7 +32,7 @@ export const NavIcons: React.FunctionComponent = () => {
           to="#nav-icon-link2"
           itemId={1}
           isActive={activeItem === 1}
-          icon={<FolderIcon />}
+          icon={<RhUiFolderFillIcon />}
         >
           Link 2
         </NavItem>
@@ -42,7 +42,7 @@ export const NavIcons: React.FunctionComponent = () => {
           to="#nav-icon-link3"
           itemId={2}
           isActive={activeItem === 2}
-          icon={<CloudIcon />}
+          icon={<RhUiCloudFillIcon />}
         >
           Link 3
         </NavItem>
@@ -56,7 +56,7 @@ export const NavIcons: React.FunctionComponent = () => {
         >
           Link 4
         </NavItem>
-        <NavExpandable title="Expandable" icon={<FolderOpenIcon />} groupId="nav-icon-expandable">
+        <NavExpandable title="Expandable" icon={<RhUiFolderOpenFillIcon />} groupId="nav-icon-expandable">
           <NavItem
             preventDefault
             id="nav-icon-expandable-link1"

package/src/components/NotificationDrawer/examples/NotificationDrawer.md

@@ -17,8 +17,8 @@ propComponents:
 ---
 
 import { useState } from 'react';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 
 ## Examples
 

package/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx

@@ -22,7 +22,7 @@ import {
   MenuToggleElement
 } from '@patternfly/react-core';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 
 export const NotificationDrawerGroups: React.FunctionComponent = () => {
   const [firstGroupExpanded, setFirstGroupExpanded] = useState(false);
@@ -369,7 +369,7 @@ export const NotificationDrawerGroups: React.FunctionComponent = () => {
               <EmptyState
                 headingLevel="h2"
                 titleText="No alerts found"
-                icon={SearchIcon}
+                icon={RhMicronsSearchIcon}
                 variant={EmptyStateVariant.full}
               >
                 <EmptyStateBody>

package/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx

@@ -16,7 +16,7 @@ import {
   NotificationDrawerListItemHeader,
   EmptyStateActions
 } from '@patternfly/react-core';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 
 export const NotificationDrawerLightweight: React.FunctionComponent = () => {
   const [firstGroupExpanded, setFirstGroupExpanded] = useState(false);
@@ -174,7 +174,7 @@ export const NotificationDrawerLightweight: React.FunctionComponent = () => {
               <EmptyState
                 headingLevel="h2"
                 titleText="No alerts found"
-                icon={SearchIcon}
+                icon={RhMicronsSearchIcon}
                 variant={EmptyStateVariant.full}
               >
                 <EmptyStateBody>