Skip to content

chore(BarsIcon): Updat all uses of Bars icons to use RhUiMenuBarsIcon instead#12377

Open
tlabaj wants to merge 2 commits into
patternfly:mainfrom
tlabaj:bars_icon
Open

chore(BarsIcon): Updat all uses of Bars icons to use RhUiMenuBarsIcon instead#12377
tlabaj wants to merge 2 commits into
patternfly:mainfrom
tlabaj:bars_icon

Conversation

@tlabaj
Copy link
Copy Markdown
Contributor

@tlabaj tlabaj commented Apr 24, 2026

What: towards #12244

Summary

Replaces BarsIcon with RhUiMenuBarsIcon (rh-ui-menu-bars-icon) in components, documentation, and the integration demo app so the menu/bars icon uses the Red Hat UI asset.

Changes

  • Update imports from bars-icon to rh-ui-menu-bars-icon.
  • Replace BarsIcon with RhUiMenuBarsIcon in affected examples and demos.

Scope

  • react-core: MenuWithActions, MenuWithFavorites, ActionsMenuDemo, and shared doc imports in related .md files (Page, Masthead, Nav, CustomMenus, NotificationDrawer, RTL, Wizard, and related demos).
  • react-table: Table.md shared imports.
  • react-integration: MenuDemo.tsx.

Summary by CodeRabbit

  • Documentation

    • Updated examples and demo docs across the library to use the new menu‑bars icon for consistent visuals and demos.
  • Chores

    • Replaced legacy menu‑bars icon references in numerous examples and demos to align icon usage across components.

Review Change Stack

Closes #12397

@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 24, 2026

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

  • @coderabbitai resume to resume automatic reviews.
  • @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

  • ▶️ Resume reviews
  • 🔍 Trigger review

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: f622bdcc-8377-416f-ba55-a7e61430ab2c

📥 Commits

Reviewing files that changed from the base of the PR and between ac6b113 and 52b349d.

📒 Files selected for processing (15)
  • packages/react-core/src/components/Masthead/examples/Masthead.md
  • packages/react-core/src/components/Menu/examples/Menu.md
  • packages/react-core/src/components/Menu/examples/MenuWithActions.tsx
  • packages/react-core/src/components/Menu/examples/MenuWithFavorites.tsx
  • packages/react-core/src/components/Page/examples/Page.md
  • packages/react-core/src/demos/CustomMenus/CustomMenus.md
  • packages/react-core/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx
  • packages/react-core/src/demos/Masthead.md
  • packages/react-core/src/demos/Nav.md
  • packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
  • packages/react-core/src/demos/Page.md
  • packages/react-core/src/demos/RTL/RTL.md
  • packages/react-core/src/demos/Wizard/WizardDemo.md
  • packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx
  • packages/react-table/src/demos/Table.md
✅ Files skipped from review due to trivial changes (11)
  • packages/react-core/src/components/Masthead/examples/Masthead.md
  • packages/react-core/src/demos/CustomMenus/CustomMenus.md
  • packages/react-core/src/components/Menu/examples/MenuWithActions.tsx
  • packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
  • packages/react-core/src/components/Page/examples/Page.md
  • packages/react-table/src/demos/Table.md
  • packages/react-core/src/demos/RTL/RTL.md
  • packages/react-core/src/components/Menu/examples/Menu.md
  • packages/react-core/src/demos/Page.md
  • packages/react-core/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx
  • packages/react-core/src/demos/Masthead.md
🚧 Files skipped from review as they are similar to previous changes (4)
  • packages/react-core/src/demos/Nav.md
  • packages/react-core/src/demos/Wizard/WizardDemo.md
  • packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx
  • packages/react-core/src/components/Menu/examples/MenuWithFavorites.tsx

Walkthrough

Replaces imports and JSX usages of BarsIcon with RhUiMenuBarsIcon across example, demo, markdown, and integration files. No API, runtime behavior, or exported/public entity changes.

Changes

Icon replacement: BarsIcon → RhUiMenuBarsIcon

Layer / File(s) Summary
Imports updated
packages/react-core/.../*.md, packages/react-core/.../*.tsx, packages/react-integration/.../MenuDemo.tsx, packages/react-table/src/demos/Table.md
Replaced imports from @patternfly/react-icons/.../bars-icon with @patternfly/react-icons/.../rh-ui-menu-bars-icon and the identifier RhUiMenuBarsIcon (range_055500bb90ed, range_5bf3c23de12f, range_4717d4f89486, range_dafafb141326, range_68d0b3f89bff, range_f148ba372e9e, range_fcd839d6634b, range_bd418b1910d0, range_4ad532a5ceff, range_7070d58bbd0b, range_3758b8641d74, range_75eeaf8c460c, range_8cc0137b1515, range_7b3b316ddbbe, range_c9f1769ed4f4).
Component usage updates
packages/react-core/src/components/Menu/examples/*, packages/react-core/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx, packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx
JSX previously rendering <BarsIcon /> now renders <RhUiMenuBarsIcon /> (e.g., MenuItemAction, menu action props) (range_5faffa2918e4, range_82f67bb00c39, range_50570eaa1e0c, range_7e4c929a0a79, range_331d21d54b73).

Sequence Diagram(s)

(omitted — edits are import/usage replacements without multi-component control flow)

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related issues

Suggested reviewers

  • phcox
  • nicolethoen
  • 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 references the main change (updating BarsIcon to RhUiMenuBarsIcon) but contains a typo ('Updat' instead of 'Update') and is somewhat generic with 'all uses'.
Linked Issues check ✅ Passed All BarsIcon imports have been replaced with RhUiMenuBarsIcon across components and documentation as required by issue #12397. The changes address all acceptance criteria for replacing imports.
Out of Scope Changes check ✅ Passed All changes are scoped to replacing BarsIcon with RhUiMenuBarsIcon in imports and usage, with no unrelated modifications introduced to the codebase.
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.

@tlabaj tlabaj requested review from a team, lboehling, phcox, thatblindgeye and wise-king-sullyman and removed request for a team April 24, 2026 18:41
Copy link
Copy Markdown

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md (1)

10-10: Change line 10 to use dist/esm for consistency with other imports in this file.

All other icon imports in NotificationDrawer.md use dist/esm; line 10's dist/js import creates unnecessary inconsistency.

🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md` at
line 10, Update the import for RhUiMenuBarsIcon to match the other icon imports
by changing the module path from
'@patternfly/react-icons/dist/js/icons/rh-ui-menu-bars-icon' to the esm build,
i.e. import RhUiMenuBarsIcon from
'@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon'; this keeps the
NotificationDrawer.md imports consistent with the rest of the file.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md`:
- Line 10: Update the import for RhUiMenuBarsIcon to match the other icon
imports by changing the module path from
'@patternfly/react-icons/dist/js/icons/rh-ui-menu-bars-icon' to the esm build,
i.e. import RhUiMenuBarsIcon from
'@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon'; this keeps the
NotificationDrawer.md imports consistent with the rest of the file.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 32b2fb26-83c4-46db-8e06-f6152a9e50f3

📥 Commits

Reviewing files that changed from the base of the PR and between 69b6225 and 0252229.

📒 Files selected for processing (15)
  • packages/react-core/src/components/Masthead/examples/Masthead.md
  • packages/react-core/src/components/Menu/examples/Menu.md
  • packages/react-core/src/components/Menu/examples/MenuWithActions.tsx
  • packages/react-core/src/components/Menu/examples/MenuWithFavorites.tsx
  • packages/react-core/src/components/Page/examples/Page.md
  • packages/react-core/src/demos/CustomMenus/CustomMenus.md
  • packages/react-core/src/demos/CustomMenus/examples/ActionsMenuDemo.tsx
  • packages/react-core/src/demos/Masthead.md
  • packages/react-core/src/demos/Nav.md
  • packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
  • packages/react-core/src/demos/Page.md
  • packages/react-core/src/demos/RTL/RTL.md
  • packages/react-core/src/demos/Wizard/WizardDemo.md
  • packages/react-integration/demo-app-ts/src/components/demos/MenuDemo/MenuDemo.tsx
  • packages/react-table/src/demos/Table.md

@patternfly-build
Copy link
Copy Markdown
Collaborator

patternfly-build commented Apr 24, 2026

@tlabaj tlabaj linked an issue Apr 24, 2026 that may be closed by this pull request
@nicolethoen nicolethoen linked an issue Apr 30, 2026 that may be closed by this pull request
3 tasks
@tlabaj tlabaj force-pushed the bars_icon branch 2 times, most recently from 597742b to 344396b Compare May 5, 2026 19:28
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.

Replace BarsIcon with RhUiMenuBarsIcon

4 participants