feat(component): add header tooltip for worksheet component (#1095)

bigcommerce · Jan 16, 2023 · 9c26b3a · 9c26b3a
1 parent 18b2aa2
commit 9c26b3a
Show file tree

Hide file tree

Showing 7 changed files with 170 additions and 49 deletions.
diff --git a/packages/big-design/src/components/Table/HeaderCell/HeaderCell.tsx b/packages/big-design/src/components/Table/HeaderCell/HeaderCell.tsx
@@ -66,7 +66,6 @@ const InternalHeaderCell = <T extends TableItem>({
     );
   };
 
-  // TODO: Update this. Return early if we don't have tooltip.
   const renderTooltip = () => {
     if (typeof tooltip === 'string' && tooltip.length > 0) {
       return (

diff --git a/packages/big-design/src/components/Worksheet/Worksheet.tsx b/packages/big-design/src/components/Worksheet/Worksheet.tsx
@@ -1,7 +1,18 @@
-import React, { createContext, createRef, useEffect, useMemo, useRef } from 'react';
+import { BaselineHelpIcon } from '@bigcommerce/big-design-icons';
+import React, {
+  createContext,
+  createRef,
+  useCallback,
+  useEffect,
+  useId,
+  useMemo,
+  useRef,
+} from 'react';
 import { StoreApi } from 'zustand';
 
 import { typedMemo } from '../../utils';
+import { Box } from '../Box';
+import { Tooltip } from '../Tooltip';
 
 import { UpdateItemsProvider } from './context';
 import { BaseState, createWorksheetStore, useKeyEvents, useWorksheetStore } from './hooks';
@@ -31,6 +42,7 @@ const InternalWorksheet = typedMemo(
     const tableRef = createRef<HTMLTableElement>();
     const shouldBeTriggeredOnChange = useRef(false);
     const { store, useStore } = useWorksheetStore();
+    const tooltipId = useId();
 
     const setRows = useStore(store, (state) => state.setRows);
     const setColumns = useStore(store, (state) => state.setColumns);
@@ -89,20 +101,47 @@ const InternalWorksheet = typedMemo(
       }
     }, [invalidCells, onErrors, rows]);
 
+    const getRenderedTooltip = useCallback(
+      (tooltip?: string) => {
+        if (typeof tooltip === 'string' && tooltip.length > 0) {
+          return (
+            <Tooltip
+              id={tooltipId}
+              placement="right"
+              trigger={
+                <Box as="span" marginLeft="xxSmall">
+                  <BaselineHelpIcon
+                    aria-describedby={tooltipId}
+                    size="medium"
+                    title="Hover or focus for additional context."
+                  />
+                </Box>
+              }
+            >
+              {tooltip}
+            </Tooltip>
+          );
+        }
+
+        return null;
+      },
+      [tooltipId],
+    );
+
     const renderedHeaders = useMemo(
       () => (
         <thead>
           <tr>
             <Status />
             {expandedColumns.map((column, index) => (
               <Header columnType={column.type} columnWidth={column.width || 'auto'} key={index}>
-                {column.header}
+                {column.header} {getRenderedTooltip(column.tooltip)}
               </Header>
             ))}
           </tr>
         </thead>
       ),
-      [expandedColumns],
+      [expandedColumns, getRenderedTooltip],
     );
 
     const tableHasStaticWidth = useMemo(