Skip to content

fix(AngleDoubleRightIcon): Replace AngleDoubleRightIcon with RhMicronsDoubleCaretRightIcon#12493

Merged
kmcfaul merged 1 commit into
patternfly:mainfrom
rebeccaalpert:cursor/replace-angle-double-right-icon-with-rh-microns-double-caret-right
Jul 8, 2026
Merged

fix(AngleDoubleRightIcon): Replace AngleDoubleRightIcon with RhMicronsDoubleCaretRightIcon#12493
kmcfaul merged 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 “Add all” and related navigation icons across DualListSelector examples, deprecated variants, DragDrop DualListSelector examples, and the demo app to use a new right-facing double-caret icon.
    • Updated Pagination’s last-page button to use the matching new icon.
  • Documentation

    • Refreshed DualListSelector and DragDrop example documentation/snippets to reflect the icon changes and removed now-unused icon imports from markdown examples.

@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: e3f800e5-35d9-4bb2-9c75-846d03abca78

📥 Commits

Reviewing files that changed from the base of the PR and between 711f22f and 71cd9f3.

⛔ 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 (12)
  • packages/react-drag-drop/src/components/DragDrop/examples/DragDropDemos.md
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx
  • packages/react-drag-drop/src/components/DragDrop/examples/DualListSelectorDraggable.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposable.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelector.md
  • packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorTreeDemo.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx
  • packages/react-drag-drop/src/components/DragDrop/examples/DragDropContainerDualListSelector.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicSearch.tsx
  • packages/react-core/src/components/Pagination/PaginationNavigation.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasic.tsx
🚧 Files skipped from review as they are similar to previous changes (6)
  • packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorBasicDemo.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/DualListSelector.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposableTree.tsx

Walkthrough

This PR replaces AngleDoubleRightIcon with RhMicronsDoubleCaretRightIcon across DualListSelector examples, deprecated DualListSelector code, PaginationNavigation, and related demo markdown. One DragDrop markdown example also removes unused icon imports.

Changes

Icon swap across DualListSelector and pagination

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.
react-core DualListSelector basic examples icon update
packages/react-core/src/components/DualListSelector/examples/DualListSelector*.tsx, packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
React-core DualListSelector basic example files and the markdown snippet swap the Add all icon import and icon prop to RhMicronsDoubleCaretRightIcon.
react-core deprecated DualListSelector examples icon update
packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelector*.tsx, packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelector.md
Deprecated DualListSelector example files and markdown update the Add all icon import and rendered icon to RhMicronsDoubleCaretRightIcon.
react-drag-drop and react-integration demos icon update
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 update the Add all icon import and icon prop; DragDrop.md removes unused icon imports and DragDropDemos.md updates its snippet import.

Estimated code review effort: 1 (Trivial) | ~3 minutes

Possibly related PRs

  • patternfly/patternfly-react#12381: Swaps the matching left-side double-caret icons for "Remove all" and "first page" controls in the same DualListSelector and PaginationNavigation areas.

Suggested reviewers: kmcfaul, 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 matches the main change: replacing AngleDoubleRightIcon with RhMicronsDoubleCaretRightIcon.
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.
✨ 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.

@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

@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
@rebeccaalpert rebeccaalpert requested a review from kmcfaul June 24, 2026 13:12
@rebeccaalpert rebeccaalpert force-pushed the cursor/replace-angle-double-right-icon-with-rh-microns-double-caret-right branch from d489970 to 711f22f Compare July 8, 2026 16:34
…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 711f22f to 71cd9f3 Compare July 8, 2026 17:42
@kmcfaul kmcfaul merged commit a9bd226 into patternfly:main Jul 8, 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