Skip to content

chore(PlusCircleIcon): Replace all usages of PlusCircleIcon with RhUAddCircleFillIcon#12369

Open
tlabaj wants to merge 1 commit intopatternfly:mainfrom
tlabaj:plus_circle_icon
Open

chore(PlusCircleIcon): Replace all usages of PlusCircleIcon with RhUAddCircleFillIcon#12369
tlabaj wants to merge 1 commit intopatternfly:mainfrom
tlabaj:plus_circle_icon

Conversation

@tlabaj
Copy link
Copy Markdown
Contributor

@tlabaj tlabaj commented Apr 21, 2026

What: towards #12244

Summary

  • Map PlusCircleIcon to rh-ui-add-circle-fill in packages/react-icons/scripts/icons/pfToRhIcons.mjs for PF → RH icon resolution.
  • Replace PlusCircleIcon with RhUiAddCircleFillIcon in examples, demos, docs, and Code Connect, importing from @patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon.

Summary by CodeRabbit

  • Style
    • Updated icon appearance across multiple components (Button, DescriptionList, Icon, CardView) with a refreshed add-circle icon design.

@tlabaj tlabaj requested review from a team and wise-king-sullyman and removed request for a team April 21, 2026 18:39
@tlabaj tlabaj requested review from kaylachumley, nicolethoen and phcox and removed request for a team April 21, 2026 18:39
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 21, 2026

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: a8738421-50f2-4fda-85ad-4fafd8bfe067

📥 Commits

Reviewing files that changed from the base of the PR and between 6558bdd and 15a104f.

📒 Files selected for processing (47)
  • packages/react-core/src/components/Button/examples/Button.md
  • packages/react-core/src/components/Button/examples/ButtonAriaDisabled.tsx
  • 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
  • packages/react-core/src/components/DescriptionList/examples/DescriptionList.md
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitBasic.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthModified.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthResponsive.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListBasic.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListColumnFill.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListCompact.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListCompactHorizontal.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultAutoColumn.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultInlineGrid.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultResponsiveColumns.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultThreeColLg.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultTwoCol.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCardHorizontalTermWidth.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCardThreeColumn.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListFluidHorizontal.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontal.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalAutoColumn.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalCustomTermWidth.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalResponsiveColumns.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalThreeColLg.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalTwoCol.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListResponsiveHoriVertGroup.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListWithCard.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySize.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySizeAndCard.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListWithTermHelpText.tsx
  • packages/react-core/src/components/Icon/examples/BodyIconSizes.tsx
  • packages/react-core/src/components/Icon/examples/HeadingIconSizes.tsx
  • packages/react-core/src/components/Icon/examples/Icon.md
  • packages/react-core/src/components/Icon/examples/IconContentSizes.tsx
  • packages/react-core/src/components/Icon/examples/IconInline.tsx
  • packages/react-core/src/components/Icon/examples/StandaloneIconSizes.tsx
  • packages/react-core/src/demos/CardView/CardView.md
  • packages/react-core/src/demos/CardView/examples/CardView.tsx
  • packages/react-core/src/demos/DescriptionList/DescriptionList.md
  • packages/react-core/src/demos/DescriptionList/examples/DescriptionListInDrawer.tsx
  • packages/react-icons/scripts/icons/pfToRhIcons.mjs
  • packages/react-integration/demo-app-ts/src/components/demos/ButtonDemo/ButtonDemo.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListBreakpointsDemo.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListDemo.tsx

Walkthrough

This pull request systematically replaces the PlusCircleIcon import and usage with RhUiAddCircleFillIcon across Button, DescriptionList, Icon component examples and related demo files. A mapping entry is added to pfToRhIcons.mjs to register the icon swap.

Changes

Cohort / File(s) Summary
Button Examples
packages/react-core/src/components/Button/examples/Button.md, ButtonAriaDisabled.tsx, ButtonCircle.tsx, ButtonDisabled.tsx, ButtonVariations.tsx
Updated icon imports and JSX usage from PlusCircleIcon to RhUiAddCircleFillIcon in button example files.
DescriptionList Examples
packages/react-core/src/components/DescriptionList/examples/DescriptionList.md, DescriptionListAutoFitBasic.tsx, DescriptionListAutoFitMinWidthModified.tsx, DescriptionListAutoFitMinWidthResponsive.tsx, DescriptionListBasic.tsx, DescriptionListColumnFill.tsx, DescriptionListCompact.tsx, DescriptionListCompactHorizontal.tsx, DescriptionListDefaultAutoColumn.tsx, DescriptionListDefaultInlineGrid.tsx, DescriptionListDefaultResponsiveColumns.tsx, DescriptionListDefaultThreeColLg.tsx, DescriptionListDefaultTwoCol.tsx, DescriptionListDisplaySizeAndCardHorizontalTermWidth.tsx, DescriptionListDisplaySizeAndCardThreeColumn.tsx, DescriptionListFluidHorizontal.tsx, DescriptionListHorizontal.tsx, DescriptionListHorizontalAutoColumn.tsx, DescriptionListHorizontalCustomTermWidth.tsx, DescriptionListHorizontalResponsiveColumns.tsx, DescriptionListHorizontalThreeColLg.tsx, DescriptionListHorizontalTwoCol.tsx, DescriptionListIconsOnTerms.tsx, DescriptionListResponsiveHoriVertGroup.tsx, DescriptionListWithCard.tsx, DescriptionListWithLargeDisplaySize.tsx, DescriptionListWithLargeDisplaySizeAndCard.tsx, DescriptionListWithTermHelpText.tsx
Replaced PlusCircleIcon with RhUiAddCircleFillIcon in all DescriptionList example files for inline link button usage.
Icon Examples
packages/react-core/src/components/Icon/examples/Icon.md, BodyIconSizes.tsx, HeadingIconSizes.tsx, IconContentSizes.tsx, IconInline.tsx, StandaloneIconSizes.tsx
Swapped icon component from PlusCircleIcon to RhUiAddCircleFillIcon across all Icon size and style variants.
CardView Demo
packages/react-core/src/demos/CardView/CardView.md, examples/CardView.tsx
Updated icon import and usage in EmptyState from PlusCircleIcon to RhUiAddCircleFillIcon.
DescriptionList Demo
packages/react-core/src/demos/DescriptionList/DescriptionList.md, examples/DescriptionListInDrawer.tsx
Replaced icon component in DescriptionList demo files from PlusCircleIcon to RhUiAddCircleFillIcon.
Icon Mapping
packages/react-icons/scripts/icons/pfToRhIcons.mjs
Added new mapping entry associating PlusCircleIcon with rh-ui-add-circle-fill icon data.
ButtonDemo in demo-app-ts
packages/react-integration/demo-app-ts/src/components/demos/ButtonDemo/ButtonDemo.tsx
Updated icon import and usage in link button from PlusCircleIcon to RhUiAddCircleFillIcon.
DescriptionListDemo in demo-app-ts
packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListBreakpointsDemo.tsx, DescriptionListDemo.tsx
Replaced PlusCircleIcon with RhUiAddCircleFillIcon in "Pod selector" button instances across DescriptionList demo components.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

Suggested reviewers

  • nicolethoen
  • wise-king-sullyman
  • thatblindgeye
  • kmcfaul
🚥 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 accurately summarizes the main change: replacing all PlusCircleIcon usages with RhUiAddCircleFillIcon across the codebase.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check ✅ Passed Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check ✅ Passed Check skipped because no linked issues were found for this pull request.

✏️ 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
Copy link
Copy Markdown
Collaborator

patternfly-build commented Apr 21, 2026

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants