@patternfly/react-core 6.6.2 → 6.7.0-prerelease.1

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
@@ -45,6 +33,8 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = `
       </div>
       <div
         class="pf-v6-c-progress"
+        data-ouia-component-type="PF6/Progress"
+        data-ouia-safe="true"
         id="test-progress-id"
       >
         <div
@@ -145,24 +135,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
@@ -176,6 +154,8 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = `
       </div>
       <div
         class="pf-v6-c-progress"
+        data-ouia-component-type="PF6/Progress"
+        data-ouia-safe="true"
         id="test-progress-id"
       >
         <div
@@ -273,11 +253,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>
@@ -292,6 +272,8 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres
       </div>
       <div
         class="pf-v6-c-progress"
+        data-ouia-component-type="PF6/Progress"
+        data-ouia-safe="true"
         id="test-progress-id"
       >
         <div
@@ -391,11 +373,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>
@@ -410,6 +392,8 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe
       </div>
       <div
         class="pf-v6-c-progress"
+        data-ouia-component-type="PF6/Progress"
+        data-ouia-safe="true"
         id="test-progress-id"
       >
         <div
@@ -509,24 +493,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
@@ -540,6 +512,8 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when
       </div>
       <div
         class="pf-v6-c-progress pf-m-warning"
+        data-ouia-component-type="PF6/Progress"
+        data-ouia-safe="true"
         id="test-progress-id"
       >
         <div
@@ -656,24 +630,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
@@ -687,6 +649,8 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file
       </div>
       <div
         class="pf-v6-c-progress"
+        data-ouia-component-type="PF6/Progress"
+        data-ouia-safe="true"
         id="test-progress-id"
       >
         <div
@@ -786,24 +750,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
@@ -817,6 +769,8 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = `
       </div>
       <div
         class="pf-v6-c-progress"
+        data-ouia-component-type="PF6/Progress"
+        data-ouia-safe="true"
         id="test-progress-id"
       >
         <div
@@ -914,11 +868,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>
@@ -933,6 +887,8 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe
       </div>
       <div
         class="pf-v6-c-progress"
+        data-ouia-component-type="PF6/Progress"
+        data-ouia-safe="true"
         id="test-progress-id"
       >
         <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,8 @@ 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';
+import RhUiEllipsisHorizontalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-horizontal-fill-icon';
 
 export interface NavExpandableProps
   extends Omit<React.DetailedHTMLProps<React.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, 'title'>, OUIAProps {
@@ -16,6 +18,8 @@ export interface NavExpandableProps
   srText?: string;
   /** Boolean to pragmatically expand or collapse section */
   isExpanded?: boolean;
+  /** Adds an expandable icon to indicate the section is expandable */
+  hasExpandableIcon?: boolean;
   /** Anything that can be rendered inside of the expandable list */
   children?: React.ReactNode;
   /** Additional classes added to the container */
@@ -49,7 +53,8 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
     className: '',
     groupId: null as string,
     isActive: false,
-    id: ''
+    id: '',
+    hasExpandableIcon: false
   };
 
   state = {
@@ -99,6 +104,7 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
       id,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       isExpanded,
+      hasExpandableIcon,
       buttonProps,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
       onExpand,
@@ -136,7 +142,12 @@ class NavExpandable extends Component<NavExpandableProps, NavExpandableState> {
                         {...buttonProps}
                       >
                         {icon && <span className={css(styles.navLinkIcon)}>{icon}</span>}
-                        {typeof title !== 'string' ? <span className={css(styles.navLinkText)}>{title}</span> : title}
+                        {hasExpandableIcon && (
+                          <span className={css(styles.navLinkExpandableIcon)}>
+                            <RhUiEllipsisHorizontalFillIcon />
+                          </span>
+                        )}
+                        <span className={css(styles.navLinkText)}>{title}</span>
                         <span className={css(styles.navToggle)}>
                           <span className={css(styles.navToggleIcon)}>
                             <RhMicronsCaretDownIcon />
@@ -149,7 +160,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/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snap

@@ -12,7 +12,11 @@ exports[`NavExpandable should match snapshot (auto-generated) 1`] = `
       aria-expanded="false"
       class="pf-v6-c-nav__link"
     >
-      string
+      <span
+        class="pf-v6-c-nav__link-text"
+      >
+        string
+      </span>
       <span
         class="pf-v6-c-nav__toggle"
       >

package/src/components/Nav/__tests__/NavExpandable.test.tsx

@@ -30,3 +30,24 @@ test('Does not render nav link icon wrapper when icon prop is not provided', ()
   const button = screen.getByRole('button', { name: 'NavExpandable' });
   expect(button.querySelector('.pf-v6-c-nav__link-icon')).not.toBeInTheDocument();
 });
+
+test(`Renders with expandable icon when hasExpandableIcon is true`, () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable" hasExpandableIcon={true}></NavExpandable>);
+
+  const button = screen.getByRole('button', { name: 'NavExpandable' });
+  expect(button.querySelector('.pf-v6-c-nav__link-expandable-icon')).toBeInTheDocument();
+});
+
+test(`Does not render expandable icon when hasExpandableIcon is false`, () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable" hasExpandableIcon={false}></NavExpandable>);
+
+  const button = screen.getByRole('button', { name: 'NavExpandable' });
+  expect(button.querySelector('.pf-v6-c-nav__link-expandable-icon')).not.toBeInTheDocument();
+});
+
+test(`Does not render expandable icon by default`, () => {
+  render(<NavExpandable id="grp-1" title="NavExpandable"></NavExpandable>);
+
+  const button = screen.getByRole('button', { name: 'NavExpandable' });
+  expect(button.querySelector('.pf-v6-c-nav__link-expandable-icon')).not.toBeInTheDocument();
+});

package/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap

@@ -196,7 +196,11 @@ exports[`Nav Expandable Nav List - Trigger toggle 1`] = `
           class="pf-v6-c-nav__link"
           id="grp-1"
         >
-          Section 1
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Section 1
+          </span>
           <span
             class="pf-v6-c-nav__toggle"
           >
@@ -329,7 +333,11 @@ exports[`Nav Expandable Nav List 1`] = `
           class="pf-v6-c-nav__link"
           id="grp-1"
         >
-          Section 1
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Section 1
+          </span>
           <span
             class="pf-v6-c-nav__toggle"
           >
@@ -461,7 +469,11 @@ exports[`Nav Expandable Nav List with aria label 1`] = `
           aria-expanded="false"
           class="pf-v6-c-nav__link"
         >
-          Section 1
+          <span
+            class="pf-v6-c-nav__link-text"
+          >
+            Section 1
+          </span>
           <span
             class="pf-v6-c-nav__toggle"
           >
@@ -1017,7 +1029,6 @@ exports[`Nav Nav List with flyout 1`] = `
       </li>
     </ul>
     <div
-      class=""
       data-popper-escaped="true"
       data-popper-placement="right-start"
       data-popper-reference-hidden="true"

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

@@ -9,11 +9,12 @@ ouia: true
 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 RhUiCubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon';
+import RhUiFolderIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-icon';
+import RhUiFolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-open-icon';
+import RhUiCloudIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-icon';
 import RhUiLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-link-icon';
+import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
 
 ## Examples
 
@@ -81,6 +82,17 @@ A flyout should be a `Menu` component. Press `space` or `right arrow` to open a
 
 ```
 
+### Docked
+
+The docked variant of `Navigation` displays only icons passed to child `NavItems` or `NavExpandable`. Text becomes visible when `isDockTextExpanded` or `isDockExpandableExpanded` are applied to an outer page or compass dock.
+
+`NavExpandable` items should include the `hasExpandableIcon` prop to indicate their expandable nature while in the collapsed state of the docked nav as the caret will not be rendered.
+
+See the [docked nav demo](/components/navigation/react-demos#docked-nav) for a fully functional example.
+
+```ts file="./NavDocked.tsx"
+
+```
 
 ## Types
 

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

@@ -0,0 +1,98 @@
+import { useState } from 'react';
+import { Nav, NavItem, NavList, NavExpandable } from '@patternfly/react-core';
+import RhUiCubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon';
+import RhUiFolderIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-icon';
+import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
+import RhUiCloudIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-icon';
+
+export const NavDocked: React.FunctionComponent = () => {
+  const [activeItem, setActiveItem] = useState(0);
+  const [isGroupExpanded, setIsGroupExpanded] = useState(false);
+
+  const onSelect = (_event: React.FormEvent<HTMLInputElement>, result: { itemId: number | string }) => {
+    setActiveItem(result.itemId as number);
+  };
+
+  const onToggle = (
+    _event: React.MouseEvent<HTMLButtonElement>,
+    result: { groupId: number | string; isExpanded: boolean }
+  ) => {
+    setIsGroupExpanded(result.isExpanded);
+  };
+
+  return (
+    <Nav variant="docked" onSelect={onSelect} onToggle={onToggle} aria-label="Default global" ouiaId="DefaultNav">
+      <NavList>
+        <NavItem
+          icon={<RhUiCubesIcon />}
+          preventDefault
+          id="nav-default-link1"
+          to="#nav-default-link1"
+          itemId={0}
+          isActive={activeItem === 0}
+        >
+          Default Link 1
+        </NavItem>
+        <NavItem
+          icon={<RhUiCloudIcon />}
+          preventDefault
+          id="nav-default-link2"
+          to="#nav-default-link2"
+          itemId={1}
+          isActive={activeItem === 1}
+        >
+          Default Link 2
+        </NavItem>
+        <NavItem
+          icon={<RhUiCodeIcon />}
+          preventDefault
+          id="nav-default-link3"
+          to="#nav-default-link3"
+          itemId={2}
+          isActive={activeItem === 2}
+        >
+          Default Link 3
+        </NavItem>
+        <NavExpandable
+          title="Expandable Group 1"
+          groupId="nav-expandable-group-1"
+          icon={<RhUiFolderIcon />}
+          isExpanded={isGroupExpanded}
+          hasExpandableIcon
+          buttonProps={{ 'aria-label': 'Expandable Group 1' }}
+        >
+          <NavItem
+            preventDefault
+            id="expandable-1"
+            to="#expandable-1"
+            groupId="nav-expandable-group-1"
+            itemId={3}
+            isActive={activeItem === 3}
+          >
+            Subnav 1 Link 1
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="expandable-2"
+            to="#expandable-2"
+            groupId="nav-expandable-group-1"
+            itemId={4}
+            isActive={activeItem === 4}
+          >
+            Subnav 1 Link 2
+          </NavItem>
+          <NavItem
+            preventDefault
+            id="expandable-3"
+            to="#expandable-3"
+            groupId="nav-expandable-group-1"
+            itemId={5}
+            isActive={activeItem === 5}
+          >
+            Subnav 1 Link 3
+          </NavItem>
+        </NavExpandable>
+      </NavList>
+    </Nav>
+  );
+};

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 RhUiCubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon';
+import RhUiFolderIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-icon';
+import RhUiFolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-open-icon';
+import RhUiCloudIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-icon';
 import RhUiLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-link-icon';
 
 export const NavIcons: React.FunctionComponent = () => {
@@ -22,7 +22,7 @@ export const NavIcons: React.FunctionComponent = () => {
           to="#nav-icon-link1"
           itemId={0}
           isActive={activeItem === 0}
-          icon={<CubeIcon />}
+          icon={<RhUiCubesIcon />}
         >
           Link 1
         </NavItem>
@@ -32,7 +32,7 @@ export const NavIcons: React.FunctionComponent = () => {
           to="#nav-icon-link2"
           itemId={1}
           isActive={activeItem === 1}
-          icon={<FolderIcon />}
+          icon={<RhUiFolderIcon />}
         >
           Link 2
         </NavItem>
@@ -42,7 +42,7 @@ export const NavIcons: React.FunctionComponent = () => {
           to="#nav-icon-link3"
           itemId={2}
           isActive={activeItem === 2}
-          icon={<CloudIcon />}
+          icon={<RhUiCloudIcon />}
         >
           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={<RhUiFolderOpenIcon />} 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>