diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss index b9424aa26..ee336860c 100644 --- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss +++ b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss @@ -9,18 +9,24 @@ // Drawer title // ---------------------------------------------------------------------------- - .pf-chatbot__title-container { + .pf-chatbot__heading-container { padding-inline-start: var(--pf-t--global--spacer--lg); padding-inline-end: var(--pf-t--global--spacer--lg); display: flex; flex-direction: column; row-gap: var(--pf-t--global--spacer--sm); } - // Drawer title icon - // ---------------------------------------------------------------------------- - .pf-chatbot__title-icon { - padding-inline-end: var(--pf-t--global--spacer--md); - padding-inline-start: var(--pf-t--global--spacer--sm); + .pf-chatbot__title { + font-size: var(--pf-v6-c-title--m-h3--FontSize); + font-weight: var(--pf-v6-c-title--m-h3--FontWeight); + line-height: var(--pf-v6-c-title--m-h3--LineHeight); + } + .pf-chatbot__title-container { + display: flex; + flex-direction: row; + align-items: baseline; + justify-content: flex-start; + gap: var(--pf-t--global--spacer--gap--text-to-element--default); } // Drawer menu // ---------------------------------------------------------------------------- diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx index acbdafac1..693f26301 100644 --- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx +++ b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.test.tsx @@ -4,7 +4,7 @@ import { fireEvent, render, screen, waitFor } from '@testing-library/react'; import { ChatbotDisplayMode } from '../Chatbot/Chatbot'; import ChatbotConversationHistoryNav, { Conversation } from './ChatbotConversationHistoryNav'; import { EmptyStateStatus, Spinner } from '@patternfly/react-core'; -import { OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons'; +import { BellIcon, OutlinedCommentsIcon, SearchIcon } from '@patternfly/react-icons'; import { ComponentType } from 'react'; const ERROR = { @@ -492,7 +492,7 @@ describe('ChatbotConversationHistoryNav', () => { expect(iconElement).toBeInTheDocument(); }); - it('Passes titleProps to Title', () => { + it('Passes listTitleProps to Title', () => { render( { displayMode={ChatbotDisplayMode.fullscreen} setIsDrawerOpen={jest.fn()} conversations={{ Today: initialConversations }} - titleProps={{ className: 'test' }} + listTitleProps={{ className: 'test' }} /> ); expect(screen.getByRole('heading', { name: /Today/i })).toHaveClass('test'); }); - it('Overrides Title heading level when titleProps.headingLevel is passed', () => { + it('Overrides list title heading level when titleProps.headingLevel is passed', () => { render( { displayMode={ChatbotDisplayMode.fullscreen} setIsDrawerOpen={jest.fn()} conversations={{ Today: initialConversations }} - titleProps={{ headingLevel: 'h2' }} + listTitleProps={{ headingLevel: 'h2' }} /> ); expect(screen.queryByRole('heading', { name: /Today/i, level: 4 })).not.toBeInTheDocument(); @@ -577,4 +577,33 @@ describe('ChatbotConversationHistoryNav', () => { expect(screen.getByRole('dialog', { name: /Chat history I am a sample search/i })).toBeInTheDocument(); }); + + it('overrides nav title heading level when navTitleProps.headingLevel is passed', () => { + render( + + ); + expect(screen.queryByRole('heading', { name: /Chat history/i, level: 2 })).not.toBeInTheDocument(); + expect(screen.getByRole('heading', { name: /Chat history/i, level: 1 })).toBeInTheDocument(); + }); + + it('overrides nav title icon when navTitleIcon is passed in', () => { + render( + } + /> + ); + expect(screen.getByTestId('bell')).toBeInTheDocument(); + }); }); diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx index 237e7fdaf..8b892ea9e 100644 --- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +++ b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx @@ -82,7 +82,7 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps { /** Additional button props for new chat button. */ newChatButtonProps?: ButtonProps; /** Additional props applied to all conversation list headers */ - titleProps?: Partial; + listTitleProps?: Partial; /** Additional props applied to conversation list. If conversations is an object, you should pass an object of ListProps for each group. */ listProps?: ListProps | { [key: string]: ListProps }; /** Text shown in blue button */ @@ -135,6 +135,10 @@ export interface ChatbotConversationHistoryNavProps extends DrawerProps { isCompact?: boolean; /** Display title */ title?: string; + /** Icon displayed in title */ + navTitleIcon?: React.ReactNode; + /** Title header level */ + navTitleProps?: Partial; } export const ChatbotConversationHistoryNav: FunctionComponent = ({ @@ -144,7 +148,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent, ...props }: ChatbotConversationHistoryNavProps) => { const drawerRef = useRef(null); @@ -222,7 +228,7 @@ export const ChatbotConversationHistoryNav: FunctionComponent {Object.keys(conversations).map((navGroup) => (
- + <Title headingLevel="h4" className="pf-chatbot__conversation-list-header" {...listTitleProps}> {navGroup} @@ -283,13 +289,15 @@ export const ChatbotConversationHistoryNav: FunctionComponent -
- + <div className="pf-chatbot__heading-container"> + <div className="pf-chatbot__title-container"> <Icon size="lg" className="pf-chatbot__title-icon"> - <OutlinedClockIcon /> + {navTitleIcon} </Icon> - {title} - + + {title} + +
{!isLoading && handleTextInputChange && (