Skip to content

fix(EllipsisVIcon): Replace EllipsisVIcon with RhUiEllipsisVerticalFillIcon#12481

Merged
nicolethoen merged 1 commit into
patternfly:mainfrom
rebeccaalpert:cursor/replace-ellipsis-v-icon-with-rh-ui-ellipsis-vertical-fill
Jun 18, 2026
Merged

fix(EllipsisVIcon): Replace EllipsisVIcon with RhUiEllipsisVerticalFillIcon#12481
nicolethoen merged 1 commit into
patternfly:mainfrom
rebeccaalpert:cursor/replace-ellipsis-v-icon-with-rh-ui-ellipsis-vertical-fill

Conversation

@rebeccaalpert

@rebeccaalpert rebeccaalpert commented Jun 16, 2026

Copy link
Copy Markdown
Member

Part of #12401. Breaking into separate PRs so it is easier to review.

Made with Cursor

Summary by CodeRabbit

  • Style
    • Updated the kebab/overflow menu icon used across component examples, demos, and documentation (replaced the previous ellipsis icon with the PatternFly “Rh UI ellipsis vertical fill” icon in dropdown/menu toggles).
  • Tests
    • Adjusted the MenuToggle snapshot test to match the new icon rendering.

@coderabbitai

coderabbitai Bot commented Jun 16, 2026

Copy link
Copy Markdown

Review Change Stack

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: 795cbffe-3513-418f-ba61-a7df83b9fcf7

📥 Commits

Reviewing files that changed from the base of the PR and between 1eaea80 and fe049b7.

⛔ Files ignored due to path filters (2)
  • packages/react-core/src/components/MenuToggle/__tests__/__snapshots__/MenuToggle.test.tsx.snap is excluded by !**/*.snap
  • packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (96)
  • packages/react-core/src/components/ActionList/examples/ActionList.md
  • packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
  • packages/react-core/src/components/Card/examples/Card.md
  • packages/react-core/src/components/Card/examples/CardExpandable.tsx
  • packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
  • packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
  • packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
  • packages/react-core/src/components/Card/examples/CardSubtitleActions.tsx
  • packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
  • packages/react-core/src/components/DataList/examples/DataList.md
  • packages/react-core/src/components/DataList/examples/DataListActions.tsx
  • packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx
  • packages/react-core/src/components/DataList/examples/DataListClickableRows.tsx
  • packages/react-core/src/components/DataList/examples/DataListExpandable.tsx
  • packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
  • packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx
  • packages/react-core/src/components/Dropdown/examples/Dropdown.md
  • packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
  • packages/react-core/src/components/Hint/examples/Hint.md
  • packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx
  • packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx
  • packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx
  • packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
  • packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainCircle.tsx
  • packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainIcon.tsx
  • packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md
  • packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx
  • packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx
  • packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md
  • packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx
  • packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainerHeight.tsx
  • packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx
  • packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx
  • packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx
  • packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx
  • packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimpleVertical.tsx
  • packages/react-core/src/components/Toolbar/examples/Toolbar.md
  • packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
  • packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx
  • packages/react-core/src/components/TreeView/examples/TreeView.md
  • packages/react-core/src/components/TreeView/examples/TreeViewWithActionItems.tsx
  • packages/react-core/src/demos/AlertGroup.md
  • packages/react-core/src/demos/CardDemos.md
  • packages/react-core/src/demos/CardView/CardView.md
  • packages/react-core/src/demos/CardView/examples/CardView.tsx
  • packages/react-core/src/demos/CustomMenus/CustomMenus.md
  • packages/react-core/src/demos/DashboardHeader.tsx
  • packages/react-core/src/demos/DataList/examples/DataListActionable.tsx
  • packages/react-core/src/demos/DataList/examples/DataListBasic.tsx
  • packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
  • packages/react-core/src/demos/DataList/examples/DataListStaticBottomPagination.tsx
  • packages/react-core/src/demos/DataListDemo.md
  • 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/NotificationDrawer/examples/NotificationDrawerBasic.tsx
  • packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
  • packages/react-core/src/demos/Page.md
  • packages/react-core/src/demos/PrimaryDetail.md
  • packages/react-core/src/demos/RTL/RTL.md
  • packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
  • packages/react-core/src/demos/Tabs.md
  • packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
  • packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx
  • packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
  • packages/react-core/src/demos/examples/Masthead/MastheadWithUtilitiesAndUserDropdownMenu.tsx
  • packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
  • packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx
  • packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
  • packages/react-core/src/demos/examples/Nav/NavManual.tsx
  • packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
  • packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
  • packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
  • packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
  • packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
  • packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelector.md
  • packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedWithActionsDemo.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerBasicDemo.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx
  • packages/react-table/src/components/Table/ActionsColumn.tsx
  • packages/react-table/src/components/Table/examples/Table.md
  • packages/react-table/src/components/Table/examples/TableActionsOverflow.tsx
  • packages/react-table/src/demos/DashboardHeader.tsx
  • packages/react-table/src/demos/Table.md
  • packages/react-table/src/demos/examples/TableSortableResponsive.tsx
  • packages/react-templates/src/components/Dropdown/examples/DropdownTemplates.md
  • packages/react-templates/src/components/Dropdown/examples/SimpleDropdownExample.tsx
💤 Files with no reviewable changes (1)
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelector.md
✅ Files skipped from review due to trivial changes (44)
  • packages/react-core/src/demos/Nav.md
  • packages/react-core/src/components/Card/examples/Card.md
  • packages/react-core/src/demos/AlertGroup.md
  • packages/react-core/src/components/DataList/examples/DataListMixedExpandable.tsx
  • packages/react-core/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx
  • packages/react-core/src/demos/DataListDemo.md
  • packages/react-core/src/demos/NotificationDrawer/NotificationDrawer.md
  • packages/react-core/src/components/Card/examples/CardHeaderInCardHead.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
  • packages/react-core/src/demos/Tabs.md
  • packages/react-core/src/components/Hint/examples/Hint.md
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
  • packages/react-table/src/demos/Table.md
  • packages/react-core/src/components/DataList/examples/DataListActions.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/ToolbarDemo/ToolbarDemo.tsx
  • packages/react-core/src/demos/CardView/CardView.md
  • packages/react-core/src/demos/Masthead.md
  • packages/react-core/src/components/Toolbar/examples/ToolbarWithFilters.tsx
  • packages/react-core/src/components/OverflowMenu/examples/OverflowMenu.md
  • packages/react-core/src/components/OverflowMenu/examples/OverflowMenuGroupTypes.tsx
  • packages/react-core/src/components/DataList/examples/DataListWidthModifiers.tsx
  • packages/react-core/src/components/MenuToggle/examples/MenuToggle.md
  • packages/react-core/src/demos/Page.md
  • packages/react-core/src/components/Hint/examples/HintBasicWithoutTitle.tsx
  • packages/react-core/src/components/ActionList/examples/ActionList.md
  • packages/react-core/src/components/Card/examples/CardExpandable.tsx
  • packages/react-core/src/demos/examples/Page/PageStickySectionGroup.tsx
  • packages/react-core/src/components/Toolbar/examples/Toolbar.md
  • packages/react-core/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx
  • packages/react-table/src/components/Table/examples/TableActionsOverflow.tsx
  • packages/react-core/src/demos/DashboardHeader.tsx
  • packages/react-core/src/demos/examples/Nav/NavFlyout.tsx
  • packages/react-core/src/demos/DataList/examples/DataListActionable.tsx
  • packages/react-core/src/demos/RTL/RTL.md
  • packages/react-integration/demo-app-ts/src/components/demos/OverflowMenuDemo/OverflowMenuDemo.tsx
  • packages/react-core/src/components/DataList/examples/DataListCheckboxes.tsx
  • packages/react-core/src/components/DataList/examples/DataListExpandable.tsx
  • packages/react-core/src/components/Card/examples/CardWithImageAndActions.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDeprecatedDemo/DualListSelectorDeprecatedWithActionsDemo.tsx
  • packages/react-core/src/components/DataList/examples/DataListClickableRows.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/CardDemo/CardDemo.tsx
  • packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerBasic.tsx
  • packages/react-core/src/components/Hint/examples/HintBasicWithTitle.tsx
  • packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainIcon.tsx
🚧 Files skipped from review as they are similar to previous changes (47)
  • packages/react-core/src/components/Card/examples/CardSubtitleActions.tsx
  • packages/react-core/src/demos/examples/Nav/NavHorizontalWithSubnav.tsx
  • packages/react-core/src/components/DataList/examples/DataList.md
  • packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawer.md
  • packages/react-core/src/components/Card/examples/CardExpandableWithIcon.tsx
  • packages/react-core/src/demos/examples/Page/PageStickySectionBreadcrumb.tsx
  • packages/react-core/src/components/Dropdown/examples/Dropdown.md
  • packages/react-core/src/demos/CardDemos.md
  • packages/react-integration/demo-app-ts/src/components/demos/DataListDemo/DataListDemo.tsx
  • packages/react-core/src/demos/examples/Card/CardHorizontalGrid.tsx
  • packages/react-core/src/demos/examples/Masthead/MastheadWithHorizontalNav.tsx
  • packages/react-core/src/demos/examples/PrimaryDetail/PrimaryDetailCardView.tsx
  • packages/react-core/src/components/ActionList/examples/ActionListSingleGroup.tsx
  • packages/react-core/src/components/TreeView/examples/TreeView.md
  • packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimpleVertical.tsx
  • packages/react-core/src/components/MenuToggle/examples/MenuTogglePlainCircle.tsx
  • packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainer.tsx
  • packages/react-core/src/demos/PrimaryDetail.md
  • packages/react-core/src/demos/CardView/examples/CardView.tsx
  • packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
  • packages/react-core/src/demos/RTL/examples/PaginatedTable.tsx
  • packages/react-table/src/components/Table/ActionsColumn.tsx
  • packages/react-core/src/demos/DataList/examples/DataListExpandableControlInToolbar.tsx
  • packages/react-core/src/components/MenuToggle/tests/MenuToggle.test.tsx
  • packages/react-core/src/demos/examples/Page/PageContextSelector.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
  • packages/react-table/src/components/Table/examples/Table.md
  • packages/react-core/src/demos/examples/AlertGroup/AlertGroupToastWithNotificationDrawer.tsx
  • packages/react-core/src/components/Toolbar/examples/ToolbarStacked.tsx
  • packages/react-core/src/components/OverflowMenu/examples/OverflowMenuBreakpointOnContainerHeight.tsx
  • packages/react-core/src/components/Card/examples/CardOnlyActionsInCardHead.tsx
  • packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerBasic.tsx
  • packages/react-table/src/demos/DashboardHeader.tsx
  • packages/react-core/src/demos/DataList/examples/DataListBasic.tsx
  • packages/react-core/src/components/NotificationDrawer/examples/NotificationDrawerGroups.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx
  • packages/react-core/src/demos/examples/Page/PageStickySectionGroupAlternate.tsx
  • packages/react-core/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx
  • packages/react-templates/src/components/Dropdown/examples/DropdownTemplates.md
  • packages/react-core/src/components/Dropdown/examples/DropdownWithKebabToggle.tsx
  • packages/react-core/src/demos/CustomMenus/CustomMenus.md
  • packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerGroupsDemo.tsx
  • packages/react-templates/src/components/Dropdown/examples/SimpleDropdownExample.tsx
  • packages/react-core/src/demos/examples/Nav/NavManual.tsx
  • packages/react-core/src/demos/NotificationDrawer/examples/NotificationDrawerGrouped.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/NotificationDrawerDemo/NotificationDrawerBasicDemo.tsx
  • packages/react-core/src/demos/examples/Nav/NavHorizontal.tsx

Walkthrough

All usages of EllipsisVIcon for kebab/menu toggle icons are replaced with RhUiEllipsisVerticalFillIcon across the monorepo. This affects one production component (ActionsColumn.tsx), a MenuToggle snapshot test, and approximately 80 example, demo, and integration-demo files spanning react-core, react-table, react-templates, and react-integration packages.

Changes

Icon Replacement: EllipsisVIcon → RhUiEllipsisVerticalFillIcon

Layer / File(s) Summary
Production component and snapshot test
packages/react-table/src/components/Table/ActionsColumn.tsx, packages/react-core/src/components/MenuToggle/__tests__/MenuToggle.test.tsx
ActionsColumn replaces the EllipsisVIcon import and MenuToggle icon prop with RhUiEllipsisVerticalFillIcon. The MenuToggle "shows isPlain" snapshot test is updated to use the same new icon.
react-core component examples
packages/react-core/src/components/ActionList/examples/*, packages/react-core/src/components/Card/examples/*, packages/react-core/src/components/DataList/examples/*, packages/react-core/src/components/Dropdown/examples/*, packages/react-core/src/components/DualListSelector/examples/*, packages/react-core/src/components/Hint/examples/*, packages/react-core/src/components/MenuToggle/examples/*, packages/react-core/src/components/NotificationDrawer/examples/*, packages/react-core/src/components/OverflowMenu/examples/*, packages/react-core/src/components/Toolbar/examples/*, packages/react-core/src/components/TreeView/examples/*, packages/react-core/src/deprecated/components/DualListSelector/examples/*
Icon import and MenuToggle icon prop updated across all component example TSX and MD files. MenuTogglePlainCircle additionally reformats two JSX elements to multiline.
react-core demos
packages/react-core/src/demos/AlertGroup.md, packages/react-core/src/demos/CardDemos.md, packages/react-core/src/demos/CardView/*, packages/react-core/src/demos/CustomMenus/CustomMenus.md, packages/react-core/src/demos/DashboardHeader.tsx, packages/react-core/src/demos/DataList/examples/*, packages/react-core/src/demos/DataListDemo.md, packages/react-core/src/demos/Masthead.md, packages/react-core/src/demos/Nav.md, packages/react-core/src/demos/NotificationDrawer/*, packages/react-core/src/demos/Page.md, packages/react-core/src/demos/PrimaryDetail.md, packages/react-core/src/demos/RTL/*, packages/react-core/src/demos/Tabs.md, packages/react-core/src/demos/examples/...
All demo MD and TSX files replace the EllipsisVIcon import and each MenuToggle icon prop with RhUiEllipsisVerticalFillIcon. CustomMenus.md also removes EllipsisVIcon in favor of RhUiSettingsFillIcon.
react-integration demos, react-table, and react-templates
packages/react-integration/demo-app-ts/src/components/demos/..., packages/react-table/src/components/Table/examples/*, packages/react-table/src/demos/*, packages/react-templates/src/components/Dropdown/examples/*
Integration demo files (Card, DataList, DualListSelector, Masthead, NotificationDrawer, OverflowMenu, Toolbar), react-table example and demo files, and react-templates dropdown examples all replace EllipsisVIcon with RhUiEllipsisVerticalFillIcon in imports and MenuToggle icon props.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Suggested labels

Needs design review

Suggested reviewers

  • nicolethoen
  • thatblindgeye
  • phcox
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

@rebeccaalpert rebeccaalpert marked this pull request as draft June 16, 2026 20:29
@patternfly-build

patternfly-build commented Jun 16, 2026

Copy link
Copy Markdown
Collaborator

@rebeccaalpert rebeccaalpert force-pushed the cursor/replace-ellipsis-v-icon-with-rh-ui-ellipsis-vertical-fill branch 4 times, most recently from 15178fd to 1eaea80 Compare June 17, 2026 13:46
@rebeccaalpert rebeccaalpert marked this pull request as ready for review June 17, 2026 13:46
@nicolethoen

Copy link
Copy Markdown
Contributor

needs a rebase

@rebeccaalpert rebeccaalpert force-pushed the cursor/replace-ellipsis-v-icon-with-rh-ui-ellipsis-vertical-fill branch 2 times, most recently from ad1641e to fd1668a Compare June 17, 2026 17:57

@thatblindgeye thatblindgeye left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

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

Ye olde rebase

@rebeccaalpert rebeccaalpert force-pushed the cursor/replace-ellipsis-v-icon-with-rh-ui-ellipsis-vertical-fill branch from fd1668a to a35a0fd Compare June 17, 2026 20:49
…llIcon

Co-authored-by: Cursor <cursoragent@cursor.com>
@rebeccaalpert rebeccaalpert force-pushed the cursor/replace-ellipsis-v-icon-with-rh-ui-ellipsis-vertical-fill branch from a35a0fd to fe049b7 Compare June 17, 2026 20:52
@nicolethoen nicolethoen merged commit 29f223e into patternfly:main Jun 18, 2026
15 checks passed
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.

4 participants