Skip to content

Updated all usage of AngleDoubleLeftIcon to RhUiDoubleCaretLeftIcon#12381

Open
tlabaj wants to merge 1 commit into
patternfly:mainfrom
tlabaj:angle_double_left_icon
Open

Updated all usage of AngleDoubleLeftIcon to RhUiDoubleCaretLeftIcon#12381
tlabaj wants to merge 1 commit into
patternfly: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 the left-direction icon used for "Remove all" controls across DualListSelector components, examples, demos, and deprecated variants for a more consistent appearance.
    • Applied the same icon update to Pagination navigation and related drag-and-drop example samples.
    • Ensures consistent visual styling in documentation, demos, and runtime examples.

Review Change Stack

Closes #12398

@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: 427fadc4-eb24-4101-a781-23ada9a5d4a0

📥 Commits

Reviewing files that changed from the base of the PR and between 89e7703 and 1437cee.

⛔ 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 skipped from review due to trivial changes (14)
  • packages/react-core/src/components/Pagination/PaginationNavigation.tsx
  • packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorTreeDemo.tsx
  • packages/react-drag-drop/src/components/DragDrop/examples/DragDropContainerDualListSelector.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasic.tsx
  • packages/react-drag-drop/src/components/DragDrop/examples/DragDrop.md
  • packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/DualListSelectorWithActionsDemo.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorComplexOptionsActions.tsx
  • packages/react-drag-drop/src/components/DragDrop/examples/DualListSelectorDraggable.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorBasicTooltips.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelector.md
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposableDragDrop.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/examples/DualListSelectorComposableTree.tsx
  • packages/react-core/src/components/DualListSelector/examples/DualListSelectorTree.tsx
  • packages/react-core/src/deprecated/components/DualListSelector/DualListSelector.tsx

Walkthrough

This PR replaces all imports and render sites of AngleDoubleLeftIcon with RhUiDoubleCaretLeftIcon across DualListSelector components/examples, deprecated DualListSelector files, DragDrop examples, Pagination navigation, and associated demo apps.

Changes

DualListSelector & related examples

Layer / File(s) Summary
Core DualListSelector files
packages/react-core/src/components/DualListSelector/examples/*, packages/react-core/src/deprecated/components/DualListSelector/*
Replace AngleDoubleLeftIcon imports/usages with RhUiDoubleCaretLeftIcon in examples and deprecated DualListSelector component (updates import lines and "Remove all" control icon props).
Integration demo apps
packages/react-integration/demo-app-ts/src/components/demos/DualListSelectorDemo/*
Update DualListSelector demo components to import and render RhUiDoubleCaretLeftIcon for the "Remove all" control.
DragDrop examples and docs
packages/react-drag-drop/src/components/DragDrop/examples/*
Swap AngleDoubleLeftIconRhUiDoubleCaretLeftIcon in DragDrop example files and markdown demos that include DualListSelector usage.

Pagination

Layer / File(s) Summary
Pagination first-page icon
packages/react-core/src/components/Pagination/PaginationNavigation.tsx
Replace AngleDoubleLeftIcon import with RhUiDoubleCaretLeftIcon and update the "first page" button's icon prop accordingly; no handler or logic changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~12 minutes

Possibly related issues

Possibly related PRs

Suggested reviewers

  • phcox
  • thatblindgeye
  • nicolethoen
🚥 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 accurately and concisely summarizes the main change: replacing all AngleDoubleLeftIcon usages with RhUiDoubleCaretLeftIcon.
Linked Issues check ✅ Passed All three acceptance criteria from issue #12398 are met: AngleDoubleLeftIcon imports replaced across components, no broken references introduced, and test snapshots updated.
Out of Scope Changes check ✅ Passed All changes are directly related to replacing AngleDoubleLeftIcon with RhUiDoubleCaretLeftIcon; no unrelated modifications found.
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, 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

@kmcfaul kmcfaul force-pushed the angle_double_left_icon branch from 89e7703 to 1437cee Compare May 26, 2026 14:46
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 AngleDoubleLeftIcon with RhUiDoubleCaretLeftIcon

5 participants