feat(misc): update status icons to rh icons#12291
Open
kmcfaul wants to merge 2 commits intopatternfly:mainfrom
Open
feat(misc): update status icons to rh icons#12291kmcfaul wants to merge 2 commits intopatternfly:mainfrom
kmcfaul wants to merge 2 commits intopatternfly:mainfrom
Conversation
kmcfaul
changed the title
WalkthroughThis PR systematically replaces PatternFly status icons with RH UI fill-variant icons across the codebase. Icon mappings, imports, and JSX renderings for success/error/warning/info/custom statuses are updated from outline-style icons (e.g., Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~25 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Collaborator
|
Preview: https://pf-react-pr-12291.surge.sh A11y report: https://pf-react-pr-12291-a11y.surge.sh |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
packages/react-core/src/components/Button/examples/ButtonCircle.tsx (1)
16-16:⚠️ Potential issue | 🔴 CriticalMissing
useStateimport will cause a runtime error.The component uses
useStateon line 16, but there is no import statement for it. While React is available globally in this repo,useStatemust still be explicitly imported as a named export from'react'.🐛 Proposed fix
+import { useState } from 'react'; import { Button, Flex } from '@patternfly/react-core';🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/react-core/src/components/Button/examples/ButtonCircle.tsx` at line 16, The file ButtonCircle.tsx uses the React hook useState (const [isUploading, setIsUploading] = useState<boolean>(false)) but does not import it; add useState as a named import from 'react' (either by updating an existing import React, { useState } from 'react' or adding a separate import { useState } from 'react') so the useState hook is available at runtime.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@packages/react-core/src/demos/examples/Card/CardStatus.tsx`:
- Line 218: The blue status Label in CardStatus.tsx is using RhUiErrorFillIcon
which is semantically incorrect; update the JSX where Label color="blue" and
icon={<RhUiErrorFillIcon />} to use the info icon (e.g., replace
RhUiErrorFillIcon with RhUiInfoFillIcon or the designated info icon export) so
the icon matches the blue/info status convention, and ensure you import the
chosen RhUiInfoFillIcon at the top of the file if not already imported.
In `@packages/react-core/src/demos/Tabs.md`:
- Line 8: The import for the icon uses the CommonJS path; update the
RhUiInformationFillIcon import to use the ESM package to match other imports in
this file—replace the current
'@patternfly/react-icons/dist/js/icons/rh-ui-information-fill-icon' import with
the ESM path
'@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon' so module
targets remain consistent (locate the import of RhUiInformationFillIcon in
Tabs.md and change its module path).
---
Outside diff comments:
In `@packages/react-core/src/components/Button/examples/ButtonCircle.tsx`:
- Line 16: The file ButtonCircle.tsx uses the React hook useState (const
[isUploading, setIsUploading] = useState<boolean>(false)) but does not import
it; add useState as a named import from 'react' (either by updating an existing
import React, { useState } from 'react' or adding a separate import { useState }
from 'react') so the useState hook is available at runtime.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: bb83a1b4-4af4-4076-ae18-61c272757df8
⛔ Files ignored due to path filters (11)
packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertIcon.test.tsx.snapis excluded by!**/*.snap,!**/generated/**packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/NotificationBadge/__tests__/__snapshots__/NotificationBadge.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerListItemHeader.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/NumberInput/__tests__/__snapshots__/NumberInput.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/Progress/__tests__/Generated/__snapshots__/ProgressContainer.test.tsx.snapis excluded by!**/*.snap,!**/generated/**packages/react-core/src/components/Progress/__tests__/__snapshots__/Progress.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/TextInput/__tests__/__snapshots__/TextInput.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/deprecated/components/Modal/__tests__/__snapshots__/ModalBoxTitle.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (102)
packages/code-connect/components/PopOver/Popover.figma.tsxpackages/react-core/src/components/Alert/AlertIcon.tsxpackages/react-core/src/components/Alert/__tests__/AlertIcon.test.tsxpackages/react-core/src/components/Banner/examples/Banner.mdpackages/react-core/src/components/Banner/examples/BannerStatus.tsxpackages/react-core/src/components/Button/examples/Button.mdpackages/react-core/src/components/Button/examples/ButtonCircle.tsxpackages/react-core/src/components/Button/examples/ButtonStateful.tsxpackages/react-core/src/components/Button/examples/ButtonVariations.tsxpackages/react-core/src/components/EmptyState/examples/EmptyState.mdpackages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsxpackages/react-core/src/components/ExpandableSection/examples/ExpandableSection.mdpackages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsxpackages/react-core/src/components/ExpandableSection/examples/ExpandableSectionWithHeading.tsxpackages/react-core/src/components/FileUpload/examples/FileUpload.mdpackages/react-core/src/components/Form/examples/Form.mdpackages/react-core/src/components/Form/examples/FormInvalid.tsxpackages/react-core/src/components/Form/examples/FormInvalidWithFormAlert.tsxpackages/react-core/src/components/Form/examples/FormState.tsxpackages/react-core/src/components/Form/examples/FormValidated.tsxpackages/react-core/src/components/FormControl/FormControlIcon.tsxpackages/react-core/src/components/HelperText/HelperTextItem.tsxpackages/react-core/src/components/Icon/examples/Icon.mdpackages/react-core/src/components/Icon/examples/IconCustomProgress.tsxpackages/react-core/src/components/Icon/examples/IconProgress.tsxpackages/react-core/src/components/Icon/examples/IconStatus.tsxpackages/react-core/src/components/Label/Label.tsxpackages/react-core/src/components/Label/examples/Label.mdpackages/react-core/src/components/Label/examples/LabelCompact.tsxpackages/react-core/src/components/Label/examples/LabelCustomRender.tsxpackages/react-core/src/components/Label/examples/LabelGroupBasic.tsxpackages/react-core/src/components/Label/examples/LabelGroupCategory.tsxpackages/react-core/src/components/Label/examples/LabelGroupCategoryRemovable.tsxpackages/react-core/src/components/Label/examples/LabelGroupEditableAddModal.tsxpackages/react-core/src/components/Label/examples/LabelGroupOverflow.tsxpackages/react-core/src/components/Label/examples/LabelGroupVerticalCategoryOverflowRemovable.tsxpackages/react-core/src/components/LoginPage/examples/LoginPage.mdpackages/react-core/src/components/LoginPage/examples/LoginPageBasic.tsxpackages/react-core/src/components/LoginPage/examples/LoginPageLanguageSelect.tsxpackages/react-core/src/components/LoginPage/examples/LoginPageShowHidePassword.tsxpackages/react-core/src/components/Menu/examples/Menu.mdpackages/react-core/src/components/Menu/examples/MenuWithActions.tsxpackages/react-core/src/components/Menu/examples/MenuWithFavorites.tsxpackages/react-core/src/components/MenuToggle/MenuToggle.tsxpackages/react-core/src/components/Modal/ModalBoxTitle.tsxpackages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatus.tsxpackages/react-core/src/components/NotificationBadge/NotificationBadge.tsxpackages/react-core/src/components/NotificationBadge/examples/NotificationBadge.mdpackages/react-core/src/components/NotificationDrawer/NotificationDrawerListItemHeader.tsxpackages/react-core/src/components/NotificationDrawer/__tests__/NotificationDrawerListItemHeader.test.tsxpackages/react-core/src/components/Popover/examples/Popover.mdpackages/react-core/src/components/Popover/examples/PopoverAlert.tsxpackages/react-core/src/components/Progress/ProgressContainer.tsxpackages/react-core/src/components/ProgressStepper/ProgressStep.tsxpackages/react-core/src/components/ProgressStepper/__tests__/ProgressStep.test.tsxpackages/react-core/src/components/Select/examples/Select.mdpackages/react-core/src/components/Select/examples/SelectOptionVariations.tsxpackages/react-core/src/components/Wizard/WizardNavItem.tsxpackages/react-core/src/components/Wizard/WizardToggle.tsxpackages/react-core/src/demos/Button/Button.mdpackages/react-core/src/demos/Button/examples/ButtonProgress.tsxpackages/react-core/src/demos/CardDemos.mdpackages/react-core/src/demos/CustomMenus/CustomMenus.mdpackages/react-core/src/demos/CustomMenus/examples/ActionsMenuDemo.tsxpackages/react-core/src/demos/DataList/examples/DataListBasic.tsxpackages/react-core/src/demos/DataListDemo.mdpackages/react-core/src/demos/DescriptionList/DescriptionList.mdpackages/react-core/src/demos/DescriptionList/examples/DescriptionListBasic.tsxpackages/react-core/src/demos/HelperText.mdpackages/react-core/src/demos/LabelGroupDemos.mdpackages/react-core/src/demos/Masthead.mdpackages/react-core/src/demos/Nav.mdpackages/react-core/src/demos/NotificationDrawer/NotificationDrawer.mdpackages/react-core/src/demos/Page.mdpackages/react-core/src/demos/PasswordStrength.mdpackages/react-core/src/demos/PrimaryDetail.mdpackages/react-core/src/demos/Tabs.mdpackages/react-core/src/demos/examples/Card/CardAggregateStatus.tsxpackages/react-core/src/demos/examples/Card/CardEventsView.tsxpackages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsxpackages/react-core/src/demos/examples/Card/CardStatus.tsxpackages/react-core/src/demos/examples/Card/CardStatusTabbed.tsxpackages/react-core/src/demos/examples/Card/CardUtilizationDemo3.tsxpackages/react-core/src/demos/examples/PasswordStrength/PasswordStrengthDemo.tsxpackages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailContentPadding.tsxpackages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailFullPage.tsxpackages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailInlineModifier.tsxpackages/react-core/src/demos/examples/Tabs/TabsOpen.tsxpackages/react-core/src/demos/examples/Tabs/TabsOpenWithSecondaryTabs.tsxpackages/react-core/src/deprecated/components/Modal/ModalBoxTitle.tsxpackages/react-core/src/deprecated/components/Tile/examples/Tile.mdpackages/react-core/src/deprecated/components/Tile/examples/TileStacked.tsxpackages/react-core/src/deprecated/components/Tile/examples/TileStackedWithLargeIcons.tsxpackages/react-core/src/deprecated/components/Tile/examples/TileWithExtraContent.tsxpackages/react-core/src/helpers/constants.tspackages/react-icons/scripts/icons/pfToRhIcons.mjspackages/react-integration/demo-app-ts/src/components/demos/FormDemo/FormDemo.tsxpackages/react-integration/demo-app-ts/src/components/demos/LabelDemo/LabelDemo.tsxpackages/react-integration/demo-app-ts/src/components/demos/LoginPageDemo/LoginPageDemo.tsxpackages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsxpackages/react-table/src/demos/Table.mdpackages/react-table/src/demos/examples/TableEmptyStateError.tsx
💤 Files with no reviewable changes (2)
- packages/react-core/src/components/EmptyState/examples/EmptyState.md
- packages/react-core/src/components/FileUpload/examples/FileUpload.md
| 3 | ||
| </Label> | ||
| <Label color="blue" icon={<ExclamationCircleIcon />}> | ||
| <Label color="blue" icon={<RhUiErrorFillIcon />}> |
There was a problem hiding this comment.
Blue status label is using an error icon; likely wrong semantic mapping.
<Label color="blue" ...> currently renders RhUiErrorFillIcon, which conflicts with the blue/info status convention used elsewhere in this migration.
Suggested fix
import RhUiWarningFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-warning-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-information-fill-icon';
...
- <Label color="blue" icon={<RhUiErrorFillIcon />}>
+ <Label color="blue" icon={<RhUiInformationFillIcon />}>
3
</Label>🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/react-core/src/demos/examples/Card/CardStatus.tsx` at line 218, The
blue status Label in CardStatus.tsx is using RhUiErrorFillIcon which is
semantically incorrect; update the JSX where Label color="blue" and
icon={<RhUiErrorFillIcon />} to use the info icon (e.g., replace
RhUiErrorFillIcon with RhUiInfoFillIcon or the designated info icon export) so
the icon matches the blue/info status convention, and ensure you import the
chosen RhUiInfoFillIcon at the top of the file if not already imported.
Contributor
There was a problem hiding this comment.
Can we actually just update all these Labels in this demo to use the status prop instead of the color prop?
There was a problem hiding this comment.
@thatblindgeye, great idea! Using status on Label also fixes the original semantic mismatch (the blue label was incorrectly using the error icon) since the component's built-in statusIcons mapping already handles the correct icon per status. We can also drop the icon prop entirely and remove the two imports that become unused.
- Replace all five
color+iconLabel combos withstatusindrawerTitle - Remove the now-unused
RhUiWarningFillIconandRhUiNotificationFillIconimports (still needed elsewhere:RhUiCheckCircleFillIconandRhUiErrorFillIcon)
🧠 Learnings used
Learnt from: arpanroy41
Repo: patternfly/patternfly-react PR: 12237
File: packages/react-core/src/components/Toolbar/examples/ToolbarFlexGrowAndWidths.tsx:6-6
Timestamp: 2026-02-06T19:58:49.801Z
Learning: In the PatternFly React repository, React may be used without an explicit import in TSX files because React is provided globally by the build configuration. You can reference React types (e.g., React.FunctionComponent, React.ReactNode) without importing React. Do not add 'import React from 'react'' in TSX files; rely on the global React availability.
Failed to handle agent chat message. Please try again.
| import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon'; | ||
| import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; | ||
| import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; | ||
| import RhUiInformationFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-information-fill-icon'; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Find mixed react-icons module path usage in markdown demos/examples
rg -n "@patternfly/react-icons/dist/(js|esm)/icons/" packages/react-core/src/demos packages/react-core/src/components --glob "*.md" --glob "*.tsx"Repository: patternfly/patternfly-react
Length of output: 50384
🏁 Script executed:
# Check if the file exists and examine it
if [ -f "packages/react-core/src/demos/Tabs.md" ]; then
echo "=== File found: packages/react-core/src/demos/Tabs.md ==="
wc -l "packages/react-core/src/demos/Tabs.md"
echo ""
echo "=== First 15 lines ==="
head -15 "packages/react-core/src/demos/Tabs.md"
else
echo "File not found at packages/react-core/src/demos/Tabs.md"
echo ""
echo "Searching for Tabs.md files in the repository:"
find . -name "Tabs.md" -type f
fiRepository: patternfly/patternfly-react
Length of output: 1074
Use the ESM icon path to maintain consistent module targets.
Line 8 imports from dist/js while all other icon imports in this file use dist/esm, which can cause module resolution inconsistency during bundling.
Suggested fix
-import RhUiInformationFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-information-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
Suggested change
| import RhUiInformationFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-information-fill-icon'; | |
| import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon'; |
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/react-core/src/demos/Tabs.md` at line 8, The import for the icon
uses the CommonJS path; update the RhUiInformationFillIcon import to use the ESM
package to match other imports in this file—replace the current
'@patternfly/react-icons/dist/js/icons/rh-ui-information-fill-icon' import with
the ESM path
'@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon' so module
targets remain consistent (locate the import of RhUiInformationFillIcon in
Tabs.md and change its module path).
Contributor
thatblindgeye
left a comment
thatblindgeye
left a comment
There was a problem hiding this comment.
Overall lgtm. I edited this core issue patternfly/patternfly#8127 to mention some additional areas in Core where status icon updates still need to be made thanks to you updating them here.
Only thing is I think the above comments from CodeRabbit should be addressed (also left a reply to the 1st one)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What: Closes #12260
Updated the following icons:
CheckCircleIcontoRhUiCheckCircleFillIconExclamationTriangleIcontoRhUiWarningFillIconExclamationCircleIcontoRhUiErrorFillIconInfoCircleIcontoRhUiInformationFillIconBellIcontoRhUiNotificationFillIconAlso went and updated
AttentionBellIcontoRhUiAttentionBellFillIconinNotificationBadgesince that was similar to the new bell icon.Finally, also updated the
pfToRhIconsmapping in react-icons to use the fill versions for consistency.