feat(DataList): add tooltip to truncated DataListCell

Author: kmcfaul

packages/react-core/src/components/DataList/DataListCell.tsx

@@ -1,6 +1,7 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/DataList/data-list';
 import { DataListWrapModifier } from './DataList';
+import { Tooltip } from '../Tooltip';
 
 export interface DataListCellProps extends Omit<React.HTMLProps<HTMLDivElement>, 'width'> {
   /** Content rendered inside the DataList cell */
@@ -28,20 +29,38 @@ export const DataListCell: React.FunctionComponent<DataListCellProps> = ({
   isIcon = false,
   wrapModifier = null,
   ...props
-}: DataListCellProps) => (
-  <div
-    className={css(
-      styles.dataListCell,
-      width > 1 && styles.modifiers[`flex_${width}` as 'flex_2' | 'flex_3' | 'flex_4' | 'flex_5'],
-      !isFilled && styles.modifiers.noFill,
-      alignRight && styles.modifiers.alignRight,
-      isIcon && styles.modifiers.icon,
-      className,
-      wrapModifier && styles.modifiers[wrapModifier]
-    )}
-    {...props}
-  >
-    {children}
-  </div>
-);
+}: DataListCellProps) => {
+  const cellRef = React.useRef(null);
+  const [isTooltipVisible, setIsTooltipVisible] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!cellRef.current || wrapModifier !== 'truncate') {
+      return;
+    }
+    const showTooltip = cellRef.current && cellRef.current.offsetWidth < cellRef.current.scrollWidth;
+    if (isTooltipVisible !== showTooltip) {
+      setIsTooltipVisible(showTooltip);
+    }
+  }, [cellRef, wrapModifier, isTooltipVisible]);
+
+  return (
+    <div
+      className={css(
+        styles.dataListCell,
+        width > 1 && styles.modifiers[`flex_${width}` as 'flex_2' | 'flex_3' | 'flex_4' | 'flex_5'],
+        !isFilled && styles.modifiers.noFill,
+        alignRight && styles.modifiers.alignRight,
+        isIcon && styles.modifiers.icon,
+        className,
+        wrapModifier && styles.modifiers[wrapModifier]
+      )}
+      {...(isTooltipVisible && { tabIndex: 0 })}
+      ref={cellRef}
+      {...props}
+    >
+      {children}
+      {isTooltipVisible && <Tooltip content={children} triggerRef={cellRef} />}
+    </div>
+  );
+};
 DataListCell.displayName = 'DataListCell';