feat(icons): update close icons to use the rh micron

[wise-king-sullyman]

What: Closes #12262

Additional issues:

Summary by CodeRabbit

Release Notes

Style

• Updated close and clear button icons across modals, drawers, alerts, tabs, select menus, text inputs, and other components for improved visual consistency.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: edbc0d47-d660-4695-ad93-b3db5b7cd439

📥 Commits

Reviewing files that changed from the base of the PR and between 641c888 and bee3478.

⛔ Files ignored due to path filters (18)

• packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap is excluded by !**/*.snap
• packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap is excluded by !**/*.snap, !**/generated/**
• packages/react-core/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap is excluded by !**/*.snap
• packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap is excluded by !**/*.snap
• packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap is excluded by !**/*.snap
• packages/react-core/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap is excluded by !**/*.snap
• packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap is excluded by !**/*.snap
• packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap is excluded by !**/*.snap
• packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap is excluded by !**/*.snap, !**/generated/**
• packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap is excluded by !**/*.snap
• packages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snap is excluded by !**/*.snap
• packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap is excluded by !**/*.snap
• packages/react-core/src/deprecated/components/Chip/__tests__/__snapshots__/Chip.test.tsx.snap is excluded by !**/*.snap
• packages/react-core/src/deprecated/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap is excluded by !**/*.snap
• packages/react-core/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap is excluded by !**/*.snap
• packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap is excluded by !**/*.snap
• packages/react-templates/src/components/Select/__tests__/__snapshots__/MultiTypeaheadSelect.test.tsx.snap is excluded by !**/*.snap
• packages/react-templates/src/components/Select/__tests__/__snapshots__/TypeaheadSelect.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (37)

• packages/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx
• packages/react-core/src/components/Alert/AlertActionCloseButton.tsx
• packages/react-core/src/components/Drawer/DrawerCloseButton.tsx
• packages/react-core/src/components/Label/Label.tsx
• packages/react-core/src/components/Label/LabelGroup.tsx
• packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
• packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx
• packages/react-core/src/components/Modal/ModalBoxCloseButton.tsx
• packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx
• packages/react-core/src/components/NotificationDrawer/NotificationDrawerHeader.tsx
• packages/react-core/src/components/Popover/PopoverCloseButton.tsx
• packages/react-core/src/components/SearchInput/SearchInput.tsx
• packages/react-core/src/components/Select/examples/Select.md
• packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx
• packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx
• packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx
• packages/react-core/src/components/Select/examples/SelectTypeahead.tsx
• packages/react-core/src/components/Select/examples/SelectTypeaheadCreatable.tsx
• packages/react-core/src/components/Tabs/Tab.tsx
• packages/react-core/src/components/Tabs/examples/Tabs.md
• packages/react-core/src/components/Tabs/examples/TabsHelpAndClose.tsx
• packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md
• packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx
• packages/react-core/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx
• packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx
• packages/react-core/src/components/Wizard/WizardHeader.tsx
• packages/react-core/src/demos/TextInputGroupDemo.md
• packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx
• packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx
• packages/react-core/src/deprecated/components/Modal/ModalBoxCloseButton.tsx
• packages/react-core/src/deprecated/components/Wizard/WizardHeader.tsx
• packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx
• packages/react-table/src/components/Table/EditColumn.tsx
• packages/react-table/src/components/Table/examples/Table.md
• packages/react-table/src/components/Table/examples/TableEditable.tsx
• packages/react-templates/src/components/Select/MultiTypeaheadSelect.tsx
• packages/react-templates/src/components/Select/TypeaheadSelect.tsx

---

Walkthrough

This PR systematically replaces all instances of TimesIcon with RhMicronsCloseIcon across multiple components, examples, and documentation files in the react-core, react-table, react-templates, and react-integration packages. This is a follow-up to a core PatternFly update that introduced the new rh-microns close icon. All changes are localized to icon imports and their usage in Button components, with no modifications to component logic, props, event handlers, or accessibility attributes.

Changes

Cohort / File(s)	Summary
Core Modal & Drawer Components packages/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx, packages/react-core/src/components/Alert/AlertActionCloseButton.tsx, packages/react-core/src/components/Drawer/DrawerCloseButton.tsx, packages/react-core/src/components/Modal/ModalBoxCloseButton.tsx, packages/react-core/src/components/Popover/PopoverCloseButton.tsx	Replaced TimesIcon with RhMicronsCloseIcon in close button implementations; no logic or event handling changes.
Label Components packages/react-core/src/components/Label/Label.tsx, packages/react-core/src/components/Label/LabelGroup.tsx	Updated default close button icon from TimesIcon to RhMicronsCloseIcon for removable labels.
SearchInput Component packages/react-core/src/components/SearchInput/SearchInput.tsx	Replaced TimesIcon with RhMicronsCloseIcon in multiple places: clear button, expandable collapse button, and expanded state toggle icon.
Tab Components packages/react-core/src/components/Tabs/Tab.tsx, packages/react-core/src/components/Tabs/examples/TabsHelpAndClose.tsx	Updated close icon in TabAction close button rendering from TimesIcon to RhMicronsCloseIcon.
Select Examples packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx, packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCheckbox.tsx, packages/react-core/src/components/Select/examples/SelectMultiTypeaheadCreatable.tsx, packages/react-core/src/components/Select/examples/SelectTypeahead.tsx, packages/react-core/src/components/Select/examples/SelectTypeaheadCreatable.tsx	Replaced clear input button icon from TimesIcon to RhMicronsCloseIcon across typeahead select examples.
TextInputGroup Components & Examples packages/react-core/src/components/TextInputGroup/examples/TextInputGroupFilters.tsx, packages/react-core/src/components/TextInputGroup/examples/TextInputGroupUtilitiesAndIcon.tsx, packages/react-core/src/components/TextInputGroup/examples/TextInputGroupWithStatus.tsx, packages/react-core/src/demos/examples/TextInputGroup/AttributeValueFiltering.tsx, packages/react-core/src/demos/examples/TextInputGroup/AutoCompleteSearch.tsx	Updated clear button icon in TextInputGroup utilities from TimesIcon to RhMicronsCloseIcon.
Other UI Components packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx, packages/react-core/src/components/NotificationDrawer/NotificationDrawerHeader.tsx, packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx, packages/react-core/src/components/Wizard/WizardHeader.tsx	Replaced close/remove button icon from TimesIcon to RhMicronsCloseIcon in respective components.
Deprecated Components packages/react-core/src/deprecated/components/Modal/ModalBoxCloseButton.tsx, packages/react-core/src/deprecated/components/Wizard/WizardHeader.tsx	Updated deprecated versions of Modal and Wizard components to use RhMicronsCloseIcon instead of TimesIcon.
Table Components packages/react-table/src/components/Table/EditColumn.tsx, packages/react-table/src/components/Table/examples/TableEditable.tsx	Replaced cancel/discard button icon from TimesIcon to RhMicronsCloseIcon in editable table features.
Template Components packages/react-templates/src/components/Select/MultiTypeaheadSelect.tsx, packages/react-templates/src/components/Select/TypeaheadSelect.tsx	Updated clear button icon in typeahead select templates from TimesIcon to RhMicronsCloseIcon.
Integration Demo packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx	Replaced clear button icon in form demo's multi-typeahead menu utilities.
Documentation & Example Files packages/react-core/src/components/MenuToggle/examples/MenuToggle.md, packages/react-core/src/components/Select/examples/Select.md, packages/react-core/src/components/Tabs/examples/Tabs.md, packages/react-core/src/components/TextInputGroup/examples/TextInputGroup.md, packages/react-core/src/demos/TextInputGroupDemo.md, packages/react-table/src/components/Table/examples/Table.md	Updated icon imports in example documentation and demo files from TimesIcon to RhMicronsCloseIcon.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~20 minutes

Possibly related PRs

• feat(react-icons): add newest rh brand icons #12222: Introduces the new RH brand icons (including rh-microns-close-icon) to the react-icons package that this PR begins using throughout the codebase.

Suggested reviewers

• kmcfaul
• nicolethoen
• mcoker

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly indicates the main change: updating close icons to use rh-microns, which matches the primary objective of the PR.
Linked Issues check	✅ Passed	All code changes successfully replace TimesIcon with RhMicronsCloseIcon across components and examples, directly fulfilling the requirement to update close icons to use rh-microns as specified in issue #12262.
Out of Scope Changes check	✅ Passed	All changes are scoped to icon replacement: TimesIcon → RhMicronsCloseIcon in close-button contexts. No unrelated modifications to logic, props, exports, or other functionality.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

You can enable review details to help with troubleshooting, context usage and more.

Enable the reviews.review_details setting to include review details such as the model used, the time taken for each step and more in the review comments.

[patternfly-build]

Preview: https://pf-react-pr-12283.surge.sh

A11y report: https://pf-react-pr-12283-a11y.surge.sh