Skip to content

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

Merged
wise-king-sullyman merged 1 commit intopatternfly:mainfrom
tlabaj:plus_circle_icon
May 5, 2026
Merged

chore(PlusCircleIcon): Replace all usages of PlusCircleIcon with RhUAddCircleFillIcon#12369
wise-king-sullyman merged 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
    • Replaced the add/plus icon with a refreshed add-circle design across Buttons, Description Lists, Icon examples, CardView, and demo pages to ensure consistent visual appearance.

Closes #12396

@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: 2b30b077-a7f0-4c61-801d-787a4599ade1

📥 Commits

Reviewing files that changed from the base of the PR and between 15a104f and 603bfda.

📒 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
✅ Files skipped from review due to trivial changes (39)
  • packages/react-core/src/components/Button/examples/Button.md
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthResponsive.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionList.md
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListWithTermHelpText.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListWithCard.tsx
  • packages/react-core/src/demos/DescriptionList/DescriptionList.md
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCardHorizontalTermWidth.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySize.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontal.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListCompact.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListIconsOnTerms.tsx
  • packages/react-core/src/demos/CardView/examples/CardView.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListResponsiveHoriVertGroup.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListFluidHorizontal.tsx
  • packages/react-core/src/components/Button/examples/ButtonAriaDisabled.tsx
  • packages/react-core/src/demos/CardView/CardView.md
  • packages/react-core/src/components/Button/examples/ButtonDisabled.tsx
  • packages/react-core/src/components/Icon/examples/Icon.md
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListWithLargeDisplaySizeAndCard.tsx
  • packages/react-core/src/components/Button/examples/ButtonVariations.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultResponsiveColumns.tsx
  • packages/react-core/src/components/Icon/examples/IconContentSizes.tsx
  • packages/react-core/src/components/Icon/examples/HeadingIconSizes.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitMinWidthModified.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/ButtonDemo/ButtonDemo.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListBasic.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultInlineGrid.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalAutoColumn.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalThreeColLg.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultAutoColumn.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalResponsiveColumns.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListBreakpointsDemo.tsx
  • packages/react-core/src/components/Icon/examples/IconInline.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListColumnFill.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListDisplaySizeAndCardThreeColumn.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListCompactHorizontal.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalCustomTermWidth.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DescriptionListDemo/DescriptionListDemo.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultTwoCol.tsx
🚧 Files skipped from review as they are similar to previous changes (6)
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListHorizontalTwoCol.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListAutoFitBasic.tsx
  • packages/react-core/src/components/DescriptionList/examples/DescriptionListDefaultThreeColLg.tsx
  • packages/react-core/src/components/Icon/examples/StandaloneIconSizes.tsx
  • packages/react-icons/scripts/icons/pfToRhIcons.mjs
  • packages/react-core/src/components/Icon/examples/BodyIconSizes.tsx

Walkthrough

Replaced imports/usages of PlusCircleIcon with RhUiAddCircleFillIcon across React component examples, demos, and docs; added a pfToRhIcons mapping entry linking PlusCircleIconrh-ui-add-circle-fill. No public API or exported signatures were changed.

Changes

Icon swap + mapping

Layer / File(s) Summary
Icon mapping
packages/react-icons/scripts/icons/pfToRhIcons.mjs
Added pfToRhIcons entry mapping PlusCircleIcon{ name: 'rh-ui-add-circle-fill', icon: getIconData('rh-ui-add-circle-fill') }.
Core examples — Icon components
packages/react-core/src/components/Icon/examples/* (e.g., Icon.md, BodyIconSizes.tsx, HeadingIconSizes.tsx, IconContentSizes.tsx, IconInline.tsx, StandaloneIconSizes.tsx)
Replaced PlusCircleIcon imports/usages with RhUiAddCircleFillIcon in all icon example variants.
Core examples — Button
packages/react-core/src/components/Button/examples/* (e.g., Button.md, ButtonAriaDisabled.tsx, ButtonCircle.tsx, ButtonDisabled.tsx, ButtonVariations.tsx)
Swapped PlusCircleIconRhUiAddCircleFillIcon imports and updated Button icon props where used.
Core examples — DescriptionList
packages/react-core/src/components/DescriptionList/examples/* (many files)
Replaced PlusCircleIcon with RhUiAddCircleFillIcon for the inline/link “Pod selector” buttons across DescriptionList examples.
Demos / docs
packages/react-core/src/demos/*, packages/react-core/src/demos/.../CardView.md, DescriptionList.md
Updated demo/documentation markdown and demo example files to import and render RhUiAddCircleFillIcon instead of PlusCircleIcon.
Integration demo app
packages/react-integration/demo-app-ts/src/components/demos/* (e.g., ButtonDemo.tsx, DescriptionListDemo.tsx, DescriptionListBreakpointsDemo.tsx)
Swapped imports/usages of PlusCircleIconRhUiAddCircleFillIcon in demo-app components to reflect the icon change.
Formatting / minor JSX layout
various *.tsx example files
Minor prop/JSX reformatting in a few Button examples (multi-line prop layout) while preserving props and aria labels.
Documentation updates
*.md files under examples/demos
Updated example docs to import RhUiAddCircleFillIcon instead of PlusCircleIcon.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

Suggested reviewers

  • nicolethoen
  • thatblindgeye
  • kmcfaul
  • wise-king-sullyman
  • phcox
🚥 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 PR title clearly and specifically describes the main change: replacing all usages of PlusCircleIcon with RhUiAddCircleFillIcon across the codebase.
Linked Issues check ✅ Passed The PR fully satisfies all coding-related acceptance criteria: all PlusCircleIcon imports are replaced with RhUiAddCircleFillIcon, the icon mapping is added to enable proper resolution, and no broken references result from the changes.
Out of Scope Changes check ✅ Passed All changes are directly related to the stated objective of replacing PlusCircleIcon with RhUiAddCircleFillIcon. The icon mapping addition and all import/usage replacements are in-scope with no extraneous modifications.
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
Copy link
Copy Markdown
Collaborator

patternfly-build commented Apr 21, 2026

@tlabaj tlabaj linked an issue Apr 24, 2026 that may be closed by this pull request
@nicolethoen
Copy link
Copy Markdown
Contributor

Looks good - just needs a rebase

@tlabaj tlabaj force-pushed the plus_circle_icon branch from 15a104f to 603bfda Compare May 5, 2026 19:37
@wise-king-sullyman wise-king-sullyman merged commit c30d095 into patternfly:main May 5, 2026
14 checks passed
@patternfly-build
Copy link
Copy Markdown
Collaborator

Your changes have been released in:

  • @patternfly/react-code-editor@6.5.0-prerelease.71
  • @patternfly/react-core@6.5.0-prerelease.68
  • @patternfly/react-docs@7.5.0-prerelease.79
  • @patternfly/react-drag-drop@6.5.0-prerelease.69
  • @patternfly/react-icons@6.5.0-prerelease.30
  • @patternfly/react-integration@6.5.0-prerelease.17
  • demo-app-ts@6.5.0-prerelease.97
  • @patternfly/react-table@6.5.0-prerelease.71
  • @patternfly/react-templates@6.5.0-prerelease.68

Thanks for your contribution! 🎉

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

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Replace PlusCircleIcon with RhUAddCircleFillIcon

7 participants