feat(icons): update close icons to use the rh micron by wise-king-sullyman · Pull Request #12283 · patternfly/patternfly-react

wise-king-sullyman · 2026-03-20T19:17:51Z

What: Closes #12262

Additional issues:

Summary by CodeRabbit

Style
- Updated close/clear icons across the UI—modals, drawers, alerts, tabs, selects, inputs, labels, action lists, buttons, wizards, notifications, file uploads, tables, and related examples—to unify visual appearance and improve consistency.

coderabbitai · 2026-03-20T19:18:17Z

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (3)

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

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: dc10e188-a549-460f-8347-fe2e264206b6

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

🔍 Trigger review

Walkthrough

This PR replaces many instances of TimesIcon with RhMicronsCloseIcon across components, examples, demos, and docs in react-core, react-table, react-templates, and react-integration. Changes are limited to icon imports and the icon prop usages on buttons; component logic, props, event handlers, accessibility attributes, and public signatures are unchanged.

Changes

Cohort / File(s)	Summary
Core close-button 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` imports/usages with `RhMicronsCloseIcon` for close buttons; no other logic changed.
Label & LabelGroup `packages/react-core/src/components/Label/Label.tsx`, `packages/react-core/src/components/Label/LabelGroup.tsx`	Swapped close icon component from `TimesIcon` to `RhMicronsCloseIcon` for removable labels.
SearchInput `packages/react-core/src/components/SearchInput/SearchInput.tsx`	Replaced clear/collapse/expanded-state close icons with `RhMicronsCloseIcon` in multiple places.
Tabs `packages/react-core/src/components/Tabs/Tab.tsx`, `packages/react-core/src/components/Tabs/examples/TabsHelpAndClose.tsx`	Updated tab close icon to `RhMicronsCloseIcon`.
Select & Typeahead examples `packages/react-core/src/components/Select/examples/`, `packages/react-templates/src/components/Select/`	Replaced clear/input-reset icons in typeahead/select examples and templates with `RhMicronsCloseIcon`.
TextInputGroup examples & demos `packages/react-core/src/components/TextInputGroup/examples/`, `packages/react-core/src/demos/examples/TextInputGroup/`, `packages/react-core/src/demos/TextInputGroupDemo.md`	Swapped clear-button icons in TextInputGroup examples and demos to `RhMicronsCloseIcon`.
MenuToggle, NotificationDrawer, MultipleFileUpload, Wizard `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 various close/remove icons with `RhMicronsCloseIcon`.
Deprecated components `packages/react-core/src/deprecated/components/Modal/ModalBoxCloseButton.tsx`, `packages/react-core/src/deprecated/components/Wizard/WizardHeader.tsx`	Updated deprecated Modal and Wizard close icons to `RhMicronsCloseIcon`.
Table components & examples `packages/react-table/src/components/Table/EditColumn.tsx`, `packages/react-table/src/components/Table/examples/TableEditable.tsx`, `packages/react-table/src/components/Table/examples/Table.md`	Replaced cancel/discard/clear icons with `RhMicronsCloseIcon` in table edit flows and examples.
ActionList & Button examples `packages/react-core/src/components/ActionList/examples/`, `packages/react-core/src/components/Button/examples/`, `packages/react-core/src/components/Button/examples/ButtonCircle.tsx`, `packages/react-core/src/components/Button/examples/ButtonDisabled.tsx`, `packages/react-core/src/components/Button/examples/ButtonVariations.tsx`	Updated examples and action list icon usages from `TimesIcon` to `RhMicronsCloseIcon`.
Integration demo `packages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsx`	Replaced clear icon in demo multi-typeahead utilities with `RhMicronsCloseIcon`.
Templates & other examples `packages/react-templates/src/components/Select/MultiTypeaheadSelect.tsx`, `packages/react-templates/src/components/Select/TypeaheadSelect.tsx`, various example .md/.tsx files under components/*/examples/	Replaced `TimesIcon` imports/usages with `RhMicronsCloseIcon` across templates and many examples. No behavioral changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~20 minutes

Possibly related PRs

feat(icons): add swap support for mapped rh-ui icons #12245: Related changes to icon exports/mappings that enable swapping to RH-brand icons used here.
feat(react-icons): add newest rh brand icons #12222: Adds RH brand icons (including rh-microns-close-icon) which this PR consumes.

Suggested reviewers

thatblindgeye
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 describes the main change: replacing close icons with rh-microns icons across the codebase.
Linked Issues check	✅ Passed	The PR successfully updates close icons to use rh-microns across components and examples, directly addressing issue `#12262`'s requirement to follow core PatternFly changes.
Out of Scope Changes check	✅ Passed	All changes are scoped to replacing TimesIcon with RhMicronsCloseIcon for close button use cases; no unrelated modifications were introduced.
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

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

patternfly-build · 2026-03-20T19:21:47Z

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

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

thatblindgeye

There's some areas that need the icon updated still:

Button examples ButtonVariations, ButtonDisabled, and ButtonCircle + example MD
ActionList examples ActionListVertical, ActionListWwithIcons + example MD
HelperText example HelperTextWithCustomIcon + example MD
There's also a few demo MD files that are importing the TimesIcon still that I'm not sure if we need? Toolbar, HelperText, and CustomMenus MD files

nicolethoen

Nothing to note from me other than Eric's comment and the conflict ✅

wise-king-sullyman · 2026-03-31T13:54:09Z

@thatblindgeye @nicolethoen so I actually left those uses of TimesIcons in because I thought we only wanted to update icons which were being used explicitly as close icons in this PR, and I don't think those are?

kmcfaul

I think the RH icon equivalent of the TimesIcon may be the close icon anyways? At least I didn't see a direct equivalent. It might be a good question for design or brand, if they want a different looking X icon for non-close situations.

thatblindgeye

Doesn't look like core was updated in some of my previous mentions. Core did update ActionList and standalone button stuff I mentioned, but it'd be worth pinging design about those as well (the context might be "these are intended to represent close actions", but they're more just showing icon only action list items/buttons).

Don't think anything I said above is blocking here, but we should put an agenda item on the next meeting to decide whether any times icon should be updated to the RhMicronsClose icon (Core will need updates as well either way likely).

patternfly-build · 2026-03-31T21:41:37Z

Your changes have been released in:

@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
@patternfly/[email protected]
[email protected]
@patternfly/[email protected]
@patternfly/[email protected]

Thanks for your contribution! 🎉

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

bee3478

wise-king-sullyman requested review from a team, dlabaj and nicolethoen and removed request for a team March 23, 2026 20:17

thatblindgeye reviewed Mar 25, 2026

View reviewed changes

nicolethoen reviewed Mar 25, 2026

View reviewed changes

kmcfaul reviewed Mar 31, 2026

View reviewed changes

thatblindgeye approved these changes Mar 31, 2026

View reviewed changes

wise-king-sullyman added 4 commits March 31, 2026 15:07

Update x icons in button and action list examples

7e43c3b

Merge branch 'main' into update-close-icons-to-rh-microns

c1406fb

Update snapshots for tests

35c8cc1

Update snapshots

4d9fa38

wise-king-sullyman requested a review from nicolethoen March 31, 2026 20:24

thatblindgeye approved these changes Mar 31, 2026

View reviewed changes

nicolethoen approved these changes Mar 31, 2026

View reviewed changes

nicolethoen merged commit fc82a9c into patternfly:main Mar 31, 2026
14 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

feat(icons): update close icons to use the rh micron#12283
nicolethoen merged 5 commits intopatternfly:mainfrom
wise-king-sullyman:update-close-icons-to-rh-microns

wise-king-sullyman commented Mar 20, 2026 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Mar 20, 2026 •

edited

Loading

Review skipped

Uh oh!

patternfly-build commented Mar 20, 2026 •

edited

Loading

Uh oh!

thatblindgeye left a comment

Uh oh!

nicolethoen left a comment

Uh oh!

wise-king-sullyman commented Mar 31, 2026

Uh oh!

kmcfaul left a comment

Uh oh!

thatblindgeye left a comment

Uh oh!

Uh oh!

patternfly-build commented Mar 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

wise-king-sullyman commented Mar 20, 2026 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Uh oh!

patternfly-build commented Mar 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

thatblindgeye left a comment

Choose a reason for hiding this comment

Uh oh!

nicolethoen left a comment

Choose a reason for hiding this comment

Uh oh!

wise-king-sullyman commented Mar 31, 2026

Uh oh!

kmcfaul left a comment

Choose a reason for hiding this comment

Uh oh!

thatblindgeye left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

patternfly-build commented Mar 31, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

wise-king-sullyman commented Mar 20, 2026 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Mar 20, 2026 •

edited

Loading

patternfly-build commented Mar 20, 2026 •

edited

Loading