Skip to content

fix(icons): Replace in history, header, settings menus #872

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rebeccaalpert wants to merge 2 commits into
base: main
Choose a base branch
from
Open

fix(icons): Replace in history, header, settings menus #872

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ba94db3
fix(icons): Replace in history, header, settings menus
rebeccaalpert Jul 15, 2026
3623f4e
swap close icon
rebeccaalpert Jul 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 4 additions & 6 deletions ...ages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderBasic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,7 @@ import {
ChatbotHeaderNewChatButton
} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
import { ChatbotDisplayMode } from '@patternfly/chatbot/dist/dynamic/Chatbot';
import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
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 { RhUiExpandIcon, RhUiOpenDrawerRightIcon, RhUiRestoreWindowIcon } from '@patternfly/react-icons';

import PFHorizontalLogoColor from './PF-HorizontalLogo-Color.svg';
import PFHorizontalLogoReverse from './PF-HorizontalLogo-Reverse.svg';
Expand Down Expand Up @@ -170,21 +168,21 @@ export const BasicDemo: FunctionComponent = () => {
<DropdownItem
value={ChatbotDisplayMode.default}
key="switchDisplayOverlay"
icon={<OutlinedWindowRestoreIcon aria-hidden />}
icon={<RhUiRestoreWindowIcon aria-hidden />}
>
<span>Overlay</span>
</DropdownItem>
<DropdownItem
value={ChatbotDisplayMode.docked}
key="switchDisplayDock"
icon={<OpenDrawerRightIcon aria-hidden />}
icon={<RhUiOpenDrawerRightIcon aria-hidden />}
>
<span>Dock to window</span>
</DropdownItem>
<DropdownItem
value={ChatbotDisplayMode.fullscreen}
key="switchDisplayFullscreen"
icon={<ExpandIcon aria-hidden />}
icon={<RhUiExpandIcon aria-hidden />}
>
<span>Fullscreen</span>
</DropdownItem>
Expand Down
6 changes: 3 additions & 3 deletions ...ges/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import ChatbotConversationHistoryNav, {
Conversation
} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
import { Checkbox, EmptyStateStatus, Spinner } from '@patternfly/react-core';
import { OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons';
import { RhUiCommentsIcon, RhUiSearchIcon } from '@patternfly/react-icons';

const initialConversations: { [key: string]: Conversation[] } = {
Today: [{ id: '1', text: 'Red Hat products and services' }],
Expand Down Expand Up @@ -50,13 +50,13 @@ const ERROR = {
const NO_RESULTS = {
bodyText: 'Adjust your search query and try again. Check your spelling or try a more general term.',
titleText: 'No results found',
icon: SearchIcon
icon: RhUiSearchIcon
};

const EMPTY_STATE = {
bodyText: 'Access timely assistance by starting a conversation with an AI model.',
titleText: 'Start a new chat',
icon: OutlinedCommentsIcon
icon: RhUiCommentsIcon
};

export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
Expand Down
4 changes: 2 additions & 2 deletions ...e/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerResizable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import ChatbotConversationHistoryNav, {
Conversation
} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
import { Checkbox } from '@patternfly/react-core';
import { SearchIcon } from '@patternfly/react-icons';
import { RhUiSearchIcon } from '@patternfly/react-icons';

const initialConversations: { [key: string]: Conversation[] } = {
Today: [{ id: '1', text: 'Red Hat products and services' }],
Expand Down Expand Up @@ -35,7 +35,7 @@ const initialConversations: { [key: string]: Conversation[] } = {
const NO_RESULTS = {
bodyText: 'Adjust your search query and try again. Check your spelling or try a more general term.',
titleText: 'No results found',
icon: SearchIcon
icon: RhUiSearchIcon
};

export const ChatbotHeaderDrawerResizableDemo: FunctionComponent = () => {
Expand Down
4 changes: 2 additions & 2 deletions ...ule/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithPin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import ChatbotConversationHistoryNav, {
Conversation
} from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
import { Checkbox, DropdownItem, DropdownList } from '@patternfly/react-core';
import { ThumbtackIcon } from '@patternfly/react-icons';
import { RhUiThumbtackFillIcon } from '@patternfly/react-icons';

// Sample conversations
const initialConversations: { [key: string]: Conversation[] } = {
Expand Down Expand Up @@ -144,7 +144,7 @@ export const ChatbotHeaderPinDemo: FunctionComponent = () => {
pinnedItems.push({
...conv,
menuItems: createMenuItems(conv.id),
icon: <ThumbtackIcon />,
icon: <RhUiThumbtackFillIcon />,
dropdownId: `pin-demo-${conv.id}-dropdown`
});
}
Expand Down
6 changes: 3 additions & 3 deletions ...nfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSearchActions.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@ import {
SelectOption,
Tooltip
} from '@patternfly/react-core';
import { FilterIcon, SortAmountDownIcon } from '@patternfly/react-icons';
import { RhUiFilterFillIcon, RhMicronsSortDownLargeToSmallIcon } from '@patternfly/react-icons';

const initialConversations: { [key: string]: Conversation[] } = {
Today: [{ id: '1', text: 'Red Hat products and services' }],
Expand Down Expand Up @@ -148,7 +148,7 @@ export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
aria-label="Filter options"
// eslint-disable-next-line no-console
onClick={() => console.log('Filter button clicked')}
icon={<FilterIcon />}
icon={<RhUiFilterFillIcon />}
/>
</Tooltip>
) : undefined
Expand All @@ -171,7 +171,7 @@ export const ChatbotHeaderTitleDemo: FunctionComponent = () => {
variant="plain"
aria-label={`${sortLabels[selectedSort]}, Sort conversations`}
icon={
<SortAmountDownIcon
<RhMicronsSortDownLargeToSmallIcon
style={{
transform:
selectedSort === 'oldest' || selectedSort === 'alphabetical-asc' ? 'scaleY(-1)' : 'none'
Expand Down
15 changes: 10 additions & 5 deletions packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/CompactSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,12 @@ import ChatbotHeader, {
ChatbotHeaderOptionsDropdown,
ChatbotHeaderTitle
} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
import { CogIcon, ExpandIcon, OpenDrawerRightIcon, OutlinedWindowRestoreIcon } from '@patternfly/react-icons';
import {
RhUiExpandIcon,
RhUiOpenDrawerRightIcon,
RhUiRestoreWindowIcon,
RhUiSettingsFillIcon
} from '@patternfly/react-icons';

export const CompactSettingsDemo: FunctionComponent = () => {
const [isChecked, setIsChecked] = useState<boolean>(true);
Expand Down Expand Up @@ -222,23 +227,23 @@ export const CompactSettingsDemo: FunctionComponent = () => {
<DropdownItem
value={ChatbotDisplayMode.default}
key="switchDisplayOverlay"
icon={<OutlinedWindowRestoreIcon aria-hidden />}
icon={<RhUiRestoreWindowIcon aria-hidden />}
isSelected={displayMode === ChatbotDisplayMode.default}
>
<span>Overlay</span>
</DropdownItem>
<DropdownItem
value={ChatbotDisplayMode.docked}
key="switchDisplayDock"
icon={<OpenDrawerRightIcon aria-hidden />}
icon={<RhUiOpenDrawerRightIcon aria-hidden />}
isSelected={displayMode === ChatbotDisplayMode.docked}
>
<span>Dock to window</span>
</DropdownItem>
<DropdownItem
value={ChatbotDisplayMode.fullscreen}
key="switchDisplayFullscreen"
icon={<ExpandIcon aria-hidden />}
icon={<RhUiExpandIcon aria-hidden />}
isSelected={displayMode === ChatbotDisplayMode.fullscreen}
>
<span>Fullscreen</span>
Expand All @@ -247,7 +252,7 @@ export const CompactSettingsDemo: FunctionComponent = () => {
</DropdownGroup>
<Divider />
<DropdownList>
<DropdownItem value="Settings" key="switchSettings" icon={<CogIcon aria-hidden />}>
<DropdownItem value="Settings" key="switchSettings" icon={<RhUiSettingsFillIcon aria-hidden />}>
<span>Settings</span>
</DropdownItem>
</DropdownList>
Expand Down
15 changes: 10 additions & 5 deletions packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/Settings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,12 @@ import ChatbotHeader, {
ChatbotHeaderOptionsDropdown,
ChatbotHeaderTitle
} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
import { CogIcon, ExpandIcon, OpenDrawerRightIcon, OutlinedWindowRestoreIcon } from '@patternfly/react-icons';
import {
RhUiExpandIcon,
RhUiOpenDrawerRightIcon,
RhUiRestoreWindowIcon,
RhUiSettingsFillIcon
} from '@patternfly/react-icons';

export const SettingsDemo: FunctionComponent = () => {
const [isChecked, setIsChecked] = useState<boolean>(true);
Expand Down Expand Up @@ -222,23 +227,23 @@ export const SettingsDemo: FunctionComponent = () => {
<DropdownItem
value={ChatbotDisplayMode.default}
key="switchDisplayOverlay"
icon={<OutlinedWindowRestoreIcon aria-hidden />}
icon={<RhUiRestoreWindowIcon aria-hidden />}
isSelected={displayMode === ChatbotDisplayMode.default}
>
<span>Overlay</span>
</DropdownItem>
<DropdownItem
value={ChatbotDisplayMode.docked}
key="switchDisplayDock"
icon={<OpenDrawerRightIcon aria-hidden />}
icon={<RhUiOpenDrawerRightIcon aria-hidden />}
isSelected={displayMode === ChatbotDisplayMode.docked}
>
<span>Dock to window</span>
</DropdownItem>
<DropdownItem
value={ChatbotDisplayMode.fullscreen}
key="switchDisplayFullscreen"
icon={<ExpandIcon aria-hidden />}
icon={<RhUiExpandIcon aria-hidden />}
isSelected={displayMode === ChatbotDisplayMode.fullscreen}
>
<span>Fullscreen</span>
Expand All @@ -247,7 +252,7 @@ export const SettingsDemo: FunctionComponent = () => {
</DropdownGroup>
<Divider />
<DropdownList>
<DropdownItem value="Settings" key="switchSettings" icon={<CogIcon aria-hidden />}>
<DropdownItem value="Settings" key="switchSettings" icon={<RhUiSettingsFillIcon aria-hidden />}>
<span>Settings</span>
</DropdownItem>
</DropdownList>
Expand Down
16 changes: 1 addition & 15 deletions packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -70,30 +70,16 @@ import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
import { ChatbotModal } from '@patternfly/chatbot/dist/dynamic/ChatbotModal';
import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings';
import RhUiAttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-attention-bell-icon';
import RhUiCalendarIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-icon';
import RhUiClipboardIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clipboard-icon';
import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
import { ThumbtackIcon } from '@patternfly/react-icons';
import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
import { useDropzone } from 'react-dropzone';

import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';
import { Button, Label, DropdownItem, DropdownList, Checkbox, MenuToggle, Select, SelectList, SelectOption } from '@patternfly/react-core';

import OutlinedWindowRestoreIcon from '@patternfly/react-icons/dist/esm/icons/outlined-window-restore-icon';
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 CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
import PenToSquareIcon from '@patternfly/react-icons/dist/esm/icons/pen-to-square-icon';
import PFHorizontalLogoColor from './PF-HorizontalLogo-Color.svg';
import PFHorizontalLogoReverse from './PF-HorizontalLogo-Reverse.svg';
import userAvatar from '../Messages/user_avatar.svg';
import patternflyAvatar from '../Messages/patternfly_avatar.jpg';
import termsAndConditionsHeader from './PF-TermsAndConditionsHeader.svg';
import onboardingHeader from './RH-Hat-Image.svg';
import { CloseIcon, SearchIcon, OutlinedCommentsIcon, FilterIcon, SortAmountDownIcon } from '@patternfly/react-icons';
import { RhMicronsSortDownLargeToSmallIcon, RhUiAddIcon, RhUiAttentionBellIcon, RhUiCalendarIcon, RhUiClipboardIcon, RhUiCodeIcon, RhUiCommentsIcon, RhUiEditFillIcon, RhUiExpandIcon, RhUiFilterFillIcon, RhUiOpenDrawerRightIcon, RhUiRestoreWindowIcon, RhUiSearchIcon, RhUiSettingsFillIcon, RhUiThumbtackFillIcon, RhUiUploadIcon } from '@patternfly/react-icons';
import { FunctionComponent, FormEvent, useState, useRef, MouseEvent, isValidElement, cloneElement, Children, ReactNode, Ref, MouseEvent as ReactMouseEvent, CSSProperties, useEffect} from 'react';
import FilePreview from '@patternfly/chatbot/dist/dynamic/FilePreview';

Expand Down
4 changes: 1 addition & 3 deletions ...le/patternfly-docs/content/extensions/chatbot/examples/demos/AttachmentDemos.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,7 @@ ChatbotHeaderSelectorDropdown,
ChatbotHeaderOptionsDropdown
} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
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 { RhUiExpandIcon, RhUiOpenDrawerRightIcon, RhUiRestoreWindowIcon } from '@patternfly/react-icons';
import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
import PFIconLogoReverse from '../UI/PF-IconLogo-Reverse.svg';
import userAvatar from '../Messages/user_avatar.svg';
Expand Down
4 changes: 1 addition & 3 deletions ...ges/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,9 +48,7 @@ ChatbotHeaderOptionsDropdown,
ChatbotHeaderCloseButton,
} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';

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 { RhUiExpandIcon, RhUiOpenDrawerRightIcon, RhUiRestoreWindowIcon } from '@patternfly/react-icons';
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';
Expand Down
11 changes: 4 additions & 7 deletions packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/Chatbot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,10 +21,7 @@ import ChatbotHeader, {
ChatbotHeaderOptionsDropdown
} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';

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 { RhUiExpandIcon, RhUiOpenDrawerRightIcon, RhUiRestoreWindowIcon } from '@patternfly/react-icons';
import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
Expand Down Expand Up @@ -393,23 +390,23 @@ export const ChatbotDemo: FunctionComponent = () => {
<DropdownItem
value={ChatbotDisplayMode.default}
key="switchDisplayOverlay"
icon={<OutlinedWindowRestoreIcon aria-hidden />}
icon={<RhUiRestoreWindowIcon aria-hidden />}
isSelected={displayMode === ChatbotDisplayMode.default}
>
<span>Overlay</span>
</DropdownItem>
<DropdownItem
value={ChatbotDisplayMode.docked}
key="switchDisplayDock"
icon={<OpenDrawerRightIcon aria-hidden />}
icon={<RhUiOpenDrawerRightIcon aria-hidden />}
isSelected={displayMode === ChatbotDisplayMode.docked}
>
<span>Dock to window</span>
</DropdownItem>
<DropdownItem
value={ChatbotDisplayMode.fullscreen}
key="switchDisplayFullscreen"
icon={<ExpandIcon aria-hidden />}
icon={<RhUiExpandIcon aria-hidden />}
isSelected={displayMode === ChatbotDisplayMode.fullscreen}
>
<span>Fullscreen</span>
Expand Down
10 changes: 4 additions & 6 deletions ...es/module/patternfly-docs/content/extensions/chatbot/examples/demos/ChatbotAttachment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,9 +20,7 @@ import ChatbotHeader, {
ChatbotHeaderMain
} from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
import ChatbotAlert from '@patternfly/chatbot/dist/dynamic/ChatbotAlert';
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 { RhUiExpandIcon, RhUiOpenDrawerRightIcon, RhUiRestoreWindowIcon } from '@patternfly/react-icons';
import PFHorizontalLogoColor from '../UI/PF-HorizontalLogo-Color.svg';
import PFHorizontalLogoReverse from '../UI/PF-HorizontalLogo-Reverse.svg';
import PFIconLogoColor from '../UI/PF-IconLogo-Color.svg';
Expand Down Expand Up @@ -197,23 +195,23 @@ export const BasicDemo: FunctionComponent = () => {
<DropdownItem
value={ChatbotDisplayMode.default}
key="switchDisplayOverlay"
icon={<OutlinedWindowRestoreIcon aria-hidden />}
icon={<RhUiRestoreWindowIcon aria-hidden />}
isSelected={displayMode === ChatbotDisplayMode.default}
>
<span>Overlay</span>
</DropdownItem>
<DropdownItem
value={ChatbotDisplayMode.docked}
key="switchDisplayDock"
icon={<OpenDrawerRightIcon aria-hidden />}
icon={<RhUiOpenDrawerRightIcon aria-hidden />}
isSelected={displayMode === ChatbotDisplayMode.docked}
>
<span>Dock to window</span>
</DropdownItem>
<DropdownItem
value={ChatbotDisplayMode.fullscreen}
key="switchDisplayFullscreen"
icon={<ExpandIcon aria-hidden />}
icon={<RhUiExpandIcon aria-hidden />}
isSelected={displayMode === ChatbotDisplayMode.fullscreen}
>
<span>Fullscreen</span>
Expand Down
Loading
Loading