diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachMenu.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachMenu.tsx deleted file mode 100644 index bac16c3d7..000000000 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/AttachMenu.tsx +++ /dev/null @@ -1,149 +0,0 @@ -import { useState, isValidElement, cloneElement, Children, FunctionComponent, ReactNode } from 'react'; -import AttachMenu from '@patternfly/chatbot/dist/dynamic/AttachMenu'; -import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem'; -import { Button, Divider, DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core'; -import { BellIcon, CodeIcon, ClipboardIcon, CalendarAltIcon, UploadIcon } from '@patternfly/react-icons'; -import PaperclipIcon from './PaperclipIcon'; - -const initialMenuItems = [ - - - - - - - - - - - - - - } - name="auth-operator" - type="Pod" - /> - - , - - - }> - Alerts - - }> - Events - - }> - Logs - - }> - YAML - Status - - }> - YAML - All contents - - - -]; - -const uploadMenuItems = [ - , - - }> - Upload from computer - - -]; - -export const AttachmentMenuExample: FunctionComponent = () => { - const [isOpen, setIsOpen] = useState(false); - const [userFacingMenuItems, setUserFacingMenuItems] = useState([]); - - const onToggleClick = () => { - setIsOpen(!isOpen); - setUserFacingMenuItems(initialMenuItems.concat(uploadMenuItems)); - }; - - const findMatchingElements = (elements: ReactNode[], targetValue: string) => { - let matchingElements = [] as ReactNode[]; - - elements.forEach((element) => { - if (isValidElement(element)) { - // Check if the element's value matches the targetValue - if (element.props.value && element.props.value.toLowerCase().includes(targetValue.toLowerCase())) { - matchingElements.push(cloneElement(element, { key: element.props.value })); - } - - // Recursively check the element's children - const children = Children.toArray(element.props.children); - matchingElements = matchingElements.concat(findMatchingElements(children, targetValue)); - } - }); - - return matchingElements; - }; - - const onTextChange = (textValue: string) => { - if (textValue === '') { - setUserFacingMenuItems(initialMenuItems.concat(uploadMenuItems)); - return; - } - - const newMenuItems = findMatchingElements(initialMenuItems, textValue); - // this is necessary because the React nodes we find traversing the recursive search - // aren't correctly wrapped in a DropdownList. This leads to problems with the - // auth-operator item where it winds up floating in a bad place in the DOM and never - // gets removed - setUserFacingMenuItems( - <> - - {newMenuItems.length === 0 ? ( - No results found - ) : ( - newMenuItems.map((item) => item) - )} - - {uploadMenuItems.map((item) => item)} - - ); - }; - - return ( - setIsOpen(isOpen)} - onOpenChangeKeys={['Escape']} - // eslint-disable-next-line no-console - onSelect={(_ev, value) => console.log('selected', value)} - handleTextInputChange={onTextChange} - popperProps={{ direction: 'up', distance: 8 }} - searchInputPlaceholder="Search cluster resources..." - toggle={(toggleRef) => ( - 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..80704fea0 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 { ArrowCircleDownIcon, ArrowRightIcon, CheckCircleIcon, CopyIcon, CubeIcon, CubesIcon, DownloadIcon, InfoCircleIcon, RhUiQuestionMarkCircleIcon, RedoIcon, RobotIcon, WrenchIcon } 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/PaperclipIcon.svg b/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/PaperclipIcon.svg deleted file mode 100644 index f1b65320c..000000000 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/PaperclipIcon.svg +++ /dev/null @@ -1,10 +0,0 @@ - - - - - - - - - - diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md index 3f5d11431..eca0c0515 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md @@ -24,7 +24,7 @@ import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel' import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem'; import PreviewAttachment from '@patternfly/chatbot/dist/dynamic/PreviewAttachment'; import AttachmentEdit from '@patternfly/chatbot/dist/dynamic/AttachmentEdit'; -import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons'; +import { RhUiAttentionBellIcon, RhUiCalendarIcon, RhUiClipboardIcon, RhUiCodeIcon, RhUiUploadIcon } from '@patternfly/react-icons'; import { useDropzone } from 'react-dropzone'; import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg'; import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg'; 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..5a590c339 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 @@ -51,7 +51,7 @@ ChatbotHeaderCloseButton, 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 { RhUiMenuBarsIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-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 { diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx index 86d59d46b..8c32e0ee7 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachmentMenu.tsx @@ -11,7 +11,13 @@ import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetail import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert'; import { Divider, DropdownGroup, DropdownItem, DropdownList, DropEvent } from '@patternfly/react-core'; import FileDetailsLabel from '@patternfly/chatbot/dist/dynamic/FileDetailsLabel'; -import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons'; +import { + RhUiAttentionBellIcon, + RhUiCalendarIcon, + RhUiClipboardIcon, + RhUiCodeIcon, + RhUiUploadIcon +} from '@patternfly/react-icons'; import { useDropzone } from 'react-dropzone'; import userAvatar from '../Messages/user_avatar.svg'; import '@patternfly/react-core/dist/styles/base.css'; @@ -48,19 +54,19 @@ const initialMenuItems = [ , - }> + }> Alerts - }> + }> Events - }> + }> Logs - }> + }> YAML - Status - }> + }> YAML - All contents @@ -150,7 +156,7 @@ export const AttachmentMenuDemo: FunctionComponent = () => { key="upload" value="upload" id="upload" - icon={} + icon={} > Upload from computer diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotDisplayMode.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotDisplayMode.tsx index 27108189b..5bc30e76f 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotDisplayMode.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotDisplayMode.tsx @@ -43,7 +43,7 @@ import ChatbotHeader, { } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader'; import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg'; import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg'; -import { BarsIcon } from '@patternfly/react-icons'; +import { RhUiMenuBarsIcon } from '@patternfly/react-icons'; 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'; @@ -263,7 +263,7 @@ export const ChatbotDisplayModeDemo: FunctionComponent = () => { onSidebarToggle={() => setIsSidebarOpen(!isSidebarOpen)} id="fill-nav-toggle" > - + diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx index 4c7c88ddf..1d86e8d42 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotInDrawer.tsx @@ -39,7 +39,7 @@ import ChatbotHeader, { } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader'; import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg'; import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg'; -import { BarsIcon } from '@patternfly/react-icons'; +import { RhUiMenuBarsIcon } from '@patternfly/react-icons'; import userAvatar from '../Messages/user_avatar.svg'; import '@patternfly/react-core/dist/styles/base.css'; import '@patternfly/chatbot/dist/css/main.css'; @@ -290,7 +290,7 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => { onSidebarToggle={() => setIsSidebarOpen(!isSidebarOpen)} id="fill-nav-toggle" > - + diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx index 5e5cf562a..095719caf 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedChatbot.tsx @@ -37,7 +37,7 @@ import ChatbotHeader, { import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg'; import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg'; -import { BarsIcon } from '@patternfly/react-icons'; +import { RhUiMenuBarsIcon } from '@patternfly/react-icons'; import userAvatar from '../Messages/user_avatar.svg'; import '@patternfly/react-core/dist/styles/base.css'; import '@patternfly/chatbot/dist/css/main.css'; @@ -282,7 +282,7 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => { onSidebarToggle={() => setIsSidebarOpen(!isSidebarOpen)} id="fill-nav-toggle" > - + diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx index 18ca6767a..c15232416 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx @@ -20,7 +20,7 @@ import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox'; import Message, { MessageProps } from '@patternfly/chatbot/dist/dynamic/Message'; import ChatbotHeader, { ChatbotHeaderMain, ChatbotHeaderTitle } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader'; import Compare from '@patternfly/chatbot/dist/dynamic/Compare'; -import { BarsIcon } from '@patternfly/react-icons'; +import { RhUiMenuBarsIcon } from '@patternfly/react-icons'; import userAvatar from '../Messages/user_avatar.svg'; import '@patternfly/react-core/dist/styles/base.css'; import '@patternfly/chatbot/dist/css/main.css'; @@ -155,7 +155,7 @@ export const EmbeddedComparisonChatbotDemo: FunctionComponent = () => { onSidebarToggle={() => setIsSidebarOpen(!isSidebarOpen)} id="fill-nav-toggle" > - + diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/WhiteEmbeddedChatbot.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/WhiteEmbeddedChatbot.tsx index 84a12aaad..910aed483 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/WhiteEmbeddedChatbot.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/WhiteEmbeddedChatbot.tsx @@ -37,7 +37,7 @@ import ChatbotHeader, { import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg'; import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg'; -import { BarsIcon } from '@patternfly/react-icons'; +import { RhUiMenuBarsIcon } from '@patternfly/react-icons'; import userAvatar from '../Messages/user_avatar.svg'; import '@patternfly/react-core/dist/styles/base.css'; import '@patternfly/chatbot/dist/css/main.css'; @@ -296,7 +296,7 @@ export const EmbeddedChatbotDemo: FunctionComponent = () => { onSidebarToggle={() => setIsSidebarOpen(!isSidebarOpen)} id="fill-nav-toggle" > - + diff --git a/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx b/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx index c2eef3f9a..1df5aff02 100644 --- a/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx +++ b/packages/module/src/ChatbotHeader/ChatbotHeaderMenu.tsx @@ -2,7 +2,7 @@ import type { Ref, FunctionComponent } from 'react'; import { forwardRef, useEffect, useMemo, useRef, useState } from 'react'; import { Button, ButtonProps, Icon, Tooltip, TooltipProps } from '@patternfly/react-core'; -import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon'; +import { RhUiMenuBarsIcon } from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu-bars-icon'; export interface ChatbotHeaderMenuProps extends ButtonProps { /** Callback function to attach to menu toggle on top right of chatbot header. */ @@ -69,7 +69,7 @@ const ChatbotHeaderMenuBase: FunctionComponent = ({ ref={innerRef ?? buttonRef} icon={ - + } size={isCompact ? 'sm' : undefined} diff --git a/packages/module/src/FileDropZone/FileDropZone.tsx b/packages/module/src/FileDropZone/FileDropZone.tsx index 5ce37c0ae..fb42e7621 100644 --- a/packages/module/src/FileDropZone/FileDropZone.tsx +++ b/packages/module/src/FileDropZone/FileDropZone.tsx @@ -2,7 +2,7 @@ import { MultipleFileUpload, MultipleFileUploadMain } from '@patternfly/react-co import type { FunctionComponent } from 'react'; import { useState } from 'react'; import { ChatbotDisplayMode } from '../Chatbot'; -import { UploadIcon } from '@patternfly/react-icons'; +import { RhUiUploadIcon } from '@patternfly/react-icons'; import { Accept, DropEvent, FileError, FileRejection } from 'react-dropzone'; export interface FileDropZoneProps { @@ -59,7 +59,7 @@ const FileDropZone: FunctionComponent = ({ const renderDropZone = () => ( <> } + titleIcon={} titleText="Drag and drop your file here" infoText={infoText} isUploadButtonHidden diff --git a/packages/module/src/Message/LinkMessage/LinkMessage.tsx b/packages/module/src/Message/LinkMessage/LinkMessage.tsx index 3e89d86b2..5f72fa9bc 100644 --- a/packages/module/src/Message/LinkMessage/LinkMessage.tsx +++ b/packages/module/src/Message/LinkMessage/LinkMessage.tsx @@ -3,7 +3,7 @@ // ============================================================================ import { Button, ButtonProps } from '@patternfly/react-core'; -import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons'; +import { RhMicronsExternalLinkIcon } from '@patternfly/react-icons'; import { ExtraProps } from 'react-markdown'; import { css } from '@patternfly/react-styles'; @@ -26,7 +26,7 @@ const LinkMessage = ({ component="a" variant="link" href={href} - icon={} + icon={} iconPosition="end" isInline target={target} diff --git a/packages/module/src/Message/Message.test.tsx b/packages/module/src/Message/Message.test.tsx index b1e22895c..24d036ac9 100644 --- a/packages/module/src/Message/Message.test.tsx +++ b/packages/module/src/Message/Message.test.tsx @@ -22,7 +22,7 @@ jest.mock('@patternfly/react-icons', () => ({ PencilAltIcon: () =>
PencilAltIcon
, CheckIcon: () =>
CheckIcon
, CloseIcon: () =>
CloseIcon
, - ExternalLinkSquareAltIcon: () =>
ExternalLinkSquareAltIcon
, + RhMicronsExternalLinkIcon: () =>
RhMicronsExternalLinkIcon
, TimesIcon: () =>
TimesIcon
})); diff --git a/packages/module/src/MessageBar/MessageBar.test.tsx b/packages/module/src/MessageBar/MessageBar.test.tsx index 2e970e2b2..b4c6518be 100644 --- a/packages/module/src/MessageBar/MessageBar.test.tsx +++ b/packages/module/src/MessageBar/MessageBar.test.tsx @@ -6,7 +6,7 @@ import { MenuSearchInputProps, MenuSearchProps } from '@patternfly/react-core'; -import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon } from '@patternfly/react-icons'; +import { RhUiAttentionBellIcon, RhUiCalendarIcon, RhUiClipboardIcon, RhUiCodeIcon } from '@patternfly/react-icons'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { createRef } from 'react'; @@ -43,19 +43,19 @@ const ATTACH_MENU_ITEMS = [ , - }> + }> Alerts - }> + }> Events - }> + }> Logs - }> + }> YAML - Status - }> + }> YAML - All contents diff --git a/packages/module/src/SourcesCard/SourcesCard.scss b/packages/module/src/SourcesCard/SourcesCard.scss index c314d2149..32464cc8e 100644 --- a/packages/module/src/SourcesCard/SourcesCard.scss +++ b/packages/module/src/SourcesCard/SourcesCard.scss @@ -79,25 +79,12 @@ justify-content: space-between; flex: 1; - .pf-v6-c-button { - border-radius: var(--pf-t--global--border--radius--pill); - padding: var(--pf-t--global--spacer--sm); - width: 2.31rem; - height: 2.31rem; - display: flex; - align-items: center; - justify-content: center; - } button:disabled, button[disabled] { .pf-v6-c-icon__content { color: var(--pf-t--global--icon--color--disabled); } } - .pf-v6-c-button__text { - display: flex; - align-items: center; - } // Interactive states .pf-v6-c-button:hover, .pf-v6-c-button:focus { diff --git a/packages/module/src/SourcesCardBase/SourcesCardBase.tsx b/packages/module/src/SourcesCardBase/SourcesCardBase.tsx index 60eb22480..d64880574 100644 --- a/packages/module/src/SourcesCardBase/SourcesCardBase.tsx +++ b/packages/module/src/SourcesCardBase/SourcesCardBase.tsx @@ -23,11 +23,10 @@ import { CardTitleProps, ExpandableSection, ExpandableSectionVariant, - Icon, Truncate, TruncateProps } from '@patternfly/react-core'; -import { ExternalLinkSquareAltIcon } from '@patternfly/react-icons'; +import { RhMicronsCaretLeftIcon, RhMicronsCaretRightIcon, RhMicronsExternalLinkIcon } from '@patternfly/react-icons'; export interface SourcesCardBaseProps extends CardProps { /** Additional classes for the pagination navigation container. */ @@ -139,7 +138,7 @@ const SourcesCardBase: FunctionComponent = ({ component="a" variant={ButtonVariant.link} href={source.link} - icon={source.isExternal ? : undefined} + icon={source.isExternal ? : undefined} iconPosition="end" isInline rel={source.isExternal ? 'noreferrer' : undefined} @@ -202,7 +201,7 @@ const SourcesCardBase: FunctionComponent = ({ component="a" variant={ButtonVariant.link} href={sources[page - 1].link} - icon={sources[page - 1].isExternal ? : undefined} + icon={sources[page - 1].isExternal ? : undefined} iconPosition="end" isInline rel={sources[page - 1].isExternal ? 'noreferrer' : undefined} @@ -254,6 +253,7 @@ const SourcesCardBase: FunctionComponent = ({ >