fix: use just CSS for cell highlighting

homebound-team · Nov 21, 2024 · 50b9c12 · 50b9c12
1 parent c3fb6f0
commit 50b9c12
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 29 deletions.
diff --git a/src/components/Table/GridTable.stories.tsx b/src/components/Table/GridTable.stories.tsx
@@ -15,6 +15,7 @@ import {
   defaultStyle,
   dragHandleColumn,
   emptyCell,
+  getTableStyles,
   GridCellAlignment,
   GridColumn,
   GridDataRow,
@@ -2204,7 +2205,7 @@ export function EditableRows() {
       ),
       editableOnHover: true,
     }),
-    w: "100px",
+    w: "120px",
   };
 
   const date1Column: GridColumn<EditableRow> = {
@@ -2241,11 +2242,17 @@ export function EditableRows() {
     w: "120px",
   };
 
+  const style = getTableStyles({ bordered: true, allWhite: true });
+
   return (
     <GridTable
       columns={[nameColumn, selectColumn, date1Column, date2Column]}
       rows={rows}
-      style={{ bordered: true, allWhite: true, rowHoverColor: Palette.Blue50 }}
+      style={{
+        ...style,
+        rowHoverColor: Palette.Blue50,
+        rowEditableCellBorderColor: Palette.Blue300,
+      }}
     />
   );
 }
diff --git a/src/components/Table/GridTable.tsx b/src/components/Table/GridTable.tsx
@@ -260,6 +260,7 @@ export function GridTable<R extends Kinded, X extends Only<GridTableXss, X> = an
   };
 
   const style = resolveStyles(maybeStyle);
+  console.log(style);
   const { tableState } = api;
 
   tableState.onRowSelect = onRowSelect;

diff --git a/src/components/Table/TableStyles.tsx b/src/components/Table/TableStyles.tsx
@@ -175,6 +175,7 @@ function memoizedTableStyles() {
         presentationSettings: { borderless: true, typeScale: "xs", wrap: rowHeight === "flexible" },
         levels: grouped ? groupedLevels : defaultLevels,
         rowHoverColor: Palette.Blue100,
+        rowEditableCellBorderColor: Palette.Blue300,
         keptGroupRowCss: Css.bgYellow100.gray900.xsMd.df.aic.$,
         keptLastRowCss: Css.boxShadow("inset 0px -14px 8px -11px rgba(63,63,63,.18)").$,
       };

diff --git a/src/components/Table/components/Row.tsx b/src/components/Table/components/Row.tsx
@@ -125,10 +125,11 @@ function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement {
       [`:hover > .${revealOnRowHoverClass} > *`]: Css.vv.$,
     },
     ...{
-      [`.textFieldBaseWrapper`]: Css.pl1.mlPx(-8).br4.ba.bcTransparent.$,
-      [`:hover > .${editableOnRowHoverClass} .textFieldBaseWrapper`]: Css.ba.bc(
-        style.rowEditableCellBorderColor ?? Palette.Blue300,
-      ).$,
+      [`.textFieldBaseWrapper`]: Css.pl1.mlPx(-8).br4.ba.bcTransparent.bgTransparent.$,
+      [`.textFieldBaseWrapper > *`]: Css.bgTransparent.$,
+      [`.${editableOnRowHoverClass}:hover .textFieldBaseWrapper`]: Css.bgBlue100.$,
+      [`:hover:not(:has(.${editableOnRowHoverClass}:hover)) > .${editableOnRowHoverClass} .textFieldBaseWrapper, .${editableOnRowHoverClass}:hover .textFieldBaseWrapper`]:
+        Css.ba.bc(style.rowEditableCellBorderColor ?? Palette.Blue300).$,
     },
     ...(isLastKeptRow && Css.addIn("&>*", style.keptLastRowCss).$),
   };
@@ -231,7 +232,7 @@ function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement {
                 ? numExpandedColumns + 1
                 : 1;
           const revealOnRowHover = isGridCellContent(maybeContent) ? maybeContent.revealOnRowHover : false;
-          const editableOnRowHover = isGridCellContent(maybeContent) ? maybeContent.editableOnHover : false;
+          const editableOnRowHover = isGridCellContent(maybeContent) && !!maybeContent.editableOnHover;
 
           const canSortColumn =
             (sortOn === "client" && column.clientSideSort !== false) ||
@@ -334,6 +335,8 @@ function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement {
             ...(isGridCellContent(maybeContent) && maybeContent.css ? maybeContent.css : {}),
             // Apply cell highlight styles to active cell and hover
             ...Css.if(applyCellHighlight && isCellActive).br4.boxShadow(`inset 0 0 0 1px ${Palette.Blue700}`).$,
+            ...Css.if(editableOnRowHover && isCellActive).addIn("& .textFieldBaseWrapper", Css.bgBlue50.ba.bcBlue500.$)
+              .$,
             // Define the width of the column on each cell. Supports col spans.
             // If we have a 'levelIndent' defined, then subtract that amount from the first content column's width to ensure all columns will still line up properly
             width: `calc(${columnSizes.slice(columnIndex, columnIndex + currentColspan).join(" + ")}${
@@ -343,14 +346,10 @@ function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement {
 
           const cellClassNames = [
             ...(revealOnRowHover ? [revealOnRowHoverClass] : []),
-            ...(editableOnRowHover && (isCellActive || !tableState.activeCellId) ? [editableOnRowHoverClass] : []),
+            ...(editableOnRowHover ? [editableOnRowHoverClass] : []),
           ].join(" ");
 
-          const cellOnHover =
-            isGridCellContent(maybeContent) && maybeContent.editableOnHover
-              ? (enter: boolean) => (enter ? api.setActiveCellId(cellId) : api.setActiveCellId(undefined))
-              : undefined;
-          const cellOnClick = applyCellHighlight ? () => api.setActiveCellId(cellId) : undefined;
+          const cellOnClick = applyCellHighlight || editableOnRowHover ? () => api.setActiveCellId(cellId) : undefined;
           const tooltip = isGridCellContent(maybeContent) ? maybeContent.tooltip : undefined;
 
           const renderFn: RenderCellFn<any> =
@@ -362,17 +361,7 @@ function RowImpl<R extends Kinded, S>(props: RowProps<R>): ReactElement {
                   ? rowClickRenderFn(as, api, currentColspan)
                   : defaultRenderFn(as, currentColspan);
 
-          return renderFn(
-            columnIndex,
-            cellCss,
-            content,
-            row,
-            rowStyle,
-            cellClassNames,
-            cellOnClick,
-            cellOnHover,
-            tooltip,
-          );
+          return renderFn(columnIndex, cellCss, content, row, rowStyle, cellClassNames, cellOnClick, tooltip);
         })
       )}
     </RowTag>

diff --git a/src/components/Table/components/cell.tsx b/src/components/Table/components/cell.tsx
@@ -47,23 +47,19 @@ export type RenderCellFn<R extends Kinded> = (
   rowStyle: RowStyle<R> | undefined,
   classNames: string | undefined,
   onClick: VoidFunction | undefined,
-  onHover: ((enter: boolean) => void) | undefined,
   tooltip: ReactNode | undefined,
 ) => ReactNode;
 
 /** Renders our default cell element, i.e. if no row links and no custom renderCell are used. */
 export const defaultRenderFn: (as: RenderAs, colSpan: number) => RenderCellFn<any> =
-  (as: RenderAs, colSpan) =>
-  (key, css, content, row, rowStyle, classNames: string | undefined, onClick, onHover, tooltip) => {
+  (as: RenderAs, colSpan) => (key, css, content, row, rowStyle, classNames: string | undefined, onClick, tooltip) => {
     const Cell = as === "table" ? "td" : "div";
     return (
       <Cell
         key={key}
         css={{ ...css, ...Css.cursor("default").$ }}
         className={classNames}
         onClick={onClick}
-        onMouseEnter={() => onHover?.(true)}
-        onMouseLeave={() => onHover?.(false)}
         {...(as === "table" && { colSpan })}
       >
         {content}