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

package/src/components/Tabs/Tabs.tsx

@@ -5,7 +5,7 @@ import { PickOptional } from '../../helpers/typeUtils';
 import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
 import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
-import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon';
+import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
 import {
   isElementInView,
   formatBreakpointMods,
@@ -140,6 +140,25 @@ const variantStyle = {
   secondary: styles.modifiers.secondary
 };
 
+const getHashFromHref = (href?: string) => {
+  const hashIndex = href?.indexOf('#') ?? -1;
+
+  return hashIndex >= 0 ? href.slice(hashIndex) : undefined;
+};
+
+const getTabHashActiveKey = ({ children, component, isNav }: Pick<TabsProps, 'children' | 'component' | 'isNav'>) => {
+  if (!canUseDOM || !(component === TabsComponent.nav || isNav) || !window.location.hash) {
+    return undefined;
+  }
+
+  return Children.toArray(children)
+    .filter((child): child is TabElement => isValidElement(child))
+    .filter(({ props }) => !props.isHidden)
+    .find(
+      ({ props }) => !props.isDisabled && !props.isAriaDisabled && getHashFromHref(props.href) === window.location.hash
+    )?.props.eventKey;
+};
+
 interface TabsState {
   /** Used to signal if the scroll buttons should be used  */
   enableScrollButtons: boolean;
@@ -152,7 +171,8 @@ interface TabsState {
   disableBackScrollButton: boolean;
   disableForwardScrollButton: boolean;
   shownKeys: (string | number)[];
-  uncontrolledActiveKey: number | string;
+  uncontrolledActiveKey: number | string | undefined;
+  initialActiveKey: number | string | undefined;
   uncontrolledIsExpandedLocal: boolean;
   overflowingTabCount: number;
   isInitializingAccent: boolean;
@@ -167,14 +187,17 @@ class Tabs extends Component<TabsProps, TabsState> {
   private direction = 'ltr';
   constructor(props: TabsProps) {
     super(props);
+    const hashActiveKey = getTabHashActiveKey(props);
+
     this.state = {
       enableScrollButtons: false,
       showScrollButtons: false,
       renderScrollButtons: false,
       disableBackScrollButton: true,
       disableForwardScrollButton: true,
-      shownKeys: this.props.defaultActiveKey !== undefined ? [this.props.defaultActiveKey] : [this.props.activeKey], // only for mountOnEnter case
-      uncontrolledActiveKey: this.props.defaultActiveKey,
+      shownKeys: [hashActiveKey ?? this.props.defaultActiveKey ?? this.props.activeKey],
+      uncontrolledActiveKey: hashActiveKey ?? this.props.defaultActiveKey,
+      initialActiveKey: this.props.defaultActiveKey === undefined ? hashActiveKey : undefined,
       uncontrolledIsExpandedLocal: this.props.defaultIsExpanded,
       overflowingTabCount: 0,
       isInitializingAccent: true,
@@ -221,14 +244,26 @@ class Tabs extends Component<TabsProps, TabsState> {
     eventKey: number | string,
     tabContentRef: React.RefObject<any>
   ) {
-    const { shownKeys } = this.state;
-    const { onSelect, defaultActiveKey } = this.props;
+    const { shownKeys, initialActiveKey } = this.state;
+    const { onSelect, defaultActiveKey, component, isNav } = this.props;
+
+    if (event.currentTarget instanceof HTMLAnchorElement && event.currentTarget.hasAttribute('href')) {
+      event.preventDefault();
+
+      if (canUseDOM && (component === TabsComponent.nav || isNav)) {
+        window.history.pushState(null, '', event.currentTarget.href);
+      }
+    }
+
     // if defaultActiveKey Tabs are uncontrolled, set new active key internally
     if (defaultActiveKey !== undefined) {
       this.setState({
         uncontrolledActiveKey: eventKey
       });
     } else {
+      if (initialActiveKey !== undefined) {
+        this.setState({ initialActiveKey: undefined });
+      }
       onSelect(event, eventKey);
     }
 
@@ -401,8 +436,9 @@ class Tabs extends Component<TabsProps, TabsState> {
   componentDidUpdate(prevProps: TabsProps, prevState: TabsState) {
     this.direction = getLanguageDirection(this.tabList.current);
     const { activeKey, mountOnEnter, isOverflowHorizontal, children, defaultActiveKey } = this.props;
-    const { shownKeys, overflowingTabCount, enableScrollButtons, uncontrolledActiveKey } = this.state;
+    const { shownKeys, overflowingTabCount, enableScrollButtons, uncontrolledActiveKey, initialActiveKey } = this.state;
     const isOnCloseUpdate = !!prevProps.onClose !== !!this.props.onClose;
+
     if (
       (defaultActiveKey !== undefined && prevState.uncontrolledActiveKey !== uncontrolledActiveKey) ||
       (defaultActiveKey === undefined && prevProps.activeKey !== activeKey) ||
@@ -417,6 +453,10 @@ class Tabs extends Component<TabsProps, TabsState> {
       });
     }
 
+    if (defaultActiveKey === undefined && prevProps.activeKey !== activeKey && initialActiveKey !== undefined) {
+      this.setState({ initialActiveKey: undefined });
+    }
+
     if (
       prevProps.children &&
       children &&
@@ -517,6 +557,7 @@ class Tabs extends Component<TabsProps, TabsState> {
       disableForwardScrollButton,
       shownKeys,
       uncontrolledActiveKey,
+      initialActiveKey,
       uncontrolledIsExpandedLocal,
       overflowingTabCount,
       isInitializingAccent,
@@ -533,7 +574,7 @@ class Tabs extends Component<TabsProps, TabsState> {
 
     const defaultComponent = isNav && !component ? 'nav' : 'div';
     const Component: any = component !== undefined ? component : defaultComponent;
-    const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : activeKey;
+    const localActiveKey = defaultActiveKey !== undefined ? uncontrolledActiveKey : (initialActiveKey ?? activeKey);
 
     const isExpandedLocal = defaultIsExpanded !== undefined ? uncontrolledIsExpandedLocal : isExpanded;
     /*  Uncontrolled expandable tabs */
@@ -662,7 +703,7 @@ class Tabs extends Component<TabsProps, TabsState> {
                       variant="plain"
                       aria-label={addButtonAriaLabel || 'Add tab'}
                       onClick={onAdd}
-                      icon={<PlusIcon />}
+                      icon={<RhUiAddIcon />}
                       isDisabled={isAddButtonDisabled}
                     />
                   </span>

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

@@ -7,7 +7,7 @@ import { TabTitleText } from '../TabTitleText';
 import { TabTitleIcon } from '../TabTitleIcon';
 import { TabContent } from '../TabContent';
 import { TabContentBody } from '../TabContentBody';
-import { createRef } from 'react';
+import { createRef, useState } from 'react';
 
 jest.mock('../../../helpers/GenerateId/GenerateId');
 
@@ -119,6 +119,222 @@ test(`Does not render with class ${styles.modifiers.initializingAccent} when com
   jest.useRealTimers();
 });
 
+describe('hash-based nav selection', () => {
+  beforeEach(() => {
+    window.location.hash = '#/items/2';
+  });
+
+  afterEach(() => {
+    window.location.hash = '';
+  });
+
+  test('should select the nav tab that matches the current URL hash on initial render', () => {
+    render(
+      <Tabs activeKey={0} onSelect={() => undefined} component="nav">
+        <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>} href="#/items/1">
+          Tab item 1
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Tab item 2</TabTitleText>} href="#/items/2">
+          Tab item 2
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Tab item 3</TabTitleText>} href="#/items/3">
+          Tab item 3
+        </Tab>
+      </Tabs>
+    );
+
+    expect(screen.getByRole('tab', { name: 'Tab item 2' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tab', { name: 'Tab item 1' })).toHaveAttribute('aria-selected', 'false');
+  });
+
+  test('should select the nav tab that matches the current URL hash when isNav is enabled', () => {
+    render(
+      <Tabs activeKey={0} onSelect={() => undefined} isNav>
+        <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>} href="#/items/1">
+          Tab item 1
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Tab item 2</TabTitleText>} href="#/items/2">
+          Tab item 2
+        </Tab>
+      </Tabs>
+    );
+
+    expect(screen.getByRole('tab', { name: 'Tab item 2' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tab', { name: 'Tab item 1' })).toHaveAttribute('aria-selected', 'false');
+  });
+
+  test('should fall back to activeKey when no tab href matches the current hash', () => {
+    window.location.hash = '#/items/unknown';
+
+    render(
+      <Tabs activeKey={0} onSelect={() => undefined} component="nav">
+        <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>} href="#/items/1">
+          Tab item 1
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Tab item 2</TabTitleText>} href="#/items/2">
+          Tab item 2
+        </Tab>
+      </Tabs>
+    );
+
+    expect(screen.getByRole('tab', { name: 'Tab item 1' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tab', { name: 'Tab item 2' })).toHaveAttribute('aria-selected', 'false');
+  });
+
+  test('should fall back to activeKey when the URL hash is empty', () => {
+    window.location.hash = '';
+
+    render(
+      <Tabs activeKey={0} onSelect={() => undefined} component="nav">
+        <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>} href="#/items/1">
+          Tab item 1
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Tab item 2</TabTitleText>} href="#/items/2">
+          Tab item 2
+        </Tab>
+      </Tabs>
+    );
+
+    expect(screen.getByRole('tab', { name: 'Tab item 1' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tab', { name: 'Tab item 2' })).toHaveAttribute('aria-selected', 'false');
+  });
+
+  test('should respect later controlled selections after the initial hash match', async () => {
+    const user = userEvent.setup();
+    const ControlledTabs = () => {
+      const [activeKey, setActiveKey] = useState<string | number>(0);
+
+      return (
+        <Tabs activeKey={activeKey} onSelect={(_event, eventKey) => setActiveKey(eventKey)} component="nav">
+          <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>} href="#/items/1">
+            Tab item 1
+          </Tab>
+          <Tab eventKey={1} title={<TabTitleText>Tab item 2</TabTitleText>} href="#/items/2">
+            Tab item 2
+          </Tab>
+          <Tab eventKey={2} title={<TabTitleText>Tab item 3</TabTitleText>} href="#/items/3">
+            Tab item 3
+          </Tab>
+        </Tabs>
+      );
+    };
+
+    render(<ControlledTabs />);
+
+    expect(screen.getByRole('tab', { name: 'Tab item 2' })).toHaveAttribute('aria-selected', 'true');
+
+    await user.click(screen.getByRole('tab', { name: 'Tab item 3' }));
+
+    expect(screen.getByRole('tab', { name: 'Tab item 3' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tab', { name: 'Tab item 2' })).toHaveAttribute('aria-selected', 'false');
+  });
+
+  test('should use the URL hash to initialize uncontrolled nav tabs', async () => {
+    const user = userEvent.setup();
+
+    render(
+      <Tabs defaultActiveKey={0} isNav>
+        <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>} href="#/items/1">
+          Tab item 1
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Tab item 2</TabTitleText>} href="#/items/2">
+          Tab item 2
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Tab item 3</TabTitleText>} href="#/items/3">
+          Tab item 3
+        </Tab>
+      </Tabs>
+    );
+
+    expect(screen.getByRole('tab', { name: 'Tab item 2' })).toHaveAttribute('aria-selected', 'true');
+
+    await user.click(screen.getByRole('tab', { name: 'Tab item 1' }));
+
+    expect(screen.getByRole('tab', { name: 'Tab item 1' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tab', { name: 'Tab item 2' })).toHaveAttribute('aria-selected', 'false');
+  });
+
+  test('should ignore hidden, disabled and aria-disabled tabs when matching the current hash', () => {
+    render(
+      <Tabs activeKey={0} onSelect={() => undefined} component="nav">
+        <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>} href="#/items/1">
+          Tab item 1
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Hidden tab</TabTitleText>} href="#/items/2" isHidden>
+          Hidden tab
+        </Tab>
+        <Tab eventKey={2} title={<TabTitleText>Disabled tab</TabTitleText>} href="#/items/2" isDisabled>
+          Disabled tab
+        </Tab>
+        <Tab eventKey={3} title={<TabTitleText>Aria disabled tab</TabTitleText>} href="#/items/2" isAriaDisabled>
+          Aria disabled tab
+        </Tab>
+      </Tabs>
+    );
+
+    expect(screen.queryByRole('tab', { name: 'Hidden tab' })).not.toBeInTheDocument();
+    expect(screen.getByRole('tab', { name: 'Tab item 1' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tab', { name: 'Disabled tab' })).toHaveAttribute('aria-selected', 'false');
+    expect(screen.getByRole('tab', { name: 'Aria disabled tab' })).toHaveAttribute('aria-selected', 'false');
+  });
+
+  test('should ignore the current URL hash when nav behavior is not enabled', () => {
+    render(
+      <Tabs activeKey={0} onSelect={() => undefined}>
+        <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>} href="#/items/1">
+          Tab item 1
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Tab item 2</TabTitleText>} href="#/items/2">
+          Tab item 2
+        </Tab>
+      </Tabs>
+    );
+
+    expect(screen.getByRole('tab', { name: 'Tab item 1' })).toHaveAttribute('aria-selected', 'true');
+    expect(screen.getByRole('tab', { name: 'Tab item 2' })).toHaveAttribute('aria-selected', 'false');
+  });
+
+  test('should prevent default anchor navigation when selecting a tab with an href', async () => {
+    const user = userEvent.setup();
+    window.location.hash = '';
+
+    render(
+      <Tabs activeKey={0} onSelect={() => undefined}>
+        <Tab eventKey={0} title={<TabTitleText>Tab item 1</TabTitleText>} href="#/items/1">
+          Tab item 1
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Tab item 2</TabTitleText>} href="#/items/2">
+          Tab item 2
+        </Tab>
+      </Tabs>
+    );
+
+    await user.click(screen.getByRole('tab', { name: 'Tab item 2' }));
+
+    expect(window.location.hash).toBe('');
+  });
+
+  test('should update the URL hash when selecting a nav tab with an href', async () => {
+    const user = userEvent.setup();
+    window.location.hash = '';
+
+    render(
+      <Tabs activeKey={0} onSelect={() => undefined} isNav>
+        <Tab eventKey={0} title={<TabTitleText>Users</TabTitleText>} href="#users">
+          Users
+        </Tab>
+        <Tab eventKey={1} title={<TabTitleText>Containers</TabTitleText>} href="#containers">
+          Containers
+        </Tab>
+      </Tabs>
+    );
+
+    await user.click(screen.getByRole('tab', { name: 'Containers' }));
+
+    expect(window.location.hash).toBe('#containers');
+  });
+});
+
 test(`Renders with class ${styles.modifiers.initializingAccent} when uncontrolled expandable component initially mounts`, async () => {
   const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
 

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

@@ -4,7 +4,7 @@ exports[`should not render tablist aria-label or aria-labelledby when neither is
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r2n:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r3b:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="noTabListLabelTabs"
@@ -89,7 +89,7 @@ exports[`should render accessible tabs 1`] = `
   <nav
     aria-label="accessible Tabs example"
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r1b:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1v:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="accessibleTabs"
@@ -206,7 +206,7 @@ exports[`should render box tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r19:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1t:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxTabs"
@@ -365,7 +365,7 @@ exports[`should render box tabs of secondary variant 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-box pf-m-secondary pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r1v:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r2j:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="boxSecondaryVariantTabs"
@@ -482,7 +482,7 @@ exports[`should render expandable vertical tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-expandable pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r13:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1n:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"
@@ -497,7 +497,7 @@ exports[`should render expandable vertical tabs 1`] = `
         <button
           aria-labelledby="generated-id-text generated-id-button"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-:r14:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r1o:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           id="generated-id-button"
@@ -689,7 +689,7 @@ exports[`should render filled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-fill pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r1d:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r21:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="filledTabs"
@@ -806,7 +806,7 @@ exports[`should render simple tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:rn:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1b:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="simpleTabs"
@@ -965,7 +965,7 @@ exports[`should render subtabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r1f:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r23:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="primarieTabs"
@@ -1051,7 +1051,7 @@ exports[`should render subtabs 1`] = `
   >
     <div
       class="pf-v6-c-tabs pf-m-animate-current pf-m-subtab pf-m-initializing-accent"
-      data-ouia-component-id="OUIA-Generated-Tabs-:r1h:"
+      data-ouia-component-id="OUIA-Generated-Tabs-:r25:"
       data-ouia-component-type="PF6/Tabs"
       data-ouia-safe="true"
       id="subtabs"
@@ -1194,7 +1194,7 @@ exports[`should render tablist aria-label when provided 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r2j:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r37:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="tabListLabelTabs"
@@ -1284,7 +1284,7 @@ exports[`should render tablist aria-labelledby when provided 1`] = `
   </h2>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r2l:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r39:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="tabListLabelledByTabs"
@@ -1369,7 +1369,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r1j:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r27:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="eventKeyTabs"
@@ -1487,7 +1487,7 @@ exports[`should render tabs with no bottom border 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-no-border-bottom pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r21:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r2l:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="noBottomBorderTabs"
@@ -1604,7 +1604,7 @@ exports[`should render tabs with separate content 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r1l:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r29:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="separateTabs"
@@ -1731,7 +1731,7 @@ exports[`should render uncontrolled tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:rv:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1j:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     style="--pf-v6-c-tabs--link-accent--length: 0px; --pf-v6-c-tabs--link-accent--start: 0px;"
@@ -1889,7 +1889,7 @@ exports[`should render vertical tabs 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-tabs pf-m-animate-current pf-m-vertical pf-m-initializing-accent"
-    data-ouia-component-id="OUIA-Generated-Tabs-:r11:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1l:"
     data-ouia-component-type="PF6/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"

package/src/components/Tabs/examples/Tabs.md

@@ -22,9 +22,9 @@ import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-user
 import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
 import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';
-import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
+import RhUiLaptopFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-laptop-fill-icon';
 import RhUiInfrastructureFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-infrastructure-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 RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 ## Examples

package/src/components/Tabs/examples/TabsHelp.tsx

@@ -1,6 +1,6 @@
 import { createRef, useState } from 'react';
 import { Tabs, Tab, TabTitleText, TabAction, 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 TabsHelp: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = useState<number>(0);
@@ -45,7 +45,7 @@ export const TabsHelp: React.FunctionComponent = () => {
                   ref={ref}
                   {...(tab === 'Help disabled' && { isDisabled: true })}
                 >
-                  <HelpIcon />
+                  <RhUiQuestionMarkCircleIcon />
                 </TabAction>
                 {helpPopover(`Help popover for ${tab}`, ref)}
               </>

package/src/components/Tabs/examples/TabsHelpAndClose.tsx

@@ -1,6 +1,6 @@
 import { createRef, useEffect, useRef, useState } from 'react';
 import { Tabs, Tab, TabTitleText, Popover, TabAction } 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';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const TabsHelpAndClose: React.FunctionComponent = () => {
@@ -66,7 +66,7 @@ export const TabsHelpAndClose: React.FunctionComponent = () => {
             actions={
               <>
                 <TabAction aria-label={`Help for ${tab}`} ref={ref}>
-                  <HelpIcon />
+                  <RhUiQuestionMarkCircleIcon />
                 </TabAction>
                 <TabAction
                   aria-label={`Close ${tab}`}

package/src/components/Tabs/examples/TabsIconAndText.tsx

@@ -4,7 +4,7 @@ import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-user
 import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
 import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';
-import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
+import RhUiLaptopFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-laptop-fill-icon';
 import RhUiInfrastructureFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-infrastructure-fill-icon';
 
 export const TabsIconAndText: React.FunctionComponent = () => {
@@ -82,7 +82,7 @@ export const TabsIconAndText: React.FunctionComponent = () => {
         title={
           <>
             <TabTitleIcon>
-              <LaptopIcon />
+              <RhUiLaptopFillIcon />
             </TabTitleIcon>{' '}
             <TabTitleText>System</TabTitleText>{' '}
           </>

package/src/components/TextInputGroup/__tests__/TextInputGroupMain.test.tsx

@@ -5,7 +5,7 @@ import styles from '@patternfly/react-styles/css/components/TextInputGroup/text-
 
 import { TextInputGroupMain } from '../TextInputGroupMain';
 import { TextInputGroupContext } from '../TextInputGroup';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 
 describe('TextInputGroupMain', () => {
   it('renders without children', () => {
@@ -77,7 +77,7 @@ describe('TextInputGroupMain', () => {
   });
 
   it('renders the icon when passed', () => {
-    render(<TextInputGroupMain icon={<SearchIcon />} />);
+    render(<TextInputGroupMain icon={<RhMicronsSearchIcon />} />);
 
     const icon = screen.getByRole('img', { hidden: true });
 
@@ -85,7 +85,7 @@ describe('TextInputGroupMain', () => {
   });
 
   it('renders the icon as aria hidden', () => {
-    render(<TextInputGroupMain icon={<SearchIcon />} />);
+    render(<TextInputGroupMain icon={<RhMicronsSearchIcon />} />);
 
     const icon = screen.getByRole('img', { hidden: true });
 

package/src/components/TextInputGroup/examples/TextInputGroup.md

@@ -6,7 +6,7 @@ propComponents: ['TextInputGroup', 'TextInputGroupMain', 'TextInputGroupUtilitie
 ---
 
 import { useState } from 'react';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 ## Examples

package/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx

@@ -7,7 +7,7 @@ import {
   LabelGroup,
   Button
 } 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';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const TextInputGroupFilters: React.FunctionComponent = () => {
@@ -57,7 +57,11 @@ export const TextInputGroupFilters: React.FunctionComponent = () => {
 
   return (
     <TextInputGroup>
-      <TextInputGroupMain icon={showSearchIcon && <SearchIcon />} value={inputValue} onChange={handleInputChange}>
+      <TextInputGroupMain
+        icon={showSearchIcon && <RhMicronsSearchIcon />}
+        value={inputValue}
+        onChange={handleInputChange}
+      >
         <LabelGroup>
           {currentChips.map((currentChip) => (
             <Label key={currentChip} variant="outline" onClose={() => deleteChip(currentChip)}>