From 838b6c5e2ab23c6c1a4813aaae0f2e5e030ef205 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Wed, 15 Jul 2026 12:52:45 -0400 Subject: [PATCH] fix(Messages): Update icons Replace with RH UI icons. --- .../MessageWithCustomResponseActions.tsx | 7 +- .../MessageWithMarkdownToolResponse.tsx | 6 +- .../Messages/MessageWithQuickResponses.tsx | 6 +- .../Messages/MessageWithToolResponse.tsx | 10 +-- .../chatbot/examples/Messages/Messages.md | 2 +- .../Messages/UserMessageWithExtraContent.tsx | 38 ++--------- .../chatbot/examples/demos/Chatbot.md | 3 +- .../LoadingMessage/LoadingMessage.test.tsx | 15 ----- .../src/LoadingMessage/LoadingMessage.tsx | 27 -------- .../LoadingMessage.test.tsx.snap | 64 ------------------- packages/module/src/LoadingMessage/index.ts | 3 - .../CodeBlockMessage/CodeBlockMessage.tsx | 4 +- packages/module/src/Message/Message.test.tsx | 1 + .../QuickStarts/QuickStartTileDescription.tsx | 4 +- .../ResponseActionButton.test.tsx | 14 ++-- .../ResponseActions/ResponseActions.test.tsx | 15 ++--- 16 files changed, 42 insertions(+), 177 deletions(-) delete mode 100644 packages/module/src/LoadingMessage/LoadingMessage.test.tsx delete mode 100644 packages/module/src/LoadingMessage/LoadingMessage.tsx delete mode 100644 packages/module/src/LoadingMessage/__snapshots__/LoadingMessage.test.tsx.snap delete mode 100644 packages/module/src/LoadingMessage/index.ts diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithCustomResponseActions.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithCustomResponseActions.tsx index 35a828762..c1bb81943 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithCustomResponseActions.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithCustomResponseActions.tsx @@ -1,8 +1,7 @@ import { FunctionComponent } from 'react'; import Message from '@patternfly/chatbot/dist/dynamic/Message'; -import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon'; -import RedoIcon from '@patternfly/react-icons/dist/esm/icons/redo-icon'; +import { RhMicronsInformationFillIcon, RhUiRedoIcon } from '@patternfly/react-icons'; export const CustomActionExample: FunctionComponent = () => ( ( onClick: () => console.log('Clicked regenerate'), tooltipContent: 'Regenerate', clickedTooltipContent: 'Regenerated', - icon: + icon: }, info: { ariaLabel: 'Info', // eslint-disable-next-line no-console onClick: () => console.log('Clicked info'), tooltipContent: 'Info', - icon: + icon: } }} /> diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithMarkdownToolResponse.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithMarkdownToolResponse.tsx index 862153bf4..54e5b894c 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithMarkdownToolResponse.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithMarkdownToolResponse.tsx @@ -1,6 +1,6 @@ import { useState, FunctionComponent, MouseEvent as ReactMouseEvent } from 'react'; import Message from '@patternfly/chatbot/dist/dynamic/Message'; -import { CopyIcon, WrenchIcon } from '@patternfly/react-icons'; +import { RhUiBuildFillIcon, RhUiCopyFillIcon } from '@patternfly/react-icons'; import { Button, DescriptionList, @@ -72,7 +72,7 @@ export const MessageWithToolResponseExample: FunctionComponent = () => { }} > - { variant="plain" aria-label="Copy tool response to clipboard" icon={ - ( <> @@ -73,8 +73,8 @@ export const MessageWithQuickResponsesExample: FunctionComponent = () => ( role="bot" content="Example with icons" quickResponses={[ - { id: '1', content: 'Update your settings', onClick: () => alert('Clicked yes'), icon: }, - { id: '2', content: 'Copy', onClick: () => alert('Clicked no'), icon: } + { id: '1', content: 'Update your settings', onClick: () => alert('Clicked yes'), icon: }, + { id: '2', content: 'Copy', onClick: () => alert('Clicked no'), icon: } ]} /> diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithToolResponse.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithToolResponse.tsx index 5335fcce3..a821319b8 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithToolResponse.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithToolResponse.tsx @@ -1,6 +1,6 @@ import { useState, FunctionComponent, MouseEvent as ReactMouseEvent } from 'react'; import Message from '@patternfly/chatbot/dist/dynamic/Message'; -import { CopyIcon, WrenchIcon } from '@patternfly/react-icons'; +import { RhUiBuildFillIcon, RhUiCopyFillIcon } from '@patternfly/react-icons'; import { Button, DescriptionList, @@ -41,7 +41,7 @@ export const MessageWithToolResponseExample: FunctionComponent = () => { - + toolName @@ -58,7 +58,7 @@ export const MessageWithToolResponseExample: FunctionComponent = () => { @@ -152,7 +152,7 @@ export const MessageWithToolResponseExample: FunctionComponent = () => { - + toolName @@ -169,7 +169,7 @@ export const MessageWithToolResponseExample: FunctionComponent = () => { diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md index bb329c046..56598a1b7 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/Messages.md @@ -50,7 +50,7 @@ import ResponseActions, { ResponseActionsGroups } from '@patternfly/chatbot/dist import ToolResponse from '@patternfly/chatbot/dist/dynamic/ToolResponse'; import { rehypeCodeBlockToggle } from '@patternfly/chatbot/dist/esm/Message/Plugins/rehypeCodeBlockToggle'; import SourcesCard from '@patternfly/chatbot/dist/dynamic/SourcesCard'; -import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CopyIcon, CubeIcon, CubesIcon, DownloadIcon, InfoCircleIcon, OutlinedQuestionCircleIcon, RedoIcon, RobotIcon, WrenchIcon } from '@patternfly/react-icons'; +import { RhUiArrowCircleDownFillIcon, RhUiArrowRightIcon, RhUiCheckCircleFillIcon, RhUiCopyFillIcon, RhUiExportIcon, RhMicronsInformationFillIcon, OutlinedQuestionCircleIcon, RhUiRedoIcon, RhUiBuildFillIcon } from '@patternfly/react-icons'; import patternflyAvatar from './patternfly_avatar.jpg'; import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit'; import FileDetails from '@patternfly/chatbot/dist/dynamic/FileDetails'; diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx index c632e725d..ab4ae02f2 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/UserMessageWithExtraContent.tsx @@ -39,7 +39,7 @@ import { TabTitleText, Spinner } from '@patternfly/react-core'; -import { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CubeIcon, CubesIcon } from '@patternfly/react-icons'; +import { RhUiArrowCircleDownFillIcon, RhUiArrowRightIcon, RhUiCheckCircleFillIcon } from '@patternfly/react-icons'; const UserActionEndContent = () => { // eslint-disable-next-line no-console @@ -143,7 +143,7 @@ const LiveProgressSummaryCard = () => { const status = getStageStatus(stage); if (status === 'completed') { - return ; + return ; } else if (status === 'in-progress') { return ; } else { @@ -374,7 +374,7 @@ Setting up cluster console...`; - @@ -536,34 +536,10 @@ const VersionSelectorCard = () => { style={{ '--pf-v6-c-card--child--PaddingBlockEnd': 'var(--pf-t--global--spacer--md)' } as React.CSSProperties} > - - - - - - Single arch - - - } - > + Single arch}> {generateTabContent('x86_64 Intel/AMD only', 'Standard deployments • Most common choice')} - - - - - - Multi arch - - - } - > + Multi arch}> {generateTabContent('Multi arch', 'Standard deployments')} @@ -584,7 +560,7 @@ const DownloadCard = () => ( - + Your discovery ISO is ready @@ -602,7 +578,7 @@ const DownloadCard = () => ( - diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md index a47d413cf..7c7a19c9a 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md @@ -52,8 +52,7 @@ import ExpandIcon from '@patternfly/react-icons/dist/esm/icons/expand-icon'; import OpenDrawerRightIcon from '@patternfly/react-icons/dist/esm/icons/open-drawer-right-icon'; import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon'; import { BarsIcon } from '@patternfly/react-icons/dist/esm/icons/bars-icon'; -import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon'; -import { WrenchIcon } from '@patternfly/react-icons/dist/esm/icons/wrench-icon'; +import { RhUiBuildFillIcon, RhUiCopyFillIcon } from '@patternfly/react-icons'; import { Button, DescriptionList, diff --git a/packages/module/src/LoadingMessage/LoadingMessage.test.tsx b/packages/module/src/LoadingMessage/LoadingMessage.test.tsx deleted file mode 100644 index a76cc60df..000000000 --- a/packages/module/src/LoadingMessage/LoadingMessage.test.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import '@testing-library/jest-dom'; -import LoadingMessage from './LoadingMessage'; - -describe('LoadingMessage', () => { - it('should render loading message', () => { - const { container } = render(); - expect(container).toMatchSnapshot(); - }); - it('should render loading message correctly', () => { - render(); - expect(screen.getAllByText('.')).toBeTruthy(); - expect(screen.getAllByText('.')).toHaveLength(3); - }); -}); diff --git a/packages/module/src/LoadingMessage/LoadingMessage.tsx b/packages/module/src/LoadingMessage/LoadingMessage.tsx deleted file mode 100644 index 6d1d9b114..000000000 --- a/packages/module/src/LoadingMessage/LoadingMessage.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import type { FunctionComponent } from 'react'; -import { Icon, Split, SplitItem } from '@patternfly/react-core'; - -import RobotIcon from '@patternfly/react-icons/dist/js/icons/robot-icon'; - -export interface LoadingMessageProps { - icon?: React.ComponentType; -} - -export const LoadingMessage: FunctionComponent = ({ icon: IconComponent = RobotIcon }) => ( - - - - - - - -
-
.
-
.
-
.
-
-
-
-); - -export default LoadingMessage; diff --git a/packages/module/src/LoadingMessage/__snapshots__/LoadingMessage.test.tsx.snap b/packages/module/src/LoadingMessage/__snapshots__/LoadingMessage.test.tsx.snap deleted file mode 100644 index 5cf1de58a..000000000 --- a/packages/module/src/LoadingMessage/__snapshots__/LoadingMessage.test.tsx.snap +++ /dev/null @@ -1,64 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`LoadingMessage should render loading message 1`] = ` -
-
-
- - - - - -
-
-
-
- . -
-
- . -
-
- . -
-
-
-
-
-`; diff --git a/packages/module/src/LoadingMessage/index.ts b/packages/module/src/LoadingMessage/index.ts deleted file mode 100644 index 80ca4af7e..000000000 --- a/packages/module/src/LoadingMessage/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { default } from './LoadingMessage'; - -export * from './LoadingMessage'; diff --git a/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx b/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx index ca38e2e12..bd83fa315 100644 --- a/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx +++ b/packages/module/src/Message/CodeBlockMessage/CodeBlockMessage.tsx @@ -18,8 +18,8 @@ import { } from '@patternfly/react-core'; import { CheckIcon } from '@patternfly/react-icons/dist/esm/icons/check-icon'; -import { CopyIcon } from '@patternfly/react-icons/dist/esm/icons/copy-icon'; import { css } from '@patternfly/react-styles'; +import { RhUiCopyFillIcon } from '@patternfly/react-icons'; export interface CodeBlockMessageProps { /** Content rendered in code block */ @@ -142,7 +142,7 @@ const CodeBlockMessage = ({ className="pf-chatbot__button--copy" onClick={(event) => handleCopy(event, children)} > - {copied ? : } + {copied ? : } diff --git a/packages/module/src/Message/Message.test.tsx b/packages/module/src/Message/Message.test.tsx index 4054d4370..28a75735a 100644 --- a/packages/module/src/Message/Message.test.tsx +++ b/packages/module/src/Message/Message.test.tsx @@ -23,6 +23,7 @@ jest.mock('@patternfly/react-icons', () => ({ RhUiVolumeUpFillIcon: () =>
RhUiVolumeUpFillIcon
, RhUiExportIcon: () =>
RhUiExportIcon
, RhUiExportFillIcon: () =>
RhUiExportFillIcon
, + RhMicronsInformationFillIcon: () =>
RhMicronsInformationFillIcon
, CheckIcon: () =>
CheckIcon
, CloseIcon: () =>
CloseIcon
, ExternalLinkSquareAltIcon: () =>
ExternalLinkSquareAltIcon
, diff --git a/packages/module/src/Message/QuickStarts/QuickStartTileDescription.tsx b/packages/module/src/Message/QuickStarts/QuickStartTileDescription.tsx index dd4e90283..2d42d1fcb 100644 --- a/packages/module/src/Message/QuickStarts/QuickStartTileDescription.tsx +++ b/packages/module/src/Message/QuickStarts/QuickStartTileDescription.tsx @@ -1,7 +1,7 @@ import type { FC } from 'react'; import { useRef } from 'react'; import { Button, Flex, pluralize, Popover } from '@patternfly/react-core'; -import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-icon'; +import { RhMicronsInformationFillIcon } from '@patternfly/react-icons'; interface QuickStartTileDescriptionProps { /** QuickStart description */ @@ -57,7 +57,7 @@ const QuickStartTileDescription: FC = ({ }} aria-label={quickStartButtonAriaLabel} > - + { it('renders aria-label correctly if not clicked', () => { - render(} ariaLabel="Download" clickedAriaLabel="Downloaded" />); + render(} ariaLabel="Download" clickedAriaLabel="Downloaded" />); expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy(); }); it('renders aria-label correctly if clicked', () => { render( - } ariaLabel="Download" clickedAriaLabel="Downloaded" isClicked /> + } ariaLabel="Download" clickedAriaLabel="Downloaded" isClicked /> ); expect(screen.getByRole('button', { name: 'Downloaded' })).toBeTruthy(); }); it('renders tooltip correctly if not clicked', async () => { render( - } tooltipContent="Download" clickedTooltipContent="Downloaded" /> + } tooltipContent="Download" clickedTooltipContent="Downloaded" /> ); expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy(); // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked @@ -27,7 +27,7 @@ describe('ResponseActionButton', () => { it('renders tooltip correctly if clicked', async () => { render( } + icon={} tooltipContent="Download" clickedTooltipContent="Downloaded" isClicked @@ -39,13 +39,13 @@ describe('ResponseActionButton', () => { expect(screen.getByRole('tooltip', { name: 'Downloaded' })).toBeTruthy(); }); it('if clicked variant for tooltip is not supplied, it uses the default', async () => { - render(} tooltipContent="Download" isClicked />); + render(} tooltipContent="Download" isClicked />); // clicking here just triggers the tooltip; in this button, the logic is divorced from whether it is actually clicked await userEvent.click(screen.getByRole('button', { name: 'Download' })); expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy(); }); it('if clicked variant for aria label is not supplied, it uses the default', async () => { - render(} ariaLabel="Download" isClicked />); + render(} ariaLabel="Download" isClicked />); expect(screen.getByRole('button', { name: 'Download' })).toBeTruthy(); }); }); diff --git a/packages/module/src/ResponseActions/ResponseActions.test.tsx b/packages/module/src/ResponseActions/ResponseActions.test.tsx index 14ef958ea..fc698fbfc 100644 --- a/packages/module/src/ResponseActions/ResponseActions.test.tsx +++ b/packages/module/src/ResponseActions/ResponseActions.test.tsx @@ -2,7 +2,7 @@ import { render, screen } from '@testing-library/react'; import '@testing-library/jest-dom'; import ResponseActions, { ActionProps } from './ResponseActions'; import userEvent from '@testing-library/user-event'; -import { DownloadIcon, InfoCircleIcon, RedoIcon } from '@patternfly/react-icons'; +import { RhUiExportIcon, RhMicronsInformationFillIcon, RhUiRedoIcon } from '@patternfly/react-icons'; import Message from '../Message'; // Mock the icon components @@ -19,9 +19,8 @@ jest.mock('@patternfly/react-icons', () => ({ RhUiVolumeUpFillIcon: () =>
RhUiVolumeUpFillIcon
, RhUiExportIcon: () =>
RhUiExportIcon
, RhUiExportFillIcon: () =>
RhUiExportFillIcon
, - DownloadIcon: () =>
DownloadIcon
, - InfoCircleIcon: () =>
InfoCircleIcon
, - RedoIcon: () =>
RedoIcon
+ RhMicronsInformationFillIcon: () =>
RhMicronsInformationFillIcon
, + RhUiRedoIcon: () =>
RhUiRedoIcon
})); const ALL_ACTIONS = [ @@ -41,7 +40,7 @@ const CUSTOM_ACTIONS = [ onClick: jest.fn(), tooltipContent: 'Regenerate', clickedTooltipContent: 'Regenerated', - icon: + icon: }, download: { ariaLabel: 'Download', @@ -49,13 +48,13 @@ const CUSTOM_ACTIONS = [ onClick: jest.fn(), tooltipContent: 'Download', clickedTooltipContent: 'Downloaded', - icon: + icon: }, info: { ariaLabel: 'Info', onClick: jest.fn(), tooltipContent: 'Info', - icon: + icon: } } ]; @@ -428,7 +427,7 @@ describe('ResponseActions', () => { onClick: jest.fn(), ariaLabel: 'Custom', tooltipContent: 'Custom action', - icon: + icon: } }; render();