Merge pull request #60 from patternfly/truncated_text

feat: add TruncateText component

packages/module/patternfly-docs/content/examples/TruncatedText/TruncatedText.md

@@ -0,0 +1,23 @@
+---
+# Sidenav top-level section
+# should be the same for all markdown files
+section: AI-infra-ui-components
+# Sidenav secondary level section
+# should be the same for all markdown files
+id: TruncatedText
+# Tab (react | react-demos | html | html-demos | design-guidelines | accessibility)
+source: react
+# If you use typescript, the name of the interface to display props for
+# These are found through the sourceProps function provided in patternfly-docs.source.js
+propComponents: ['TruncatedText']
+---
+
+import { TruncatedText } from "@patternfly/ai-infra-ui-components";
+
+Note: this component documents the API and enhances the [existing TruncatedText](https://github.com/opendatahub-io/odh-dashboard/blob/main/frontend/src/components/TruncatedText.tsx) component from odh-dashboard. It can be imported from [@patternfly/ai-infra-ui-components](https://www.npmjs.com/package/@patternfly/AI-infra-ui-components). Alternatively, it can be used within the odh-dashboard via the import: `~/components/TruncatedText`
+
+### Example
+
+```js file="./TruncatedTextBasic.tsx"
+
+```

packages/module/patternfly-docs/content/examples/TruncatedText/TruncatedTextBasic.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import { TruncatedText } from "@patternfly/ai-infra-ui-components";
+
+export const TruncatedTextBasic: React.FunctionComponent = () => (
+    <>
+      <div style={{
+        width: '320px',
+        height: '100px',
+      }}>
+        <TruncatedText
+          maxLines={2}
+          content="Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan. Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan."
+        />
+      </div>
+      <div style={{
+        width: '320px',
+        height: '100px',
+      }}>
+        <TruncatedText
+          maxLines={3}
+          content="Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan. Vestibulum interdum risus et enim faucibus, sit amet molestie est accumsan."
+        />
+      </div>
+    </>
+  )

packages/module/src/TruncatedText/TruncatedText.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { Tooltip } from '@patternfly/react-core';
+
+export type TruncatedTextProps = React.HTMLProps<HTMLSpanElement> & {
+  /** Maximum number of lines before the text gets truncated */
+  maxLines: number;
+  /** Content to be conditionally truncated */
+  content: string;
+};
+
+export const TruncatedText: React.FunctionComponent<TruncatedTextProps> = ({
+  maxLines,
+  content,
+  ...props
+}: TruncatedTextProps) => {
+  const outerElementRef = React.useRef<HTMLElement>(null);
+  const textElementRef = React.useRef<HTMLElement>(null);
+  const [isTruncated, setIsTruncated] = React.useState<boolean>(false);
+
+  const updateTruncation = React.useCallback(() => {
+    if (textElementRef.current && outerElementRef.current) {
+      setIsTruncated(textElementRef.current.offsetHeight > outerElementRef.current.offsetHeight);
+    }
+  }, []);
+
+  const truncateBody = (
+    <span
+      {...props}
+      style={{
+        display: '-webkit-box',
+        WebkitBoxOrient: 'vertical',
+        overflowWrap: 'anywhere',
+        overflow: 'hidden',
+        WebkitLineClamp: maxLines,
+        ...(props.style || {}),
+      }}
+      ref={outerElementRef}
+      onMouseEnter={(e) => {
+        props.onMouseEnter?.(e);
+        updateTruncation();
+      }}
+      onFocus={(e) => {
+        props.onFocus?.(e);
+        updateTruncation();
+      }}
+    >
+      <span ref={textElementRef}>{content}</span>
+    </span>
+  );
+
+  return (
+    <Tooltip hidden={!isTruncated ? true : undefined} content={content}>
+      {truncateBody}
+    </Tooltip>
+  );
+};
+

packages/module/src/TruncatedText/index.ts

@@ -0,0 +1 @@
+export * from './TruncatedText';

packages/module/src/index.ts

@@ -1 +1,2 @@
 export * from './DeleteModal';
+export * from './TruncatedText';