Skip to content

Commit b6bf351

Browse files
thatblindgeyethatblindgeye
committed
feat(icons): updated caret icons to RH microns
1 parent e8f083e commit b6bf351

44 files changed

Lines changed: 319 additions & 1070 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎packages/react-core/src/components/Accordion/AccordionToggle.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { useContext } from 'react';
22
import { css } from '@patternfly/react-styles';
33
import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
4-
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
4+
import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
55
import { AccordionContext, AccordionItemContext } from './AccordionContext';
66

77
export interface AccordionToggleProps extends React.DetailedHTMLProps<
@@ -27,7 +27,7 @@ export const AccordionToggle: React.FunctionComponent<AccordionToggleProps> = ({
2727
}: AccordionToggleProps) => {
2828
const renderToggleIcon = () => (
2929
<span className={css(styles.accordionToggleIcon)}>
30-
<AngleRightIcon />
30+
<RhMicronsCaretDownIcon />
3131
</span>
3232
);
3333

‎packages/react-core/src/components/Accordion/__tests__/AccordionToggle.test.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { AccordionToggle } from '../AccordionToggle';
44
import { AccordionContext, AccordionItemContext } from '../AccordionContext';
55
import styles from '@patternfly/react-styles/css/components/Accordion/accordion';
66

7-
jest.mock('@patternfly/react-icons/dist/esm/icons/angle-right-icon', () => () => 'Icon mock');
7+
jest.mock('@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon', () => () => 'Icon mock');
88

99
test('Renders without children', () => {
1010
render(

‎packages/react-core/src/components/Breadcrumb/BreadcrumbHeading.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Fragment } from 'react';
2-
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
2+
import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
33
import styles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
44
import { css } from '@patternfly/react-styles';
55

@@ -32,7 +32,7 @@ export const BreadcrumbHeading: React.FunctionComponent<BreadcrumbHeadingProps>
3232
<li {...props} className={css(styles.breadcrumbItem, className)}>
3333
{showDivider && (
3434
<span className={styles.breadcrumbItemDivider}>
35-
<AngleRightIcon />
35+
<RhMicronsCaretRightIcon />
3636
</span>
3737
)}
3838
<h1 className={styles.breadcrumbHeading}>

‎packages/react-core/src/components/Breadcrumb/BreadcrumbItem.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
1+
import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
22
import styles from '@patternfly/react-styles/css/components/Breadcrumb/breadcrumb';
33
import { css } from '@patternfly/react-styles';
44

@@ -47,7 +47,7 @@ export const BreadcrumbItem: React.FunctionComponent<BreadcrumbItemProps> = ({
4747
<li {...props} className={css(styles.breadcrumbItem, classNameProp)}>
4848
{showDivider && (
4949
<span className={styles.breadcrumbItemDivider}>
50-
<AngleRightIcon />
50+
<RhMicronsCaretRightIcon />
5151
</span>
5252
)}
5353
{component === 'button' && (

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

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -53,24 +53,12 @@ exports[`Breadcrumb component should render breadcrumb with children 1`] = `
5353
fill="currentColor"
5454
height="1em"
5555
role="img"
56+
viewBox="0 0 20 20"
5657
width="1em"
5758
>
58-
<svg
59-
class="pf-v6-icon-default"
60-
viewBox="0 0 256 512"
61-
>
62-
<path
63-
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
64-
/>
65-
</svg>
66-
<svg
67-
class="pf-v6-icon-rh-ui"
68-
viewBox="0 0 32 32"
69-
>
70-
<path
71-
d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
72-
/>
73-
</svg>
59+
<path
60+
d="M14.35 8.94 6.71 1.29l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l7.29 7.29-7.29 7.29a1.003 1.003 0 0 0 1.42 1.42l7.65-7.65c.59-.59.59-1.54 0-2.12Z"
61+
/>
7462
</svg>
7563
</span>
7664
<a

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

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@ import { Button } from '../Button';
44
import { Select, SelectList, SelectOption } from '../Select';
55
import { MenuToggle, MenuToggleElement } from '../MenuToggle';
66
import { InputGroup, InputGroupItem } from '../InputGroup';
7-
import AngleLeftIcon from '@patternfly/react-icons/dist/esm/icons/angle-left-icon';
8-
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
7+
import RhMicronsCaretLeftIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-left-icon';
8+
import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
99
import { css } from '@patternfly/react-styles';
1010
import styles from '@patternfly/react-styles/css/components/CalendarMonth/calendar-month';
1111
import { useSSRSafeId } from '../../helpers';
@@ -292,7 +292,7 @@ export const CalendarMonth = ({
292292
variant="plain"
293293
aria-label={prevMonthAriaLabel}
294294
onClick={(ev: React.MouseEvent) => onMonthClick(ev, prevMonth)}
295-
icon={<AngleLeftIcon />}
295+
icon={<RhMicronsCaretLeftIcon />}
296296
/>
297297
</div>
298298
<InputGroup>
@@ -355,7 +355,7 @@ export const CalendarMonth = ({
355355
variant="plain"
356356
aria-label={nextMonthAriaLabel}
357357
onClick={(ev: React.MouseEvent) => onMonthClick(ev, nextMonth)}
358-
icon={<AngleRightIcon />}
358+
icon={<RhMicronsCaretRightIcon />}
359359
/>
360360
</div>
361361
</div>

‎packages/react-core/src/components/Card/CardHeader.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import { CardHeaderMain } from './CardHeaderMain';
55
import { CardActions } from './CardActions';
66
import { CardSelectableActions } from './CardSelectableActions';
77
import { Button } from '../Button';
8-
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
8+
import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
99
import { Radio } from '../Radio';
1010
import { Checkbox } from '../Checkbox';
1111
import { useSSRSafeId } from '../../helpers';
@@ -107,7 +107,7 @@ export const CardHeader: React.FunctionComponent<CardHeaderProps> = ({
107107
{...toggleButtonProps}
108108
icon={
109109
<span className={css(styles.cardHeaderToggleIcon)}>
110-
<AngleRightIcon />
110+
<RhMicronsCaretDownIcon />
111111
</span>
112112
}
113113
/>

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

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -39,24 +39,12 @@ exports[`CardHeader onExpand adds the toggle button 1`] = `
3939
fill="currentColor"
4040
height="1em"
4141
role="img"
42+
viewBox="0 0 20 20"
4243
width="1em"
4344
>
44-
<svg
45-
class="pf-v6-icon-default"
46-
viewBox="0 0 256 512"
47-
>
48-
<path
49-
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
50-
/>
51-
</svg>
52-
<svg
53-
class="pf-v6-icon-rh-ui"
54-
viewBox="0 0 32 32"
55-
>
56-
<path
57-
d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
58-
/>
59-
</svg>
45+
<path
46+
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"
47+
/>
6048
</svg>
6149
</span>
6250
</span>

‎packages/react-core/src/components/ClipboardCopy/ClipboardCopyToggle.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import styles from '@patternfly/react-styles/css/components/ClipboardCopy/clipboard-copy';
22
import { css } from '@patternfly/react-styles';
3-
import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
3+
import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
44
import { Button } from '../Button';
55

66
export interface ClipboardCopyToggleProps extends Omit<
@@ -31,7 +31,7 @@ export const ClipboardCopyToggle: React.FunctionComponent<ClipboardCopyTogglePro
3131
{...props}
3232
icon={
3333
<div className={css(styles.clipboardCopyToggleIcon)}>
34-
<AngleRightIcon />
34+
<RhMicronsCaretDownIcon />
3535
</div>
3636
}
3737
/>

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

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -23,24 +23,12 @@ exports[`Matches snapshot 1`] = `
2323
fill="currentColor"
2424
height="1em"
2525
role="img"
26+
viewBox="0 0 20 20"
2627
width="1em"
2728
>
28-
<svg
29-
class="pf-v6-icon-default"
30-
viewBox="0 0 256 512"
31-
>
32-
<path
33-
d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
34-
/>
35-
</svg>
36-
<svg
37-
class="pf-v6-icon-rh-ui"
38-
viewBox="0 0 32 32"
39-
>
40-
<path
41-
d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
42-
/>
43-
</svg>
29+
<path
30+
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"
31+
/>
4432
</svg>
4533
</div>
4634
</span>

0 commit comments

Comments
 (0)