Skip to content

feat(icons): update close icons to use the rh micron #12283

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
wise-king-sullyman wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat(icons): update close icons to use the rh micron #12283

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions packages/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { css } from '@patternfly/react-styles';
import styles from '@patternfly/react-styles/css/components/AboutModalBox/about-modal-box';
import { Button } from '../Button';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';

export interface AboutModalBoxCloseButtonProps extends React.HTMLProps<HTMLDivElement> {
/** A callback for when the close button is clicked */
Expand All @@ -16,7 +16,7 @@ export const AboutModalBoxCloseButton: React.FunctionComponent<AboutModalBoxClos
...props
}: AboutModalBoxCloseButtonProps) => (
<div className={css(styles.aboutModalBoxClose)} {...props}>
<Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<TimesIcon />} />
<Button variant="plain" onClick={onClose} aria-label={ariaLabel} icon={<RhMicronsCloseIcon />} />
</div>
);
AboutModalBoxCloseButton.displayName = 'AboutModalBoxCloseButton';
60 changes: 12 additions & 48 deletions .../src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,24 +22,12 @@ exports[`AboutModalBoxCloseButton Test 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 352 512"
>
<path
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"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
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"
/>
</svg>
<path
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"
/>
</svg>
</span>
</button>
Expand Down Expand Up @@ -69,24 +57,12 @@ exports[`AboutModalBoxCloseButton Test close button aria label 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 352 512"
>
<path
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"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
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"
/>
</svg>
<path
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"
/>
</svg>
</span>
</button>
Expand Down Expand Up @@ -116,24 +92,12 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 352 512"
>
<path
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"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
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"
/>
</svg>
<path
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"
/>
</svg>
</span>
</button>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Alert/AlertActionCloseButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { useRef, useContext } from 'react';
import { Button, ButtonVariant, ButtonProps } from '../Button';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
import { AlertContext } from './AlertContext';
import { AlertGroupContext } from './AlertGroupContext';
import alertGroupStyles from '@patternfly/react-styles/css/components/Alert/alert-group';
Expand Down Expand Up @@ -50,7 +50,7 @@ export const AlertActionCloseButton: React.FunctionComponent<AlertActionCloseBut
onClick={handleOnClick}
aria-label={ariaLabel === '' ? `Close ${variantLabel || alertVariantLabel} alert: ${title}` : ariaLabel}
className={className}
icon={<TimesIcon />}
icon={<RhMicronsCloseIcon />}
{...props}
/>
)}
Expand Down
20 changes: 4 additions & 16 deletions ...c/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,24 +19,12 @@ exports[`AlertActionCloseButton should match snapshot 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 352 512"
>
<path
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"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
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"
/>
</svg>
<path
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"
/>
</svg>
</span>
</button>
Expand Down
20 changes: 4 additions & 16 deletions ...ct-core/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,24 +28,12 @@ exports[`Matches the snapshot 1`] = `
fill="currentColor"
height="1em"
role="img"
viewBox="0 0 20 20"
width="1em"
>
<svg
class="pf-v6-icon-default"
viewBox="0 0 352 512"
>
<path
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"
/>
</svg>
<svg
class="pf-v6-icon-rh-ui"
viewBox="0 0 32 32"
>
<path
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"
/>
</svg>
<path
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"
/>
</svg>
</div>
</DocumentFragment>
Expand Down
4 changes: 2 additions & 2 deletions packages/react-core/src/components/Drawer/DrawerCloseButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import styles from '@patternfly/react-styles/css/components/Drawer/drawer';
import { css } from '@patternfly/react-styles';
import { Button } from '../Button';
import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';

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