From f59cf45475a056fa50b5d7bebb45e1d8cc32e6ce Mon Sep 17 00:00:00 2001 From: Katie McFaul Date: Wed, 25 Mar 2026 11:19:59 -0400 Subject: [PATCH 1/3] feat(misc): update status icons to rh icons --- .../components/PopOver/Popover.figma.tsx | 16 ++++----- .../src/components/Alert/AlertIcon.tsx | 20 +++++------ .../Alert/__tests__/AlertIcon.test.tsx | 10 +++--- .../src/components/Banner/examples/Banner.md | 10 +++--- .../Banner/examples/BannerStatus.tsx | 20 +++++------ .../src/components/Button/examples/Button.md | 2 +- .../Button/examples/ButtonCircle.tsx | 13 ++++--- .../Button/examples/ButtonStateful.tsx | 8 ++--- .../Button/examples/ButtonVariations.tsx | 8 ++--- .../EmptyState/examples/EmptyState.md | 1 - .../__tests__/ExpandableSection.test.tsx | 10 ++++-- .../examples/ExpandableSection.md | 2 +- .../ExpandableSectionCustomToggle.tsx | 4 +-- .../examples/ExpandableSectionWithHeading.tsx | 4 +-- .../FileUpload/examples/FileUpload.md | 1 - .../src/components/Form/examples/Form.md | 2 +- .../components/Form/examples/FormInvalid.tsx | 4 +-- .../examples/FormInvalidWithFormAlert.tsx | 4 +-- .../components/Form/examples/FormState.tsx | 4 +-- .../Form/examples/FormValidated.tsx | 4 +-- .../FormControl/FormControlIcon.tsx | 12 +++---- .../components/HelperText/HelperTextItem.tsx | 12 +++---- .../src/components/Icon/examples/Icon.md | 10 +++--- .../Icon/examples/IconCustomProgress.tsx | 4 +-- .../components/Icon/examples/IconProgress.tsx | 4 +-- .../components/Icon/examples/IconStatus.tsx | 20 +++++------ .../react-core/src/components/Label/Label.tsx | 20 +++++------ .../src/components/Label/examples/Label.md | 2 +- .../Label/examples/LabelCompact.tsx | 6 ++-- .../Label/examples/LabelCustomRender.tsx | 4 +-- .../Label/examples/LabelGroupBasic.tsx | 8 ++--- .../Label/examples/LabelGroupCategory.tsx | 8 ++--- .../examples/LabelGroupCategoryRemovable.tsx | 4 +-- .../examples/LabelGroupEditableAddModal.tsx | 6 ++-- .../Label/examples/LabelGroupOverflow.tsx | 14 ++++---- ...GroupVerticalCategoryOverflowRemovable.tsx | 4 +-- .../LoginPage/examples/LoginPage.md | 2 +- .../LoginPage/examples/LoginPageBasic.tsx | 4 +-- .../examples/LoginPageLanguageSelect.tsx | 4 +-- .../examples/LoginPageShowHidePassword.tsx | 4 +-- .../src/components/Menu/examples/Menu.md | 2 +- .../Menu/examples/MenuWithActions.tsx | 4 +-- .../Menu/examples/MenuWithFavorites.tsx | 4 +-- .../src/components/MenuToggle/MenuToggle.tsx | 12 +++---- .../src/components/Modal/ModalBoxTitle.tsx | 20 +++++------ .../MultipleFileUploadStatus.tsx | 4 +-- .../NotificationBadge/NotificationBadge.tsx | 8 ++--- .../examples/NotificationBadge.md | 2 +- .../NotificationDrawerListItemHeader.tsx | 20 +++++------ .../NotificationDrawerListItemHeader.test.tsx | 4 +-- .../components/Popover/examples/Popover.md | 10 +++--- .../Popover/examples/PopoverAlert.tsx | 20 +++++------ .../components/Progress/ProgressContainer.tsx | 12 +++---- .../ProgressStepper/ProgressStep.tsx | 12 +++---- .../__tests__/ProgressStep.test.tsx | 6 ++-- .../src/components/Select/examples/Select.md | 2 +- .../examples/SelectOptionVariations.tsx | 4 +-- .../src/components/Wizard/WizardNavItem.tsx | 12 +++---- .../src/components/Wizard/WizardToggle.tsx | 8 ++--- .../react-core/src/demos/Button/Button.md | 2 +- .../demos/Button/examples/ButtonProgress.tsx | 4 +-- packages/react-core/src/demos/CardDemos.md | 5 +-- .../src/demos/CustomMenus/CustomMenus.md | 2 +- .../CustomMenus/examples/ActionsMenuDemo.tsx | 4 +-- .../demos/DataList/examples/DataListBasic.tsx | 18 +++++----- packages/react-core/src/demos/DataListDemo.md | 6 ++-- .../demos/DescriptionList/DescriptionList.md | 4 ++- .../examples/DescriptionListBasic.tsx | 4 +-- packages/react-core/src/demos/HelperText.md | 6 ++-- .../react-core/src/demos/LabelGroupDemos.md | 2 +- packages/react-core/src/demos/Masthead.md | 2 +- packages/react-core/src/demos/Nav.md | 2 +- .../NotificationDrawer/NotificationDrawer.md | 2 +- packages/react-core/src/demos/Page.md | 4 +-- .../react-core/src/demos/PasswordStrength.md | 6 ++-- .../react-core/src/demos/PrimaryDetail.md | 8 +++-- packages/react-core/src/demos/Tabs.md | 4 +-- .../examples/Card/CardAggregateStatus.tsx | 36 +++++++++---------- .../demos/examples/Card/CardEventsView.tsx | 10 +++--- .../examples/Card/CardHorizontalGrid.tsx | 18 +++++----- .../src/demos/examples/Card/CardStatus.tsx | 26 +++++++------- .../demos/examples/Card/CardStatusTabbed.tsx | 12 +++---- .../examples/Card/CardUtilizationDemo3.tsx | 4 +-- .../PasswordStrength/PasswordStrengthDemo.tsx | 14 ++++---- .../PrimaryDetailContentPadding.tsx | 12 +++---- .../PrimaryDetail/PrimaryDetailFullPage.tsx | 12 +++---- .../PrimaryDetailInlineModifier.tsx | 12 +++---- .../src/demos/examples/Tabs/TabsOpen.tsx | 8 ++--- .../Tabs/TabsOpenWithSecondaryTabs.tsx | 8 ++--- .../components/Modal/ModalBoxTitle.tsx | 20 +++++------ .../components/Tile/examples/Tile.md | 2 +- .../components/Tile/examples/TileStacked.tsx | 8 ++--- .../examples/TileStackedWithLargeIcons.tsx | 8 ++--- .../Tile/examples/TileWithExtraContent.tsx | 8 ++--- packages/react-core/src/helpers/constants.ts | 20 +++++------ .../react-icons/scripts/icons/pfToRhIcons.mjs | 12 +++---- .../components/demos/FormDemo/FormDemo.tsx | 4 +-- .../components/demos/LabelDemo/LabelDemo.tsx | 14 ++++---- .../demos/LoginPageDemo/LoginPageDemo.tsx | 4 +-- .../components/demos/MenuDemo/MenuDemo.tsx | 6 ++-- packages/react-table/src/demos/Table.md | 5 ++- .../demos/examples/TableEmptyStateError.tsx | 4 +-- 102 files changed, 424 insertions(+), 413 deletions(-) diff --git a/packages/code-connect/components/PopOver/Popover.figma.tsx b/packages/code-connect/components/PopOver/Popover.figma.tsx index 683e406d5b7..8a9f2ef7a5c 100644 --- a/packages/code-connect/components/PopOver/Popover.figma.tsx +++ b/packages/code-connect/components/PopOver/Popover.figma.tsx @@ -1,9 +1,9 @@ import figma from '@figma/code-connect'; import { Popover } from '@patternfly/react-core'; -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; -import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; -import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; -import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; +import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon'; +import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon'; +import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon'; import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon'; // TODO: DESIGN: Add buttons boolean to footerContent @@ -46,19 +46,19 @@ figma.connect( }, Success: { state: 'success', - icon: + icon: }, Info: { state: 'info', - icon: + icon: }, Warning: { state: 'warning', - icon: + icon: }, Danger: { state: 'danger', - icon: + icon: } }), diff --git a/packages/react-core/src/components/Alert/AlertIcon.tsx b/packages/react-core/src/components/Alert/AlertIcon.tsx index e907f573fe9..285b09cafe8 100644 --- a/packages/react-core/src/components/Alert/AlertIcon.tsx +++ b/packages/react-core/src/components/Alert/AlertIcon.tsx @@ -1,17 +1,17 @@ import { css } from '@patternfly/react-styles'; import styles from '@patternfly/react-styles/css/components/Alert/alert'; -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; -import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; -import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; -import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; +import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon'; +import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon'; +import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon'; +import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon'; export const variantIcons = { - success: CheckCircleIcon, - danger: ExclamationCircleIcon, - warning: ExclamationTriangleIcon, - info: InfoCircleIcon, - custom: BellIcon + success: RhUiCheckCircleFillIcon, + danger: RhUiErrorFillIcon, + warning: RhUiWarningFillIcon, + info: RhUiInformationFillIcon, + custom: RhUiNotificationFillIcon }; export interface AlertIconProps extends React.HTMLProps { diff --git a/packages/react-core/src/components/Alert/__tests__/AlertIcon.test.tsx b/packages/react-core/src/components/Alert/__tests__/AlertIcon.test.tsx index 9dd0782cb66..7dea0f0ce8a 100644 --- a/packages/react-core/src/components/Alert/__tests__/AlertIcon.test.tsx +++ b/packages/react-core/src/components/Alert/__tests__/AlertIcon.test.tsx @@ -3,14 +3,14 @@ import { render, screen } from '@testing-library/react'; import { AlertIcon } from '../AlertIcon'; import styles from '@patternfly/react-styles/css/components/Alert/alert'; -jest.mock('@patternfly/react-icons/dist/esm/icons/check-circle-icon', () => () => 'Check circle icon mock'); -jest.mock('@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon', () => () => 'Exclamation circle icon mock'); +jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon', () => () => 'Check circle icon mock'); +jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon', () => () => 'Exclamation circle icon mock'); jest.mock( - '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon', + '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon', () => () => 'Exclamation triangle icon mock' ); -jest.mock('@patternfly/react-icons/dist/esm/icons/info-circle-icon', () => () => 'Info circle icon mock'); -jest.mock('@patternfly/react-icons/dist/esm/icons/bell-icon', () => () => 'Bell icon mock'); +jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon', () => () => 'Info circle icon mock'); +jest.mock('@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon', () => () => 'Bell icon mock'); test('Renders without children', () => { render( diff --git a/packages/react-core/src/components/Banner/examples/Banner.md b/packages/react-core/src/components/Banner/examples/Banner.md index 47774da8654..b681cfdfa3f 100644 --- a/packages/react-core/src/components/Banner/examples/Banner.md +++ b/packages/react-core/src/components/Banner/examples/Banner.md @@ -5,11 +5,11 @@ cssPrefix: pf-v6-c-banner propComponents: ['Banner'] --- -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; -import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; -import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; -import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; +import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon'; +import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon'; +import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon'; +import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon'; ## Examples diff --git a/packages/react-core/src/components/Banner/examples/BannerStatus.tsx b/packages/react-core/src/components/Banner/examples/BannerStatus.tsx index 2da01b084be..f72e191496c 100644 --- a/packages/react-core/src/components/Banner/examples/BannerStatus.tsx +++ b/packages/react-core/src/components/Banner/examples/BannerStatus.tsx @@ -1,16 +1,16 @@ import { Banner, Flex, FlexItem } from '@patternfly/react-core'; -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; -import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; -import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; -import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; +import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon'; +import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon'; +import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon'; +import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon'; export const BannerStatus: React.FunctionComponent = () => ( <> - + Success banner @@ -19,7 +19,7 @@ export const BannerStatus: React.FunctionComponent = () => ( - + Warning banner @@ -28,7 +28,7 @@ export const BannerStatus: React.FunctionComponent = () => ( - + Danger banner @@ -37,7 +37,7 @@ export const BannerStatus: React.FunctionComponent = () => ( - + Info banner @@ -46,7 +46,7 @@ export const BannerStatus: React.FunctionComponent = () => ( - + Custom banner diff --git a/packages/react-core/src/components/Button/examples/Button.md b/packages/react-core/src/components/Button/examples/Button.md index 5853cfa525a..4d2e3705351 100644 --- a/packages/react-core/src/components/Button/examples/Button.md +++ b/packages/react-core/src/components/Button/examples/Button.md @@ -13,7 +13,7 @@ import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/ex import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; import ArrowRightIcon from '@patternfly/react-icons/dist/esm/icons/arrow-right-icon'; import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon'; import QuestionCircleIcon from '@patternfly/react-icons/dist/esm/icons/question-circle-icon'; ## Examples diff --git a/packages/react-core/src/components/Button/examples/ButtonCircle.tsx b/packages/react-core/src/components/Button/examples/ButtonCircle.tsx index c01959f21a8..8755aa40f73 100644 --- a/packages/react-core/src/components/Button/examples/ButtonCircle.tsx +++ b/packages/react-core/src/components/Button/examples/ButtonCircle.tsx @@ -2,7 +2,7 @@ import { Button, Flex } from '@patternfly/react-core'; import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon'; import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon'; interface LoadingPropsType { @@ -35,19 +35,24 @@ export const ButtonCircle: React.FunctionComponent = () => { @@ -15,7 +15,7 @@ export const ButtonStateful: React.FunctionComponent = () => (
Unread
- @@ -23,7 +23,7 @@ export const ButtonStateful: React.FunctionComponent = () => (
Attention
- diff --git a/packages/react-core/src/components/Button/examples/ButtonVariations.tsx b/packages/react-core/src/components/Button/examples/ButtonVariations.tsx index 64a6b849050..55350233449 100644 --- a/packages/react-core/src/components/Button/examples/ButtonVariations.tsx +++ b/packages/react-core/src/components/Button/examples/ButtonVariations.tsx @@ -3,7 +3,7 @@ import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-micron import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; import ExternalLinkSquareAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-square-alt-icon'; import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon'; export const ButtonVariations: React.FunctionComponent = () => ( <> @@ -50,13 +50,13 @@ export const ButtonVariations: React.FunctionComponent = () => (
- - - diff --git a/packages/react-core/src/components/EmptyState/examples/EmptyState.md b/packages/react-core/src/components/EmptyState/examples/EmptyState.md index 3966abfa196..31418592612 100644 --- a/packages/react-core/src/components/EmptyState/examples/EmptyState.md +++ b/packages/react-core/src/components/EmptyState/examples/EmptyState.md @@ -8,7 +8,6 @@ propComponents: ['EmptyState', 'EmptyStateBody', 'EmptyStateFooter', 'EmptyState import { useState } from 'react'; import CubesIcon from '@patternfly/react-icons/dist/esm/icons/cubes-icon'; import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon'; -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; ## Examples ### Basic diff --git a/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx b/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx index 05e1c153181..06d16370775 100644 --- a/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx +++ b/packages/react-core/src/components/ExpandableSection/__tests__/ExpandableSection.test.tsx @@ -3,7 +3,7 @@ import userEvent from '@testing-library/user-event'; import { ExpandableSection, ExpandableSectionVariant } from '../ExpandableSection'; import styles from '@patternfly/react-styles/css/components/ExpandableSection/expandable-section'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon'; const props = { contentId: 'content-id', toggleId: 'toggle-id' }; @@ -274,7 +274,11 @@ test('Renders with div wrapper when toggleWrapper="div"', () => { }); test('Can render custom toggle icon', () => { - render(}>Test content); + render( + }> + Test content + + ); expect(screen.getByTestId('bell-icon')).toBeInTheDocument(); }); @@ -288,7 +292,7 @@ test('Does not render toggle icon when hasToggleIcon is false', () => { test('Does not render custom toggle icon when hasToggleIcon is false', () => { render( - } hasToggleIcon={false}> + } hasToggleIcon={false}> Test content ); diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md index 647a8998c75..cc21b7a9d82 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSection.md @@ -6,7 +6,7 @@ propComponents: ['ExpandableSection', 'ExpandableSectionToggle'] --- import { useState } from 'react'; -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; ## Examples diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx index 8de69f13678..8c334c5f11c 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import { ExpandableSection, Badge, Stack, StackItem } from '@patternfly/react-core'; -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; export const ExpandableSectionCustomToggle: React.FunctionComponent = () => { const [isExpanded, setIsExpanded] = useState(false); @@ -18,7 +18,7 @@ export const ExpandableSectionCustomToggle: React.FunctionComponent = () => { toggleContent={
You can also use icons - + or badges 4 ! diff --git a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionWithHeading.tsx b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionWithHeading.tsx index 9f72c4e851a..f2af80222fe 100644 --- a/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionWithHeading.tsx +++ b/packages/react-core/src/components/ExpandableSection/examples/ExpandableSectionWithHeading.tsx @@ -1,6 +1,6 @@ import { useState, MouseEvent } from 'react'; import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } from '@patternfly/react-core'; -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; export const ExpandableSectionWithHeading = () => { const [isExpanded1, setIsExpanded1] = useState(false); @@ -75,7 +75,7 @@ export const ExpandableSectionWithHeading = () => { toggleWrapper="h5" toggleContent={ - Custom Heading Content with Icon + Custom Heading Content with Icon } onToggle={onToggle2} diff --git a/packages/react-core/src/components/FileUpload/examples/FileUpload.md b/packages/react-core/src/components/FileUpload/examples/FileUpload.md index e6b86e780cb..d7e9c6e7ab3 100644 --- a/packages/react-core/src/components/FileUpload/examples/FileUpload.md +++ b/packages/react-core/src/components/FileUpload/examples/FileUpload.md @@ -8,7 +8,6 @@ subsection: file-upload import { useState } from 'react'; import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon'; -import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; ## Examples diff --git a/packages/react-core/src/components/Form/examples/Form.md b/packages/react-core/src/components/Form/examples/Form.md index 242ef658fa6..e5560cb4df3 100644 --- a/packages/react-core/src/components/Form/examples/Form.md +++ b/packages/react-core/src/components/Form/examples/Form.md @@ -23,7 +23,7 @@ propComponents: --- import { useRef, useEffect, useState } from 'react'; -import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon'; import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon'; import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon'; import styles from '@patternfly/react-styles/css/components/Form/form'; diff --git a/packages/react-core/src/components/Form/examples/FormInvalid.tsx b/packages/react-core/src/components/Form/examples/FormInvalid.tsx index a7475ccf8e3..3b1394bc691 100644 --- a/packages/react-core/src/components/Form/examples/FormInvalid.tsx +++ b/packages/react-core/src/components/Form/examples/FormInvalid.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import { Form, FormGroup, TextInput, HelperText, HelperTextItem, FormHelperText } from '@patternfly/react-core'; -import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon'; export const FormInvalid: React.FunctionComponent = () => { type validate = 'success' | 'warning' | 'error' | 'default'; @@ -32,7 +32,7 @@ export const FormInvalid: React.FunctionComponent = () => { {validated !== 'success' && ( - } variant={validated}> + } variant={validated}> {validated === 'error' ? 'Must be a number' : 'Please enter your age'} diff --git a/packages/react-core/src/components/Form/examples/FormInvalidWithFormAlert.tsx b/packages/react-core/src/components/Form/examples/FormInvalidWithFormAlert.tsx index 9ec2a9f4419..1002552196d 100644 --- a/packages/react-core/src/components/Form/examples/FormInvalidWithFormAlert.tsx +++ b/packages/react-core/src/components/Form/examples/FormInvalidWithFormAlert.tsx @@ -9,7 +9,7 @@ import { HelperTextItem, FormHelperText } from '@patternfly/react-core'; -import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon'; export const FormInvalidWithAlert: React.FunctionComponent = () => { type validate = 'success' | 'warning' | 'error' | 'default'; @@ -46,7 +46,7 @@ export const FormInvalidWithAlert: React.FunctionComponent = () => { {validated !== 'success' && ( - } variant={validated}> + } variant={validated}> {validated === 'error' ? 'Must be a number' : 'Please enter your age'} diff --git a/packages/react-core/src/components/Form/examples/FormState.tsx b/packages/react-core/src/components/Form/examples/FormState.tsx index efbf6de8288..2431e47990d 100644 --- a/packages/react-core/src/components/Form/examples/FormState.tsx +++ b/packages/react-core/src/components/Form/examples/FormState.tsx @@ -18,7 +18,7 @@ import { TextArea, TextInput } from '@patternfly/react-core'; -import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon'; export const FormState = () => { const [isSelectOpen, setIsSelectOpen] = useState(false); @@ -42,7 +42,7 @@ export const FormState = () => { })} + {...(errors['input-id'] && { icon: })} > {errors['input-id']} diff --git a/packages/react-core/src/components/Form/examples/FormValidated.tsx b/packages/react-core/src/components/Form/examples/FormValidated.tsx index 7725f415870..6e1842383cd 100644 --- a/packages/react-core/src/components/Form/examples/FormValidated.tsx +++ b/packages/react-core/src/components/Form/examples/FormValidated.tsx @@ -1,6 +1,6 @@ import { useEffect, useState } from 'react'; import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core'; -import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon'; export const FormValidated: React.FunctionComponent = () => { type validate = 'success' | 'warning' | 'error' | 'default'; @@ -47,7 +47,7 @@ export const FormValidated: React.FunctionComponent = () => { /> - })}> + })}> {helperText} diff --git a/packages/react-core/src/components/FormControl/FormControlIcon.tsx b/packages/react-core/src/components/FormControl/FormControlIcon.tsx index 424baec7ce3..f5cdcdf1d81 100644 --- a/packages/react-core/src/components/FormControl/FormControlIcon.tsx +++ b/packages/react-core/src/components/FormControl/FormControlIcon.tsx @@ -1,13 +1,13 @@ import styles from '@patternfly/react-styles/css/components/FormControl/form-control'; import { css } from '@patternfly/react-styles'; -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; -import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; -import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; +import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; +import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon'; +import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon'; export const statusIcons = { - success: CheckCircleIcon, - error: ExclamationCircleIcon, - warning: ExclamationTriangleIcon + success: RhUiCheckCircleFillIcon, + error: RhUiErrorFillIcon, + warning: RhUiWarningFillIcon }; export interface FormControlIconProps extends React.HTMLProps { diff --git a/packages/react-core/src/components/HelperText/HelperTextItem.tsx b/packages/react-core/src/components/HelperText/HelperTextItem.tsx index dfc05278293..66839693e24 100644 --- a/packages/react-core/src/components/HelperText/HelperTextItem.tsx +++ b/packages/react-core/src/components/HelperText/HelperTextItem.tsx @@ -1,9 +1,9 @@ import styles from '@patternfly/react-styles/css/components/HelperText/helper-text'; import { css } from '@patternfly/react-styles'; import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon'; -import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; -import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; +import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon'; +import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; +import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon'; export enum HelperTextItemVariant { default = 'default', @@ -38,9 +38,9 @@ export interface HelperTextItemProps extends React.HTMLProps, - warning: , - success: , - error: + warning: , + success: , + error: }; export const HelperTextItem: React.FunctionComponent = ({ diff --git a/packages/react-core/src/components/Icon/examples/Icon.md b/packages/react-core/src/components/Icon/examples/Icon.md index 172ad48183c..5013e3dd230 100644 --- a/packages/react-core/src/components/Icon/examples/Icon.md +++ b/packages/react-core/src/components/Icon/examples/Icon.md @@ -11,11 +11,11 @@ import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-i import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon'; import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon'; import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon'; -import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; -import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; -import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon'; +import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon'; +import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; +import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon'; +import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon'; ## Examples diff --git a/packages/react-core/src/components/Icon/examples/IconCustomProgress.tsx b/packages/react-core/src/components/Icon/examples/IconCustomProgress.tsx index e03bd578d4f..87c8d9df98a 100644 --- a/packages/react-core/src/components/Icon/examples/IconCustomProgress.tsx +++ b/packages/react-core/src/components/Icon/examples/IconCustomProgress.tsx @@ -1,6 +1,6 @@ import { Fragment, useState } from 'react'; import { Icon, Spinner, Checkbox } from '@patternfly/react-core'; -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; export const IconProgress: React.FunctionComponent = () => { const [isInProgress, setIsInProgress] = useState(false); @@ -17,7 +17,7 @@ export const IconProgress: React.FunctionComponent = () => { />
}> - + ); diff --git a/packages/react-core/src/components/Icon/examples/IconProgress.tsx b/packages/react-core/src/components/Icon/examples/IconProgress.tsx index f0c59f0cd1e..58f45c1e92b 100644 --- a/packages/react-core/src/components/Icon/examples/IconProgress.tsx +++ b/packages/react-core/src/components/Icon/examples/IconProgress.tsx @@ -1,6 +1,6 @@ import { Fragment, useState } from 'react'; import { Icon, Checkbox } from '@patternfly/react-core'; -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; +import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; export const IconProgress: React.FunctionComponent = () => { const [isInProgress, setIsInProgress] = useState(false); @@ -17,7 +17,7 @@ export const IconProgress: React.FunctionComponent = () => { /> - + ); diff --git a/packages/react-core/src/components/Icon/examples/IconStatus.tsx b/packages/react-core/src/components/Icon/examples/IconStatus.tsx index 01728bf3e47..baeb85ab560 100644 --- a/packages/react-core/src/components/Icon/examples/IconStatus.tsx +++ b/packages/react-core/src/components/Icon/examples/IconStatus.tsx @@ -1,27 +1,27 @@ import { Fragment } from 'react'; import { Icon } from '@patternfly/react-core'; -import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon'; -import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; -import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon'; -import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; -import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon'; +import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon'; +import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon'; +import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; +import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon'; +import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon'; export const IconStatus: React.FunctionComponent = () => ( - + {' '} - + {' '} - + {' '} - + {' '} - + ); diff --git a/packages/react-core/src/components/Label/Label.tsx b/packages/react-core/src/components/Label/Label.tsx index a903ad54949..71427cff802 100644 --- a/packages/react-core/src/components/Label/Label.tsx +++ b/packages/react-core/src/components/Label/Label.tsx @@ -7,11 +7,11 @@ import { css } from '@patternfly/react-styles'; import { useIsomorphicLayoutEffect } from '../../helpers'; import cssTextMaxWidth from '@patternfly/react-tokens/dist/esm/c_label__text_MaxWidth'; 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'; -import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon'; -import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; +import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon'; +import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon'; +import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon'; +import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon'; +import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon'; export interface LabelProps extends React.HTMLProps { /** Content rendered inside the label. */ @@ -95,11 +95,11 @@ const colorStyles = { }; const statusIcons = { - success: , - warning: , - danger: , - info: , - custom: + success: , + warning: , + danger: , + info: , + custom: }; export const Label: React.FunctionComponent = ({ diff --git a/packages/react-core/src/components/Label/examples/Label.md b/packages/react-core/src/components/Label/examples/Label.md index 4110ebdf4a1..353f90baca2 100644 --- a/packages/react-core/src/components/Label/examples/Label.md +++ b/packages/react-core/src/components/Label/examples/Label.md @@ -7,7 +7,7 @@ propComponents: ['Label', 'LabelGroup'] import { Fragment, useEffect, useRef, useState } from 'react'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; +import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon'; import './Label.css'; ## Examples diff --git a/packages/react-core/src/components/Label/examples/LabelCompact.tsx b/packages/react-core/src/components/Label/examples/LabelCompact.tsx index 2b255c675af..fea1a0bdb84 100644 --- a/packages/react-core/src/components/Label/examples/LabelCompact.tsx +++ b/packages/react-core/src/components/Label/examples/LabelCompact.tsx @@ -1,7 +1,7 @@ import { Fragment } from 'react'; import { Label } from '@patternfly/react-core'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; +import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon'; export const LabelCompact: React.FunctionComponent = () => ( @@ -67,7 +67,7 @@ export const LabelCompact: React.FunctionComponent = () => ( > Compact label with icon that overflows {' '} -