Skip to content

Commit fc82a9c

Browse files
wise-king-sullymanwise-king-sullyman
authored
feat(icons): update close icons to use the rh micron (#12283)
* feat(icons): update close icons to use the rh micron * Update x icons in button and action list examples * Update snapshots for tests * Update snapshots
1 parent 80c2723 commit fc82a9c

File tree

61 files changed

+322
-853
lines changed

Some content is hidden

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

61 files changed

+322
-853
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/ActionList/examples/ActionList.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ propComponents: ['ActionList', 'ActionListGroup', 'ActionListItem']
66
---
77

88
import { Fragment, useState } from 'react';
9-
import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
9+
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/js/icons/rh-microns-close-icon';
1010
import CheckIcon from '@patternfly/react-icons/dist/js/icons/check-icon';
1111
import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
1212

‎packages/react-core/src/components/ActionList/examples/ActionListVertical.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
22
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
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

55
export const ActionListVertical: React.FunctionComponent = () => (
66
<>
@@ -27,15 +27,15 @@ export const ActionListVertical: React.FunctionComponent = () => (
2727
<ActionList isVertical>
2828
<ActionListGroup>
2929
<ActionListItem>
30-
<Button aria-label="Close vertical action list group 1" variant="plain" icon={<TimesIcon />} />
30+
<Button aria-label="Close vertical action list group 1" variant="plain" icon={<RhMicronsCloseIcon />} />
3131
</ActionListItem>
3232
<ActionListItem>
3333
<Button aria-label="Toggle vertical action list example group 1" variant="plain" icon={<CheckIcon />} />
3434
</ActionListItem>
3535
</ActionListGroup>
3636
<ActionListGroup>
3737
<ActionListItem>
38-
<Button aria-label="Close vertical action list group 2" variant="plain" icon={<TimesIcon />} />
38+
<Button aria-label="Close vertical action list group 2" variant="plain" icon={<RhMicronsCloseIcon />} />
3939
</ActionListItem>
4040
<ActionListItem>
4141
<Button aria-label="Toggle vertical action list example group 2" variant="plain" icon={<CheckIcon />} />

‎packages/react-core/src/components/ActionList/examples/ActionListWithIcons.tsx‎

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,18 @@
11
import { ActionList, ActionListGroup, ActionListItem, Button } from '@patternfly/react-core';
2-
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
2+
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
33
import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
44

55
export const ActionListWithIcons: React.FunctionComponent = () => (
66
<>
77
<h4>With list icons wrapper</h4>
88
<ActionList isIconList>
99
<ActionListItem>
10-
<Button variant="plain" id="with-icons-times-button" aria-label="times icon button" icon={<TimesIcon />} />
10+
<Button
11+
variant="plain"
12+
id="with-icons-times-button"
13+
aria-label="times icon button"
14+
icon={<RhMicronsCloseIcon />}
15+
/>
1116
</ActionListItem>
1217
<ActionListItem>
1318
<Button variant="plain" id="with-icons-check-button" aria-label="check icon button" icon={<CheckIcon />} />
@@ -22,7 +27,7 @@ export const ActionListWithIcons: React.FunctionComponent = () => (
2227
variant="plain"
2328
id="with-icons-list-times-button"
2429
aria-label="times icon button"
25-
icon={<TimesIcon />}
30+
icon={<RhMicronsCloseIcon />}
2631
/>
2732
</ActionListItem>
2833
<ActionListItem>
@@ -40,7 +45,7 @@ export const ActionListWithIcons: React.FunctionComponent = () => (
4045
variant="plain"
4146
id="with-icons-group-times-button"
4247
aria-label="times icon button"
43-
icon={<TimesIcon />}
48+
icon={<RhMicronsCloseIcon />}
4449
/>
4550
</ActionListItem>
4651
<ActionListItem>

‎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/Button/examples/Button.md‎

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

99
import { Fragment, useState } from 'react';
10-
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
10+
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
1111
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
1212
import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon';
1313
import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';

‎packages/react-core/src/components/Button/examples/ButtonCircle.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { Button, Flex } from '@patternfly/react-core';
2-
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
2+
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
33
import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
44
import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
55
import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
@@ -34,7 +34,7 @@ export const ButtonCircle: React.FunctionComponent = () => {
3434
<Button variant="warning" isCircle icon={<PlusCircleIcon />} aria-label="Add warning circle variant example" />
3535
<Button variant="link" isCircle icon={<PlusCircleIcon />} aria-label="Add link circle variant example" />
3636
<Button variant="control" isCircle icon={<CopyIcon />} aria-label="Copy control circle variant example" />
37-
<Button variant="plain" isCircle icon={<TimesIcon />} aria-label="Remove plain circle variant example" />
37+
<Button variant="plain" isCircle icon={<RhMicronsCloseIcon />} aria-label="Remove plain circle variant example" />
3838
<Button variant="stateful" isCircle icon={<BellIcon />} aria-label="Stateful unread circle variant example" />
3939
<Button
4040
variant="stateful"

0 commit comments

Comments
 (0)