feat: implementing an overflow tooltip for the Text component

.changeset/fifty-bats-smash.md

@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": minor
+---
+
+Updated the Text component to include an optional tooltip on overflow

packages/components/__tests__/Text.spec.tsx

@@ -0,0 +1,50 @@
+import { describe, expect, it } from 'vitest';
+
+import { render, screen } from '../../../test/utils';
+import { Text } from '../src';
+
+describe('Text', () => {
+	it('renders', () => {
+		render(<Text>Hello world</Text>);
+		expect(screen.getByText('Hello world')).toBeVisible();
+	});
+
+	it('renders with different sizes', () => {
+		const { rerender } = render(<Text size="small">Small text</Text>);
+		expect(screen.getByText('Small text')).toBeVisible();
+
+		rerender(<Text size="medium">Medium text</Text>);
+		expect(screen.getByText('Medium text')).toBeVisible();
+
+		rerender(<Text size="large">Large text</Text>);
+		expect(screen.getByText('Large text')).toBeVisible();
+	});
+
+	it('renders with bold prop', () => {
+		render(<Text bold>Bold text</Text>);
+		expect(screen.getByText('Bold text')).toBeVisible();
+	});
+
+	it('renders with maxLines', () => {
+		render(<Text maxLines={2}>Long text that should be truncated</Text>);
+		expect(screen.getByText('Long text that should be truncated')).toBeVisible();
+	});
+
+	it('renders with overflow tooltip when enabled', () => {
+		render(
+			<Text maxLines={1} showTooltipOnOverflow>
+				Text with overflow tooltip
+			</Text>,
+		);
+		expect(screen.getByText('Text with overflow tooltip')).toBeVisible();
+	});
+
+	it('renders with custom tooltip content', () => {
+		render(
+			<Text maxLines={1} showTooltipOnOverflow tooltipContent="Custom tooltip">
+				Truncated text
+			</Text>,
+		);
+		expect(screen.getByText('Truncated text')).toBeVisible();
+	});
+});

packages/components/src/Text.tsx

@@ -1,11 +1,15 @@
-import type { Ref } from 'react';
+import type { ReactNode, Ref } from 'react';
 import type { TextProps as AriaTextProps, ContextValue } from 'react-aria-components';
+import type { TooltipProps } from './Tooltip';
 
 import { cva, cx } from 'class-variance-authority';
-import { createContext } from 'react';
+import { createContext, useCallback, useEffect, useRef, useState } from 'react';
+import { useFocus, useFocusVisible, useHover } from 'react-aria';
 import { Text as AriaText } from 'react-aria-components';
 
+import { Focusable } from './Focusable';
 import styles from './styles/Text.module.css';
+import { Tooltip, TooltipTrigger } from './Tooltip';
 import { useLPContextProps } from './utils';
 
 const textStyles = cva(styles.text, {
@@ -37,6 +41,14 @@ interface TextProps extends Omit<AriaTextProps, 'className' | 'elementType'> {
 	elementType?: AriaTextProps['elementType'];
 	/** Optional CSS class name */
 	className?: AriaTextProps['className'];
+	/** Enable tooltip on text overflow */
+	showTooltipOnOverflow?: boolean;
+	/** Custom tooltip content. If not provided, uses the text children as tooltip content */
+	tooltipContent?: ReactNode;
+	/** Tooltip placement */
+	tooltipPlacement?: TooltipProps['placement'];
+	/** Additional CSS class name for the tooltip */
+	tooltipClassName?: string;
 }
 
 const TextContext = createContext<ContextValue<TextProps, HTMLElement>>(null);
@@ -48,6 +60,38 @@ const getDefaultElementType = (size: 'small' | 'medium' | 'large'): string => {
 	return 'span';
 };
 
+/**
+ * Custom hook to detect text overflow
+ */
+const useTextOverflow = () => {
+	const ref = useRef<HTMLElement>(null);
+	const [hasOverflow, setHasOverflow] = useState(false);
+
+	const checkOverflow = useCallback(() => {
+		if (!ref.current) return;
+
+		const element = ref.current;
+		const isOverflowing =
+			element.scrollHeight > element.clientHeight || element.scrollWidth > element.clientWidth;
+
+		setHasOverflow(isOverflowing);
+	}, []);
+
+	useEffect(() => {
+		checkOverflow();
+
+		// Recheck on window resize
+		const resizeObserver = new ResizeObserver(checkOverflow);
+		if (ref.current) {
+			resizeObserver.observe(ref.current);
+		}
+
+		return () => resizeObserver.disconnect();
+	}, [checkOverflow]);
+
+	return { ref, hasOverflow };
+};
+
 /**
  * A generic Text component for body text.
  *
@@ -56,21 +100,49 @@ const getDefaultElementType = (size: 'small' | 'medium' | 'large'): string => {
  * Built on top of [React Aria `Text` component](https://react-spectrum.adobe.com/react-spectrum/Text.html#text).
  */
 const Text = ({
-	ref,
+	ref: externalRef,
 	size = 'medium',
 	bold = false,
 	maxLines,
 	elementType,
 	className,
 	style,
+	showTooltipOnOverflow = false,
+	tooltipContent,
+	tooltipPlacement = 'top',
+	tooltipClassName,
 	...props
 }: TextProps) => {
-	[props, ref] = useLPContextProps(props, ref, TextContext);
+	[props, externalRef] = useLPContextProps(props, externalRef, TextContext);
 
-	return (
+	const { ref: overflowRef, hasOverflow } = useTextOverflow();
+	const { hoverProps, isHovered } = useHover({});
+	const [isFocused, setFocused] = useState(false);
+	const { focusProps } = useFocus({
+		onFocus: () => setFocused(true),
+		onBlur: () => setFocused(false),
+	});
+	const { isFocusVisible } = useFocusVisible();
+
+	// Merge refs
+	const mergedRef = useCallback(
+		(element: HTMLElement | null) => {
+			overflowRef.current = element;
+
+			if (typeof externalRef === 'function') {
+				externalRef(element);
+			} else if (externalRef && 'current' in externalRef) {
+				externalRef.current = element;
+			}
+		},
+		[externalRef, overflowRef],
+	);
+
+	const textElement = (
 		<AriaText
 			{...props}
-			ref={ref}
+			{...(showTooltipOnOverflow ? { ...hoverProps, ...focusProps } : {})}
+			ref={mergedRef}
 			elementType={elementType || getDefaultElementType(size)}
 			className={cx(textStyles({ size, bold }), maxLines && styles.truncate, className)}
 			style={{
@@ -83,6 +155,22 @@ const Text = ({
 			{props.children}
 		</AriaText>
 	);
+
+	if (!showTooltipOnOverflow) {
+		return textElement;
+	}
+
+	return (
+		<TooltipTrigger
+			isDisabled={!hasOverflow}
+			isOpen={hasOverflow && (isHovered || (isFocusVisible && isFocused))}
+		>
+			<Focusable>{textElement}</Focusable>
+			<Tooltip placement={tooltipPlacement} className={tooltipClassName}>
+				{tooltipContent ?? props.children}
+			</Tooltip>
+		</TooltipTrigger>
+	);
 };
 
 export { Text, TextContext, textStyles };

packages/components/stories/Text.stories.tsx

@@ -37,6 +37,23 @@ For headings, use [Heading](/docs/components-content-heading--docs). For labels,
 		maxLines: {
 			control: { type: 'number' },
 		},
+		showTooltipOnOverflow: {
+			control: { type: 'boolean' },
+			description: 'Show tooltip when text overflows',
+		},
+		tooltipContent: {
+			control: { type: 'text' },
+			description: 'Custom tooltip content (defaults to text children)',
+		},
+		tooltipPlacement: {
+			control: { type: 'select' },
+			options: ['top', 'bottom', 'left', 'right', 'start', 'end'],
+			description: 'Tooltip placement',
+		},
+		tooltipClassName: {
+			control: { type: 'text' },
+			description: 'Additional CSS class for tooltip',
+		},
 		elementType: {
 			table: {
 				disable: true,
@@ -124,3 +141,87 @@ export const Truncation: Story = {
 		</div>
 	),
 };
+
+/**
+ * Show a tooltip when text overflows by enabling the `showTooltipOnOverflow` prop.
+ * The tooltip only appears when the text is actually truncated.
+ */
+export const OverflowTooltip: Story = {
+	render: () => (
+		<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', width: '250px' }}>
+			<div>
+				<p style={{ marginBottom: '0.5rem', fontSize: '14px', color: '#666' }}>
+					Single line with overflow tooltip:
+				</p>
+				<Text maxLines={1} showTooltipOnOverflow>
+					This is a very long text that will be truncated and show a tooltip on hover or focus
+				</Text>
+			</div>
+
+			<div>
+				<p style={{ marginBottom: '0.5rem', fontSize: '14px', color: '#666' }}>
+					Multi-line (2 lines) with overflow tooltip:
+				</p>
+				<Text maxLines={2} showTooltipOnOverflow>
+					This is a longer text that will be truncated after two lines and show a tooltip when you
+					hover over it. The tooltip contains the full text content.
+				</Text>
+			</div>
+
+			<div>
+				<p style={{ marginBottom: '0.5rem', fontSize: '14px', color: '#666' }}>
+					No overflow (tooltip won't show):
+				</p>
+				<Text maxLines={2} showTooltipOnOverflow>
+					Short text
+				</Text>
+			</div>
+		</div>
+	),
+};
+
+/**
+ * Customize the tooltip content and placement.
+ */
+export const CustomTooltip: Story = {
+	render: () => (
+		<div style={{ display: 'flex', flexDirection: 'column', gap: '2rem', width: '250px' }}>
+			<div>
+				<p style={{ marginBottom: '0.5rem', fontSize: '14px', color: '#666' }}>
+					Custom tooltip content:
+				</p>
+				<Text
+					maxLines={1}
+					showTooltipOnOverflow
+					tooltipContent="This is custom tooltip text that's different from the truncated content"
+				>
+					This is the truncated text that appears in the component
+				</Text>
+			</div>
+
+			<div>
+				<p style={{ marginBottom: '0.5rem', fontSize: '14px', color: '#666' }}>Bottom placement:</p>
+				<Text maxLines={1} showTooltipOnOverflow tooltipPlacement="bottom">
+					Hover to see tooltip below this text. This text is long enough to be truncated.
+				</Text>
+			</div>
+
+			<div>
+				<p style={{ marginBottom: '0.5rem', fontSize: '14px', color: '#666' }}>
+					Different sizes with tooltips:
+				</p>
+				<div style={{ display: 'flex', flexDirection: 'column', gap: '0.5rem' }}>
+					<Text size="small" maxLines={1} showTooltipOnOverflow>
+						Small text with overflow tooltip - this text will be truncated
+					</Text>
+					<Text size="medium" maxLines={1} showTooltipOnOverflow>
+						Medium text with overflow tooltip - this text will be truncated
+					</Text>
+					<Text size="large" maxLines={1} showTooltipOnOverflow>
+						Large text with overflow tooltip - this text will be truncated
+					</Text>
+				</div>
+			</div>
+		</div>
+	),
+};