Replaced List components, updated toggletext

Author: thatblindgeye

packages/module/patternfly-docs/content/extensions/chatbot/examples/Messages/MessageWithSources.tsx

@@ -253,7 +253,8 @@ export const MessageWithSourcesExample: FunctionComponent = () => {
               title: 'Getting started with Red Hat OpenShift',
               link: '#',
               body: 'Red Hat OpenShift on IBM Cloud is a managed offering to create your own cluster of compute hosts where you can deploy and manage containerized apps on IBM Cloud.',
-              isExternal: true
+              isExternal: true,
+              hasShowMore: true
             },
             {
               title: 'Azure Red Hat OpenShift documentation',

packages/module/src/SourcesCard/SourcesCard.scss

@@ -19,9 +19,10 @@
 }
 
 .pf-chatbot__sources-card-base.pf-m-wrap {
-  .pf-v6-c-list {
+  .pf-chatbot__sources-list {
     display: flex;
     flex-wrap: wrap;
+    list-style: none;
     gap: var(--pf-t--global--spacer--xs);
   }
 }

packages/module/src/SourcesCard/SourcesCard.test.tsx

@@ -44,36 +44,4 @@ describe('SourcesCard', () => {
     expect(screen.queryByRole('navigation')).not.toBeInTheDocument();
     expect(screen.queryByText('1/3')).not.toBeInTheDocument();
   });
-
-  it('should pass listProps to SourcesCardBase when using wrap layout', () => {
-    render(
-      <SourcesCard
-        layout="wrap"
-        sources={[
-          { title: 'How to make an apple pie', link: '' },
-          { title: 'How to make cookies', link: '' }
-        ]}
-        listProps={{ className: 'custom-list-class' }}
-      />
-    );
-    const listElement = screen.getByRole('list');
-    expect(listElement).toHaveClass('custom-list-class');
-  });
-
-  it('should pass listItemProps to SourcesCardBase when using wrap layout', () => {
-    render(
-      <SourcesCard
-        layout="wrap"
-        sources={[
-          { title: 'How to make an apple pie', link: '' },
-          { title: 'How to make cookies', link: '' }
-        ]}
-        listItemProps={{ className: 'custom-list-item-class' }}
-      />
-    );
-    const listItemElements = screen.getAllByRole('listitem');
-    listItemElements.forEach((listItem) => {
-      expect(listItem).toHaveClass('custom-list-item-class');
-    });
-  });
 });

packages/module/src/SourcesCard/SourcesCard.tsx

@@ -8,8 +8,6 @@ import {
   CardFooterProps,
   CardProps,
   CardTitleProps,
-  ListProps,
-  ListItemProps,
   pluralize,
   TruncateProps
 } from '@patternfly/react-core';
@@ -23,10 +21,6 @@ export interface SourcesCardProps extends CardProps {
   layout?: 'paginated' | 'wrap';
   /** Max width of a source card when the wrap layout is used. Can be any valid CSS width value. */
   cardMaxWidth?: string;
-  /** Additional props to pass to the list of source cards when the wrap layout is used. */
-  listProps?: ListProps;
-  /** Additional props to pass to the list items of source cards when the wrap layout is used. */
-  listItemProps?: Omit<ListItemProps, 'children'>;
   /** Flag indicating if the pagination is disabled. */
   isDisabled?: boolean;
   /** @deprecated ofWord has been deprecated. Label for the English word "of." */
@@ -88,20 +82,11 @@ const SourcesCard: FunctionComponent<SourcesCardProps> = ({
   sourceWordPlural = 'sources',
   layout = 'paginated',
   cardMaxWidth = '400px',
-  listProps,
-  listItemProps,
   ...props
 }: SourcesCardProps) => (
   <div className={css('pf-chatbot__source', layout === 'wrap' && 'pf-m-wrap')}>
     <span>{pluralize(sources.length, sourceWord, sourceWordPlural)}</span>
-    <SourcesCardBase
-      sources={sources}
-      layout={layout}
-      listProps={listProps}
-      listItemProps={listItemProps}
-      cardMaxWidth={cardMaxWidth}
-      {...props}
-    />
+    <SourcesCardBase sources={sources} layout={layout} cardMaxWidth={cardMaxWidth} {...props} />
   </div>
 );
 

packages/module/src/SourcesCardBase/SourcesCardBase.test.tsx

@@ -282,36 +282,4 @@ describe('SourcesCardBase', () => {
     const firstCard = screen.getByText('How to make an apple pie').closest('.pf-chatbot__sources-card');
     expect(firstCard).toHaveStyle({ maxWidth: '500px' });
   });
-
-  it('should apply listProps when using wrap layout', () => {
-    render(
-      <SourcesCardBase
-        layout="wrap"
-        sources={[
-          { title: 'How to make an apple pie', link: '' },
-          { title: 'How to make cookies', link: '' }
-        ]}
-        listProps={{ className: 'custom-list-class' }}
-      />
-    );
-    const listElement = screen.getByRole('list');
-    expect(listElement).toHaveClass('custom-list-class');
-  });
-
-  it('should apply listItemProps when using wrap layout', () => {
-    render(
-      <SourcesCardBase
-        layout="wrap"
-        sources={[
-          { title: 'How to make an apple pie', link: '' },
-          { title: 'How to make cookies', link: '' }
-        ]}
-        listItemProps={{ className: 'custom-list-item-class' }}
-      />
-    );
-    const listItemElements = screen.getAllByRole('listitem');
-    listItemElements.forEach((listItem) => {
-      expect(listItem).toHaveClass('custom-list-item-class');
-    });
-  });
 });

packages/module/src/SourcesCardBase/SourcesCardBase.tsx

@@ -19,11 +19,6 @@ import {
   ExpandableSection,
   ExpandableSectionVariant,
   Icon,
-  List,
-  ListProps,
-  ListItem,
-  ListItemProps,
-  ListVariant,
   Truncate,
   TruncateProps
 } from '@patternfly/react-core';
@@ -42,10 +37,6 @@ export interface SourcesCardBaseProps extends CardProps {
   paginationAriaLabel?: string;
   /** Max width of a source card when the wrap layout is used. Can be any valid CSS width value. */
   cardMaxWidth?: string;
-  /** Additional props to pass to the list of source cards when the wrap layout is used. */
-  listProps?: ListProps;
-  /** Additional props to pass to the list items of source cards when the wrap layout is used. */
-  listItemProps?: Omit<ListItemProps, 'children'>;
   /** Content rendered inside the paginated card */
   sources: {
     /** Title of sources card */
@@ -109,8 +100,6 @@ const SourcesCardBase: FunctionComponent<SourcesCardBaseProps> = ({
   cardFooterProps,
   layout = 'paginated',
   cardMaxWidth = '400px',
-  listProps,
-  listItemProps,
   ...props
 }: SourcesCardBaseProps) => {
   const [page, setPage] = useState(1);
@@ -133,14 +122,8 @@ const SourcesCardBase: FunctionComponent<SourcesCardBaseProps> = ({
   };
 
   const renderUncontrolledSourceCard = (source: SourcesCardBaseProps['sources'][0], index: number) => (
-    <ListItem key={index} className="pf-chatbot__sources-list-item" {...listItemProps}>
-      <Card
-        isCompact={isCompact}
-        className="pf-chatbot__sources-card"
-        style={{ maxWidth: cardMaxWidth }}
-        component="span"
-        {...props}
-      >
+    <li key={index} className="pf-chatbot__sources-list-item">
+      <Card isCompact={isCompact} className="pf-chatbot__sources-card" style={{ maxWidth: cardMaxWidth }} {...props}>
         <CardTitle className="pf-chatbot__sources-card-title" {...cardTitleProps}>
           <div className="pf-chatbot__sources-card-title-container">
             <Button
@@ -170,8 +153,8 @@ const SourcesCardBase: FunctionComponent<SourcesCardBaseProps> = ({
               <div aria-live="off">
                 <ExpandableSection
                   variant={ExpandableSectionVariant.truncate}
-                  toggleTextCollapsed={showLessWords}
-                  toggleTextExpanded={showMoreWords}
+                  toggleTextCollapsed={showMoreWords}
+                  toggleTextExpanded={showLessWords}
                   truncateMaxLines={2}
                 >
                   {source.body}
@@ -188,15 +171,15 @@ const SourcesCardBase: FunctionComponent<SourcesCardBaseProps> = ({
           </CardFooter>
         )}
       </Card>
-    </ListItem>
+    </li>
   );
 
   if (layout === 'wrap') {
     return (
       <div className="pf-chatbot__sources-card-base pf-m-wrap">
-        <List isPlain variant={ListVariant.inline} className="pf-chatbot__sources-list" {...listProps}>
+        <ul className="pf-chatbot__sources-list" role="list">
           {sources.map((source, index) => renderUncontrolledSourceCard(source, index))}
-        </List>
+        </ul>
       </div>
     );
   }