Updated classes based on core updates

Author: Eric Olkowski

packages/react-core/src/components/Truncate/Truncate.tsx

@@ -173,10 +173,18 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
   };
 
   const renderMaxDisplayContent = () => {
+    const renderVisibleContent = (contentToRender: string) => (
+      <span className={`${styles.truncate}__text`}>{contentToRender}</span>
+    );
     if (!isTruncated) {
-      return content;
+      return renderVisibleContent(content);
     }
-    const omissionElement = <span aria-hidden="true">{omissionContent}</span>;
+
+    const omissionElement = (
+      <span className={`${styles.truncate}__omission`} aria-hidden="true">
+        {omissionContent}
+      </span>
+    );
     const renderVisuallyHiddenContent = (contentToHide: string) => (
       <span className="pf-v6-screen-reader">{contentToHide}</span>
     );
@@ -186,14 +194,14 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
         <>
           {renderVisuallyHiddenContent(content.slice(0, maxCharsDisplayed * -1))}
           {omissionElement}
-          <span>{content.slice(maxCharsDisplayed * -1)}</span>
+          {renderVisibleContent(content.slice(maxCharsDisplayed * -1))}
         </>
       );
     }
     if (position === TruncatePosition.end) {
       return (
         <>
-          <span>{content.slice(0, maxCharsDisplayed)}</span>
+          {renderVisibleContent(content.slice(0, maxCharsDisplayed))}
           {omissionElement}
           {renderVisuallyHiddenContent(content.slice(maxCharsDisplayed))}
         </>
@@ -204,18 +212,18 @@ export const Truncate: React.FunctionComponent<TruncateProps> = ({
     const trueMiddleEnd = Math.ceil(maxCharsDisplayed / 2) * -1;
     return (
       <>
-        <span>{content.slice(0, trueMiddleStart)}</span>
+        {renderVisibleContent(content.slice(0, trueMiddleStart))}
         {omissionElement}
         {renderVisuallyHiddenContent(content.slice(trueMiddleStart, trueMiddleEnd))}
-        <span>{content.slice(trueMiddleEnd)}</span>
+        {renderVisibleContent(content.slice(trueMiddleEnd))}
       </>
     );
   };
 
   const truncateBody = (
     <span
       ref={subParentRef}
-      className={css(styles.truncate, shouldRenderByMaxChars && 'class-tbd', className)}
+      className={css(styles.truncate, shouldRenderByMaxChars && styles.modifiers.fixed, className)}
       {...props}
     >
       {!shouldRenderByMaxChars ? renderResizeObserverContent() : renderMaxDisplayContent()}

packages/react-core/src/components/Truncate/__tests__/Truncate.test.tsx

@@ -150,58 +150,66 @@ test('renders with inherited element props spread to the component', () => {
 });
 
 describe('Truncation with maxCharsDisplayed', () => {
-  test(`Does not render with class class-tbd when maxCharsDisplayed is 0`, () => {
+  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('class-tbd');
+    expect(screen.getByTestId('truncate-component')).not.toHaveClass(styles.modifiers.fixed);
   });
 
-  test(`Renders with class class-tbd when maxCharsDisplayed is greater than 0`, () => {
+  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('class-tbd');
+    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')).not.toHaveClass('pf-v6-screen-reader');
+    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')).not.toHaveClass('pf-v6-screen-reader');
+    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')).not.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 content="Start position content truncated" maxCharsDisplayed={4} />);
+    render(<Truncate position="start" content="Start position content truncated" maxCharsDisplayed={6} />);
 
-    expect(screen.getByText('Star')).not.toHaveClass('pf-v6-screen-reader');
-    expect(screen.getByText('t position content truncated')).toHaveClass('pf-v6-screen-reader');
+    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')).not.toHaveClass('pf-v6-screen-reader');
+    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} />);
 

packages/react-core/src/components/Truncate/__tests__/__snapshots__/Truncate.test.tsx.snap

@@ -14,13 +14,16 @@ exports[`Truncation with maxCharsDisplayed Matches snapshot with default positio
       position: top
     </p>
     <span
-      class="pf-v6-c-truncate class-tbd"
+      class="pf-v6-c-truncate pf-m-fixed"
     >
-      <span>
+      <span
+        class="pf-v6-c-truncate__text"
+      >
         Tes
       </span>
       <span
         aria-hidden="true"
+        class="pf-v6-c-truncate__omission"
       >
         …
       </span>