@patternfly/react-core 6.6.1-prerelease.4 → 6.6.2

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, useState } from 'react';
+import { createRef } from 'react';
 
 jest.mock('../../../helpers/GenerateId/GenerateId');
 
@@ -119,222 +119,6 @@ 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-:r3b:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r2n:"
     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-:r1v:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1b:"
     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-:r1t:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r19:"
     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-:r2j:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1v:"
     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-:r1n:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r13:"
     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-:r1o:"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r14:"
           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-:r21:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1d:"
     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-:r1b:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:rn:"
     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-:r23:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1f:"
     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-:r25:"
+      data-ouia-component-id="OUIA-Generated-Tabs-:r1h:"
       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-:r37:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r2j:"
     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-:r39:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r2l:"
     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-:r27:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1j:"
     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-:r2l:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r21:"
     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-:r29:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r1l:"
     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-:r1j:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:rv:"
     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-:r1l:"
+    data-ouia-component-id="OUIA-Generated-Tabs-:r11:"
     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 RhUiLaptopFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-laptop-fill-icon';
+import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
 import RhUiInfrastructureFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-infrastructure-fill-icon';
-import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-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 RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-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 })}
                 >
-                  <RhUiQuestionMarkCircleIcon />
+                  <HelpIcon />
                 </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 RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
+import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-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}>
-                  <RhUiQuestionMarkCircleIcon />
+                  <HelpIcon />
                 </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 RhUiLaptopFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-laptop-fill-icon';
+import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-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>
-              <RhUiLaptopFillIcon />
+              <LaptopIcon />
             </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 RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 describe('TextInputGroupMain', () => {
   it('renders without children', () => {
@@ -77,7 +77,7 @@ describe('TextInputGroupMain', () => {
   });
 
   it('renders the icon when passed', () => {
-    render(<TextInputGroupMain icon={<RhMicronsSearchIcon />} />);
+    render(<TextInputGroupMain icon={<SearchIcon />} />);
 
     const icon = screen.getByRole('img', { hidden: true });
 
@@ -85,7 +85,7 @@ describe('TextInputGroupMain', () => {
   });
 
   it('renders the icon as aria hidden', () => {
-    render(<TextInputGroupMain icon={<RhMicronsSearchIcon />} />);
+    render(<TextInputGroupMain icon={<SearchIcon />} />);
 
     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 RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/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 RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const TextInputGroupFilters: React.FunctionComponent = () => {
@@ -57,11 +57,7 @@ export const TextInputGroupFilters: React.FunctionComponent = () => {
 
   return (
     <TextInputGroup>
-      <TextInputGroupMain
-        icon={showSearchIcon && <RhMicronsSearchIcon />}
-        value={inputValue}
-        onChange={handleInputChange}
-      >
+      <TextInputGroupMain icon={showSearchIcon && <SearchIcon />} value={inputValue} onChange={handleInputChange}>
         <LabelGroup>
           {currentChips.map((currentChip) => (
             <Label key={currentChip} variant="outline" onClose={() => deleteChip(currentChip)}>

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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { TextInputGroup, TextInputGroupMain, TextInputGroupUtilities, Button } from '@patternfly/react-core';
-import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const TextInputGroupUtilitiesAndIcon: React.FunctionComponent = () => {
@@ -24,7 +24,7 @@ export const TextInputGroupUtilitiesAndIcon: React.FunctionComponent = () => {
 
   return (
     <TextInputGroup>
-      <TextInputGroupMain icon={<RhMicronsSearchIcon />} value={inputValue} onChange={handleInputChange} />
+      <TextInputGroupMain icon={<SearchIcon />} value={inputValue} onChange={handleInputChange} />
       {showUtilities && (
         <TextInputGroupUtilities>
           {showClearButton && (

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

@@ -8,7 +8,7 @@ import {
   Flex,
   FlexItem
 } from '@patternfly/react-core';
-import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const TextInputGroupWithStatus: React.FunctionComponent = () => {
@@ -37,7 +37,7 @@ export const TextInputGroupWithStatus: React.FunctionComponent = () => {
       <FlexItem>
         <TextInputGroup validated={ValidatedOptions.warning}>
           <TextInputGroupMain
-            icon={<RhMicronsSearchIcon />}
+            icon={<SearchIcon />}
             value={warningValue}
             onChange={(_event, value) => setWarningValue(value)}
           />
@@ -46,7 +46,7 @@ export const TextInputGroupWithStatus: React.FunctionComponent = () => {
       <FlexItem>
         <TextInputGroup validated={ValidatedOptions.error}>
           <TextInputGroupMain
-            icon={<RhMicronsSearchIcon />}
+            icon={<SearchIcon />}
             value={errorValue}
             onChange={(_event, value) => setErrorValue(value)}
           />

package/src/components/ToggleGroup/examples/ToggleGroup.md

@@ -9,7 +9,7 @@ import './toggleGroup.css';
 
 import { useRef, useState } from 'react';
 import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
-import RhUiUndoIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-undo-icon';
+import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
 import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 

package/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
-import RhUiUndoIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-undo-icon';
+import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
 import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 
@@ -24,7 +24,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
         onChange={handleItemClick}
       />
       <ToggleGroupItem
-        icon={<RhUiUndoIcon />}
+        icon={<UndoIcon />}
         aria-label="undo"
         buttonId="toggle-group-icons-2"
         isSelected={isSelected['toggle-group-icons-2']}

package/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
-import RhUiUndoIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-undo-icon';
+import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
 import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 
@@ -25,7 +25,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
           onChange={handleItemClick}
         />
         <ToggleGroupItem
-          icon={<RhUiUndoIcon />}
+          icon={<UndoIcon />}
           text="Undo"
           buttonId="toggle-group-text-icons-2"
           isSelected={isSelected['toggle-group-text-icons-2']}
@@ -50,7 +50,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
           onChange={handleItemClick}
         />
         <ToggleGroupItem
-          icon={<RhUiUndoIcon />}
+          icon={<UndoIcon />}
           iconPosition="end"
           text="Undo"
           buttonId="toggle-group-text-icons-5"