diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx index b2156432..e9af5a23 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx @@ -22,38 +22,38 @@ const menuItems = [ ]; -const conversations: { [key: string]: Conversation[] } = { - Today: [{ id: '1', text: 'Red Hat products and services', menuItems }], - 'This month': [ - { - id: '2', - text: 'Enterprise Linux installation and setup', - menuItems, - isActive: true - }, - { id: '3', text: 'Troubleshoot system crash', menuItems } - ], - March: [ - { id: '4', text: 'Ansible security and updates', menuItems }, - { id: '5', text: 'Red Hat certification', menuItems }, - { id: '6', text: 'Lightspeed user documentation', menuItems } - ], - February: [ - { id: '7', text: 'Crashing pod assistance', menuItems }, - { id: '8', text: 'OpenShift AI pipelines', menuItems }, - { id: '9', text: 'Updating subscription plan', menuItems }, - { id: '10', text: 'Red Hat licensing options', menuItems } - ], - January: [ - { id: '11', text: 'RHEL system performance', menuItems }, - { id: '12', text: 'Manage user accounts', menuItems } - ] -}; - export const ChatbotHeaderDrawerWithSelection: React.FunctionComponent = () => { const [isDrawerOpen, setIsDrawerOpen] = React.useState(true); + const [currentSelection, setCurrentSelection] = React.useState('2'); const displayMode = ChatbotDisplayMode.embedded; + const conversations: { [key: string]: Conversation[] } = { + Today: [{ id: '1', text: 'Red Hat products and services', menuItems }], + 'This month': [ + { + id: '2', + text: 'Enterprise Linux installation and setup', + menuItems + }, + { id: '3', text: 'Troubleshoot system crash', menuItems } + ], + March: [ + { id: '4', text: 'Ansible security and updates', menuItems }, + { id: '5', text: 'Red Hat certification', menuItems }, + { id: '6', text: 'Lightspeed user documentation', menuItems } + ], + February: [ + { id: '7', text: 'Crashing pod assistance', menuItems }, + { id: '8', text: 'OpenShift AI pipelines', menuItems }, + { id: '9', text: 'Updating subscription plan', menuItems }, + { id: '10', text: 'Red Hat licensing options', menuItems } + ], + January: [ + { id: '11', text: 'RHEL system performance', menuItems }, + { id: '12', text: 'Manage user accounts', menuItems } + ] + }; + return ( <> { setIsDrawerOpen={setIsDrawerOpen} conversations={conversations} drawerContent={
Drawer content
} + activeItemId={currentSelection} + onSelectActiveItem={(_e, id) => setCurrentSelection(id as string)} /> ); diff --git a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md index 6ef33126..18cd3b2e 100644 --- a/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md +++ b/packages/module/patternfly-docs/content/extensions/chatbot/examples/UI/UI.md @@ -347,7 +347,7 @@ Actions can be added to conversations with `menuItems`. Optionally, you can also ### Drawer with active conversation -If you're showing a conversation that is already active, you can set the `isActive` prop on your `Conversation` to true for a visual state change. +If you're showing a conversation that is already active, you can set the `activeItemId` prop on your `ChatbotConversationHistoryNav` to apply an active visual state. ```js file="./ChatbotHeaderDrawerWithSelection.tsx" diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss index 85ff1388..5e45ec92 100644 --- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss +++ b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.scss @@ -44,6 +44,11 @@ color: var(--pf-t--global--text--color--regular); font-size: var(--pf-t--global--font--size--body--lg); font-weight: var(--pf-t--global--font--weight--body--default); + border-radius: var(--pf-t--global--border--radius--small); + } + // allows focus state to have border radius + .pf-v6-c-menu__list-item.pf-chatbot__menu-item { + overflow: hidden; } .pf-chatbot__history-actions { transform: rotate(90deg); @@ -52,6 +57,7 @@ .pf-chatbot__menu-item--active { background-color: var(--pf-t--global--background--color--action--plain--clicked); } + button.pf-chatbot__menu-item--active { background-color: initial; } @@ -112,6 +118,7 @@ border-radius: var(--pf-t--global--border--radius--pill); justify-content: center; align-items: center; + border-radius: var(--pf-t--global--border--radius--small); } } diff --git a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx index aafd1e72..8979dc49 100644 --- a/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx +++ b/packages/module/src/ChatbotConversationHistoryNav/ChatbotConversationHistoryNav.tsx @@ -45,8 +45,6 @@ export interface Conversation { label?: string; /** Callback for when user selects item. */ onSelect?: (event?: React.MouseEvent, value?: string | number) => void; - /** Whether menu item should display active background color */ - isActive?: boolean; /** Additional props passed to conversation menu item */ additionalProps?: MenuItemProps; } @@ -109,7 +107,7 @@ export const ChatbotConversationHistoryNav: React.FunctionComponent ( })}