Skip to content

Updated all usage of AngleDoubleLeftIcon to RhUiDoubleCaretLeftIcon#12381

Open
tlabaj wants to merge 1 commit intopatternfly:mainfrom
tlabaj:angle_double_left_icon
Open

Updated all usage of AngleDoubleLeftIcon to RhUiDoubleCaretLeftIcon#12381
tlabaj wants to merge 1 commit intopatternfly:mainfrom
tlabaj:angle_double_left_icon

Conversation

@tlabaj
Copy link
Copy Markdown
Contributor

@tlabaj tlabaj commented Apr 27, 2026

What: towards #12244

Summary

Replaces all usages of AngleDoubleLeftIcon with RhUiDoubleCaretLeftIcon (import path: @patternfly/react-icons/dist/esm/icons/rh-ui-double-caret-left-icon) across production code, examples, and demo apps for consistency with the Red Hat UI icon set.

Changes

  • Pagination: PaginationNavigation “first page” control now uses RhUiDoubleCaretLeftIcon.
  • Dual list selector: Deprecated DualListSelector and all non–code-connect examples (basic, tooltips, search, tree, complex actions, composable, drag-and-drop variants) plus related .md docs.
  • Drag and drop: DragDrop / DualListSelector example components and markdown.
  • Integration app: demo-app-ts DualListSelector demo screens updated to match.
  • Tests: Jest snapshots updated for components whose rendered SVG output changed (Pagination, PaginationNavigation, deprecated DualListSelector).

Summary by CodeRabbit

  • Style
    • Updated icon appearance in DualListSelector "Remove all" action button controls throughout all component implementations, examples, and integrated demo applications.
    • Applied consistent icon changes to both current and deprecated component versions across the entire codebase.
    • Updated drag-and-drop examples, Pagination navigation buttons, and documentation reference samples with the new icon styling.

@tlabaj tlabaj requested review from a team, nicolethoen and thatblindgeye and removed request for a team April 27, 2026 13:50
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented Apr 27, 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: 630e9b0d-d895-4c46-9cdf-91782a524363

📥 Commits

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

⛔ 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

Walkthrough

This PR systematically replaces the AngleDoubleLeftIcon import and usage with RhUiDoubleCaretLeftIcon across DualListSelector components, Pagination components, and their examples in multiple packages, as well as related demo applications.

Changes

Cohort / File(s) Summary
DualListSelector Examples (react-core)
packages/react-core/src/components/DualListSelector/examples/DualListSelector.md, DualListSelectorBasic.tsx, DualListSelectorBasicSearch.tsx, DualListSelectorBasicTooltips.tsx, DualListSelectorComplexOptionsActions.tsx, DualListSelectorTree.tsx
Replace AngleDoubleLeftIcon import with RhUiDoubleCaretLeftIcon and update "Remove all" control icon rendering across all DualListSelector example files.
Pagination Component
packages/react-core/src/components/Pagination/PaginationNavigation.tsx
Replace AngleDoubleLeftIcon import with RhUiDoubleCaretLeftIcon for the "first page" button icon.
Deprecated DualListSelector Components (react-core)
packages/react-core/src/deprecated/components/DualListSelector/DualListSelector.tsx, examples/DualListSelector.md, examples/DualListSelectorComposable.tsx, examples/DualListSelectorComposableDragDrop.tsx, examples/DualListSelectorComposableTree.tsx
Replace AngleDoubleLeftIcon import with RhUiDoubleCaretLeftIcon in deprecated DualListSelector component and its example files for the "Remove all" control icon.
Drag-Drop Examples (react-drag-drop)
packages/react-drag-drop/src/components/DragDrop/examples/DragDrop.md, DragDropContainerDualListSelector.tsx, DragDropDemos.md, DualListSelectorDraggable.tsx
Replace AngleDoubleLeftIcon import with RhUiDoubleCaretLeftIcon in drag-drop examples and markdown documentation.
Demo Applications
packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorBasicDemo.tsx, DualListSelectorTreeDemo.tsx, DualListSelectorWithActionsDemo.tsx
Replace AngleDoubleLeftIcon import with RhUiDoubleCaretLeftIcon in DualListSelector demo applications.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related issues

Possibly related PRs

Suggested reviewers

  • mcoker
  • thatblindgeye
  • kmcfaul
  • dlabaj
🚥 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 all usages of AngleDoubleLeftIcon with RhUiDoubleCaretLeftIcon 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.

@tlabaj tlabaj requested review from a team, bekah-stephens and phcox and removed request for a team April 27, 2026 13:50
@patternfly-build
Copy link
Copy Markdown
Collaborator

patternfly-build commented Apr 27, 2026

Copy link
Copy Markdown
Contributor

@nicolethoen nicolethoen left a comment

Choose a reason for hiding this comment

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

Looks good - snapshots might need to be updated again

Copy link
Copy Markdown
Contributor

@thatblindgeye thatblindgeye left a comment

Choose a reason for hiding this comment

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

Can we check if Cor

@tlabaj
Copy link
Copy Markdown
Contributor Author

tlabaj commented Apr 27, 2026

Can we check if Cor

@thatblindgeye Your message got cut off. What do we need to check?

@thatblindgeye
Copy link
Copy Markdown
Contributor

lol whoops. Was gonna ask if we can check if Core has an issue to make the same update but then I remembered I had made an issue during my initial single caret updates there.

Copy link
Copy Markdown

@bekah-stephens bekah-stephens left a comment

Choose a reason for hiding this comment

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

I'm having issues pulling up the preview link, so I can't double check. I believe these should be using the micron version of the double caret -- @andrew-ronaldson is this true? I'm assuming most places where an icon has a micron version, we want to use that

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.

5 participants