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

package/src/components/TreeView/TreeViewListItem.tsx

@@ -1,10 +1,10 @@
 import { memo, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
-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 { TreeViewDataItem } from './TreeView';
 import { Badge } from '../Badge';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useSSRSafeId } from '../../helpers';
 import { useHasAnimations } from '../../helpers';
 
 export interface TreeViewCheckProps extends Omit<Partial<React.InputHTMLAttributes<HTMLInputElement>>, 'checked'> {
@@ -46,6 +46,10 @@ export interface TreeViewListItemProps {
    * children.
    */
   isSelectable?: boolean;
+  /** Flag indicating if the tree view item is disabled. */
+  isDisabled?: boolean;
+  /** Flag indicating if the tree view item toggle is disabled. */
+  isToggleDisabled?: boolean;
   /** Data structure of tree view item. */
   itemData?: TreeViewDataItem;
   /** Internal content of a tree view item. */
@@ -81,6 +85,8 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   title,
   id,
   isExpanded,
+  isDisabled = false,
+  isToggleDisabled = false,
   defaultExpanded = false,
   children = null,
   onSelect,
@@ -107,6 +113,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   useMemo
 }: TreeViewListItemProps) => {
+  const randomId = useSSRSafeId(isSelectable ? 'selectable-id' : 'checkbox-id');
   const hasAnimations = useHasAnimations(hasAnimationsProp);
   const [internalIsExpanded, setIsExpanded] = useState(defaultExpanded);
   useEffect(() => {
@@ -125,12 +132,13 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
   }
 
   const ToggleComponent = hasCheckbox || isSelectable ? 'button' : 'span';
+  const hasDisabledToggleClass = isToggleDisabled || (Component === 'button' && isDisabled);
 
   const renderToggle = (randomId: string) => (
     <ToggleComponent
-      className={css(styles.treeViewNodeToggle)}
+      className={css(styles.treeViewNodeToggle, hasDisabledToggleClass && styles.modifiers.disabled)}
       onClick={(evt: React.MouseEvent) => {
-        if (isSelectable || hasCheckbox) {
+        if (!isToggleDisabled && (isSelectable || hasCheckbox)) {
           if (internalIsExpanded) {
             onCollapse && onCollapse(evt, itemData, parentItem);
           } else {
@@ -138,16 +146,16 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
           }
           setIsExpanded(!internalIsExpanded);
         }
-        if (isSelectable) {
+        if (!isToggleDisabled && isSelectable) {
           evt.stopPropagation();
         }
       }}
       {...((hasCheckbox || isSelectable) && { 'aria-labelledby': `label-${randomId}` })}
-      {...(ToggleComponent === 'button' && { type: 'button' })}
+      {...(ToggleComponent === 'button' && { disabled: isToggleDisabled, type: 'button' })}
       tabIndex={-1}
     >
       <span className={css(styles.treeViewNodeToggleIcon)}>
-        <AngleRightIcon />
+        <RhMicronsCaretDownIcon />
       </span>
     </ToggleComponent>
   );
@@ -162,6 +170,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
         ref={(elem) => {
           elem && (elem.indeterminate = checkProps.checked === null);
         }}
+        disabled={isDisabled || checkProps.disabled}
         {...checkProps}
         checked={isCheckboxChecked}
         id={randomId}
@@ -180,7 +189,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       <>
         {isCompact && title && <span className={css(styles.treeViewNodeTitle)}>{title}</span>}
         {isSelectable ? (
-          <button tabIndex={-1} className={css(styles.treeViewNodeText)} type="button">
+          <button tabIndex={-1} className={css(styles.treeViewNodeText)} type="button" disabled={isDisabled}>
             {name}
           </button>
         ) : (
@@ -220,6 +229,9 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       })
   );
 
+  const isFullyDisabled =
+    (Component === 'button' && isDisabled) || (Component !== 'button' && isDisabled && isToggleDisabled);
+
   return (
     <li
       id={id}
@@ -229,39 +241,40 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
       tabIndex={-1}
       {...(hasCheckbox && { 'aria-checked': isCheckboxChecked })}
       {...(!hasCheckbox && { 'aria-selected': isSelected })}
+      {...(isFullyDisabled && { 'aria-disabled': true })}
     >
       <div className={css(styles.treeViewContent)}>
-        <GenerateId prefix={isSelectable ? 'selectable-id' : 'checkbox-id'}>
-          {(randomId) => (
-            <Component
-              className={css(styles.treeViewNode, isSelected && styles.modifiers.current)}
-              onClick={(evt: React.MouseEvent) => {
-                if (!hasCheckbox) {
-                  onSelect && onSelect(evt, itemData, parentItem);
-                  if (!isSelectable && children && evt.isDefaultPrevented() !== true) {
-                    if (internalIsExpanded) {
-                      onCollapse && onCollapse(evt, itemData, parentItem);
-                    } else {
-                      onExpand && onExpand(evt, itemData, parentItem);
-                    }
-                    setIsExpanded(!internalIsExpanded);
-                  }
-                }
-              }}
-              {...(hasCheckbox && { htmlFor: randomId })}
-              {...((hasCheckbox || (isSelectable && children)) && { id: `label-${randomId}` })}
-              {...(Component === 'button' && { type: 'button' })}
-            >
-              <span className={css(styles.treeViewNodeContainer)}>
-                {children && renderToggle(randomId)}
-                {hasCheckbox && renderCheck(randomId)}
-                {icon && iconRendered}
-                {renderNodeContent()}
-                {badgeRendered}
-              </span>
-            </Component>
+        <Component
+          className={css(
+            styles.treeViewNode,
+            isSelected && styles.modifiers.current,
+            isDisabled && styles.modifiers.disabled
           )}
-        </GenerateId>
+          onClick={(evt: React.MouseEvent) => {
+            if (!hasCheckbox) {
+              !isDisabled && onSelect && onSelect(evt, itemData, parentItem);
+              if (!isDisabled && !isSelectable && children && evt.isDefaultPrevented() !== true) {
+                if (internalIsExpanded) {
+                  onCollapse && onCollapse(evt, itemData, parentItem);
+                } else {
+                  onExpand && onExpand(evt, itemData, parentItem);
+                }
+                setIsExpanded(!internalIsExpanded);
+              }
+            }
+          }}
+          {...(hasCheckbox && { htmlFor: randomId })}
+          {...((hasCheckbox || (isSelectable && children)) && { id: `label-${randomId}` })}
+          {...(Component === 'button' && { type: 'button', disabled: isDisabled })}
+        >
+          <span className={css(styles.treeViewNodeContainer)}>
+            {children && renderToggle(randomId)}
+            {hasCheckbox && renderCheck(randomId)}
+            {icon && iconRendered}
+            {renderNodeContent()}
+            {badgeRendered}
+          </span>
+        </Component>
         {action && <div className={css(styles.treeViewAction)}>{action}</div>}
       </div>
       {(internalIsExpanded || hasAnimations) && clonedChildren}
@@ -297,6 +310,8 @@ export const TreeViewListItem = memo(TreeViewListItemBase, (prevProps, nextProps
     prevProps.id !== nextProps.id ||
     prevProps.isExpanded !== nextProps.isExpanded ||
     prevProps.defaultExpanded !== nextProps.defaultExpanded ||
+    prevProps.isDisabled !== nextProps.isDisabled ||
+    prevProps.isToggleDisabled !== nextProps.isToggleDisabled ||
     prevProps.onSelect !== nextProps.onSelect ||
     prevProps.onCheck !== nextProps.onCheck ||
     prevProps.onExpand !== nextProps.onExpand ||

package/src/components/TreeView/__tests__/TreeViewListItem.test.tsx

@@ -359,8 +359,8 @@ test(`Renders ${styles.treeViewNode} element with for and id attributes when has
 
   const treeViewNode = screen.getByRole('treeitem').querySelector(`.${styles.treeViewNode}`);
 
-  expect(treeViewNode).toHaveAttribute('for', expect.stringMatching(/checkbox-id\d+/));
-  expect(treeViewNode).toHaveAttribute('id', expect.stringMatching(/label-checkbox-id\d+/));
+  expect(treeViewNode).toHaveAttribute('for', expect.stringMatching(/checkbox-id/));
+  expect(treeViewNode).toHaveAttribute('id', expect.stringMatching(/label-checkbox-id/));
 });
 
 test(`Renders ${styles.treeViewNode} element with id attribute when isSelectable and children are passed`, () => {
@@ -372,7 +372,7 @@ test(`Renders ${styles.treeViewNode} element with id attribute when isSelectable
 
   const treeViewNode = screen.getByRole('treeitem').querySelector(`.${styles.treeViewNode}`);
 
-  expect(treeViewNode).toHaveAttribute('id', expect.stringMatching(/selectable-id\d+/));
+  expect(treeViewNode).toHaveAttribute('id', expect.stringMatching(/selectable-id/));
 });
 
 test(`Does not render ${styles.treeViewNode} element with additional classes by default`, () => {
@@ -415,6 +415,249 @@ test(`Does not render ${styles.treeViewNode} element with ${styles.modifiers.cur
   expect(treeViewNode).not.toHaveClass(styles.modifiers.current);
 });
 
+// Assisted by Cursor AI
+describe('isDisabled prop', () => {
+  const user = userEvent.setup();
+  const onSelectMock = jest.fn();
+  const onExpandMock = jest.fn();
+  const onCollapseMock = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test(`Renders button with disabled attribute and ${styles.modifiers.disabled} class when isDisabled is true`, () => {
+    render(<TreeViewListItem isDisabled {...requiredProps} />);
+
+    const button = screen.getByRole('button', { name: requiredProps.name });
+    expect(button).toBeDisabled();
+    expect(button).toHaveClass(styles.modifiers.disabled);
+  });
+
+  test('Does not render button with disabled attribute when isDisabled is false', () => {
+    render(<TreeViewListItem isDisabled={false} {...requiredProps} />);
+
+    expect(screen.getByRole('button', { name: requiredProps.name })).not.toBeDisabled();
+  });
+
+  test('Does not call onSelect when isDisabled is true', async () => {
+    render(<TreeViewListItem isDisabled onSelect={onSelectMock} {...requiredProps} />);
+
+    await user.click(screen.getByRole('button', { name: requiredProps.name }));
+
+    expect(onSelectMock).not.toHaveBeenCalled();
+  });
+
+  test('Does not call onExpand when isDisabled is true and item is collapsed', async () => {
+    render(
+      <TreeViewListItem isDisabled onExpand={onExpandMock} {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    await user.click(screen.getByRole('button', { name: requiredProps.name }));
+
+    expect(onExpandMock).not.toHaveBeenCalled();
+  });
+
+  test('Does not call onCollapse when isDisabled is true and item is expanded', async () => {
+    render(
+      <TreeViewListItem isDisabled isExpanded onCollapse={onCollapseMock} {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    await user.click(screen.getByRole('button', { name: requiredProps.name }));
+
+    expect(onCollapseMock).not.toHaveBeenCalled();
+  });
+
+  test(`Renders toggle with ${styles.modifiers.disabled} class when isDisabled is true for default TreeViewListItem`, () => {
+    render(
+      <TreeViewListItem isDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling;
+    expect(toggle).toHaveClass(styles.modifiers.disabled);
+  });
+
+  test('Renders treeitem with aria-disabled when isDisabled is true for default TreeViewListItem', () => {
+    render(<TreeViewListItem isDisabled {...requiredProps} />);
+
+    expect(screen.getByRole('treeitem')).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  test('Renders treeitem with aria-disabled when isDisabled and isToggleDisabled are true and isSelectable is true', () => {
+    render(
+      <TreeViewListItem isSelectable isDisabled isToggleDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    expect(screen.getByRole('treeitem')).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  test('Renders treeitem with aria-disabled when isDisabled and isToggleDisabled are true and hasCheckbox is true', () => {
+    render(
+      <TreeViewListItem hasCheckbox isDisabled isToggleDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    expect(screen.getByRole('treeitem')).toHaveAttribute('aria-disabled', 'true');
+  });
+
+  test('Does not render treeitem with aria-disabled when isDisabled is true, isToggleDisabled is false, and isSelectable is true', () => {
+    render(
+      <TreeViewListItem isSelectable isDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    expect(screen.getByRole('treeitem')).not.toHaveAttribute('aria-disabled');
+  });
+
+  test('Does not render treeitem with aria-disabled when isDisabled is false', () => {
+    render(<TreeViewListItem isDisabled={false} {...requiredProps} />);
+
+    expect(screen.getByRole('treeitem')).not.toHaveAttribute('aria-disabled');
+  });
+});
+
+// Assisted by Cursor AI
+describe('isToggleDisabled prop', () => {
+  const user = userEvent.setup();
+  const onExpandMock = jest.fn();
+  const onCollapseMock = jest.fn();
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test(`Renders toggle button with disabled attribute and ${styles.modifiers.disabled} class when isToggleDisabled is true and hasCheckbox is passed`, () => {
+    render(
+      <TreeViewListItem hasCheckbox isToggleDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling?.previousElementSibling;
+    expect(toggle).toBeDisabled();
+    expect(toggle).toHaveClass(styles.modifiers.disabled);
+  });
+
+  test(`Renders toggle button with disabled attribute and ${styles.modifiers.disabled} class when isToggleDisabled is true and isSelectable is passed`, () => {
+    render(
+      <TreeViewListItem isSelectable isToggleDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling;
+    expect(toggle).toBeDisabled();
+    expect(toggle).toHaveClass(styles.modifiers.disabled);
+  });
+
+  test('Does not render toggle span with disabled attribute when isToggleDisabled is true (toggle is span by default)', () => {
+    render(
+      <TreeViewListItem isToggleDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling;
+    expect(toggle?.tagName).toBe('SPAN');
+    expect(toggle).not.toHaveAttribute('disabled');
+  });
+
+  test('Does not call onExpand when isToggleDisabled is true and hasCheckbox is passed', async () => {
+    render(
+      <TreeViewListItem hasCheckbox isToggleDisabled onExpand={onExpandMock} {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling?.previousElementSibling;
+    await user.click(toggle as Element);
+
+    expect(onExpandMock).not.toHaveBeenCalled();
+  });
+
+  test('Does not call onCollapse when isToggleDisabled is true and hasCheckbox is passed', async () => {
+    render(
+      <TreeViewListItem hasCheckbox isToggleDisabled isExpanded onCollapse={onCollapseMock} {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling?.previousElementSibling;
+    await user.click(toggle as Element);
+
+    expect(onCollapseMock).not.toHaveBeenCalled();
+  });
+
+  test('Does not call onExpand when isToggleDisabled is true and isSelectable is passed', async () => {
+    render(
+      <TreeViewListItem isSelectable isToggleDisabled onExpand={onExpandMock} {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling;
+    await user.click(toggle as Element);
+
+    expect(onExpandMock).not.toHaveBeenCalled();
+  });
+
+  test('Does not call onCollapse when isToggleDisabled is true and isSelectable is passed', async () => {
+    render(
+      <TreeViewListItem isSelectable isToggleDisabled isExpanded onCollapse={onCollapseMock} {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling;
+    await user.click(toggle as Element);
+
+    expect(onCollapseMock).not.toHaveBeenCalled();
+  });
+
+  test(`Renders toggle span with ${styles.modifiers.disabled} class when isDisabled is true for default TreeViewListItem`, () => {
+    render(
+      <TreeViewListItem isDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling;
+    expect(toggle).toHaveClass(styles.modifiers.disabled);
+  });
+
+  test(`Does not render toggle with ${styles.modifiers.disabled} class when isDisabled is true and hasCheckbox is true`, () => {
+    render(
+      <TreeViewListItem hasCheckbox isDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling?.previousElementSibling;
+    expect(toggle).not.toHaveClass(styles.modifiers.disabled);
+  });
+
+  test(`Does not render toggle with ${styles.modifiers.disabled} class when isDisabled is true and isSelectable is true`, () => {
+    render(
+      <TreeViewListItem isSelectable isDisabled {...requiredProps}>
+        Content
+      </TreeViewListItem>
+    );
+
+    const toggle = screen.getByText(requiredProps.name).previousElementSibling;
+    expect(toggle).not.toHaveClass(styles.modifiers.disabled);
+  });
+});
+
 describe('Callback props', () => {
   const user = userEvent.setup();
   const compareItemsMock = jest.fn();

package/src/components/TreeView/__tests__/__snapshots__/TreeViewListItem.test.tsx.snap

@@ -32,11 +32,11 @@ exports[`Matches snapshot with children 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
-                viewBox="0 0 256 512"
+                viewBox="0 0 20 20"
                 width="1em"
               >
                 <path
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                  d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
                 />
               </svg>
             </span>

package/src/components/TreeView/__tests__/__snapshots__/TreeViewSearch.test.tsx.snap

@@ -23,12 +23,24 @@ exports[`Matches snapshot 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
-            viewBox="0 0 512 512"
             width="1em"
           >
-            <path
-              d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-            />
+            <svg
+              class="pf-v6-icon-default"
+              viewBox="0 0 512 512"
+            >
+              <path
+                d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
+              />
+            </svg>
+            <svg
+              class="pf-v6-icon-rh-ui"
+              viewBox="0 0 32 32"
+            >
+              <path
+                d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
+              />
+            </svg>
           </svg>
         </div>
       </div>

package/src/components/Wizard/Wizard.tsx

@@ -59,6 +59,10 @@ export interface WizardProps extends React.HTMLProps<HTMLDivElement> {
    * are called.
    */
   shouldFocusContent?: boolean;
+  /** Adds plain styling to the wizard. */
+  isPlain?: boolean;
+  /** @beta Prevents the wizard from automatically applying plain styling when glass theme is enabled. */
+  isNoPlainOnGlass?: boolean;
 }
 
 export const Wizard = ({
@@ -77,6 +81,8 @@ export const Wizard = ({
   onSave,
   onClose,
   shouldFocusContent = true,
+  isPlain = false,
+  isNoPlainOnGlass = false,
   ...wrapperProps
 }: WizardProps) => {
   const [activeStepIndex, setActiveStepIndex] = useState(startIndex);
@@ -181,7 +187,12 @@ export const Wizard = ({
       mainWrapperRef={wrapperRef}
     >
       <div
-        className={css(styles.wizard, className)}
+        className={css(
+          styles.wizard,
+          isPlain && styles.modifiers.plain,
+          isNoPlainOnGlass && styles.modifiers.noPlainOnGlass,
+          className
+        )}
         style={{
           ...(height ? { [wizardHeightToken.name]: typeof height === 'number' ? `${height}px` : height } : {}),
           ...(width ? { width } : {})

package/src/components/Wizard/WizardHeader.tsx

@@ -1,7 +1,7 @@
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
 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 WizardHeaderProps extends React.HTMLProps<HTMLDivElement> {
   /** Callback function called when the X (Close) button is clicked */
@@ -39,7 +39,7 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   <div className={css(styles.wizardHeader, className)} {...props}>
     {!isCloseHidden && (
       <div className={css(styles.wizardClose)}>
-        <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose} icon={<TimesIcon />} />
+        <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose} icon={<RhMicronsCloseIcon />} />
       </div>
     )}
     <div className={css(styles.wizardTitle)}>

package/src/components/Wizard/WizardNavInternal.tsx

@@ -48,7 +48,7 @@ export const WizardNavInternal = ({
           let firstSubStepIndex: number;
           let hasActiveChild = false;
 
-          const subNavItems = step.subStepIds?.map((subStepId, subStepIndex) => {
+          const subNavItems = step.subStepIds?.map((subStepId, _subStepIndex) => {
             const subStep = steps.find((step) => step.id === subStepId);
             const hasVisitedNextStep = steps.some((step) => step.index > subStep.index && step.isVisited);
             const isSubStepDisabled =
@@ -66,8 +66,8 @@ export const WizardNavInternal = ({
               return;
             }
 
-            // Store the first sub-step index so that when its parent is clicked, the first sub-step is focused
-            if (subStepIndex === 0) {
+            // Store the first visible sub-step index so that when its parent is clicked, the first sub-step is focused
+            if (firstSubStepIndex === undefined) {
               firstSubStepIndex = subStep.index;
             }
 

package/src/components/Wizard/WizardNavItem.tsx

@@ -1,17 +1,16 @@
 import { useEffect, useState } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
 
 import { OUIAProps, useOUIAProps } from '../../helpers';
 import { WizardNavItemStatus } from './types';
 
 export interface WizardNavItemProps
-  extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick' | 'id' | 'content' | 'type'>,
-    OUIAProps {
+  extends Omit<React.HTMLProps<HTMLLIElement>, 'onClick' | 'id' | 'content' | 'type'>, OUIAProps {
   /** Additional classes spread to the wizard nav item */
   className?: string;
   /** Can nest a WizardNav component for substeps */
@@ -110,9 +109,9 @@ export const WizardNavItem = ({
           <>
             <span className="pf-v6-screen-reader">, {status}</span>
             <span className={css(styles.wizardNavLinkStatusIcon)}>
-              {status === WizardNavItemStatus.Error && <ExclamationCircleIcon />}
-              {status === WizardNavItemStatus.Success && <CheckCircleIcon />}
-              {status === WizardNavItemStatus.Warning && <ExclamationTriangleIcon />}
+              {status === WizardNavItemStatus.Error && <RhUiErrorFillIcon />}
+              {status === WizardNavItemStatus.Success && <RhUiCheckCircleFillIcon />}
+              {status === WizardNavItemStatus.Warning && <RhUiWarningFillIcon />}
             </span>
           </>
         )}
@@ -122,7 +121,7 @@ export const WizardNavItem = ({
               <span className="pf-v6-c-wizard__nav-link-text">{content}</span>
               <span className={css(styles.wizardNavLinkToggle)}>
                 <span className={css(styles.wizardNavLinkToggleIcon)}>
-                  <AngleRightIcon aria-label={`${isCurrent ? 'Collapse' : 'Expand'} step icon`} />
+                  <RhMicronsCaretDownIcon aria-label={`${isCurrent ? 'Collapse' : 'Expand'} step icon`} />
                 </span>
               </span>
             </>

package/src/components/Wizard/WizardToggle.tsx

@@ -1,10 +1,10 @@
 import { Fragment, useCallback, useEffect } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 
 import { KeyTypes } from '../../helpers/constants';
 import { WizardStepType, isWizardSubStep } from './types';
@@ -100,19 +100,23 @@ export const WizardToggle = ({
           >
             {isActiveStepStatus === 'error' && (
               <span className={css(styles.wizardToggleStatusIcon)}>
-                <ExclamationCircleIcon />
+                <RhUiErrorFillIcon />
               </span>
             )}
             {isActiveStepStatus === 'success' && (
               <span className={css(styles.wizardToggleStatusIcon)}>
-                <CheckCircleIcon />
+                <RhUiCheckCircleFillIcon />
               </span>
             )}
             {isActiveStepStatus !== 'success' && isActiveStepStatus !== 'error' && (
               <span className={css(styles.wizardToggleNum)}>{wizardToggleIndex}</span>
             )}{' '}
             {parentStep?.name || activeStep?.name}
-            {isActiveSubStep && <AngleRightIcon className={css(styles.wizardToggleSeparator)} />}
+            {isActiveSubStep && (
+              <span className={css(styles.wizardToggleSeparator)}>
+                <RhMicronsCaretRightIcon />
+              </span>
+            )}
           </span>
           {isActiveSubStep && <span className={css(styles.wizardToggleListItem)}>{activeStep?.name}</span>}
         </span>