Address feedback

Co-authored-by: Erin Donehoo <[email protected]>
patternfly · Dec 16, 2024 · 4a6bbc8 · 4a6bbc8
1 parent 32d931c
commit 4a6bbc8
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 32 deletions.
diff --git a/...tternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx b/...tternfly-docs/content/extensions/chatbot/examples/UI/ChatbotHeaderDrawerWithSelection.tsx
@@ -22,38 +22,38 @@ const menuItems = [
   </DropdownList>
 ];
 
-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 (
     <>
       <Checkbox
@@ -70,6 +70,8 @@ export const ChatbotHeaderDrawerWithSelection: React.FunctionComponent = () => {
         setIsDrawerOpen={setIsDrawerOpen}
         conversations={conversations}
         drawerContent={<div>Drawer content</div>}
+        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
@@ -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
@@ -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
@@ -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<ChatbotConve
 
   const getNavItem = (conversation: Conversation) => (
     <MenuItem
-      className={`pf-chatbot__menu-item ${conversation.isActive ? 'pf-chatbot__menu-item--active' : ''}`}
+      className={`pf-chatbot__menu-item ${activeItemId && activeItemId === conversation.id ? 'pf-chatbot__menu-item--active' : ''}`}
       itemId={conversation.id}
       key={conversation.id}
       {...(conversation.noIcon ? {} : { icon: conversation.icon ?? <OutlinedCommentAltIcon /> })}