@patternfly/chatbot 6.7.1 → 6.8.0-prerelease.2

package/src/SourcesCardBase/SourcesCardBase.test.tsx

@@ -264,8 +264,8 @@ describe('SourcesCardBase', () => {
         ]}
       />
     );
-    const firstCard = screen.getByText('How to make an apple pie').closest('.pf-chatbot__sources-card');
-    expect(firstCard).toHaveStyle({ maxWidth: '400px' });
+    const firstListItem = screen.getByText('How to make an apple pie').closest('.pf-chatbot__sources-list-item');
+    expect(firstListItem).toHaveStyle({ '--pf-chatbot-sources-card-max-width': '400px' });
   });
 
   it('should apply custom cardMaxWidth when using wrap layout', () => {
@@ -279,7 +279,7 @@ describe('SourcesCardBase', () => {
         cardMaxWidth="500px"
       />
     );
-    const firstCard = screen.getByText('How to make an apple pie').closest('.pf-chatbot__sources-card');
-    expect(firstCard).toHaveStyle({ maxWidth: '500px' });
+    const firstListItem = screen.getByText('How to make an apple pie').closest('.pf-chatbot__sources-list-item');
+    expect(firstListItem).toHaveStyle({ '--pf-chatbot-sources-card-max-width': '500px' });
   });
 });

package/src/SourcesCardBase/SourcesCardBase.tsx

@@ -1,7 +1,12 @@
 // ============================================================================
 // Chatbot Main - Messages - Sources Card
 // ============================================================================
-import type { FunctionComponent, MouseEvent as ReactMouseEvent, KeyboardEvent as ReactKeyboardEvent } from 'react';
+import type {
+  FunctionComponent,
+  MouseEvent as ReactMouseEvent,
+  KeyboardEvent as ReactKeyboardEvent,
+  CSSProperties
+} from 'react';
 import { useState } from 'react';
 // Import PatternFly components
 import {
@@ -122,8 +127,12 @@ const SourcesCardBase: FunctionComponent<SourcesCardBaseProps> = ({
   };
 
   const renderUncontrolledSourceCard = (source: SourcesCardBaseProps['sources'][0], index: number) => (
-    <li key={index} className="pf-chatbot__sources-list-item">
-      <Card isCompact={isCompact} className="pf-chatbot__sources-card" style={{ maxWidth: cardMaxWidth }} {...props}>
+    <li
+      key={index}
+      className="pf-chatbot__sources-list-item"
+      style={{ '--pf-chatbot-sources-card-max-width': cardMaxWidth } as CSSProperties}
+    >
+      <Card isFullHeight isCompact={isCompact} className="pf-chatbot__sources-card" {...props}>
         <CardTitle className="pf-chatbot__sources-card-title" {...cardTitleProps}>
           <div className="pf-chatbot__sources-card-title-container">
             <Button