@patternfly/react-core 6.2.1-prerelease.1 → 6.2.1-prerelease.10

package/src/components/LoginPage/__tests__/LoginForm.test.tsx

@@ -48,4 +48,16 @@ describe('LoginForm', () => {
     const { asFragment } = render(<LoginForm isShowPasswordEnabled />);
     expect(asFragment()).toMatchSnapshot();
   });
+
+  test('Renders LoginForm with password field required by default', () => {
+    render(<LoginForm />);
+    const passwordField = screen.getByLabelText(/password/i);
+    expect(passwordField).toBeRequired();
+  });
+
+  test('Renders LoginForm with password field not required when isPasswordRequired set to false', () => {
+    render(<LoginForm isPasswordRequired={false} />);
+    const passwordField = screen.getByLabelText(/password/i);
+    expect(passwordField).not.toBeRequired();
+  });
 });

package/src/components/LoginPage/examples/LoginPage.md

@@ -31,6 +31,7 @@ import GitlabIcon from '@patternfly/react-icons/dist/esm/icons/gitlab-icon';
 
 ### Basic
 
+By default, a login page requires users to enter both a username and a password into their respective fields. The username must always be a required field, but you can make the password optional by passing the `isPasswordRequired` property to the `<LoginForm>`.
 ```ts file='./LoginPageBasic.tsx' isFullscreen
 
 ```

package/src/components/Nav/Nav.tsx

@@ -10,7 +10,7 @@ export type NavSelectClickHandler = (
   to: string
 ) => void;
 export interface NavProps
-  extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'onSelect'>,
+  extends Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>, 'onSelect' | 'onToggle'>,
     OUIAProps {
   /** Anything that can be rendered inside of the nav */
   children?: React.ReactNode;

package/src/components/Nav/NavItemSeparator.tsx

@@ -2,6 +2,7 @@ import { Divider, DividerProps } from '../Divider';
 
 export const NavItemSeparator: React.FunctionComponent<DividerProps> = ({
   component = 'li',
+  role = 'presentation',
   ...props
-}: DividerProps) => <Divider component={component} {...props} />;
+}: DividerProps) => <Divider component={component} role={role} {...props} />;
 NavItemSeparator.displayName = 'NavItemSeparator';

package/src/components/Page/Page.tsx

@@ -22,7 +22,9 @@ export interface PageProps extends React.HTMLProps<HTMLDivElement> {
   className?: string;
   /** Masthead component (e.g. <Masthead />) */
   masthead?: React.ReactNode;
-  /** Sidebar component for a side nav (e.g. <PageSidebar />) */
+  /** Sidebar component for a side nav, recommended to be a PageSidebar. If set to null, the page grid layout
+   * will render without a sidebar.
+   */
   sidebar?: React.ReactNode;
   /** Notification drawer component for an optional notification drawer (e.g. <NotificationDrawer />) */
   notificationDrawer?: React.ReactNode;
@@ -336,6 +338,7 @@ class Page extends Component<PageProps, PageState> {
             width !== null && height !== null && 'pf-m-resize-observer',
             width !== null && `pf-m-breakpoint-${getBreakpoint(width)}`,
             height !== null && `pf-m-height-breakpoint-${getVerticalBreakpoint(height)}`,
+            sidebar === null && styles.modifiers.noSidebar,
             className
           )}
         >

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

@@ -353,6 +353,24 @@ describe('Page', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
+  test(`Does not render with class ${styles.modifiers.noSidebar} by default`, () => {
+    render(<Page data-testid="page"></Page>);
+
+    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.noSidebar);
+  });
+
+  test(`Does not render with class ${styles.modifiers.noSidebar} when sidebar prop is passed with valid content`, () => {
+    render(<Page data-testid="page" sidebar={<div>sidebar content</div>}></Page>);
+
+    expect(screen.getByTestId('page')).not.toHaveClass(styles.modifiers.noSidebar);
+  });
+
+  test(`Renders with class ${styles.modifiers.noSidebar} when sidebar is set to null`, () => {
+    render(<Page data-testid="page" sidebar={null}></Page>);
+
+    expect(screen.getByTestId('page')).toHaveClass(styles.modifiers.noSidebar);
+  });
+
   test(`Does not render with ${styles.modifiers.fill} or ${styles.modifiers.noFill} if isContentFilled is not passed`, () => {
     render(<Page {...props} role="main"></Page>);
 

package/src/components/Progress/examples/ProgressTitleOutsideOfProgressBar.tsx

@@ -8,7 +8,7 @@ import {
 } from '@patternfly/react-core';
 
 export const ProgressTitleOutsideOfProgressBar: React.FunctionComponent = () => (
-  <DescriptionList>
+  <DescriptionList aria-label="Progress Title outside of progress bar">
     <DescriptionListGroup>
       <DescriptionListTerm id="title-outside-progress-example-label">Title outside of progress bar</DescriptionListTerm>
       <DescriptionListDescription>

package/src/components/SearchInput/examples/SearchInputAdvanced.tsx

@@ -32,6 +32,7 @@ export const SearchInputAdvanced: React.FunctionComponent = () => {
       />
       <br />
       <SearchInput
+        aria-label="Advanced search"
         attributes={[
           { attr: 'username', display: 'Username' },
           { attr: 'firstname', display: 'First name' }

package/src/components/SearchInput/examples/SearchInputBasic.tsx

@@ -10,6 +10,7 @@ export const SearchInputBasic: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Search basic example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

package/src/components/SearchInput/examples/SearchInputFocusSearch.tsx

@@ -7,7 +7,13 @@ export const SearchInputFocusSearch: React.FunctionComponent = () => {
 
   return (
     <>
-      <SearchInput ref={ref} value={value} onChange={(_event, value) => setValue(value)} onClear={() => setValue('')} />
+      <SearchInput
+        ref={ref}
+        value={value}
+        onChange={(_event, value) => setValue(value)}
+        onClear={() => setValue('')}
+        aria-label="Search focus using ref example"
+      />
       <Button onClick={() => ref.current && ref.current.focus()}>Focus on the search input</Button>
     </>
   );

package/src/components/SearchInput/examples/SearchInputWithExpandable.tsx

@@ -15,6 +15,7 @@ export const SearchInputWithExpandable: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Search with expandable button example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

package/src/components/SearchInput/examples/SearchInputWithNavigableOptions.tsx

@@ -29,6 +29,7 @@ export const SearchInputWithNavigableOptions: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Search match with navigable options example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

package/src/components/SearchInput/examples/SearchInputWithResultCount.tsx

@@ -17,6 +17,7 @@ export const SearchInputWithResultCount: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Match with result count"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => onChange(value)}

package/src/components/SearchInput/examples/SearchInputWithSubmitButton.tsx

@@ -6,6 +6,7 @@ export const SearchInputWithSubmitButton: React.FunctionComponent = () => {
 
   return (
     <SearchInput
+      aria-label="Search with submit button example"
       placeholder="Find by name"
       value={value}
       onChange={(_event, value) => setValue(value)}

package/src/components/Select/SelectGroup.tsx

@@ -10,7 +10,7 @@ export interface SelectGroupProps extends Omit<MenuGroupProps, 'ref'> {
   /** Classes applied to root element of select group */
   className?: string;
   /** Label of the select group */
-  label?: string;
+  label?: React.ReactNode;
 }
 
 export const SelectGroup: React.FunctionComponent<SelectGroupProps> = ({

package/src/components/Skeleton/examples/SkeletonDefault.tsx

@@ -1,3 +1,3 @@
 import { Skeleton } from '@patternfly/react-core';
 
-export const SkeletonDefault: React.FunctionComponent = () => <Skeleton screenreaderText="Loading contents" />;
+export const SkeletonDefault: React.FunctionComponent = () => <Skeleton screenreaderText="Loading default content" />;

package/src/components/Skeleton/examples/SkeletonPercentageHeight.tsx

@@ -2,11 +2,11 @@ import { Skeleton } from '@patternfly/react-core';
 
 export const SkeletonPercentageHeight: React.FunctionComponent = () => (
   <div style={{ height: '400px', display: 'flex', alignItems: 'flex-end', justifyContent: 'space-between' }}>
-    <Skeleton height="25%" width="15%" screenreaderText="Loaded 25% of content" />
-    <Skeleton height="33%" width="15%" screenreaderText="Loaded 33% of content" />
-    <Skeleton height="50%" width="15%" screenreaderText="Loaded 50% of content" />
-    <Skeleton height="66%" width="15%" screenreaderText="Loaded 66% of content" />
-    <Skeleton height="75%" width="15%" screenreaderText="Loaded 75% of content" />
-    <Skeleton height="100%" width="15%" screenreaderText="Loaded 100% of content" />
+    <Skeleton height="25%" width="15%" screenreaderText="Loading percentage height content" />
+    <Skeleton height="33%" width="15%" />
+    <Skeleton height="50%" width="15%" />
+    <Skeleton height="66%" width="15%" />
+    <Skeleton height="75%" width="15%" />
+    <Skeleton height="100%" width="15%" />
   </div>
 );

package/src/components/Skeleton/examples/SkeletonPercentageWidth.tsx

@@ -3,15 +3,15 @@ import { Skeleton } from '@patternfly/react-core';
 
 export const SkeletonPercentageWidth: React.FunctionComponent = () => (
   <Fragment>
-    <Skeleton width="25%" screenreaderText="Loaded 25% of content" />
+    <Skeleton width="25%" screenreaderText="Loading percentage width content" />
     <br />
-    <Skeleton width="33%" screenreaderText="Loaded 33% of content" />
+    <Skeleton width="33%" />
     <br />
-    <Skeleton width="50%" screenreaderText="Loaded 50% of content" />
+    <Skeleton width="50%" />
     <br />
-    <Skeleton width="66%" screenreaderText="Loaded 66% of content" />
+    <Skeleton width="66%" />
     <br />
-    <Skeleton width="75%" screenreaderText="Loaded 75% of content" />
+    <Skeleton width="75%" />
     <br />
     <Skeleton />
   </Fragment>

package/src/components/Skeleton/examples/SkeletonShapes.tsx

@@ -4,36 +4,36 @@ import { Skeleton } from '@patternfly/react-core';
 export const SkeletonShapes: React.FunctionComponent = () => (
   <Fragment>
     Small circle
-    <Skeleton shape="circle" width="15%" screenreaderText="Loading small circle contents" />
+    <Skeleton shape="circle" width="15%" screenreaderText="Loading circle content" />
     <br />
     Medium circle
-    <Skeleton shape="circle" width="30%" screenreaderText="Loading medium circle contents" />
+    <Skeleton shape="circle" width="30%" />
     <br />
     Large circle
-    <Skeleton shape="circle" width="50%" screenreaderText="Loading large circle contents" />
+    <Skeleton shape="circle" width="50%" />
     <br />
     Small square
-    <Skeleton shape="square" width="15%" screenreaderText="Loading small square contents" />
+    <Skeleton shape="square" width="15%" screenreaderText="Loading square content" />
     <br />
     Medium square
-    <Skeleton shape="square" width="30%" screenreaderText="Loading medium square contents" />
+    <Skeleton shape="square" width="30%" />
     <br />
     Large square
-    <Skeleton shape="square" width="50%" screenreaderText="Loading large square contents" />
+    <Skeleton shape="square" width="50%" />
     <br />
     Small rectangle
     <div style={{ height: '200px' }}>
-      <Skeleton height="50%" width="50%" screenreaderText="Loading small rectangle contents" />
+      <Skeleton height="50%" width="50%" screenreaderText="Loading rectangle content" />
     </div>
     <br />
     Medium rectangle
     <div style={{ height: '200px' }}>
-      <Skeleton height="75%" width="75%" screenreaderText="Loading medium rectangle contents" />
+      <Skeleton height="75%" width="75%" />
     </div>
     <br />
     Large rectangle
     <div style={{ height: '200px' }}>
-      <Skeleton height="100%" screenreaderText="Loading large rectangle contents" />
+      <Skeleton height="100%" />
     </div>
   </Fragment>
 );

package/src/components/Skeleton/examples/SkeletonText.tsx

@@ -12,24 +12,24 @@ import t_global_font_size_sm from '@patternfly/react-tokens/dist/esm/t_global_fo
 export const SkeletonText: React.FunctionComponent = () => (
   <Fragment>
     {t_global_font_size_4xl.name}
-    <Skeleton fontSize="4xl" screenreaderText="Loading font size 4xl" />
+    <Skeleton fontSize="4xl" screenreaderText="Loading text content" />
     <br />
     {t_global_font_size_3xl.name}
-    <Skeleton fontSize="3xl" screenreaderText="Loading font size 3xl" />
+    <Skeleton fontSize="3xl" />
     <br />
     {t_global_font_size_2xl.name}
-    <Skeleton fontSize="2xl" screenreaderText="Loading font size 2xl" />
+    <Skeleton fontSize="2xl" />
     <br />
     {t_global_font_size_xl.name}
-    <Skeleton fontSize="xl" screenreaderText="Loading font size xl" />
+    <Skeleton fontSize="xl" />
     <br />
     {t_global_font_size_lg.name}
-    <Skeleton fontSize="lg" screenreaderText="Loading font size lg" />
+    <Skeleton fontSize="lg" />
     <br />
     {t_global_font_size_md.name}
-    <Skeleton fontSize="md" screenreaderText="Loading font size md" />
+    <Skeleton fontSize="md" />
     <br />
     {t_global_font_size_sm.name}
-    <Skeleton fontSize="sm" screenreaderText="Loading font size sm" />
+    <Skeleton fontSize="sm" />
   </Fragment>
 );

package/src/components/Tabs/Tabs.tsx

@@ -31,7 +31,9 @@ export interface HorizontalOverflowObject {
 type TabElement = React.ReactElement<TabProps, React.JSXElementConstructor<TabProps>>;
 type TabsChild = TabElement | boolean | null | undefined;
 
-export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect'>, OUIAProps {
+export interface TabsProps
+  extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect' | 'onToggle'>,
+    OUIAProps {
   /** Content rendered inside the tabs component. Only `Tab` components or expressions resulting in a falsy value are allowed here. */
   children: TabsChild | TabsChild[];
   /** Additional classes added to the tabs */

package/src/components/Toolbar/ToolbarGroup.tsx

@@ -12,7 +12,7 @@ export enum ToolbarGroupVariant {
   'label-group' = 'label-group'
 }
 
-export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref'> {
+export interface ToolbarGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'onToggle'> {
   /** Classes applied to root element of the data toolbar group */
   className?: string;
   /** A type modifier which modifies spacing specifically depending on the type of group */

package/src/components/Toolbar/ToolbarItem.tsx

@@ -185,10 +185,19 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
   children,
   isAllExpanded,
   isOverflowContainer,
+  role,
   ...props
 }: ToolbarItemProps) => {
   if (variant === ToolbarItemVariant.separator) {
-    return <Divider className={css(className)} orientation={{ default: 'vertical' }} {...props} />;
+    const isDividerRoleValid = role === 'separator' || role === 'presentation';
+    return (
+      <Divider
+        className={css(className)}
+        orientation={{ default: 'vertical' }}
+        {...props}
+        {...(isDividerRoleValid && { role: role as 'separator' | 'presentation' })}
+      />
+    );
   }
 
   return (
@@ -217,6 +226,7 @@ export const ToolbarItem: React.FunctionComponent<ToolbarItemProps> = ({
           )}
           {...(variant === 'label' && { 'aria-hidden': true })}
           id={id}
+          role={role}
           {...props}
         >
           {children}

package/src/components/Truncate/Truncate.tsx

@@ -22,8 +22,18 @@ export interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
   className?: string;
   /** Text to truncate */
   content: string;
-  /** The number of characters displayed in the second half of the truncation */
+  /** The number of characters displayed in the second half of a middle truncation. This will be overridden by
+   * the maxCharsDisplayed prop.
+   */
   trailingNumChars?: number;
+  /** The maximum number of characters to display before truncating. This will always truncate content
+   * when its length exceeds the value passed to this prop, and container width/resizing will not affect truncation.
+   */
+  maxCharsDisplayed?: number;
+  /** The content to use to signify omission of characters when using the maxCharsDisplayed prop.
+   * By default this will render an ellipsis.
+   */
+  omissionContent?: string;
   /** Where the text will be truncated */
   position?: 'start' | 'middle' | 'end';
   /** Tooltip position */
@@ -49,13 +59,15 @@ export interface TruncateProps extends React.HTMLProps<HTMLSpanElement> {
   refToGetParent?: React.RefObject<any>;
 }
 
-const sliceContent = (str: string, slice: number) => [str.slice(0, str.length - slice), str.slice(-slice)];
+const sliceTrailingContent = (str: string, slice: number) => [str.slice(0, str.length - slice), str.slice(-slice)];
 
 export const Truncate: React.FunctionComponent<TruncateProps> = ({
   className,
   position = 'end',
   tooltipPosition = 'top',
   trailingNumChars = 7,
+  maxCharsDisplayed,
+  omissionContent = '\u2026',
   content,
   refToGetParent,
   ...props
@@ -63,11 +75,17 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
   const [isTruncated, setIsTruncated] = useState(true);
   const [parentElement, setParentElement] = useState<HTMLElement>(null);
   const [textElement, setTextElement] = useState<HTMLElement>(null);
+  const [shouldRenderByMaxChars, setShouldRenderByMaxChars] = useState(maxCharsDisplayed > 0);
 
   const textRef = useRef<HTMLElement>(null);
   const subParentRef = useRef<HTMLDivElement>(null);
   const observer = useRef(null);
 
+  if (maxCharsDisplayed <= 0) {
+    // eslint-disable-next-line no-console
+    console.warn('Truncate: the maxCharsDisplayed must be greater than 0, otherwise no content will be visible.');
+  }
+
   const getActualWidth = (element: Element) => {
     const computedStyle = getComputedStyle(element);
 
@@ -100,7 +118,7 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
   }, [textRef, subParentRef, textElement, parentElement]);
 
   useEffect(() => {
-    if (textElement && parentElement && !observer.current) {
+    if (textElement && parentElement && !observer.current && !shouldRenderByMaxChars) {
       const totalTextWidth = calculateTotalTextWidth(textElement, trailingNumChars, content);
       const textWidth = position === 'middle' ? totalTextWidth : textElement.scrollWidth;
 
@@ -115,31 +133,100 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
         observer();
       };
     }
-  }, [textElement, parentElement, trailingNumChars, content, position]);
+  }, [textElement, parentElement, trailingNumChars, content, position, shouldRenderByMaxChars]);
 
-  const truncateBody = (
-    <span ref={subParentRef} className={css(styles.truncate, className)} {...props}>
-      {(position === TruncatePosition.end || position === TruncatePosition.start) && (
-        <span ref={textRef} className={truncateStyles[position]}>
-          {content}
-          {position === TruncatePosition.start && <Fragment>&lrm;</Fragment>}
-        </span>
-      )}
-      {position === TruncatePosition.middle && content.length - trailingNumChars > minWidthCharacters && (
-        <Fragment>
-          <span ref={textRef} className={styles.truncateStart}>
-            {sliceContent(content, trailingNumChars)[0]}
+  useEffect(() => {
+    if (shouldRenderByMaxChars) {
+      setIsTruncated(content.length > maxCharsDisplayed);
+    }
+  }, [shouldRenderByMaxChars]);
+
+  useEffect(() => {
+    setShouldRenderByMaxChars(maxCharsDisplayed > 0);
+  }, [maxCharsDisplayed]);
+
+  const renderResizeObserverContent = () => {
+    if (position === TruncatePosition.end || position === TruncatePosition.start) {
+      return (
+        <>
+          <span ref={textRef} className={truncateStyles[position]}>
+            {content}
+            {position === TruncatePosition.start && <Fragment>&lrm;</Fragment>}
           </span>
-          <span className={styles.truncateEnd}>{sliceContent(content, trailingNumChars)[1]}</span>
-        </Fragment>
-      )}
-      {position === TruncatePosition.middle && content.length - trailingNumChars <= minWidthCharacters && (
+        </>
+      );
+    }
+
+    const shouldSliceContent = content.length - trailingNumChars > minWidthCharacters;
+    return (
+      <>
         <Fragment>
           <span ref={textRef} className={styles.truncateStart}>
-            {content}
+            {shouldSliceContent ? sliceTrailingContent(content, trailingNumChars)[0] : content}
           </span>
+          {shouldSliceContent && (
+            <span className={styles.truncateEnd}>{sliceTrailingContent(content, trailingNumChars)[1]}</span>
+          )}
         </Fragment>
-      )}
+      </>
+    );
+  };
+
+  const renderMaxDisplayContent = () => {
+    const renderVisibleContent = (contentToRender: string) => (
+      <span className={`${styles.truncate}__text`}>{contentToRender}</span>
+    );
+    if (!isTruncated) {
+      return renderVisibleContent(content);
+    }
+
+    const omissionElement = (
+      <span className={`${styles.truncate}__omission`} aria-hidden="true">
+        {omissionContent}
+      </span>
+    );
+    const renderVisuallyHiddenContent = (contentToHide: string) => (
+      <span className="pf-v6-screen-reader">{contentToHide}</span>
+    );
+
+    if (position === TruncatePosition.start) {
+      return (
+        <>
+          {renderVisuallyHiddenContent(content.slice(0, maxCharsDisplayed * -1))}
+          {omissionElement}
+          {renderVisibleContent(content.slice(maxCharsDisplayed * -1))}
+        </>
+      );
+    }
+    if (position === TruncatePosition.end) {
+      return (
+        <>
+          {renderVisibleContent(content.slice(0, maxCharsDisplayed))}
+          {omissionElement}
+          {renderVisuallyHiddenContent(content.slice(maxCharsDisplayed))}
+        </>
+      );
+    }
+
+    const trueMiddleStart = Math.floor(maxCharsDisplayed / 2);
+    const trueMiddleEnd = Math.ceil(maxCharsDisplayed / 2) * -1;
+    return (
+      <>
+        {renderVisibleContent(content.slice(0, trueMiddleStart))}
+        {omissionElement}
+        {renderVisuallyHiddenContent(content.slice(trueMiddleStart, trueMiddleEnd))}
+        {renderVisibleContent(content.slice(trueMiddleEnd))}
+      </>
+    );
+  };
+
+  const truncateBody = (
+    <span
+      ref={subParentRef}
+      className={css(styles.truncate, shouldRenderByMaxChars && styles.modifiers.fixed, className)}
+      {...props}
+    >
+      {!shouldRenderByMaxChars ? renderResizeObserverContent() : renderMaxDisplayContent()}
     </span>
   );
 

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

@@ -1,4 +1,4 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, within } from '@testing-library/react';
 import { Truncate } from '../Truncate';
 import styles from '@patternfly/react-styles/css/components/Truncate/truncate';
 import '@testing-library/jest-dom';
@@ -24,7 +24,7 @@ test(`renders with class ${styles.truncate}`, () => {
 
   const test = screen.getByLabelText('test-id');
 
-  expect(test).toHaveClass(styles.truncate);
+  expect(test).toHaveClass(styles.truncate, { exact: true });
 });
 
 test('renders with custom class name passed via prop', () => {
@@ -148,3 +148,71 @@ test('renders with inherited element props spread to the component', () => {
 
   expect(screen.getByTestId('test-id')).toHaveAccessibleName('labelling-id');
 });
+
+describe('Truncation with maxCharsDisplayed', () => {
+  test(`Does not render with class ${styles.modifiers.fixed} when maxCharsDisplayed is 0`, () => {
+    render(<Truncate maxCharsDisplayed={0} data-testid="truncate-component" content="Test content" />);
+
+    expect(screen.getByTestId('truncate-component')).not.toHaveClass(styles.modifiers.fixed);
+  });
+
+  test(`Renders with class ${styles.modifiers.fixed} when maxCharsDisplayed is greater than 0`, () => {
+    render(<Truncate maxCharsDisplayed={1} data-testid="truncate-component" content="Test content" />);
+
+    expect(screen.getByTestId('truncate-component')).toHaveClass(styles.modifiers.fixed);
+  });
+
+  test('Renders with hidden truncated content at end by default when maxCharsDisplayed is passed', () => {
+    render(<Truncate content="Default end position content truncated" maxCharsDisplayed={6} />);
+
+    expect(screen.getByText('Defaul')).toHaveClass(`${styles.truncate}__text`, { exact: true });
+    expect(screen.getByText('t end position content truncated')).toHaveClass('pf-v6-screen-reader');
+  });
+
+  test('Renders with hidden truncated content at middle position when maxCharsDisplayed is passed and position="middle"', () => {
+    render(<Truncate position="middle" content="Middle position contents being truncated" maxCharsDisplayed={10} />);
+
+    expect(screen.getByText('Middl')).toHaveClass(`${styles.truncate}__text`, { exact: true });
+    expect(screen.getByText('e position contents being trun')).toHaveClass('pf-v6-screen-reader');
+    expect(screen.getByText('cated')).toHaveClass(`${styles.truncate}__text`, { exact: true });
+  });
+
+  test('Renders with hidden truncated content at start when maxCharsDisplayed is passed and position="start"', () => {
+    render(<Truncate position="start" content="Start position content truncated" maxCharsDisplayed={6} />);
+
+    expect(screen.getByText('Start position content tru')).toHaveClass('pf-v6-screen-reader');
+    expect(screen.getByText('ncated')).toHaveClass(`${styles.truncate}__text`, { exact: true });
+  });
+
+  test('Renders full content when maxCharsDisplayed exceeds the length of the content', () => {
+    render(<Truncate content="This full content is rendered" maxCharsDisplayed={90} />);
+
+    expect(screen.getByText('This full content is rendered')).toHaveClass(`${styles.truncate}__text`, { exact: true });
+  });
+
+  test('Renders ellipsis as omission content by default', () => {
+    render(<Truncate content="Test truncation content" maxCharsDisplayed={5} />);
+
+    expect(screen.getByText('\u2026')).toHaveClass(`${styles.truncate}__omission`, { exact: true });
+    expect(screen.getByText('\u2026')).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  test('Renders custom omission content when omissionContent is passed', () => {
+    render(<Truncate omissionContent="---" content="Test truncation content" maxCharsDisplayed={5} />);
+
+    expect(screen.getByText('---')).toHaveClass(`${styles.truncate}__omission`, { exact: true });
+    expect(screen.getByText('---')).toHaveAttribute('aria-hidden', 'true');
+  });
+
+  test('Does not render omission content when maxCharsDisplayed exceeds the length of the content ', () => {
+    render(<Truncate content="Test truncation content" maxCharsDisplayed={99} />);
+
+    expect(screen.queryByText('\u2026')).not.toBeInTheDocument();
+  });
+
+  test('Matches snapshot with default position', () => {
+    const { asFragment } = render(<Truncate content="Test truncation content" maxCharsDisplayed={3} />);
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});