Skip to content

fix(AngleDoubleRightIcon): Replace AngleDoubleRightIcon with RhMicronsDoubleCaretRightIcon#12493

Open
rebeccaalpert wants to merge 1 commit into
patternfly:mainfrom
rebeccaalpert:cursor/replace-angle-double-right-icon-with-rh-microns-double-caret-right
Open

fix(AngleDoubleRightIcon): Replace AngleDoubleRightIcon with RhMicronsDoubleCaretRightIcon#12493
rebeccaalpert wants to merge 1 commit into
patternfly:mainfrom
rebeccaalpert:cursor/replace-angle-double-right-icon-with-rh-microns-double-caret-right

Conversation

@rebeccaalpert

@rebeccaalpert rebeccaalpert commented Jun 18, 2026

Copy link
Copy Markdown
Member

What:
Part of #12402. Breaking into separate PRs so it is easier to review.

Additional issues:

Summary by CodeRabbit

  • Style
    • Updated icon designs across DualListSelector examples (including basic, search, tooltips, complex options, tree, and composable/deprecated variants), Pagination last-page navigation, and DragDrop-related DualListSelector examples/demos to use a new right-facing double-caret icon for “Add all” and navigation controls.
    • Adjusted documentation example snippets to match the updated icon imports and rendered controls for consistency.

@coderabbitai

coderabbitai Bot commented Jun 18, 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: d9b433fd-b0f9-458f-a9e9-41b4a73cf0ee

📥 Commits

Reviewing files that changed from the base of the PR and between 9907d0d and d489970.

⛔ Files ignored due to path filters (3)
  • packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationNavigation.test.tsx.snap is excluded by !**/*.snap, !**/generated/**
  • packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (19)
  • packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasic.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx
  • packages/react-core/src/components/Pagination/PaginationNavigation.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/DualListSelector.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelector.md
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposable.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
  • packages/react-drag-drop/src/components/DragDrop/examples/DragDrop.md
  • packages/react-drag-drop/src/components/DragDrop/examples/DragDropContainerDualListSelector.tsx
  • packages/react-drag-drop/src/components/DragDrop/examples/DragDropDemos.md
  • packages/react-drag-drop/src/components/DragDrop/examples/DualListSelectorDraggable.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorBasicDemo.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorTreeDemo.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx
💤 Files with no reviewable changes (1)
  • packages/react-drag-drop/src/components/DragDrop/examples/DragDrop.md
✅ Files skipped from review due to trivial changes (13)
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasic.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelector.md
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposable.tsx
  • packages/react-drag-drop/src/components/DragDrop/examples/DragDropContainerDualListSelector.tsx
  • packages/react-drag-drop/src/components/DragDrop/examples/DualListSelectorDraggable.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/DualListSelector.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorBasicDemo.tsx
  • packages/react-drag-drop/src/components/DragDrop/examples/DragDropDemos.md
  • packages/react-core/src/components/Pagination/PaginationNavigation.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx
🚧 Files skipped from review as they are similar to previous changes (5)
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorTreeDemo.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposableTree.tsx

Walkthrough

AngleDoubleRightIcon is replaced with RhMicronsDoubleCaretRightIcon across 18 files: the deprecated DualListSelector component, PaginationNavigation, all DualListSelector example/demo TSX files in react-core, react-drag-drop, and react-integration, plus their associated markdown documentation files.

Changes

Icon Swap: AngleDoubleRightIcon → RhMicronsDoubleCaretRightIcon

Layer / File(s) Summary
Core component and deprecated component updates
packages/react-core/src/components/Pagination/PaginationNavigation.tsx, packages/react-core/src/deprecated/components/DualListSelector/DualListSelector.tsx
PaginationNavigation and the deprecated DualListSelector component replace the AngleDoubleRightIcon import and rendered icon prop with RhMicronsDoubleCaretRightIcon for the "last page" and "add all" controls respectively.
react-core DualListSelector basic examples
packages/react-core/src/components/DualListSelector/examples/DualListSelector*.tsx, .../*.md
DualListSelector basic example files (Basic, BasicSearch, BasicTooltips, ComplexOptionsActions, Tree) and their markdown docs swap the import and icon prop from AngleDoubleRightIcon to RhMicronsDoubleCaretRightIcon.
react-core deprecated DualListSelector examples
packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelector*.tsx, .../*.md
Deprecated DualListSelector example files (Composable, ComposableDragDrop, ComposableTree) and their markdown docs update the icon import and "Add all" control icon prop to RhMicronsDoubleCaretRightIcon.
react-drag-drop and react-integration demos
packages/react-drag-drop/src/components/DragDrop/examples/*, packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/*
DragDrop examples and react-integration DualListSelector demos (BasicDemo, TreeDemo, WithActionsDemo) update the icon import and "Add all" control icon prop; associated markdown docs are updated. Unused icon imports are removed from DragDrop.md.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Possibly related PRs

  • patternfly/patternfly-react#12381: Directly related — swaps the left-side double-caret icons (AngleDoubleLeftIcon) for "Remove all" and "first page" controls in the same DualListSelector and PaginationNavigation components, making it the mirror operation to this PR.

Suggested labels

Needs design review

Suggested reviewers

  • nicolethoen
  • thatblindgeye
🚥 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 clearly and specifically describes the main change: replacing AngleDoubleRightIcon with RhMicronsDoubleCaretRightIcon 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

patternfly-build commented Jun 18, 2026

Copy link
Copy Markdown
Collaborator

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

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-drag-drop/src/components/DragDrop/examples/DragDropContainerDualListSelector.tsx (1)

147-174: ⚡ Quick win

Use the icon prop pattern for consistency with other DualListSelector examples.

The controls in this file render icons as child elements, but all other DualListSelector example files in this cohort (and the standard DualListSelectorControl API) use the icon prop pattern. This inconsistency should be unified for clarity and maintainability.

♻️ Proposed refactor to use icon prop pattern
       <DualListSelectorControlsWrapper aria-label="Selector controls">
         <DualListSelectorControl
           isDisabled={!availableOptions.some((option) => option.props.isSelected)}
           onClick={() => moveSelected(true)}
           aria-label="Add selected"
+          icon={<AngleRightIcon />}
-        >
-          <AngleRightIcon />
-        </DualListSelectorControl>
+        />
         <DualListSelectorControl
           isDisabled={availableOptions.length === 0}
           onClick={() => moveAll(true)}
           aria-label="Add all"
+          icon={<RhMicronsDoubleCaretRightIcon />}
-        >
-          <RhMicronsDoubleCaretRightIcon />
-        </DualListSelectorControl>
+        />
         <DualListSelectorControl
           isDisabled={chosenOptions.length === 0}
           onClick={() => moveAll(false)}
           aria-label="Remove all"
+          icon={<RhMicronsDoubleCaretLeftIcon />}
-        >
-          <RhMicronsDoubleCaretLeftIcon />
-        </DualListSelectorControl>
+        />
         <DualListSelectorControl
           onClick={() => moveSelected(false)}
           isDisabled={!chosenOptions.some((option) => option.props.isSelected)}
           aria-label="Remove selected"
+          icon={<AngleLeftIcon />}
-        >
-          <AngleLeftIcon />
-        </DualListSelectorControl>
+        />
       </DualListSelectorControlsWrapper>
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

In
`@packages/react-drag-drop/src/components/DragDrop/examples/DragDropContainerDualListSelector.tsx`
around lines 147 - 174, The DualListSelectorControl components are currently
rendering icons as child elements (AngleRightIcon,
RhMicronsDoubleCaretRightIcon, RhMicronsDoubleCaretLeftIcon, and AngleLeftIcon),
but they should use the icon prop pattern for consistency with other
DualListSelector examples. Remove the icon elements from inside the
DualListSelectorControl components and instead pass each icon as an icon prop to
the respective DualListSelectorControl element.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Nitpick comments:
In
`@packages/react-drag-drop/src/components/DragDrop/examples/DragDropContainerDualListSelector.tsx`:
- Around line 147-174: The DualListSelectorControl components are currently
rendering icons as child elements (AngleRightIcon,
RhMicronsDoubleCaretRightIcon, RhMicronsDoubleCaretLeftIcon, and AngleLeftIcon),
but they should use the icon prop pattern for consistency with other
DualListSelector examples. Remove the icon elements from inside the
DualListSelectorControl components and instead pass each icon as an icon prop to
the respective DualListSelectorControl element.

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5a47a212-fd49-466f-9823-9322f267535e

📥 Commits

Reviewing files that changed from the base of the PR and between 6198934 and 9907d0d.

⛔ Files ignored due to path filters (3)
  • packages/react-core/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationNavigation.test.tsx.snap is excluded by !**/*.snap, !**/generated/**
  • packages/react-core/src/components/Pagination/__tests__/__snapshots__/Pagination.test.tsx.snap is excluded by !**/*.snap
  • packages/react-core/src/deprecated/components/DualListSelector/__tests__/__snapshots__/DualListSelector.test.tsx.snap is excluded by !**/*.snap
📒 Files selected for processing (19)
  • packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasic.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx
  • packages/react-core/src/components/Pagination/PaginationNavigation.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/DualListSelector.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelector.md
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposable.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
  • packages/react-drag-drop/src/components/DragDrop/examples/DragDrop.md
  • packages/react-drag-drop/src/components/DragDrop/examples/DragDropContainerDualListSelector.tsx
  • packages/react-drag-drop/src/components/DragDrop/examples/DragDropDemos.md
  • packages/react-drag-drop/src/components/DragDrop/examples/DualListSelectorDraggable.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorBasicDemo.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorTreeDemo.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx
💤 Files with no reviewable changes (1)
  • packages/react-drag-drop/src/components/DragDrop/examples/DragDrop.md

…sDoubleCaretRightIcon

Co-authored-by: Cursor <cursoragent@cursor.com>
@rebeccaalpert rebeccaalpert force-pushed the cursor/replace-angle-double-right-icon-with-rh-microns-double-caret-right branch from 9907d0d to d489970 Compare June 18, 2026 19:12
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.

2 participants