From f51849adbd2f8d8cfc663972fc3ae90c3729e5c7 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Wed, 17 Jun 2026 15:13:38 -0400 Subject: [PATCH] fix(SearchIcon): Replace SearchIcon with RhMicronsSearchIcon Co-authored-by: Cursor --- .../DualListSelector.test.tsx.snap | 20 +--- .../examples/DualListSelector.md | 2 +- .../examples/DualListSelectorBasicSearch.tsx | 9 +- .../DualListSelectorComplexOptionsActions.tsx | 9 +- .../examples/DualListSelectorTree.tsx | 9 +- .../EmptyState/examples/EmptyState.md | 2 +- .../examples/EmptyStateNoMatchFound.tsx | 4 +- .../examples/NotificationDrawer.md | 2 +- .../examples/NotificationDrawerGroups.tsx | 4 +- .../NotificationDrawerLightweight.tsx | 4 +- .../components/SearchInput/SearchInput.tsx | 8 +- .../__snapshots__/SearchInput.test.tsx.snap | 100 ++++-------------- .../__tests__/TextInputGroupMain.test.tsx | 6 +- .../TextInputGroup/examples/TextInputGroup.md | 2 +- .../examples/TextInputGroupFilters.tsx | 8 +- .../TextInputGroupUtilitiesAndIcon.tsx | 4 +- .../examples/TextInputGroupWithStatus.tsx | 6 +- .../components/Toolbar/examples/Toolbar.md | 2 +- .../components/TreeView/TreeViewSearch.tsx | 4 +- .../TreeViewSearch.test.tsx.snap | 20 +--- packages/react-core/src/demos/AlertGroup.md | 2 +- .../react-core/src/demos/Compass/Compass.md | 2 +- .../Compass/examples/CompassDockDemo.tsx | 4 +- .../src/demos/CustomMenus/ContextSelector.md | 2 +- .../src/demos/CustomMenus/CustomMenus.md | 2 +- .../src/demos/CustomMenus/OptionsMenu.md | 2 +- .../examples/ContextSelectorDemo.tsx | 4 +- .../src/demos/Filters/FilterDemos.md | 2 +- .../examples/FilterAttributeSearch.tsx | 4 +- .../demos/Filters/examples/FilterFaceted.tsx | 4 +- .../examples/FilterMixedSelectGroup.tsx | 4 +- .../examples/FilterSameSelectGroup.tsx | 4 +- .../Filters/examples/FilterSearchInput.tsx | 4 +- packages/react-core/src/demos/Nav.md | 2 +- .../NotificationDrawer/NotificationDrawer.md | 2 +- .../examples/NotificationDrawerBasic.tsx | 9 +- .../examples/NotificationDrawerGrouped.tsx | 11 +- .../react-core/src/demos/PrimaryDetail.md | 2 +- .../src/demos/TextInputGroupDemo.md | 2 +- packages/react-core/src/demos/Toolbar.md | 2 +- .../AlertGroupToastWithNotificationDrawer.tsx | 4 +- .../src/demos/examples/Nav/NavDockedNav.tsx | 4 +- .../PrimaryDetailContentPadding.tsx | 8 +- .../PrimaryDetail/PrimaryDetailFullPage.tsx | 8 +- .../PrimaryDetailInlineModifier.tsx | 8 +- .../AttributeValueFiltering.tsx | 4 +- .../TextInputGroup/AutoCompleteSearch.tsx | 4 +- .../Toolbar/ConsoleLogViewerToolbar.tsx | 4 +- .../DualListSelector.test.tsx.snap | 40 ++----- .../examples/DualListSelector.md | 2 +- .../examples/DualListSelectorComposable.tsx | 9 +- .../DualListSelectorComposableTree.tsx | 9 +- .../DualListSelectorTreeDemo.tsx | 9 +- .../DualListSelectorWithActionsDemo.tsx | 9 +- .../demos/InputGroupDemo/InputGroupDemo.tsx | 8 +- .../NotificationDrawerGroupsDemo.tsx | 4 +- .../NotificationDrawerLightweightDemo.tsx | 4 +- .../demos/ToolbarDemo/ToolbarDemo.tsx | 4 +- .../src/components/Table/examples/Table.md | 2 +- .../Table/examples/TableEmptyState.tsx | 9 +- packages/react-table/src/demos/Table.md | 2 +- .../demos/examples/TableEmptyStateDefault.tsx | 4 +- .../src/demos/examples/TableFilterable.tsx | 4 +- .../Table/examples/LegacyTableEmptyState.tsx | 4 +- .../components/Table/examples/Table.md | 2 +- 65 files changed, 213 insertions(+), 251 deletions(-) diff --git a/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap b/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap index f9529ee933f..01782bb3a14 100644 --- a/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap +++ b/packages/react-core/src/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap @@ -90,24 +90,12 @@ exports[`DualListSelector with search inputs 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + { ); const buildEmptyState = (isAvailable: boolean) => ( - + No results match the filter criteria. Clear all filters and try again. diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx index 5480a8fa90a..7c19efae975 100644 --- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx +++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx @@ -26,8 +26,8 @@ import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-ico import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon'; import RhMicronsSortDownSmallToLargeIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-sort-down-small-to-large-icon'; -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'; interface Option { text: string; @@ -221,7 +221,12 @@ export const DualListSelectorComplexOptionsActionsNext: React.FunctionComponent }; const buildEmptyState = (isAvailable: boolean) => ( - + No results match the filter criteria. Clear all filters and try again. diff --git a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx index 43fe3e1b790..005931b2a58 100644 --- a/packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx +++ b/packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx @@ -19,7 +19,7 @@ import RhMicronsDoubleCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon'; import AngleDoubleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-double-right-icon'; import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-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'; interface FoodNode { id: string; @@ -259,7 +259,12 @@ export const DualListSelectorComposableTree: React.FunctionComponent {filterApplied && options.length === 0 && ( - + No results match the filter criteria. Clear all filters and try again. diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyState.md b/packages/react-core/src/components/EmptyState/examples/EmptyState.md index 31418592612..24f2138dc6a 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyState.md +++ b/packages/react-core/src/components/EmptyState/examples/EmptyState.md @@ -7,7 +7,7 @@ propComponents: ['EmptyState', 'EmptyStateBody', 'EmptyStateFooter', 'EmptyState import { useState } from 'react'; import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-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'; ## Examples ### Basic diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx b/packages/react-core/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx index 3c5e91d6161..4f543c3fdab 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx +++ b/packages/react-core/src/components/EmptyState/examples/EmptyStateNoMatchFound.tsx @@ -1,8 +1,8 @@ import { Button, EmptyState, EmptyStateBody, EmptyStateFooter, EmptyStateActions } from '@patternfly/react-core'; -import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; +import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon'; export const EmptyStateNoMatchFound: React.FunctionComponent = () => ( - + No results match the filter criteria. Clear all filters and try again. diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md index 7f572256cb5..185aa26df16 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md +++ b/packages/react-core/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 diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx index 91701f91f14..5f677e331f4 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx +++ b/packages/react-core/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 = () => { diff --git a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx index ebb1d9da483..1a5baba1017 100644 --- a/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx +++ b/packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerLightweight.tsx @@ -16,7 +16,7 @@ import { NotificationDrawerListItemHeader, EmptyStateActions } from '@patternfly/react-core'; -import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; +import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon'; export const NotificationDrawerLightweight: React.FunctionComponent = () => { const [firstGroupExpanded, setFirstGroupExpanded] = useState(false); @@ -174,7 +174,7 @@ export const NotificationDrawerLightweight: React.FunctionComponent = () => { diff --git a/packages/react-core/src/components/SearchInput/SearchInput.tsx b/packages/react-core/src/components/SearchInput/SearchInput.tsx index 192b2413358..54a851b020a 100644 --- a/packages/react-core/src/components/SearchInput/SearchInput.tsx +++ b/packages/react-core/src/components/SearchInput/SearchInput.tsx @@ -6,7 +6,7 @@ import { Icon } from '../Icon'; import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon'; import AngleUpIcon from '@patternfly/react-icons/dist/esm/icons/angle-up-icon'; import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-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'; 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 { AdvancedSearchMenu } from './AdvancedSearchMenu'; @@ -308,7 +308,7 @@ const SearchInputBase: React.FunctionComponent = ({ } + icon={} innerRef={searchInputInputRef} value={searchValue} placeholder={placeholder} @@ -363,7 +363,7 @@ const SearchInputBase: React.FunctionComponent = ({ variant={ButtonVariant.plain} aria-label={toggleAriaLabel} aria-expanded={isExpanded} - icon={} + icon={} onClick={onExpandHandler} ref={searchInputExpandableToggleRef} /> @@ -384,7 +384,7 @@ const SearchInputBase: React.FunctionComponent = ({ variant={ButtonVariant.plain} aria-label={toggleAriaLabel} aria-expanded={isExpanded} - icon={isExpanded ? : } + icon={isExpanded ? : } onClick={onExpandHandler} ref={searchInputExpandableToggleRef} /> diff --git a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap index 95eb703b18e..c9dbbb86cd5 100644 --- a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap +++ b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap @@ -29,24 +29,12 @@ exports[`SearchInput advanced search 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + - - - - - - + - - - - - - + - - - - - - + - - - - - - + { it('renders without children', () => { @@ -77,7 +77,7 @@ describe('TextInputGroupMain', () => { }); it('renders the icon when passed', () => { - render(} />); + render(} />); const icon = screen.getByRole('img', { hidden: true }); @@ -85,7 +85,7 @@ describe('TextInputGroupMain', () => { }); it('renders the icon as aria hidden', () => { - render(} />); + render(} />); const icon = screen.getByRole('img', { hidden: true }); diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md index 2a32ed3c4f6..69c0d7252cc 100644 --- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md +++ b/packages/react-core/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 diff --git a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx b/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx index 24d18685436..5122d8d610c 100644 --- a/packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx +++ b/packages/react-core/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 ( - } value={inputValue} onChange={handleInputChange}> + } + value={inputValue} + onChange={handleInputChange} + > {currentChips.map((currentChip) => (