Skip to content

chore(CaretDownIcon): Replace all usages of CaretDownIcon with RhUiCaretDownIcon #12368

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
tlabaj wants to merge 4 commits into
base: main
Choose a base branch
from
Open

chore(CaretDownIcon): Replace all usages of CaretDownIcon with RhUiCaretDownIcon #12368

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
a033f40
chore(CaretDownIcon): Replace all usages of CaretDownIcon with RhUiCa…
tlabaj Apr 21, 2026
06f62a2
update snapshots
tlabaj Apr 21, 2026
d262982
Replace ui caret down icon with microns caret down icon
wise-king-sullyman May 14, 2026
efd7232
Merge branch 'main' into caret_down_icon
wise-king-sullyman May 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 5 additions & 6 deletions packages/react-core/src/components/Alert/__tests__/AlertToggleExpandButton.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
import '@testing-library/jest-dom';

import { AlertToggleExpandButton } from '../AlertToggleExpandButton';
import { AlertContext } from '../AlertContext';
Expand All @@ -11,14 +12,12 @@ jest.mock('@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon', (

test('Renders without children', () => {
render(
<div data-testid="container">
<AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
<AlertToggleExpandButton />
</AlertContext.Provider>
</div>
<AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
<AlertToggleExpandButton />
</AlertContext.Provider>
);

expect(screen.getByTestId('container').firstChild).toBeVisible();
expect(screen.getByRole('button')).toBeVisible();
});

test('Renders with an aria label composed with the title and variantLabel provided via a context by default', () => {
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ ouia: true

import { useRef, useState } from 'react';
import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';

## Examples

Expand Down
4 changes: 2 additions & 2 deletions ...re/src/components/ClipboardCopy/__tests__/__snapshots__/ClipboardCopyToggle.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ exports[`Matches snapshot 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
viewBox="0 0 32 32"
width="1em"
>
<path
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
/>
</svg>
</div>
Expand Down
4 changes: 2 additions & 2 deletions ...re/src/components/DataList/__tests__/Generated/__snapshots__/DataListToggle.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,11 +32,11 @@ exports[`DataListToggle should match snapshot (auto-generated) 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
viewBox="0 0 32 32"
width="1em"
>
<path
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
/>
</svg>
</div>
Expand Down
20 changes: 4 additions & 16 deletions ...ges/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -173,24 +173,12 @@ exports[`With popover opened 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 32 32"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 320 512"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
/>
</svg>
<path
d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
/>
</svg>
</span>
</span>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/FormSelect/FormSelect.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import { ValidatedOptions } from '../../helpers/constants';
import { FormControlIcon } from '../FormControl/FormControlIcon';
import { getOUIAProps, OUIAProps } from '../../helpers';
import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';

export interface FormSelectProps
extends Omit<React.HTMLProps<HTMLSelectElement>, 'onChange' | 'onBlur' | 'onFocus' | 'disabled'>, OUIAProps {
Expand Down Expand Up @@ -98,7 +98,7 @@ class FormSelect extends Component<FormSelectProps> {
<span className={css(styles.formControlUtilities)}>
{hasStatusIcon && <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />}
<span className={css(styles.formControlToggleIcon)}>
<CaretDownIcon />
<RhMicronsCaretDownIcon />
</span>
</span>
</span>
Expand Down
180 changes: 36 additions & 144 deletions ...ges/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,24 +32,12 @@ exports[`FormSelect Disabled FormSelect input 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 320 512"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
/>
</svg>
<path
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -88,24 +76,12 @@ exports[`FormSelect FormSelect input with aria-label does not generate console e
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 320 512"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
/>
</svg>
<path
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -145,24 +121,12 @@ exports[`FormSelect FormSelect input with id does not generate console error 1`]
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 320 512"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
/>
</svg>
<path
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -200,24 +164,12 @@ exports[`FormSelect FormSelect input with no aria-label or id generates console
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 320 512"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
/>
</svg>
<path
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -302,24 +254,12 @@ exports[`FormSelect Grouped FormSelect input 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 320 512"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
/>
</svg>
<path
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -396,24 +336,12 @@ exports[`FormSelect Simple FormSelect input 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 320 512"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
/>
</svg>
<path
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -469,24 +397,12 @@ exports[`FormSelect invalid FormSelect input 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 320 512"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
/>
</svg>
<path
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -542,24 +458,12 @@ exports[`FormSelect validated success FormSelect input 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 320 512"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
/>
</svg>
<path
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
/>
</svg>
</span>
</span>
Expand Down Expand Up @@ -615,24 +519,12 @@ exports[`FormSelect validated warning FormSelect input 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 320 512"
>
<path
d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
/>
</svg>
<path
d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
/>
</svg>
</span>
</span>
Expand Down
2 changes: 1 addition & 1 deletion packages/react-core/src/components/Menu/examples/Menu.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';

## Examples

Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/MenuToggle/MenuToggle.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Component, forwardRef, isValidElement } from 'react';
import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-toggle';
import { css } from '@patternfly/react-styles';
import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
import { BadgeProps } from '../Badge';
import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
Expand Down Expand Up @@ -154,7 +154,7 @@ class MenuToggleBase extends Component<MenuToggleProps> {
<span className={css(styles.menuToggleControls)}>
{status !== undefined && <span className={css(styles.menuToggleStatusIcon)}>{_statusIcon}</span>}
<span className={css(styles.menuToggleToggleIcon)}>
<CaretDownIcon />
<RhMicronsCaretDownIcon />
</span>
</span>
);
Expand Down
Loading
Loading