@patternfly/react-core 4.260.0 → 4.261.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "4.260.0",
+  "version": "4.261.0",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -70,5 +70,5 @@
     "react": "^16.8 || ^17 || ^18",
     "react-dom": "^16.8 || ^17 || ^18"
   },
-  "gitHead": "8d5d8dc62afaae1e70567b802bf617bf73df36a4"
+  "gitHead": "5d1af989ad4a302d1fa53c4658f033ad0fa1abef"
 }

package/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx

@@ -54,6 +54,8 @@ export interface MultipleFileUploadStatusItemProps extends React.HTMLProps<HTMLL
   progressAriaLiveMessage?: string | ((loadPercentage: number) => string);
   /** Unique identifier for progress. Generated if not specified. */
   progressId?: string;
+  /** @beta Additional content related to the status item. */
+  progressHelperText?: React.ReactNode;
 }
 
 export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileUploadStatusItemProps> = ({
@@ -75,6 +77,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
   progressId,
   progressAriaLiveMessage,
   buttonAriaLabel = 'Remove from list',
+  progressHelperText,
   ...props
 }: MultipleFileUploadStatusItemProps) => {
   const [loadPercentage, setLoadPercentage] = React.useState(0);
@@ -129,6 +132,9 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
     return `${Math.round(size)}${prefixes[prefixUnit]}B`;
   };
 
+  const value = progressValue || loadPercentage;
+  const variant = progressVariant || loadResult;
+
   const title = (
     <span className={styles.multipleFileUploadStatusItemProgress}>
       <span className={styles.multipleFileUploadStatusItemProgressText}>{fileName || file?.name || ''}</span>
@@ -151,11 +157,12 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent<MultipleFileU
         </div>
         <Progress
           title={title}
-          value={progressValue || loadPercentage}
-          variant={progressVariant || loadResult}
+          value={value}
+          variant={variant}
           aria-label={progressAriaLabel}
           aria-labelledby={progressAriaLabelledBy}
           id={progressId}
+          helperText={progressHelperText}
         />
       </div>
       <div className={styles.multipleFileUploadStatusItemClose}>

package/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx

@@ -99,3 +99,38 @@ describe('MultipleFileUploadStatusItem', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 });
+
+test('does not render helper text by default', () => {
+  const testFile = new File(['foo'], 'testFile.txt');
+  render(
+    <MultipleFileUploadStatusItem
+      file={testFile}
+      buttonAriaLabel="buttonAriaLabel"
+      progressAriaLabel="progressAriaLabel"
+      progressAriaLabelledBy="progressAriaLabelledBy"
+      progressId="test-progress-id"
+    />
+  );
+
+  const helperText = screen.queryByText('Test helper text');
+
+  expect(helperText).not.toBeInTheDocument();
+});
+
+test('renders helper text', () => {
+  const testFile = new File(['foo'], 'testFile.txt');
+  render(
+    <MultipleFileUploadStatusItem
+      file={testFile}
+      buttonAriaLabel="buttonAriaLabel"
+      progressAriaLabel="progressAriaLabel"
+      progressAriaLabelledBy="progressAriaLabelledBy"
+      progressId="test-progress-id"
+      progressHelperText="Test helper text"
+    />
+  );
+
+  const helperText = screen.getByText('Test helper text');
+
+  expect(helperText).toBeVisible();
+});

package/src/components/MultipleFileUpload/examples/MultipleFileUpload.md

@@ -42,5 +42,11 @@ File upload - multiple is designed in a composable manner to make customization
 
 ### Basic
 
+The below example demonstrates a typical application of file upload - multiple, with a few tweaks from that typical application to enhance the convenience of the example.
+
+The "Show as horizontal" checkbox can be used to easily toggle the `isHorizontal` prop, showing our available styling variations.
+
+The "Demonstrate error reporting by forcing uploads to fail" checkbox shows how our `progressHelperText` prop can be used to provide status messages to users, such as when a file fails to upload. While this checkbox is checked it will cause any file uploaded to automatically fail the file reading process, and helper text will be dynamically rendered which informs the user of that error.
+
 ```ts file="./MultipleFileUploadBasic.tsx"
 ```

package/src/components/MultipleFileUpload/examples/MultipleFileUploadBasic.tsx

@@ -4,7 +4,9 @@ import {
   MultipleFileUploadMain,
   MultipleFileUploadStatus,
   MultipleFileUploadStatusItem,
-  Checkbox
+  Checkbox,
+  HelperText,
+  HelperTextItem
 } from '@patternfly/react-core';
 import UploadIcon from '@patternfly/react-icons/dist/esm/icons/upload-icon';
 
@@ -17,6 +19,7 @@ interface readFile {
 
 export const MultipleFileUploadBasic: React.FunctionComponent = () => {
   const [isHorizontal, setIsHorizontal] = React.useState(false);
+  const [fileUploadShouldFail, setFileUploadShouldFail] = React.useState(false);
   const [currentFiles, setCurrentFiles] = React.useState<File[]>([]);
   const [readFileData, setReadFileData] = React.useState<readFile[]>([]);
   const [showStatus, setShowStatus] = React.useState(false);
@@ -53,6 +56,17 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
     setReadFileData(newReadFiles);
   };
 
+  /** Forces uploaded files to become corrupted if "Demonstrate error reporting by forcing uploads to fail" is selected in the example,
+   * only used in this example for demonstration purposes */
+  const updateCurrentFiles = (files: File[]) => {
+    if (fileUploadShouldFail) {
+      const corruptedFiles = files.map(file => ({ ...file, lastModified: ('foo' as unknown) as number }));
+      setCurrentFiles(prevFiles => [...prevFiles, ...corruptedFiles]);
+    } else {
+      setCurrentFiles(prevFiles => [...prevFiles, ...files]);
+    }
+  };
+
   // callback that will be called by the react dropzone with the newly dropped file objects
   const handleFileDrop = (droppedFiles: File[]) => {
     // identify what, if any, files are re-uploads of already uploaded files
@@ -63,7 +77,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
      * won't realize that the status items for the re-uploaded files needs to be re-rendered */
     Promise.resolve()
       .then(() => removeFiles(reUploads.map(file => file.name)))
-      .then(() => setCurrentFiles(prevFiles => [...prevFiles, ...droppedFiles]));
+      .then(() => updateCurrentFiles(droppedFiles));
   };
 
   // callback called by the status item when a file is successfully read with the built-in file reader
@@ -79,6 +93,18 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
     ]);
   };
 
+  // add helper text to a status item showing any error encountered during the file reading process
+  const createHelperText = (file: File) => {
+    const fileResult = readFileData.find(readFile => readFile.fileName === file.name);
+    if (fileResult?.loadError) {
+      return (
+        <HelperText isLiveRegion>
+          <HelperTextItem variant={'error'}>{fileResult.loadError.toString()}</HelperTextItem>
+        </HelperText>
+      );
+    }
+  };
+
   const successfullyReadFileCount = readFileData.filter(fileData => fileData.loadResult === 'success').length;
 
   return (
@@ -108,6 +134,7 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
                 onClearClick={() => removeFiles([file.name])}
                 onReadSuccess={handleReadSuccess}
                 onReadFail={handleReadFail}
+                progressHelperText={createHelperText(file)}
               />
             ))}
           </MultipleFileUploadStatus>
@@ -119,6 +146,12 @@ export const MultipleFileUploadBasic: React.FunctionComponent = () => {
         isChecked={isHorizontal}
         onChange={() => setIsHorizontal(!isHorizontal)}
       />
+      <Checkbox
+        id="upload-should-fail-checkbox"
+        label="Demonstrate error reporting by forcing uploads to fail"
+        isChecked={fileUploadShouldFail}
+        onChange={() => setFileUploadShouldFail(!fileUploadShouldFail)}
+      />
     </>
   );
 };

package/src/components/Text/TextList.tsx

@@ -25,7 +25,7 @@ export const TextList: React.FunctionComponent<TextListProps> = ({
   const Component: any = component;
 
   return (
-    <Component {...props} data-pf-content className={css(className)}>
+    <Component {...props} className={css(className)}>
       {children}
     </Component>
   );

package/src/components/Text/TextListItem.tsx

@@ -25,7 +25,7 @@ export const TextListItem: React.FunctionComponent<TextListItemProps> = ({
   const Component: any = component;
 
   return (
-    <Component {...props} data-pf-content className={css(className)}>
+    <Component {...props} className={css(className)}>
       {children}
     </Component>
   );

package/src/components/Text/__tests__/Generated/__snapshots__/TextList.test.tsx.snap

@@ -4,7 +4,6 @@ exports[`TextList should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <ul
     class="''"
-    data-pf-content="true"
   >
     ReactNode
   </ul>

package/src/components/Text/__tests__/Generated/__snapshots__/TextListItem.test.tsx.snap

@@ -4,7 +4,6 @@ exports[`TextListItem should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <li
     class="''"
-    data-pf-content="true"
   >
     ReactNode
   </li>

package/src/components/Text/__tests__/Text.test.tsx

@@ -1,112 +1,101 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { TextContent } from '../TextContent';
-import { Text, TextVariants } from '../Text';
-import { TextList, TextListVariants } from '../TextList';
-import { TextListItem, TextListItemVariants } from '../TextListItem';
-
-test('Text example should match snapshot', () => {
-  const { asFragment } = render(
-    <TextContent>
-      <Text component={TextVariants.h1}>Hello World</Text>
-      <Text component={TextVariants.p}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla
-        nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat odio, sollicitudin vel
-        erat vel, interdum mattis neque. Sub works as well!
-      </Text>
-      <Text component={TextVariants.h2}>Second level</Text>
-      <Text component={TextVariants.p}>
-        Curabitur accumsan turpis pharetra <strong>augue tincidunt</strong> blandit. Quisque condimentum maximus mi, sit
-        amet commodo arcu rutrum id. Proin pretium urna vel cursus venenatis. Suspendisse potenti. Etiam mattis sem
-        rhoncus lacus dapibus facilisis. Donec at dignissim dui. Ut et neque nisl.
-      </Text>
-      <TextList>
-        <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
-        <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
-        <TextListItem>
-          Aliquam nec felis in sapien venenatis viverra fermentum nec lectus.
-          <TextList>
-            <TextListItem>In fermentum leo eu lectus mollis, quis dictum mi aliquet.</TextListItem>
-            <TextListItem>Morbi eu nulla lobortis, lobortis est in, fringilla felis.</TextListItem>
-          </TextList>
-        </TextListItem>
-        <TextListItem>Ut non enim metus.</TextListItem>
-      </TextList>
-      <Text component={TextVariants.h3}>Third level</Text>
-      <Text component={TextVariants.p}>
-        Quisque ante lacus, malesuada ac auctor vitae, congue{' '}
-        <Text component={TextVariants.a} href="#">
-          non ante
-        </Text>
-        . Phasellus lacus ex, semper ac tortor nec, fringilla condimentum orci. Fusce eu rutrum tellus.
-      </Text>
-      <TextList component={TextListVariants.ol}>
-        <TextListItem>Donec blandit a lorem id convallis.</TextListItem>
-        <TextListItem>Cras gravida arcu at diam gravida gravida.</TextListItem>
-        <TextListItem>Integer in volutpat libero.</TextListItem>
-        <TextListItem>Donec a diam tellus.</TextListItem>
-        <TextListItem>Aenean nec tortor orci.</TextListItem>
-        <TextListItem>Quisque aliquam cursus urna, non bibendum massa viverra eget.</TextListItem>
-        <TextListItem>Vivamus maximus ultricies pulvinar.</TextListItem>
-      </TextList>
-      <Text component={TextVariants.blockquote}>
-        Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit ipsum, ut blandit est tellus sit
-        amet turpis.
-      </Text>
-      <Text component={TextVariants.p}>
-        Quisque at semper enim, eu hendrerit odio. Etiam auctor nisl et <em>justo sodales</em> elementum. Maecenas
-        ultrices lacus quis neque consectetur, et lobortis nisi molestie.
-      </Text>
-      <Text component={TextVariants.p}>
-        Sed sagittis enim ac tortor maximus rutrum. Nulla facilisi. Donec mattis vulputate risus in luctus. Maecenas
-        vestibulum interdum commodo.
-      </Text>
-      <TextList component={TextListVariants.dl}>
-        <TextListItem component={TextListItemVariants.dt}>Web</TextListItem>
-        <TextListItem component={TextListItemVariants.dd}>
-          The part of the Internet that contains websites and web pages
-        </TextListItem>
-        <TextListItem component={TextListItemVariants.dt}>HTML</TextListItem>
-        <TextListItem component={TextListItemVariants.dd}>A markup language for creating web pages</TextListItem>
-        <TextListItem component={TextListItemVariants.dt}>CSS</TextListItem>
-        <TextListItem component={TextListItemVariants.dd}>A technology to make HTML look better</TextListItem>
-      </TextList>
-      <Text component={TextVariants.p}>
-        Suspendisse egestas sapien non felis placerat elementum. Morbi tortor nisl, suscipit sed mi sit amet, mollis
-        malesuada nulla. Nulla facilisi. Nullam ac erat ante.
-      </Text>
-      <Text component={TextVariants.h4}>Fourth level</Text>
-      <Text component={TextVariants.p}>
-        Nulla efficitur eleifend nisi, sit amet bibendum sapien fringilla ac. Mauris euismod metus a tellus laoreet, at
-        elementum ex efficitur.
-      </Text>
-      <Text component={TextVariants.p}>
-        Maecenas eleifend sollicitudin dui, faucibus sollicitudin augue cursus non. Ut finibus eleifend arcu ut
-        vehicula. Mauris eu est maximus est porta condimentum in eu justo. Nulla id iaculis sapien.
-      </Text>
-      <Text component={TextVariants.small}>Sometimes you need small text to display things like date created</Text>
-      <Text component={TextVariants.p}>
-        Phasellus porttitor enim id metus volutpat ultricies. Ut nisi nunc, blandit sed dapibus at, vestibulum in felis.
-        Etiam iaculis lorem ac nibh bibendum rhoncus. Nam interdum efficitur ligula sit amet ullamcorper. Etiam
-        tristique, leo vitae porta faucibus, mi lacus laoreet metus, at cursus leo est vel tellus. Sed ac posuere est.
-        Nunc ultricies nunc neque, vitae ultricies ex sodales quis. Aliquam eu nibh in libero accumsan pulvinar. Nullam
-        nec nisl placerat, pretium metus vel, euismod ipsum. Proin tempor cursus nisl vel condimentum. Nam pharetra
-        varius metus non pellentesque.
-      </Text>
-      <Text component={TextVariants.h5}>Fifth level</Text>
-      <Text component={TextVariants.p}>
-        Aliquam sagittis rhoncus vulputate. Cras non luctus sem, sed tincidunt ligula. Vestibulum at nunc elit. Praesent
-        aliquet ligula mi, in luctus elit volutpat porta. Phasellus molestie diam vel nisi sodales, a eleifend augue
-        laoreet. Sed nec eleifend justo. Nam et sollicitudin odio.
-      </Text>
-      <Text component={TextVariants.h6}>Sixth level</Text>
-      <Text component={TextVariants.p}>
-        Cras in nibh lacinia, venenatis nisi et, auctor urna. Donec pulvinar lacus sed diam dignissim, ut eleifend eros
-        accumsan. Phasellus non tortor eros. Ut sed rutrum lacus. Etiam purus nunc, scelerisque quis enim vitae,
-        malesuada ultrices turpis. Nunc vitae maximus purus, nec consectetur dui. Suspendisse euismod, elit vel rutrum
-        commodo, ipsum tortor maximus dui, sed varius sapien odio vitae est. Etiam at cursus metus.
-      </Text>
-    </TextContent>
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Text } from '../Text';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-content">
+      <Text />
+    </div>
+  );
+  expect(screen.getByTestId('test-content').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<Text>Test</Text>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders without class name by default', () => {
+  render(<Text>Test</Text>);
+  expect(screen.getByText('Test')).not.toHaveClass();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<Text className="custom-class">Test</Text>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders as "p" element by default', () => {
+  render(<Text>Test</Text>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'P');
+});
+
+test('Renders as "h1" element when component="h1"', () => {
+  render(<Text component="h1">Test</Text>);
+  expect(screen.getByRole('heading', { level: 1 })).toBeVisible();
+});
+
+test('Renders as "h2" element when component="h2"', () => {
+  render(<Text component="h2">Test</Text>);
+  expect(screen.getByRole('heading', { level: 2 })).toBeVisible();
+});
+
+test('Renders as "h3" element when component="h3"', () => {
+  render(<Text component="h3">Test</Text>);
+  expect(screen.getByRole('heading', { level: 3 })).toBeVisible();
+});
+
+test('Renders as "h4" element when component="h4"', () => {
+  render(<Text component="h4">Test</Text>);
+  expect(screen.getByRole('heading', { level: 4 })).toBeVisible();
+});
+
+test('Renders as "h5" element when component="h5"', () => {
+  render(<Text component="h5">Test</Text>);
+  expect(screen.getByRole('heading', { level: 5 })).toBeVisible();
+});
+
+test('Renders as "h6" element when component="h6"', () => {
+  render(<Text component="h6">Test</Text>);
+  expect(screen.getByRole('heading', { level: 6 })).toBeVisible();
+});
+
+test('Renders as "a" element when component="a"', () => {
+  render(<Text component="a">Test</Text>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'A');
+});
+
+test('Renders as "blockquote" element when component="blockquote"', () => {
+  render(<Text component="blockquote">Test</Text>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'BLOCKQUOTE');
+});
+
+test('Renders as "pre" element when component="pre"', () => {
+  render(<Text component="pre">Test</Text>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'PRE');
+});
+
+test('Renders without class name pf-m-visited by default', () => {
+  render(<Text>Test</Text>);
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-visited');
+});
+
+test('Renders with class name pf-m-visited when isVisited=true and component="a"', () => {
+  render(
+    <Text isVisitedLink={true} component="a">
+      Test
+    </Text>
   );
+  expect(screen.getByText('Test')).toHaveClass('pf-m-visited');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<Text aria-label="Test label">Test</Text>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<Text ouiaId="ouia-id">Test</Text>);
   expect(asFragment()).toMatchSnapshot();
 });

package/src/components/Text/__tests__/TextContent.text.tsx

@@ -0,0 +1,47 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TextContent } from '../TextContent';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-content">
+      <TextContent />
+    </div>
+  );
+  expect(screen.getByTestId('test-content').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<TextContent>Test</TextContent>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders with class name pf-c-content', () => {
+  render(<TextContent>Test</TextContent>);
+  expect(screen.getByText('Test')).toHaveClass('pf-c-content', { exact: true });
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<TextContent className="custom-class">Test</TextContent>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders without class name pf-m-visited by default', () => {
+  render(<TextContent>Test</TextContent>);
+  expect(screen.getByText('Test')).not.toHaveClass('pf-m-visited');
+});
+
+test('Renders with class name pf-m-visited when isVisited=true', () => {
+  render(<TextContent isVisited={true}>Test</TextContent>);
+  expect(screen.getByText('Test')).toHaveClass('pf-m-visited');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<TextContent aria-label="Test label">Test</TextContent>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<TextContent>Test</TextContent>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Text/__tests__/TextList.test.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TextList } from '../TextList';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-list">
+      <TextList />
+    </div>
+  );
+  expect(screen.getByTestId('test-list').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<TextList>Test</TextList>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders without class name by default', () => {
+  render(<TextList>Test</TextList>);
+  expect(screen.getByText('Test')).not.toHaveClass();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<TextList className="custom-class">Test</TextList>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders as "ul" element by default', () => {
+  render(<TextList>Test</TextList>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'UL');
+});
+
+test('Renders as "ol" element when component="ol"', () => {
+  render(<TextList component="ol">Test</TextList>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'OL');
+});
+
+test('Renders as "dl" element when component="dl"', () => {
+  render(<TextList component="dl">Test</TextList>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DL');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<TextList aria-label="Test label">Test</TextList>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<TextList>Test</TextList>);
+  expect(asFragment()).toMatchSnapshot();
+});

package/src/components/Text/__tests__/TextListItem.test.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import { render, screen } from '@testing-library/react';
+import { TextListItem } from '../TextListItem';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-list-item">
+      <TextListItem />
+    </div>
+  );
+  expect(screen.getByTestId('test-list-item').firstChild).toBeVisible();
+});
+
+test('Renders children', () => {
+  render(<TextListItem>Test</TextListItem>);
+  expect(screen.getByText('Test')).toBeVisible();
+});
+
+test('Renders without class name by default', () => {
+  render(<TextListItem>Test</TextListItem>);
+  expect(screen.getByText('Test')).not.toHaveClass();
+});
+
+test('Renders with custom class name when className prop is provided', () => {
+  render(<TextListItem className="custom-class">Test</TextListItem>);
+  expect(screen.getByText('Test')).toHaveClass('custom-class');
+});
+
+test('Renders as "li" element by default', () => {
+  render(<TextListItem>Test</TextListItem>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'LI');
+});
+
+test('Renders as "dt" element when component="dt"', () => {
+  render(<TextListItem component="dt">Test</TextListItem>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DT');
+});
+
+test('Renders as "dd" element when component="dd"', () => {
+  render(<TextListItem component="dd">Test</TextListItem>);
+  expect(screen.getByText('Test')).toHaveProperty('nodeName', 'DD');
+});
+
+test('Renders with inherited element props spread to the component', () => {
+  render(<TextListItem aria-label="Test label">Test</TextListItem>);
+  expect(screen.getByText('Test')).toHaveAccessibleName('Test label');
+});
+
+test('Matches the snapshot', () => {
+  const { asFragment } = render(<TextListItem>Test</TextListItem>);
+  expect(asFragment()).toMatchSnapshot();
+});