Skip to content

Commit 295f2da

Browse files
rebeccaalpertrebeccaalpert
authored
Merge branch 'main' into table
2 parents 23cb6bd + ba585b9 commit 295f2da

14 files changed

Lines changed: 101 additions & 73 deletions

File tree

‎packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarAttach.tsx‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,11 @@ import { useState, isValidElement, cloneElement, Children, FunctionComponent, Re
22
import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
33
import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
44
import { Divider, DropdownGroup, DropdownItem, DropdownList } from '@patternfly/react-core';
5-
import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
5+
import RhUiAttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-attention-bell-icon';
6+
import RhUiCalendarIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-icon';
7+
import RhUiClipboardIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clipboard-icon';
8+
import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
9+
import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
610
import { useDropzone } from 'react-dropzone';
711

812
export const ChatbotMessageBarDefaultAttachExample: FunctionComponent = () => {
@@ -95,19 +99,19 @@ export const ChatbotMessageBarDefaultAttachExample: FunctionComponent = () => {
9599
</DropdownList>,
96100
<DropdownGroup key="message-bar-attach-dropdown-group">
97101
<DropdownList>
98-
<DropdownItem value="Alerts" id="1" icon={<BellIcon />}>
102+
<DropdownItem value="Alerts" id="1" icon={<RhUiAttentionBellIcon />}>
99103
Alerts
100104
</DropdownItem>
101-
<DropdownItem value="Events" id="2" icon={<CalendarAltIcon />}>
105+
<DropdownItem value="Events" id="2" icon={<RhUiCalendarIcon />}>
102106
Events
103107
</DropdownItem>
104-
<DropdownItem value="Logs" id="3" icon={<ClipboardIcon />}>
108+
<DropdownItem value="Logs" id="3" icon={<RhUiClipboardIcon />}>
105109
Logs
106110
</DropdownItem>
107-
<DropdownItem value="YAML - Status" id="4" icon={<CodeIcon />}>
111+
<DropdownItem value="YAML - Status" id="4" icon={<RhUiCodeIcon />}>
108112
YAML - Status
109113
</DropdownItem>
110-
<DropdownItem value="YAML - All contents" id="5" icon={<CodeIcon />}>
114+
<DropdownItem value="YAML - All contents" id="5" icon={<RhUiCodeIcon />}>
111115
YAML - All contents
112116
</DropdownItem>
113117
</DropdownList>
@@ -117,7 +121,7 @@ export const ChatbotMessageBarDefaultAttachExample: FunctionComponent = () => {
117121
const uploadMenuItems = [
118122
<Divider key="divider" />,
119123
<DropdownList key="list-2">
120-
<DropdownItem key="upload" value="upload" id="upload" icon={<UploadIcon />} onClick={open}>
124+
<DropdownItem key="upload" value="upload" id="upload" icon={<RhUiUploadIcon />} onClick={open}>
121125
Upload from computer
122126
</DropdownItem>
123127
</DropdownList>

‎packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotMessageBarCustomActions.tsx‎

Lines changed: 46 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ import {
1010
SelectList,
1111
SelectOption
1212
} from '@patternfly/react-core';
13-
import { PlusIcon, ClipboardIcon, CodeIcon, UploadIcon } from '@patternfly/react-icons';
13+
import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
14+
import RhUiClipboardIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clipboard-icon';
15+
import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
16+
import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
1417
import { useDropzone } from 'react-dropzone';
1518

1619
export const ChatbotMessageBarCustomActionsExample: FunctionComponent = () => {
@@ -45,43 +48,51 @@ export const ChatbotMessageBarCustomActionsExample: FunctionComponent = () => {
4548
};
4649

4750
const firstMenuItems: ReactNode = (
48-
<DropdownList>
49-
<DropdownItem value="Logs" id="logs" icon={<ClipboardIcon />}>
50-
Logs
51-
</DropdownItem>
52-
<DropdownItem value="YAML - Status" id="yaml-status" icon={<CodeIcon />}>
53-
YAML - Status
54-
</DropdownItem>
55-
<DropdownItem value="YAML - All contents" id="yaml-all" icon={<CodeIcon />}>
56-
YAML - All contents
57-
</DropdownItem>
51+
<>
52+
<DropdownList>
53+
<DropdownItem value="Logs" id="logs" icon={<RhUiClipboardIcon />}>
54+
Logs
55+
</DropdownItem>
56+
<DropdownItem value="YAML - Status" id="yaml-status" icon={<RhUiCodeIcon />}>
57+
YAML - Status
58+
</DropdownItem>
59+
<DropdownItem value="YAML - All contents" id="yaml-all" icon={<RhUiCodeIcon />}>
60+
YAML - All contents
61+
</DropdownItem>
62+
</DropdownList>
5863
<Divider key="divider" />
59-
<DropdownItem value="Upload from computer" id="upload" icon={<UploadIcon />} onClick={open}>
60-
Upload from computer
61-
</DropdownItem>
62-
</DropdownList>
64+
<DropdownList>
65+
<DropdownItem value="Upload from computer" id="upload" icon={<RhUiUploadIcon />} onClick={open}>
66+
Upload from computer
67+
</DropdownItem>
68+
</DropdownList>
69+
</>
6370
);
6471

6572
const secondMenuItems: ReactNode = (
66-
<DropdownList>
67-
<DropdownItem value="canvas" id="canvas">
68-
{showCanvasLabel ? 'Disable' : 'Enable'} Canvas
69-
</DropdownItem>
70-
<Divider key="divider-1" />
71-
<DropdownItem value="Logs" id="logs" icon={<ClipboardIcon />}>
72-
Logs
73-
</DropdownItem>
74-
<DropdownItem value="YAML - Status" id="yaml-status" icon={<CodeIcon />}>
75-
YAML - Status
76-
</DropdownItem>
77-
<DropdownItem value="YAML - All contents" id="yaml-all" icon={<CodeIcon />}>
78-
YAML - All contents
79-
</DropdownItem>
73+
<>
74+
<DropdownList>
75+
<DropdownItem value="canvas" id="canvas">
76+
{showCanvasLabel ? 'Disable' : 'Enable'} Canvas
77+
</DropdownItem>
78+
<Divider key="divider-1" />
79+
<DropdownItem value="Logs" id="logs" icon={<RhUiClipboardIcon />}>
80+
Logs
81+
</DropdownItem>
82+
<DropdownItem value="YAML - Status" id="yaml-status" icon={<RhUiCodeIcon />}>
83+
YAML - Status
84+
</DropdownItem>
85+
<DropdownItem value="YAML - All contents" id="yaml-all" icon={<RhUiCodeIcon />}>
86+
YAML - All contents
87+
</DropdownItem>
88+
</DropdownList>
8089
<Divider key="divider-2" />
81-
<DropdownItem value="Upload from computer" id="upload" icon={<UploadIcon />} onClick={open}>
82-
Upload from computer
83-
</DropdownItem>
84-
</DropdownList>
90+
<DropdownList>
91+
<DropdownItem value="Upload from computer" id="upload" icon={<RhUiUploadIcon />} onClick={open}>
92+
Upload from computer
93+
</DropdownItem>
94+
</DropdownList>
95+
</>
8596
);
8697

8798
const modelOptions = ['GPT-4', 'GPT-3.5', 'Claude', 'Llama 2'];
@@ -110,7 +121,7 @@ export const ChatbotMessageBarCustomActionsExample: FunctionComponent = () => {
110121
}}
111122
buttonProps={{
112123
attach: {
113-
icon: <PlusIcon />,
124+
icon: <RhUiAddIcon />,
114125
tooltipContent: 'Message actions',
115126
'aria-label': 'Message actions'
116127
}
@@ -140,7 +151,7 @@ export const ChatbotMessageBarCustomActionsExample: FunctionComponent = () => {
140151
}}
141152
buttonProps={{
142153
attach: {
143-
icon: <PlusIcon />,
154+
icon: <RhUiAddIcon />,
144155
tooltipContent: 'Message actions',
145156
'aria-label': 'Message actions'
146157
}

‎packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,13 @@ import { MessageBar } from '@patternfly/chatbot/dist/dynamic/MessageBar';
7070
import SourceDetailsMenuItem from '@patternfly/chatbot/dist/dynamic/SourceDetailsMenuItem';
7171
import { ChatbotModal } from '@patternfly/chatbot/dist/dynamic/ChatbotModal';
7272
import SettingsForm from '@patternfly/chatbot/dist/dynamic/Settings';
73-
import { BellIcon, CalendarAltIcon, ClipboardIcon, CodeIcon, PlusIcon, ThumbtackIcon, UploadIcon } from '@patternfly/react-icons';
73+
import RhUiAttentionBellIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-attention-bell-icon';
74+
import RhUiCalendarIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-icon';
75+
import RhUiClipboardIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clipboard-icon';
76+
import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
77+
import RhUiAddIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-icon';
78+
import { ThumbtackIcon } from '@patternfly/react-icons';
79+
import RhUiUploadIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-upload-icon';
7480
import { useDropzone } from 'react-dropzone';
7581

7682
import ChatbotConversationHistoryNav from '@patternfly/chatbot/dist/dynamic/ChatbotConversationHistoryNav';

‎packages/module/patternfly-docs/content/extensions/chatbot/examples/demos/EmbeddedComparisonChatbot.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ import ChatbotFooter from '@patternfly/chatbot/dist/dynamic/ChatbotFooter';
1818
import MessageBar from '@patternfly/chatbot/dist/dynamic/MessageBar';
1919
import MessageBox from '@patternfly/chatbot/dist/dynamic/MessageBox';
2020
import Message, { MessageProps } from '@patternfly/chatbot/dist/dynamic/Message';
21-
import ChatbotHeader, { ChatbotHeaderMain } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
21+
import ChatbotHeader, { ChatbotHeaderMain, ChatbotHeaderTitle } from '@patternfly/chatbot/dist/dynamic/ChatbotHeader';
2222
import Compare from '@patternfly/chatbot/dist/dynamic/Compare';
2323
import { BarsIcon } from '@patternfly/react-icons';
2424
import userAvatar from '../Messages/user_avatar.svg';
@@ -115,7 +115,9 @@ export const CompareChild = ({ name, input, hasNewInput, setIsSendButtonDisabled
115115
return (
116116
<Chatbot displayMode={displayMode}>
117117
<ChatbotHeader>
118-
<ChatbotHeaderMain>{name}</ChatbotHeaderMain>
118+
<ChatbotHeaderMain>
119+
<ChatbotHeaderTitle>{name}</ChatbotHeaderTitle>
120+
</ChatbotHeaderMain>
119121
</ChatbotHeader>
120122
<ChatbotContent>
121123
<MessageBox ariaLabel={`Scrollable message log for ${name}`} announcement={announcement}>

‎packages/module/src/AttachMenu/AttachMenu.scss‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
.pf-chatbot__menu.pf-v6-c-menu {
2-
--pf-v6-c-menu--BorderRadius: var(--pf-t--global--border--radius--large);
32
--pf-v6-c-menu__list-item--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
43
}
54

@@ -31,10 +30,6 @@
3130
--pf-v6-c-menu__item-main--ColumnGap: var(--pf-t--global--spacer--md);
3231
}
3332

34-
.pf-v6-c-menu__list {
35-
padding: 0rem var(--pf-t--global--spacer--md) 0rem var(--pf-t--global--spacer--md);
36-
}
37-
3833
/* handles hover state, which uses a background */
3934
.pf-v6-c-menu__list-item {
4035
border-radius: var(--pf-t--global--border--radius--small);
@@ -55,8 +50,4 @@
5550
.pf-v6-c-menu__item-description {
5651
font-weight: var(--pf-t--global--font--weight--body--bold);
5752
}
58-
59-
.pf-v6-c-divider {
60-
padding: 0 var(--pf-t--global--spacer--md) 0 var(--pf-t--global--spacer--md);
61-
}
6253
}

‎packages/module/src/Chatbot/Chatbot.scss‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@
1212
background-color: var(--pf-t--global--background--color--floating--secondary--default);
1313
border-radius: var(--pf-t--global--border--radius--medium);
1414
box-shadow: var(--pf-t--global--box-shadow--lg);
15-
font-size: var(--pf-t--global--font--size--md);
1615
z-index: var(--pf-t--global--z-index--md);
1716
-webkit-font-smoothing: antialiased;
1817
-moz-osx-font-smoothing: grayscale;
@@ -178,9 +177,3 @@
178177
}
179178
}
180179

181-
// ============================================================================
182-
// Information density styles
183-
// ============================================================================
184-
.pf-chatbot.pf-m-compact {
185-
font-size: var(--pf-t--global--font--size--sm);
186-
}

‎packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@
4848

4949
// Drawer menu
5050
// ----------------------------------------------------------------------------
51-
.pf-v6-c-menu {
51+
.pf-v6-c-menu.pf-chatbot__history-menu {
5252
--pf-v6-c-menu--PaddingBlockStart: 0;
5353
--pf-v6-c-menu--BackgroundColor: var(--pf-t--global--background--color--floating--default);
5454
// override high contrast style

‎packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -290,7 +290,13 @@ export const ChatbotConversationHistoryNav: FunctionComponent<ChatbotConversatio
290290
return <HistoryEmptyState {...noResultsState} />;
291291
}
292292
return (
293-
<Menu isPlain onSelect={onSelectActiveItem} activeItemId={activeItemId} {...menuProps}>
293+
<Menu
294+
className="pf-chatbot__history-menu"
295+
isPlain
296+
onSelect={onSelectActiveItem}
297+
activeItemId={activeItemId}
298+
{...menuProps}
299+
>
294300
<MenuContent {...menuContentProps}>{buildConversations()}</MenuContent>
295301
</Menu>
296302
);

‎packages/module/src/ChatbotHeader/ChatbotHeader.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@
2424

2525
// Title -or- Brand
2626
.pf-chatbot__title {
27+
font-size: var(--pf-t--global--font--size--body--lg);
2728
display: flex;
2829
align-items: center;
2930
flex: 1;

‎packages/module/src/ChatbotToggle/ChatbotToggle.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
}
3333

3434
&--secondary {
35-
--pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
35+
--pf-v6-c-button--m-plain--BackgroundColor: var(--pf-t--global--background--color--floating--secondary--default);
3636
--pf-v6-c-button--m-plain--hover--BackgroundColor: var(--pf-t--global--background--color--secondary--hover);
3737
--pf-v6-c-button--m-plain--m-clicked--BackgroundColor: var(--pf-t--global--background--color--secondary--clicked);
3838

0 commit comments

Comments
 (0)