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/Alert/__tests__/Generated/__snapshots__/AlertIcon.test.tsx.snap b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertIcon.test.tsx.snap index ba38160093a..3467f8aa3d5 100644 --- a/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertIcon.test.tsx.snap +++ b/packages/react-core/src/components/Alert/__tests__/Generated/__snapshots__/AlertIcon.test.tsx.snap @@ -11,24 +11,12 @@ exports[`AlertIcon should match snapshot (auto-generated) 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 32 32" width="1em" > - - - - - - + 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 e0ae6ca1c20..4a1cba017e7 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 b5d4236b0e0..675a72f9082 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 TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-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 e765e4d302e..a4c9ced4baf 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 TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon'; 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/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap b/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap index 061a850d457..e0b04fa6fcb 100644 --- a/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap +++ b/packages/react-core/src/components/FormSelect/__tests__/__snapshots__/FormSelect.test.tsx.snap @@ -452,24 +452,12 @@ exports[`FormSelect invalid FormSelect input 1`] = ` fill="currentColor" height="1em" role="img" + viewBox="0 0 32 32" width="1em" > - - - - - - + - - - - - - + - - - - - - + , - 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 8fd0f643188..ecc5ce271db 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 TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-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 {' '} -