feat(icons): updated caret icons to RH microns#12298
Open
thatblindgeye wants to merge 2 commits intopatternfly:mainfrom
Open
feat(icons): updated caret icons to RH microns#12298thatblindgeye wants to merge 2 commits intopatternfly:mainfrom
thatblindgeye wants to merge 2 commits intopatternfly:mainfrom
Conversation
WalkthroughThis PR systematically replaces caret icon components across the PatternFly React library, removing AngleLeftIcon, AngleRightIcon, AngleDownIcon, and AngleUpIcon in favor of their RhMicronsCaret equivalents (RhMicronsCaretLeftIcon, RhMicronsCaretRightIcon, RhMicronsCaretDownIcon, RhMicronsCaretUpIcon). Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~20 minutes Possibly related issues
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-12298.surge.sh A11y report: https://pf-react-pr-12298-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: 4
🧹 Nitpick comments (1)
packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx (1)
220-220: Consider centralizing the default expandable caret icon.
ExpandableSectionnow defaultstoggleIconvia props, whileExpandableSectionToggle(detached mode) still hardcodes its own icon. Keeping both wired to one shared constant would reduce drift risk in future icon updates.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx` at line 220, The default caret icon is duplicated: ExpandableSection sets toggleIcon inline while ExpandableSectionToggle hardcodes its own icon; create a single exported constant (e.g., DEFAULT_TOGGLE_ICON) and use it in both places so both ExpandableSection's default prop and ExpandableSectionToggle reference the same symbol (update ExpandableSection's prop default and Replace the hardcoded icon in ExpandableSectionToggle with DEFAULT_TOGGLE_ICON).
🤖 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/components/Icon/examples/Icon.md`:
- Around line 10-11: The imports in Icon.md for RhMicronsCaretRightIcon and
RhMicronsCaretDownIcon will fail because the mappings in pfToRhIcons.mjs for the
rh-microns-caret icons are commented out; either re-enable those mappings in
pfToRhIcons.mjs so the rh-microns-caret-right-icon and
rh-microns-caret-down-icon modules are generated from rhIconsMicrons.mjs, or
update Icon.md to import the active icons RhUiCaretRightIcon and
RhUiCaretDownIcon (using rh-ui-caret-right and rh-ui-caret-down) which map to
CaretRightIcon and CaretDownIcon. Ensure you modify either pfToRhIcons.mjs
(uncomment mappings for CaretRightIcon/CaretDownIcon) or Icon.md (change import
identifiers and module names to the rh-ui-caret variants).
In `@packages/react-core/src/components/Icon/examples/IconBasic.tsx`:
- Around line 4-5: The project imports RhMicronsCaretRightIcon and
RhMicronsCaretDownIcon in IconBasic.tsx but the corresponding mappings in
pfToRhIcons.mjs are commented out, preventing export; open pfToRhIcons.mjs and
uncomment the mappings that bind CaretLeftIcon, CaretRightIcon, and CaretUpIcon
to their rh-microns variants (matching the definitions in rhIconsMicrons.mjs) so
the rh-microns-caret-right and rh-microns-caret-down icons are exported and
available to IconBasic.tsx, or alternatively replace those imports in
IconBasic.tsx with available PF icon symbols if you prefer not to re-enable the
mappings.
In `@packages/react-core/src/deprecated/components/Wizard/WizardToggle.tsx`:
- Line 91: The deprecated WizardToggle component currently applies the
wizardToggleSeparator class directly to RhMicronsCaretRightIcon; update the JSX
in the WizardToggle (the conditional rendering using activeStepSubName and
RhMicronsCaretRightIcon) to wrap the icon in a span element with
className={css(styles.wizardToggleSeparator)} and render the icon inside that
span (remove the className from RhMicronsCaretRightIcon), matching the
non-deprecated WizardToggle pattern.
In `@packages/react-table/src/components/Table/utils/decorators/treeRow.tsx`:
- Line 7: The current import uses the microns caret icon; replace the import of
RhMicronsCaretDownIcon from
'@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon' with
RhUiCaretDownIcon imported from
'@patternfly/react-icons/dist/esm/icons/rh-ui-caret-down-icon' and update any
usages/JSX that reference RhMicronsCaretDownIcon (e.g., the tree row
expand/collapse renderer or component that renders the caret) to use
RhUiCaretDownIcon so the correct UI icon (rh-ui-caret-down) and its dimensions
are used.
---
Nitpick comments:
In `@packages/react-core/src/components/ExpandableSection/ExpandableSection.tsx`:
- Line 220: The default caret icon is duplicated: ExpandableSection sets
toggleIcon inline while ExpandableSectionToggle hardcodes its own icon; create a
single exported constant (e.g., DEFAULT_TOGGLE_ICON) and use it in both places
so both ExpandableSection's default prop and ExpandableSectionToggle reference
the same symbol (update ExpandableSection's prop default and Replace the
hardcoded icon in ExpandableSectionToggle with DEFAULT_TOGGLE_ICON).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 16b39385-e4cb-40ba-9438-c4291a374fc4
⛔ Files ignored due to path filters (21)
packages/react-core/src/components/BackToTop/__tests__/__snapshots__/BackToTop.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/Breadcrumb/__tests__/__snapshots__/Breadcrumb.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/Card/__tests__/__snapshots__/CardHeader.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snapis excluded by!**/*.snap,!**/generated/**packages/react-core/src/components/DataList/__tests__/__snapshots__/DataListToggle.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/ExpandableSection/__tests__/__snapshots__/ExpandableSection.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/Form/__tests__/__snapshots__/FormFieldGroup.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/JumpLinks/__tests__/__snapshots__/JumpLinks.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatus.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/Nav/__tests__/Generated/__snapshots__/NavExpandable.test.tsx.snapis excluded by!**/*.snap,!**/generated/**packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/NotificationDrawer/__tests__/__snapshots__/NotificationDrawerGroup.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/Page/__tests__/__snapshots__/Page.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/Tabs/__tests__/__snapshots__/OverflowTab.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/Tabs/__tests__/__snapshots__/Tabs.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/components/TreeView/__tests__/__snapshots__/TreeViewListItem.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snapis excluded by!**/*.snappackages/react-core/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snapis excluded by!**/*.snappackages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snapis excluded by!**/*.snap
📒 Files selected for processing (43)
packages/code-connect/components/Breadcrumbs/ExpandableBreadcrumbs.figma.tsxpackages/react-core/src/components/Accordion/AccordionToggle.tsxpackages/react-core/src/components/Accordion/__tests__/AccordionToggle.test.tsxpackages/react-core/src/components/Alert/AlertToggleExpandButton.tsxpackages/react-core/src/components/Alert/__tests__/AlertToggleExpandButton.test.tsxpackages/react-core/src/components/BackToTop/BackToTop.tsxpackages/react-core/src/components/Breadcrumb/BreadcrumbHeading.tsxpackages/react-core/src/components/Breadcrumb/BreadcrumbItem.tsxpackages/react-core/src/components/Breadcrumb/examples/Breadcrumb.mdpackages/react-core/src/components/Breadcrumb/examples/BreadcrumbDropdown.tsxpackages/react-core/src/components/CalendarMonth/CalendarMonth.tsxpackages/react-core/src/components/Card/CardHeader.tsxpackages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsxpackages/react-core/src/components/DataList/DataListToggle.tsxpackages/react-core/src/components/DataList/examples/DataList.mdpackages/react-core/src/components/DualListSelector/DualListSelectorTreeItem.tsxpackages/react-core/src/components/ExpandableSection/ExpandableSection.tsxpackages/react-core/src/components/ExpandableSection/ExpandableSectionToggle.tsxpackages/react-core/src/components/Form/FormFieldGroupToggle.tsxpackages/react-core/src/components/Icon/examples/Icon.mdpackages/react-core/src/components/Icon/examples/IconBasic.tsxpackages/react-core/src/components/JumpLinks/JumpLinks.tsxpackages/react-core/src/components/Menu/MenuItem.tsxpackages/react-core/src/components/Menu/examples/Menu.mdpackages/react-core/src/components/Menu/examples/MenuWithDrilldownBreadcrumbs.tsxpackages/react-core/src/components/Nav/NavExpandable.tsxpackages/react-core/src/components/Nav/NavItem.tsxpackages/react-core/src/components/Nav/NavList.tsxpackages/react-core/src/components/NotificationDrawer/NotificationDrawerGroup.tsxpackages/react-core/src/components/Tabs/OverflowTab.tsxpackages/react-core/src/components/Tabs/Tabs.tsxpackages/react-core/src/components/TreeView/TreeViewListItem.tsxpackages/react-core/src/components/Wizard/WizardNavItem.tsxpackages/react-core/src/components/Wizard/WizardToggle.tsxpackages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsxpackages/react-core/src/demos/DataListDemo.mdpackages/react-core/src/deprecated/components/DualListSelector/DualListSelectorTreeItem.tsxpackages/react-core/src/deprecated/components/Wizard/WizardNavItem.tsxpackages/react-core/src/deprecated/components/Wizard/WizardToggle.tsxpackages/react-integration/demo-app-ts/src/components/demos/BreadcrumbDemo/BreadcrumbDemo.tsxpackages/react-table/src/components/Table/CollapseColumn.tsxpackages/react-table/src/components/Table/utils/decorators/treeRow.tsxpackages/react-table/src/demos/Table.md
Comment on lines
+10
to
+11
| 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'; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Check if rh-microns-caret icon files exist in the react-icons package
# Check for the icon files
fd -t f 'rh-microns-caret-right-icon' packages/react-icons
fd -t f 'rh-microns-caret-down-icon' packages/react-icons
# Also check the mapping configuration
echo "=== Mapping file status ==="
cat packages/react-icons/scripts/icons/pfToRhIcons.mjs | grep -A2 -B2 'rh-microns-caret'Repository: patternfly/patternfly-react
Length of output: 752
🏁 Script executed:
#!/bin/bash
# 1. Search for any files containing 'rh-microns-caret' in the dist directory
echo "=== Searching for rh-microns-caret files in dist ==="
fd -t f 'rh-microns-caret' packages/react-icons/dist 2>/dev/null || echo "No matches found in dist"
# 2. Check the complete pfToRhIcons.mjs file to see all caret mappings
echo -e "\n=== All caret-related mappings in pfToRhIcons.mjs ==="
grep -i 'caret' packages/react-icons/scripts/icons/pfToRhIcons.mjs | head -20
# 3. Search for icon files directory structure
echo -e "\n=== ESM icons directory structure ==="
ls -la packages/react-icons/dist/esm/icons/ 2>/dev/null | grep caret || echo "No caret files found"
# 4. Check if the icons package even exists and has the expected structure
echo -e "\n=== Checking packages/react-icons structure ==="
ls packages/react-icons/dist/esm/ 2>/dev/null | head -10Repository: patternfly/patternfly-react
Length of output: 2003
🏁 Script executed:
#!/bin/bash
# 1. Check for rh-ui-caret icon files
echo "=== Checking for rh-ui-caret icon files ==="
fd 'rh-ui-caret-right-icon|rh-ui-caret-down-icon' packages/react-icons/dist/esm/icons/
# 2. Look at more context of Icon.md to understand the intent
echo -e "\n=== Icon.md file context (lines 1-30) ==="
head -30 packages/react-core/src/components/Icon/examples/Icon.md
# 3. Check what this example is doing with these icons
echo -e "\n=== Icon.md context around lines 10-11 (showing 30 lines) ==="
sed -n '1,50p' packages/react-core/src/components/Icon/examples/Icon.mdRepository: patternfly/patternfly-react
Length of output: 3265
🏁 Script executed:
#!/bin/bash
# Check if dist directory exists and what the actual structure is
echo "=== React-icons package structure ==="
ls -la packages/react-icons/ | head -20
# Check if there's a src or source directory with icon definitions
echo -e "\n=== Searching for icon sources ==="
find packages/react-icons -name "*.tsx" -o -name "*.ts" -o -name "*.jsx" -o -name "*.js" 2>/dev/null | grep -i "caret" | head -10
# Check the actual Icon imports being used in other example files to understand the pattern
echo -e "\n=== Other icon imports in Icon examples ==="
grep -h "import.*Icon from.*react-icons" packages/react-core/src/components/Icon/examples/*.md | sort | uniq | head -15Repository: patternfly/patternfly-react
Length of output: 1863
🏁 Script executed:
#!/bin/bash
# Check the src directory structure
echo "=== React-icons src directory structure ==="
ls -la packages/react-icons/src/
# Look for any caret-related icon definitions in src
echo -e "\n=== Searching for caret icon definitions in src ==="
find packages/react-icons/src -type f | head -20
# Check if there are icon files in src directory
echo -e "\n=== Icon files in react-icons/src ==="
ls packages/react-icons/src/ 2>/dev/null || echo "src directory empty or missing"
# Check git status to see what changed in this PR
echo -e "\n=== Git status of Icon.md ==="
git diff packages/react-core/src/components/Icon/examples/Icon.md 2>/dev/null | head -50 || echo "No git diff available"Repository: patternfly/patternfly-react
Length of output: 693
🏁 Script executed:
#!/bin/bash
# Check the scripts directory where icon mappings are handled
echo "=== React-icons scripts directory ==="
ls -la packages/react-icons/scripts/
# Check what's in the icons scripts subdirectory
echo -e "\n=== Icons script contents ==="
ls -la packages/react-icons/scripts/icons/
# Look at the complete pfToRhIcons.mjs to understand which icons are actually available
echo -e "\n=== Active (non-commented) caret mappings in pfToRhIcons.mjs ==="
grep 'CaretRightIcon\|CaretDownIcon' packages/react-icons/scripts/icons/pfToRhIcons.mjs | grep -v '//'
# Check git log to see if rh-microns-caret icons were recently added/changed
echo -e "\n=== Recent changes to pfToRhIcons.mjs ==="
git log --oneline -n 10 packages/react-icons/scripts/icons/pfToRhIcons.mjs 2>/dev/null || echo "Git log not available"
# Look for any npm or build scripts that generate the icons
echo -e "\n=== Package.json scripts ==="
grep -A 20 '"scripts"' packages/react-icons/package.jsonRepository: patternfly/patternfly-react
Length of output: 2493
🏁 Script executed:
#!/bin/bash
# Check if rh-microns-caret icons are defined in rhIconsMicrons.mjs
echo "=== Searching for rh-microns-caret in rhIconsMicrons.mjs ==="
grep -i 'rh-microns-caret' packages/react-icons/scripts/icons/rhIconsMicrons.mjs | head -10
# Check the size and content overview of rhIconsMicrons.mjs
echo -e "\n=== First 30 lines of rhIconsMicrons.mjs ==="
head -30 packages/react-icons/scripts/icons/rhIconsMicrons.mjs
# Check git diff to see what changed in this commit for caret icons
echo -e "\n=== Git diff for caret-related changes ==="
git log -1 --stat 5f76cd3a 2>/dev/null | head -20
# Check the actual diff for the specific commit
echo -e "\n=== Details of caret updates in latest commit ==="
git show 5f76cd3a --name-only 2>/dev/null || echo "Unable to fetch git show"Repository: patternfly/patternfly-react
Length of output: 50384
🏁 Script executed:
#!/bin/bash
# Get the specific diff for Icon.md in the commit
echo "=== Git diff for Icon.md in the commit ==="
git show 5f76cd3a -- packages/react-core/src/components/Icon/examples/Icon.md 2>/dev/null | head -100
# Also check if these icon files would be generated
echo -e "\n=== Checking if rh-microns-caret icons should be in export ==="
grep -r "rh-microns-caret" packages/react-icons/scripts/ --include="*.mjs" | grep -v "^//" | head -20Repository: patternfly/patternfly-react
Length of output: 4179
The rh-microns-caret icon imports will fail because the export mappings are disabled.
While the icon data exists in rhIconsMicrons.mjs, the mappings for CaretRightIcon and CaretDownIcon in pfToRhIcons.mjs are commented out. This prevents the build process from generating the rh-microns-caret-right-icon and rh-microns-caret-down-icon files in the distribution. The imports at lines 10-11 will fail at build or runtime.
Either:
- Uncomment the rh-microns-caret mappings in
pfToRhIcons.mjs, or - Change Icon.md to use the active caret icons:
rh-ui-caret-rightandrh-ui-caret-down(which map toCaretRightIconandCaretDownIcon)
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/react-core/src/components/Icon/examples/Icon.md` around lines 10 -
11, The imports in Icon.md for RhMicronsCaretRightIcon and
RhMicronsCaretDownIcon will fail because the mappings in pfToRhIcons.mjs for the
rh-microns-caret icons are commented out; either re-enable those mappings in
pfToRhIcons.mjs so the rh-microns-caret-right-icon and
rh-microns-caret-down-icon modules are generated from rhIconsMicrons.mjs, or
update Icon.md to import the active icons RhUiCaretRightIcon and
RhUiCaretDownIcon (using rh-ui-caret-right and rh-ui-caret-down) which map to
CaretRightIcon and CaretDownIcon. Ensure you modify either pfToRhIcons.mjs
(uncomment mappings for CaretRightIcon/CaretDownIcon) or Icon.md (change import
identifiers and module names to the rh-ui-caret variants).
Comment on lines
+4
to
+5
| 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'; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Verify rh-microns-caret icon files are available
# Search for the icon source files
fd -t f 'rh-microns-caret-right-icon' packages/react-icons
fd -t f 'rh-microns-caret-down-icon' packages/react-icons
# Check if the icons are exported from the package
echo "=== Checking package exports ==="
rg -n "rh-microns-caret-(right|down)" packages/react-icons/dist/esm/icons/ 2>/dev/null || echo "Icon files not found in dist"Repository: patternfly/patternfly-react
Length of output: 132
🏁 Script executed:
# Locate and examine pfToRhIcons.mjs
find . -name "pfToRhIcons.mjs" -type fRepository: patternfly/patternfly-react
Length of output: 123
🏁 Script executed:
# Check the IconBasic.tsx file to see the exact imports
cat -n packages/react-core/src/components/Icon/examples/IconBasic.tsx | head -20Repository: patternfly/patternfly-react
Length of output: 955
🏁 Script executed:
# Search for the mapping configuration to understand the icon mapping
rg -n "rh-microns-caret" --type mjsRepository: patternfly/patternfly-react
Length of output: 98
🏁 Script executed:
# Read the pfToRhIcons.mjs file
cat packages/react-icons/scripts/icons/pfToRhIcons.mjsRepository: patternfly/patternfly-react
Length of output: 26546
🏁 Script executed:
# Search for rh-microns-caret without file type restriction
rg -n "rh-microns-caret"Repository: patternfly/patternfly-react
Length of output: 10306
The rh-microns-caret icon mappings must be uncommented in pfToRhIcons.mjs before merging.
The icon definitions for rh-microns-caret-right and rh-microns-caret-down exist in rhIconsMicrons.mjs, but the corresponding mappings in pfToRhIcons.mjs (lines 263-265) are commented out. This prevents these icons from being exported and available in the built package. The code in IconBasic.tsx imports these icons, but they are not accessible. Uncomment the mappings for CaretLeftIcon, CaretRightIcon, and CaretUpIcon using the rh-microns variants, or use alternative icons, before merging.
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/react-core/src/components/Icon/examples/IconBasic.tsx` around lines
4 - 5, The project imports RhMicronsCaretRightIcon and RhMicronsCaretDownIcon in
IconBasic.tsx but the corresponding mappings in pfToRhIcons.mjs are commented
out, preventing export; open pfToRhIcons.mjs and uncomment the mappings that
bind CaretLeftIcon, CaretRightIcon, and CaretUpIcon to their rh-microns variants
(matching the definitions in rhIconsMicrons.mjs) so the rh-microns-caret-right
and rh-microns-caret-down icons are exported and available to IconBasic.tsx, or
alternatively replace those imports in IconBasic.tsx with available PF icon
symbols if you prefer not to re-enable the mappings.
| <span className={css(styles.wizardToggleListItem)}> | ||
| <span className={css(styles.wizardToggleNum)}>{activeStepIndex}</span> {activeStepName} | ||
| {activeStepSubName && <AngleRightIcon className={css(styles.wizardToggleSeparator)} />} | ||
| {activeStepSubName && <RhMicronsCaretRightIcon className={css(styles.wizardToggleSeparator)} />} |
There was a problem hiding this comment.
Inconsistent implementation: icon should be wrapped in a span element.
Per PR objectives (Issue #12261), the wizard toggle separator should wrap the icon with the correct class:
<span class="wizard__toggle-separator">icon</span>The non-deprecated WizardToggle.tsx (lines 115-119) correctly implements this pattern. This deprecated version applies the class directly to the icon instead.
Proposed fix to wrap icon in span
- {activeStepSubName && <RhMicronsCaretRightIcon className={css(styles.wizardToggleSeparator)} />}
+ {activeStepSubName && (
+ <span className={css(styles.wizardToggleSeparator)}>
+ <RhMicronsCaretRightIcon />
+ </span>
+ )}🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/react-core/src/deprecated/components/Wizard/WizardToggle.tsx` at
line 91, The deprecated WizardToggle component currently applies the
wizardToggleSeparator class directly to RhMicronsCaretRightIcon; update the JSX
in the WizardToggle (the conditional rendering using activeStepSubName and
RhMicronsCaretRightIcon) to wrap the icon in a span element with
className={css(styles.wizardToggleSeparator)} and render the icon inside that
span (remove the className from RhMicronsCaretRightIcon), matching the
non-deprecated WizardToggle pattern.
| import { Button } from '@patternfly/react-core/dist/esm/components/Button'; | ||
| import { Checkbox } from '@patternfly/react-core/dist/esm/components/Checkbox'; | ||
| import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon'; | ||
| import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon'; |
There was a problem hiding this comment.
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Description: Confirm RhMicronsCaretDownIcon export exists in `@patternfly/react-icons`
# Check if the icon file exists
fd -t f "rh-microns-caret-down-icon" packages/react-icons
# Search for the export in the package
rg -n "RhMicronsCaretDownIcon" packages/react-icons --type=ts --type=tsx -C 2Repository: patternfly/patternfly-react
Length of output: 98
🏁 Script executed:
#!/bin/bash
# Description: Confirm RhMicronsCaretDownIcon export exists in `@patternfly/react-icons`
# Check if the icon file exists
fd -t f "rh-microns-caret-down-icon" packages/react-icons
# Search for the export in the package using only 'ts' file type
rg -n "RhMicronsCaretDownIcon" packages/react-icons --type=ts -C 2
# Also check the dist/esm path specifically
find packages/react-icons -name "*rh-microns-caret-down*" 2>/dev/nullRepository: patternfly/patternfly-react
Length of output: 53
🏁 Script executed:
#!/bin/bash
# Check the actual content of treeRow.tsx to see what's really there
cat packages/react-table/src/components/Table/utils/decorators/treeRow.tsx | head -20
echo "---"
# Check what caret/angle icons exist in react-icons
find packages/react-icons/dist/esm/icons -type f -name "*caret*" -o -name "*angle*" | head -20
echo "---"
# List available icons with 'microns' in name
find packages/react-icons/dist/esm/icons -type f -name "*microns*" | head -10Repository: patternfly/patternfly-react
Length of output: 1299
🏁 Script executed:
#!/bin/bash
# Check the actual structure of react-icons package
ls -la packages/react-icons/ | head -20
echo "---"
# Look for icon sources
find packages/react-icons -type f -name "*caret*" -o -name "*angle*" 2>/dev/null | head -20
echo "---"
# Check for microns icons
find packages/react-icons -type f -name "*microns*" 2>/dev/null | head -20
echo "---"
# Look at the src/icons structure
ls packages/react-icons/src/icons/ 2>/dev/null | grep -i caret | head -10
ls packages/react-icons/src/icons/ 2>/dev/null | grep -i angle | head -10
ls packages/react-icons/src/icons/ 2>/dev/null | grep -i microns | head -10Repository: patternfly/patternfly-react
Length of output: 838
🏁 Script executed:
#!/bin/bash
# List what's in src/icons directory
ls packages/react-icons/src/icons/ 2>/dev/null | head -30
echo "---"
# Count total icon files
find packages/react-icons/src/icons -type f | wc -l
echo "---"
# Search for angle-down or caret icons
ls packages/react-icons/src/icons/ 2>/dev/null | grep -E "(angle|caret)"
echo "---"
# Search for any existing down arrow type icons
ls packages/react-icons/src/icons/ 2>/dev/null | grep -i "down" | head -10Repository: patternfly/patternfly-react
Length of output: 167
🏁 Script executed:
#!/bin/bash
# Check what's actually in packages/react-icons/src
ls -la packages/react-icons/src/
echo "---"
# Check the full tree structure
tree -L 3 packages/react-icons/ 2>/dev/null || find packages/react-icons -type d | head -20Repository: patternfly/patternfly-react
Length of output: 1005
🏁 Script executed:
#!/bin/bash
# Check if caret-down is defined in rhIconsMicrons
cat packages/react-icons/scripts/icons/rhIconsMicrons.mjs | grep -i "caret" -C 3
echo "---"
# Check pfToRhIcons for angle-down mapping
cat packages/react-icons/scripts/icons/pfToRhIcons.mjs | grep -i "angle" -C 3
echo "---"
# Check the full content of rhIconsMicrons to understand structure
wc -l packages/react-icons/scripts/icons/rhIconsMicrons.mjs
echo "---"
# Look at the beginning of the file to understand format
head -30 packages/react-icons/scripts/icons/rhIconsMicrons.mjsRepository: patternfly/patternfly-react
Length of output: 5586
🏁 Script executed:
#!/bin/bash
# Check if rh-ui-caret-down exists in rhIconsUI
cat packages/react-icons/scripts/icons/rhIconsUI.mjs | grep -i "rh-ui-caret-down" -A 6 | head -20
echo "---"
# Check the pattern: are microns or ui icons used elsewhere in react-table?
rg "RhMicrons|RhUi" packages/react-table/src/components/Table --type=ts
echo "---"
# Check what the current/old import was (before this change)
git log -p --all -S "AngleDownIcon" -- packages/react-table/src/components/Table/utils/decorators/treeRow.tsx | head -100Repository: patternfly/patternfly-react
Length of output: 1177
🏁 Script executed:
#!/bin/bash
# Check what AngleDownIcon was imported from originally
git log --all --oneline -S "AngleDownIcon" -- packages/react-table/src/components/Table/utils/decorators/treeRow.tsx | head -5
echo "---"
# Get more context about the icon change
git show HEAD:packages/react-table/src/components/Table/utils/decorators/treeRow.tsx 2>/dev/null | grep -A 2 -B 2 "Icon" | head -20
echo "---"
# Check if this is part of a broader icon migration
git log --all --oneline | grep -i "icon\|microns\|rh-ui" | head -20Repository: patternfly/patternfly-react
Length of output: 2328
Icon migration uses wrong icon set—should use rh-ui-caret-down, not rh-microns-caret-down.
According to the icon mapping in pfToRhIcons.mjs, AngleDownIcon should be replaced with rh-ui-caret-down from the UI icon set, not the microns icon set. The current import uses rh-microns-caret-down, which is a different icon with different dimensions (20×20 vs 32×32) and SVG path. Update the import to:
import RhUiCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-caret-down-icon';
Also applies to: 57-57
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@packages/react-table/src/components/Table/utils/decorators/treeRow.tsx` at
line 7, The current import uses the microns caret icon; replace the import of
RhMicronsCaretDownIcon from
'@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon' with
RhUiCaretDownIcon imported from
'@patternfly/react-icons/dist/esm/icons/rh-ui-caret-down-icon' and update any
usages/JSX that reference RhMicronsCaretDownIcon (e.g., the tree row
expand/collapse renderer or component that renders the caret) to use
RhUiCaretDownIcon so the correct UI icon (rh-ui-caret-down) and its dimensions
are used.
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
2 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 #12261
Note that I did not update the up/down icons used in SearchInput, nor the caret icons used in DualListSelector/Pagination (or similar implementations that have actions with both single and double carets). There's core followup work to handle that first patternfly/patternfly#8197
Additional issues:
Summary by CodeRabbit