Skip to content

Commit bee3478

Browse files
wise-king-sullymanwise-king-sullyman
committed
feat(icons): update close icons to use the rh micron
1 parent 641c888 commit bee3478

File tree

55 files changed

+386
-923
lines changed

Some content is hidden

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

55 files changed

+386
-923
lines changed

‎packages/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import { css } from '@patternfly/react-styles';
22
import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-modal-box';
33
import { Button } from '../Button';
4-
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
4+
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
55

66
export interface AboutModalBoxCloseButtonProps extends React.HTMLProps<HTMLDivElement> {
77
/** A callback for when the close button is clicked */
@@ -16,7 +16,7 @@ export const AboutModalBoxCloseButton: React.FunctionComponent<AboutModalBoxClos
1616
...props
1717
}: AboutModalBoxCloseButtonProps) => (
1818
<div className={css(styles.aboutModalBoxClose)} {...props}>
19-
<Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<TimesIcon />} />
19+
<Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<RhMicronsCloseIcon />} />
2020
</div>
2121
);
2222
AboutModalBoxCloseButton.displayName = 'AboutModalBoxCloseButton';

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

Lines changed: 12 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -22,24 +22,12 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
2222
fill="currentColor"
2323
height="1em"
2424
role="img"
25+
viewBox="0 0 20 20"
2526
width="1em"
2627
>
27-
<svg
28-
class="pf-v6-icon-default"
29-
viewBox="0 0 352 512"
30-
>
31-
<path
32-
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
33-
/>
34-
</svg>
35-
<svg
36-
class="pf-v6-icon-rh-ui"
37-
viewBox="0 0 32 32"
38-
>
39-
<path
40-
d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
41-
/>
42-
</svg>
28+
<path
29+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
30+
/>
4331
</svg>
4432
</span>
4533
</button>
@@ -69,24 +57,12 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
6957
fill="currentColor"
7058
height="1em"
7159
role="img"
60+
viewBox="0 0 20 20"
7261
width="1em"
7362
>
74-
<svg
75-
class="pf-v6-icon-default"
76-
viewBox="0 0 352 512"
77-
>
78-
<path
79-
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
80-
/>
81-
</svg>
82-
<svg
83-
class="pf-v6-icon-rh-ui"
84-
viewBox="0 0 32 32"
85-
>
86-
<path
87-
d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
88-
/>
89-
</svg>
63+
<path
64+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
65+
/>
9066
</svg>
9167
</span>
9268
</button>
@@ -116,24 +92,12 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
11692
fill="currentColor"
11793
height="1em"
11894
role="img"
95+
viewBox="0 0 20 20"
11996
width="1em"
12097
>
121-
<svg
122-
class="pf-v6-icon-default"
123-
viewBox="0 0 352 512"
124-
>
125-
<path
126-
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
127-
/>
128-
</svg>
129-
<svg
130-
class="pf-v6-icon-rh-ui"
131-
viewBox="0 0 32 32"
132-
>
133-
<path
134-
d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
135-
/>
136-
</svg>
98+
<path
99+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
100+
/>
137101
</svg>
138102
</span>
139103
</button>

‎packages/react-core/src/components/Alert/AlertActionCloseButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { useRef, useContext } from 'react';
22
import { Button, ButtonVariant, ButtonProps } from '../Button';
3-
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
3+
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
44
import { AlertContext } from './AlertContext';
55
import { AlertGroupContext } from './AlertGroupContext';
66
import alertGroupStyles from '@patternfly/react-styles/css/components/Alert/alert-group';
@@ -50,7 +50,7 @@ export const AlertActionCloseButton: React.FunctionComponent<AlertActionCloseBut
5050
onClick={handleOnClick}
5151
aria-label={ariaLabel === '' ? `Close ${variantLabel || alertVariantLabel} alert: ${title}` : ariaLabel}
5252
className={className}
53-
icon={<TimesIcon />}
53+
icon={<RhMicronsCloseIcon />}
5454
{...props}
5555
/>
5656
)}

‎packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -19,24 +19,12 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
1919
fill="currentColor"
2020
height="1em"
2121
role="img"
22+
viewBox="0 0 20 20"
2223
width="1em"
2324
>
24-
<svg
25-
class="pf-v6-icon-default"
26-
viewBox="0 0 352 512"
27-
>
28-
<path
29-
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
30-
/>
31-
</svg>
32-
<svg
33-
class="pf-v6-icon-rh-ui"
34-
viewBox="0 0 32 32"
35-
>
36-
<path
37-
d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
38-
/>
39-
</svg>
25+
<path
26+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
27+
/>
4028
</svg>
4129
</span>
4230
</button>

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

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -28,24 +28,12 @@ exports[`Matches the snapshot 1`] = `
2828
fill="currentColor"
2929
height="1em"
3030
role="img"
31+
viewBox="0 0 20 20"
3132
width="1em"
3233
>
33-
<svg
34-
class="pf-v6-icon-default"
35-
viewBox="0 0 352 512"
36-
>
37-
<path
38-
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
39-
/>
40-
</svg>
41-
<svg
42-
class="pf-v6-icon-rh-ui"
43-
viewBox="0 0 32 32"
44-
>
45-
<path
46-
d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
47-
/>
48-
</svg>
34+
<path
35+
d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
36+
/>
4937
</svg>
5038
</div>
5139
</DocumentFragment>

‎packages/react-core/src/components/Drawer/DrawerCloseButton.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
22
import { css } from '@patternfly/react-styles';
33
import { Button } from '../Button';
4-
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
4+
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
55

66
export interface DrawerCloseButtonProps extends React.HTMLProps<HTMLDivElement> {
77
/** Additional classes added to the drawer close button outer <div>. */
@@ -19,7 +19,7 @@ export const DrawerCloseButton: React.FunctionComponent<DrawerCloseButtonProps>
1919
...props
2020
}: DrawerCloseButtonProps) => (
2121
<div className={css(styles.drawerClose, className)} {...props}>
22-
<Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<TimesIcon />} />
22+
<Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<RhMicronsCloseIcon />} />
2323
</div>
2424
);
2525
DrawerCloseButton.displayName = 'DrawerCloseButton';

0 commit comments

Comments
 (0)