[setup] Add missing EuiTextTruncate classes

elastic · Sep 21, 2023 · 82f0792 · 82f0792
1 parent cafa0ba
commit 82f0792
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 8 deletions.
diff --git a/src/components/text_truncate/__snapshots__/text_truncate.test.tsx.snap b/src/components/text_truncate/__snapshots__/text_truncate.test.tsx.snap
@@ -3,10 +3,11 @@
 exports[`EuiTextTruncate renders 1`] = `
 <div
   aria-label="aria-label"
-  class="testClass1 testClass2 emotion-euiTextTruncate-euiTestCss"
+  class="euiTextTruncate testClass1 testClass2 emotion-euiTextTruncate-euiTestCss"
   data-test-subj="test subject string"
 >
   <span
+    class="euiTextTruncate__fullText"
     data-test-subj="fullText"
   >
     Hello world

diff --git a/src/components/text_truncate/text_truncate.styles.ts b/src/components/text_truncate/text_truncate.styles.ts
@@ -25,13 +25,13 @@ export const euiTextTruncateStyles = {
    * and there'll be no need for the entire component at that point 🙏
    */
   // Makes the truncated text unselectable/un-clickable
-  truncatedText: css`
+  euiTextTruncate__truncatedText: css`
     user-select: none;
     pointer-events: none;
   `,
   // Positions the full text on top of the truncated text (so that clicking targets it)
   // and gives it a color opacity of 0 so that it's not actually visible
-  fullText: css`
+  euiTextTruncate__fullText: css`
     position: absolute;
     inset: 0;
     overflow: hidden;

diff --git a/src/components/text_truncate/text_truncate.tsx b/src/components/text_truncate/text_truncate.tsx
@@ -15,6 +15,7 @@ import React, {
   useMemo,
   useCallback,
 } from 'react';
+import classNames from 'classnames';
 
 import { useCombinedRefs } from '../../services';
 import {
@@ -24,7 +25,7 @@ import {
 import type { CommonProps } from '../common';
 
 import { TruncationUtilsWithDOM, TruncationUtilsWithCanvas } from './utils';
-import { euiTextTruncateStyles } from './text_truncate.styles';
+import { euiTextTruncateStyles as styles } from './text_truncate.styles';
 
 const TRUNCATION_TYPES = ['end', 'start', 'startEnd', 'middle'] as const;
 export type EuiTextTruncationTypes = (typeof TRUNCATION_TYPES)[number];
@@ -129,6 +130,7 @@ const EuiTextTruncateWithWidth: FunctionComponent<
   ellipsis = '…',
   containerRef,
   measurementRenderAPI = 'dom',
+  className,
   ...rest
 }) => {
   // Note: This needs to be a state and not a ref to trigger a rerender on mount
@@ -214,26 +216,34 @@ const EuiTextTruncateWithWidth: FunctionComponent<
 
   return (
     <div
-      css={euiTextTruncateStyles.euiTextTruncate}
+      className={classNames('euiTextTruncate', className)}
+      css={styles.euiTextTruncate}
       ref={refs}
       title={isTruncating ? text : undefined}
       {...rest}
     >
       {isTruncating ? (
         <>
           <span
-            css={euiTextTruncateStyles.truncatedText}
+            className="euiTextTruncate__truncatedText"
+            css={styles.euiTextTruncate__truncatedText}
             aria-hidden
             data-test-subj="truncatedText"
           >
             {children ? children(truncatedText) : truncatedText}
           </span>
-          <span css={euiTextTruncateStyles.fullText} data-test-subj="fullText">
+          <span
+            className="euiTextTruncate__fullText"
+            css={styles.euiTextTruncate__fullText}
+            data-test-subj="fullText"
+          >
             {text}
           </span>
         </>
       ) : (
-        <span data-test-subj="fullText">{text}</span>
+        <span className="euiTextTruncate__fullText" data-test-subj="fullText">
+          {children ? children(text) : text}
+        </span>
       )}
     </div>
   );