From bee34780025fab4c29b8f32619428474132c8bd0 Mon Sep 17 00:00:00 2001 From: Austin Sullivan Date: Fri, 20 Mar 2026 15:10:12 -0400 Subject: [PATCH] feat(icons): update close icons to use the rh micron --- .../AboutModal/AboutModalBoxCloseButton.tsx | 4 +- .../AboutModalBoxCloseButton.test.tsx.snap | 60 ++----- .../Alert/AlertActionCloseButton.tsx | 4 +- .../AlertActionCloseButton.test.tsx.snap | 20 +-- .../AlertActionCloseButton.test.tsx.snap | 20 +-- .../components/Drawer/DrawerCloseButton.tsx | 4 +- .../__snapshots__/Drawer.test.tsx.snap | 120 +++---------- .../react-core/src/components/Label/Label.tsx | 4 +- .../src/components/Label/LabelGroup.tsx | 4 +- .../__snapshots__/Label.test.tsx.snap | 60 ++----- .../__snapshots__/LabelGroup.test.tsx.snap | 20 +-- .../MenuToggle/examples/MenuToggle.md | 2 +- .../examples/MenuToggleTypeahead.tsx | 4 +- .../components/Modal/ModalBoxCloseButton.tsx | 4 +- .../__snapshots__/ModalContent.test.tsx.snap | 20 +-- .../MultipleFileUploadStatusItem.tsx | 4 +- ...MultipleFileUploadStatusItem.test.tsx.snap | 160 ++++------------- .../NotificationDrawerHeader.tsx | 4 +- .../components/Popover/PopoverCloseButton.tsx | 4 +- .../PopoverCloseButton.test.tsx.snap | 20 +-- .../components/SearchInput/SearchInput.tsx | 8 +- .../__snapshots__/SearchInput.test.tsx.snap | 100 +++-------- .../src/components/Select/examples/Select.md | 2 +- .../Select/examples/SelectMultiTypeahead.tsx | 9 +- .../examples/SelectMultiTypeaheadCheckbox.tsx | 9 +- .../SelectMultiTypeaheadCreatable.tsx | 9 +- .../Select/examples/SelectTypeahead.tsx | 9 +- .../examples/SelectTypeaheadCreatable.tsx | 9 +- .../react-core/src/components/Tabs/Tab.tsx | 4 +- .../__snapshots__/Tabs.test.tsx.snap | 169 +++++++++--------- .../src/components/Tabs/examples/Tabs.md | 2 +- .../Tabs/examples/TabsHelpAndClose.tsx | 4 +- .../TextInputGroup/examples/TextInputGroup.md | 2 +- .../examples/TextInputGroupFilters.tsx | 4 +- .../TextInputGroupUtilitiesAndIcon.tsx | 9 +- .../examples/TextInputGroupWithStatus.tsx | 9 +- .../__snapshots__/Toolbar.test.tsx.snap | 60 ++----- .../src/components/Wizard/WizardHeader.tsx | 4 +- .../src/demos/TextInputGroupDemo.md | 2 +- .../AttributeValueFiltering.tsx | 4 +- .../TextInputGroup/AutoCompleteSearch.tsx | 4 +- .../__snapshots__/Chip.test.tsx.snap | 20 +-- .../components/Modal/ModalBoxCloseButton.tsx | 4 +- .../__snapshots__/ModalContent.test.tsx.snap | 160 ++++------------- .../components/Wizard/WizardHeader.tsx | 4 +- .../__snapshots__/Wizard.test.tsx.snap | 40 +---- .../components/demos/FormDemo/FormDemo.tsx | 4 +- .../src/components/Table/EditColumn.tsx | 4 +- .../src/components/Table/examples/Table.md | 2 +- .../Table/examples/TableEditable.tsx | 4 +- .../__snapshots__/Table.test.tsx.snap | 40 +---- .../Select/MultiTypeaheadSelect.tsx | 4 +- .../src/components/Select/TypeaheadSelect.tsx | 9 +- .../MultiTypeaheadSelect.test.tsx.snap | 20 +-- .../TypeaheadSelect.test.tsx.snap | 20 +-- 55 files changed, 386 insertions(+), 923 deletions(-) diff --git a/packages/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx b/packages/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx index 49de0ae2b10..a5f56d87188 100644 --- a/packages/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx +++ b/packages/react-core/src/components/AboutModal/AboutModalBoxCloseButton.tsx @@ -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 { /** A callback for when the close button is clicked */ @@ -16,7 +16,7 @@ export const AboutModalBoxCloseButton: React.FunctionComponent (
-
); AboutModalBoxCloseButton.displayName = 'AboutModalBoxCloseButton'; diff --git a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap index 3c2698b2529..5e06ec750f8 100644 --- a/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap +++ b/packages/react-core/src/components/AboutModal/__tests__/__snapshots__/AboutModalBoxCloseButton.test.tsx.snap @@ -22,24 +22,12 @@ exports[`AboutModalBoxCloseButton Test 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + @@ -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" > - - - - - - + @@ -116,24 +92,12 @@ exports[`AboutModalBoxCloseButton Test onclose 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + diff --git a/packages/react-core/src/components/Alert/AlertActionCloseButton.tsx b/packages/react-core/src/components/Alert/AlertActionCloseButton.tsx index c30981add9b..c52643aad22 100644 --- a/packages/react-core/src/components/Alert/AlertActionCloseButton.tsx +++ b/packages/react-core/src/components/Alert/AlertActionCloseButton.tsx @@ -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'; @@ -50,7 +50,7 @@ export const AlertActionCloseButton: React.FunctionComponent} + icon={} {...props} /> )} diff --git a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap index 39d5b531958..f029af418f1 100644 --- a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertActionCloseButton.test.tsx.snap @@ -19,24 +19,12 @@ exports[`AlertActionCloseButton should match snapshot 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + diff --git a/packages/react-core/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap index 2568762c47f..c59f313bb6b 100644 --- a/packages/react-core/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/__snapshots__/AlertActionCloseButton.test.tsx.snap @@ -28,24 +28,12 @@ exports[`Matches the snapshot 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + diff --git a/packages/react-core/src/components/Drawer/DrawerCloseButton.tsx b/packages/react-core/src/components/Drawer/DrawerCloseButton.tsx index 14639244ac3..cbab0ae4ac3 100644 --- a/packages/react-core/src/components/Drawer/DrawerCloseButton.tsx +++ b/packages/react-core/src/components/Drawer/DrawerCloseButton.tsx @@ -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 { /** Additional classes added to the drawer close button outer
. */ @@ -19,7 +19,7 @@ export const DrawerCloseButton: React.FunctionComponent ...props }: DrawerCloseButtonProps) => (
-
); DrawerCloseButton.displayName = 'DrawerCloseButton'; diff --git a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap index 11785860c11..d2280b31862 100644 --- a/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap +++ b/packages/react-core/src/components/Drawer/__tests__/__snapshots__/Drawer.test.tsx.snap @@ -50,24 +50,12 @@ exports[`Drawer expands from bottom 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + @@ -154,24 +142,12 @@ exports[`Drawer has resizable callback and id 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + @@ -260,24 +236,12 @@ exports[`Drawer has resizable css and color variants 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + @@ -402,24 +366,12 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = false 1`] fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + @@ -487,24 +439,12 @@ exports[`Drawer isExpanded = true and isInline = false and isStatic = true 1`] = fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + @@ -572,24 +512,12 @@ exports[`Drawer isExpanded = true and isInline = true and isStatic = false 1`] = fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + diff --git a/packages/react-core/src/components/Label/Label.tsx b/packages/react-core/src/components/Label/Label.tsx index 8fd0f643188..a903ad54949 100644 --- a/packages/react-core/src/components/Label/Label.tsx +++ b/packages/react-core/src/components/Label/Label.tsx @@ -6,7 +6,7 @@ import { Tooltip, TooltipPosition } from '../Tooltip'; import { css } from '@patternfly/react-styles'; import { useIsomorphicLayoutEffect } from '../../helpers'; import cssTextMaxWidth from '@patternfly/react-tokens/dist/esm/c_label__text_MaxWidth'; -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 CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; @@ -240,7 +240,7 @@ export const Label: React.FunctionComponent = ({ aria-label={closeBtnAriaLabel || `Close ${children}`} {...(isClickableDisabled && { isDisabled: true })} {...closeBtnProps} - icon={} + icon={} /> ); diff --git a/packages/react-core/src/components/Label/LabelGroup.tsx b/packages/react-core/src/components/Label/LabelGroup.tsx index b007e3b1656..9c3cf7275a3 100644 --- a/packages/react-core/src/components/Label/LabelGroup.tsx +++ b/packages/react-core/src/components/Label/LabelGroup.tsx @@ -5,7 +5,7 @@ import { css } from '@patternfly/react-styles'; import { Button } from '../Button'; import { Label } from './Label'; import { Tooltip, TooltipPosition } from '../Tooltip'; -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 { fillTemplate } from '../../helpers'; import { GenerateId } from '../../helpers/GenerateId/GenerateId'; @@ -210,7 +210,7 @@ class LabelGroup extends Component { onClick={onClick} id={`remove_group_${id}`} aria-labelledby={`remove_group_${id} ${id}`} - icon={} + icon={} />
); diff --git a/packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap b/packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap index 8872ecc855b..15090106631 100644 --- a/packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap +++ b/packages/react-core/src/components/Label/__tests__/__snapshots__/Label.test.tsx.snap @@ -35,24 +35,12 @@ exports[`Label editable label 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + @@ -184,24 +172,12 @@ exports[`Label label with close button 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + @@ -244,24 +220,12 @@ exports[`Label label with close button and outline variant 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + diff --git a/packages/react-core/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap b/packages/react-core/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap index c67734dd330..8a28a05b7d9 100644 --- a/packages/react-core/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap +++ b/packages/react-core/src/components/Label/__tests__/__snapshots__/LabelGroup.test.tsx.snap @@ -271,24 +271,12 @@ exports[`LabelGroup label group with closable category 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md index 99cb120b0a5..41663677376 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggle.md @@ -11,7 +11,7 @@ import './MenuToggle.css' import PlusIcon from '@patternfly/react-icons/dist/esm/icons/plus-icon'; import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon'; import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; -import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; +import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon'; ## Examples diff --git a/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx b/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx index 6358c1a6566..7c384689810 100644 --- a/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx +++ b/packages/react-core/src/components/MenuToggle/examples/MenuToggleTypeahead.tsx @@ -6,7 +6,7 @@ import { TextInputGroupUtilities, Button } from '@patternfly/react-core'; -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 const MenuToggleTypeahead: React.FunctionComponent = () => { const [inputValue, setInputValue] = useState(''); @@ -31,7 +31,7 @@ export const MenuToggleTypeahead: React.FunctionComponent = () => { variant="plain" onClick={() => setInputValue('')} aria-label="Clear input value" - icon={} + icon={} /> )} diff --git a/packages/react-core/src/components/Modal/ModalBoxCloseButton.tsx b/packages/react-core/src/components/Modal/ModalBoxCloseButton.tsx index ec508859877..e34c412fa83 100644 --- a/packages/react-core/src/components/Modal/ModalBoxCloseButton.tsx +++ b/packages/react-core/src/components/Modal/ModalBoxCloseButton.tsx @@ -1,7 +1,7 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/ModalBox/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'; import { OUIAProps } from '../../helpers'; export interface ModalBoxCloseButtonProps extends OUIAProps { @@ -29,7 +29,7 @@ export const ModalBoxCloseButton: React.FunctionComponent} + icon={} /> ); diff --git a/packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap b/packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap index 55ded830a46..3f4484b3308 100644 --- a/packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap +++ b/packages/react-core/src/components/Modal/__tests__/__snapshots__/ModalContent.test.tsx.snap @@ -117,24 +117,12 @@ exports[`Modal Content Test with onclose 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + diff --git a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx index 4053858166a..ab52edf5776 100644 --- a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx +++ b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx @@ -4,7 +4,7 @@ import { css } from '@patternfly/react-styles'; import { Progress } from '../Progress'; import { Button } from '../Button'; import FileIcon from '@patternfly/react-icons/dist/esm/icons/file-icon'; -import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; +import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon'; /** Automatically reads an uploaded file to render a visual representation of it, including * its name, size, and read status. This sub-component also allows custom reading of files @@ -170,7 +170,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent
-
); diff --git a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap index b6ee377c194..db2d19b3760 100644 --- a/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap +++ b/packages/react-core/src/components/MultipleFileUpload/__tests__/__snapshots__/MultipleFileUploadStatusItem.test.tsx.snap @@ -117,24 +117,12 @@ exports[`MultipleFileUploadStatusItem renders custom aria labels 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + @@ -257,24 +245,12 @@ exports[`MultipleFileUploadStatusItem renders custom class names 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + @@ -387,24 +363,12 @@ exports[`MultipleFileUploadStatusItem renders custom file name/size/icon/progres fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + @@ -517,24 +481,12 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + @@ -688,24 +640,12 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + @@ -830,24 +770,12 @@ exports[`MultipleFileUploadStatusItem renders expected values from a passed file fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + @@ -970,24 +898,12 @@ exports[`MultipleFileUploadStatusItem renders with expected class names 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + @@ -1100,24 +1016,12 @@ exports[`MultipleFileUploadStatusItem rendersdefault progressAriaLiveMessage whe fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + diff --git a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerHeader.tsx b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerHeader.tsx index e940b9763d4..157fa8e5e8b 100644 --- a/packages/react-core/src/components/NotificationDrawer/NotificationDrawerHeader.tsx +++ b/packages/react-core/src/components/NotificationDrawer/NotificationDrawerHeader.tsx @@ -1,6 +1,6 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/NotificationDrawer/notification-drawer'; -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 { Button, ButtonVariant } from '../Button'; export interface NotificationDrawerHeaderProps extends React.HTMLProps { @@ -49,7 +49,7 @@ export const NotificationDrawerHeader: React.FunctionComponent onClose(event)} - icon={} + icon={} /> )} diff --git a/packages/react-core/src/components/Popover/PopoverCloseButton.tsx b/packages/react-core/src/components/Popover/PopoverCloseButton.tsx index aa36b6420af..243a8baba5a 100644 --- a/packages/react-core/src/components/Popover/PopoverCloseButton.tsx +++ b/packages/react-core/src/components/Popover/PopoverCloseButton.tsx @@ -1,7 +1,7 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Popover/popover'; 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 const PopoverCloseButton: React.FunctionComponent = ({ onClose = () => undefined as void, @@ -14,7 +14,7 @@ export const PopoverCloseButton: React.FunctionComponent} + icon={} /> ); diff --git a/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap b/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap index 3912a2b57eb..a8bbe715b5a 100644 --- a/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap +++ b/packages/react-core/src/components/Popover/__tests__/Generated/__snapshots__/PopoverCloseButton.test.tsx.snap @@ -23,24 +23,12 @@ exports[`PopoverCloseButton should match snapshot (auto-generated) 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + diff --git a/packages/react-core/src/components/SearchInput/SearchInput.tsx b/packages/react-core/src/components/SearchInput/SearchInput.tsx index d61f0ff3f99..eb7bd376df3 100644 --- a/packages/react-core/src/components/SearchInput/SearchInput.tsx +++ b/packages/react-core/src/components/SearchInput/SearchInput.tsx @@ -5,7 +5,7 @@ import { Badge } from '../Badge'; import { Icon } from '../Icon'; import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon'; import AngleUpIcon from '@patternfly/react-icons/dist/esm/icons/angle-up-icon'; -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 SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon'; import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; @@ -350,7 +350,7 @@ const SearchInputBase: React.FunctionComponent = ({ isDisabled={isDisabled} aria-label={resetButtonLabel} onClick={onClearInput} - icon={} + icon={} /> )} @@ -374,7 +374,7 @@ const SearchInputBase: React.FunctionComponent = ({ variant={ButtonVariant.plain} aria-label={toggleAriaLabel} aria-expanded={isExpanded} - icon={} + icon={} onClick={onExpandHandler} /> ); @@ -384,7 +384,7 @@ const SearchInputBase: React.FunctionComponent = ({ variant={ButtonVariant.plain} aria-label={toggleAriaLabel} aria-expanded={isExpanded} - icon={isExpanded ? : } + icon={isExpanded ? : } onClick={onExpandHandler} ref={searchInputExpandableToggleRef} /> diff --git a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap index 31375261a06..c052455d076 100644 --- a/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap +++ b/packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap @@ -74,24 +74,12 @@ exports[`SearchInput advanced search 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + @@ -265,24 +253,12 @@ exports[`SearchInput advanced search with custom attributes 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + @@ -646,24 +622,12 @@ exports[`SearchInput renders search input in strict mode 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + @@ -914,24 +878,12 @@ exports[`SearchInput search input with hint 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + @@ -1134,24 +1086,12 @@ exports[`SearchInput simple search input 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 20 20" width="1em" > - - - - - - + diff --git a/packages/react-core/src/components/Select/examples/Select.md b/packages/react-core/src/components/Select/examples/Select.md index 71a059df260..73e7d15ff04 100644 --- a/packages/react-core/src/components/Select/examples/Select.md +++ b/packages/react-core/src/components/Select/examples/Select.md @@ -9,7 +9,7 @@ ouia: true --- import { Fragment, useEffect, useRef, useState } from 'react'; -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 BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; ## Examples diff --git a/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx b/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx index 20095710a3d..b79f206381e 100644 --- a/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx +++ b/packages/react-core/src/components/Select/examples/SelectMultiTypeahead.tsx @@ -13,7 +13,7 @@ import { LabelGroup, Button } from '@patternfly/react-core'; -import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; +import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon'; const initialSelectOptions: SelectOptionProps[] = [ { value: 'Alabama', children: 'Alabama' }, @@ -226,7 +226,12 @@ export const SelectMultiTypeahead: React.FunctionComponent = () => { - + + + + +
+ Tab 1 section +
+ + +`; + exports[`should render accessible tabs 1`] = `