Skip to content

Commit 4ad4525

Browse files
tlabajwise-king-sullyman
tlabaj
and
wise-king-sullyman
authored
chore(CaretDownIcon): Replace all usages of CaretDownIcon with RhUiCaretDownIcon (#12368)
* chore(CaretDownIcon): Replace all usages of CaretDownIcon with RhUiCaretDownIcon * update snapshots * Replace ui caret down icon with microns caret down icon * update snapshots --------- Co-authored-by: Austin Sullivan <ausulliv@redhat.com>
1 parent 4837048 commit 4ad4525

26 files changed

Lines changed: 244 additions & 893 deletions

File tree

‎packages/react-core/src/components/Alert/__tests__/AlertToggleExpandButton.test.tsx‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import { render, screen } from '@testing-library/react';
22
import userEvent from '@testing-library/user-event';
3+
import '@testing-library/jest-dom';
34

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

1213
test('Renders without children', () => {
1314
render(
14-
<div data-testid="container">
15-
<AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
16-
<AlertToggleExpandButton />
17-
</AlertContext.Provider>
18-
</div>
15+
<AlertContext.Provider value={{ title: 'title', variantLabel: 'variantLabel' }}>
16+
<AlertToggleExpandButton />
17+
</AlertContext.Provider>
1918
);
2019

21-
expect(screen.getByTestId('container').firstChild).toBeVisible();
20+
expect(screen.getByRole('button')).toBeVisible();
2221
});
2322

2423
test('Renders with an aria label composed with the title and variantLabel provided via a context by default', () => {

‎packages/react-core/src/components/Breadcrumb/examples/Breadcrumb.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ ouia: true
88

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

1313
## Examples
1414

‎packages/react-core/src/components/DatePicker/__tests__/__snapshots__/DatePicker.test.tsx.snap‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -173,24 +173,12 @@ exports[`With popover opened 1`] = `
173173
fill="currentColor"
174174
height="1em"
175175
role="img"
176+
viewBox="0 0 20 20"
176177
width="1em"
177178
>
178-
<svg
179-
class="pf-v6-icon-default"
180-
viewBox="0 0 320 512"
181-
>
182-
<path
183-
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"
184-
/>
185-
</svg>
186-
<svg
187-
class="pf-v6-icon-rh-ui"
188-
viewBox="0 0 32 32"
189-
>
190-
<path
191-
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"
192-
/>
193-
</svg>
179+
<path
180+
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"
181+
/>
194182
</svg>
195183
</span>
196184
</span>

‎packages/react-core/src/components/FormSelect/FormSelect.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import { ValidatedOptions } from '../../helpers/constants';
66
import { FormControlIcon } from '../FormControl/FormControlIcon';
77
import { getOUIAProps, OUIAProps } from '../../helpers';
88
import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
9-
import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
9+
import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
1010

1111
export interface FormSelectProps
1212
extends Omit<React.HTMLProps<HTMLSelectElement>, 'onChange' | 'onBlur' | 'onFocus' | 'disabled'>, OUIAProps {
@@ -98,7 +98,7 @@ class FormSelect extends Component<FormSelectProps> {
9898
<span className={css(styles.formControlUtilities)}>
9999
{hasStatusIcon && <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />}
100100
<span className={css(styles.formControlToggleIcon)}>
101-
<CaretDownIcon />
101+
<RhMicronsCaretDownIcon />
102102
</span>
103103
</span>
104104
</span>

‎packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap‎

Lines changed: 36 additions & 144 deletions
Original file line numberDiff line numberDiff line change
@@ -32,24 +32,12 @@ exports[`FormSelect Disabled FormSelect input 1`] = `
3232
fill="currentColor"
3333
height="1em"
3434
role="img"
35+
viewBox="0 0 20 20"
3536
width="1em"
3637
>
37-
<svg
38-
class="pf-v6-icon-default"
39-
viewBox="0 0 320 512"
40-
>
41-
<path
42-
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"
43-
/>
44-
</svg>
45-
<svg
46-
class="pf-v6-icon-rh-ui"
47-
viewBox="0 0 32 32"
48-
>
49-
<path
50-
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"
51-
/>
52-
</svg>
38+
<path
39+
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"
40+
/>
5341
</svg>
5442
</span>
5543
</span>
@@ -88,24 +76,12 @@ exports[`FormSelect FormSelect input with aria-label does not generate console e
8876
fill="currentColor"
8977
height="1em"
9078
role="img"
79+
viewBox="0 0 20 20"
9180
width="1em"
9281
>
93-
<svg
94-
class="pf-v6-icon-default"
95-
viewBox="0 0 320 512"
96-
>
97-
<path
98-
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"
99-
/>
100-
</svg>
101-
<svg
102-
class="pf-v6-icon-rh-ui"
103-
viewBox="0 0 32 32"
104-
>
105-
<path
106-
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"
107-
/>
108-
</svg>
82+
<path
83+
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"
84+
/>
10985
</svg>
11086
</span>
11187
</span>
@@ -145,24 +121,12 @@ exports[`FormSelect FormSelect input with id does not generate console error 1`]
145121
fill="currentColor"
146122
height="1em"
147123
role="img"
124+
viewBox="0 0 20 20"
148125
width="1em"
149126
>
150-
<svg
151-
class="pf-v6-icon-default"
152-
viewBox="0 0 320 512"
153-
>
154-
<path
155-
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"
156-
/>
157-
</svg>
158-
<svg
159-
class="pf-v6-icon-rh-ui"
160-
viewBox="0 0 32 32"
161-
>
162-
<path
163-
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"
164-
/>
165-
</svg>
127+
<path
128+
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"
129+
/>
166130
</svg>
167131
</span>
168132
</span>
@@ -200,24 +164,12 @@ exports[`FormSelect FormSelect input with no aria-label or id generates console
200164
fill="currentColor"
201165
height="1em"
202166
role="img"
167+
viewBox="0 0 20 20"
203168
width="1em"
204169
>
205-
<svg
206-
class="pf-v6-icon-default"
207-
viewBox="0 0 320 512"
208-
>
209-
<path
210-
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"
211-
/>
212-
</svg>
213-
<svg
214-
class="pf-v6-icon-rh-ui"
215-
viewBox="0 0 32 32"
216-
>
217-
<path
218-
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"
219-
/>
220-
</svg>
170+
<path
171+
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"
172+
/>
221173
</svg>
222174
</span>
223175
</span>
@@ -302,24 +254,12 @@ exports[`FormSelect Grouped FormSelect input 1`] = `
302254
fill="currentColor"
303255
height="1em"
304256
role="img"
257+
viewBox="0 0 20 20"
305258
width="1em"
306259
>
307-
<svg
308-
class="pf-v6-icon-default"
309-
viewBox="0 0 320 512"
310-
>
311-
<path
312-
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"
313-
/>
314-
</svg>
315-
<svg
316-
class="pf-v6-icon-rh-ui"
317-
viewBox="0 0 32 32"
318-
>
319-
<path
320-
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"
321-
/>
322-
</svg>
260+
<path
261+
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"
262+
/>
323263
</svg>
324264
</span>
325265
</span>
@@ -396,24 +336,12 @@ exports[`FormSelect Simple FormSelect input 1`] = `
396336
fill="currentColor"
397337
height="1em"
398338
role="img"
339+
viewBox="0 0 20 20"
399340
width="1em"
400341
>
401-
<svg
402-
class="pf-v6-icon-default"
403-
viewBox="0 0 320 512"
404-
>
405-
<path
406-
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"
407-
/>
408-
</svg>
409-
<svg
410-
class="pf-v6-icon-rh-ui"
411-
viewBox="0 0 32 32"
412-
>
413-
<path
414-
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"
415-
/>
416-
</svg>
342+
<path
343+
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"
344+
/>
417345
</svg>
418346
</span>
419347
</span>
@@ -469,24 +397,12 @@ exports[`FormSelect invalid FormSelect input 1`] = `
469397
fill="currentColor"
470398
height="1em"
471399
role="img"
400+
viewBox="0 0 20 20"
472401
width="1em"
473402
>
474-
<svg
475-
class="pf-v6-icon-default"
476-
viewBox="0 0 320 512"
477-
>
478-
<path
479-
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"
480-
/>
481-
</svg>
482-
<svg
483-
class="pf-v6-icon-rh-ui"
484-
viewBox="0 0 32 32"
485-
>
486-
<path
487-
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"
488-
/>
489-
</svg>
403+
<path
404+
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"
405+
/>
490406
</svg>
491407
</span>
492408
</span>
@@ -542,24 +458,12 @@ exports[`FormSelect validated success FormSelect input 1`] = `
542458
fill="currentColor"
543459
height="1em"
544460
role="img"
461+
viewBox="0 0 20 20"
545462
width="1em"
546463
>
547-
<svg
548-
class="pf-v6-icon-default"
549-
viewBox="0 0 320 512"
550-
>
551-
<path
552-
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"
553-
/>
554-
</svg>
555-
<svg
556-
class="pf-v6-icon-rh-ui"
557-
viewBox="0 0 32 32"
558-
>
559-
<path
560-
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"
561-
/>
562-
</svg>
464+
<path
465+
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"
466+
/>
563467
</svg>
564468
</span>
565469
</span>
@@ -615,24 +519,12 @@ exports[`FormSelect validated warning FormSelect input 1`] = `
615519
fill="currentColor"
616520
height="1em"
617521
role="img"
522+
viewBox="0 0 20 20"
618523
width="1em"
619524
>
620-
<svg
621-
class="pf-v6-icon-default"
622-
viewBox="0 0 320 512"
623-
>
624-
<path
625-
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"
626-
/>
627-
</svg>
628-
<svg
629-
class="pf-v6-icon-rh-ui"
630-
viewBox="0 0 32 32"
631-
>
632-
<path
633-
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"
634-
/>
635-
</svg>
525+
<path
526+
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"
527+
/>
636528
</svg>
637529
</span>
638530
</span>

‎packages/react-core/src/components/Menu/examples/Menu.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@ import TableIcon from '@patternfly/react-icons/dist/esm/icons/table-icon';
3030
import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
3131
import StorageDomainIcon from '@patternfly/react-icons/dist/esm/icons/storage-domain-icon';
3232
import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
33-
import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
33+
import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
3434

3535
## Examples
3636

‎packages/react-core/src/components/MenuToggle/MenuToggle.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { Component, forwardRef, isValidElement } from 'react';
22
import styles from '@patternfly/react-styles/css/components/MenuToggle/menu-toggle';
33
import { css } from '@patternfly/react-styles';
4-
import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
4+
import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
55
import { BadgeProps } from '../Badge';
66
import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
77
import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
@@ -154,7 +154,7 @@ class MenuToggleBase extends Component<MenuToggleProps> {
154154
<span className={css(styles.menuToggleControls)}>
155155
{status !== undefined && <span className={css(styles.menuToggleStatusIcon)}>{_statusIcon}</span>}
156156
<span className={css(styles.menuToggleToggleIcon)}>
157-
<CaretDownIcon />
157+
<RhMicronsCaretDownIcon />
158158
</span>
159159
</span>
160160
);

0 commit comments

Comments
 (0)