table consumes css attributes from theme

vuu-ui/packages/vuu-table-extras/src/cell-renderers/pct-progress-cell/PctProgressCell.tsx

@@ -20,9 +20,6 @@ const getPercentageValue = (value: number) => {
 };
 
 export const PctProgressCell = ({ column, columnMap, row }: TableCellProps) => {
-  if (row[0] === 0) {
-    console.log({ row });
-  }
   const value = row[columnMap[column.name]];
 
   const percentageValue = getPercentageValue(value);

vuu-ui/packages/vuu-table/src/Row.css

@@ -9,20 +9,33 @@
     white-space: nowrap;
     }
 
-    .vuuTableRow-even {
-      --row-background: var(--row-background-even);
-    }
+.vuuTableRow-proxy {
+  visibility: hidden;
+}
 
-    .vuuTableRow-highlighted {
-      background-color: var(--vuu-color-gray-10);
-    }
+.vuuTableRow-even {
+  --row-background: var(--row-background-even);
+}
 
+.vuuTableRow-highlighted {
+  background-color: var(--salt-selectable-background-hover);
+}
 
-    .vuuTableRow-selected,
-    .vuuTableRow-selectedEnd {
-      /* background-color: rgb(133,133,137,.16); */
-      background-color: rgb(235,235,236);
-    }
+
+.vuuTableRow-selected,
+.vuuTableRow-selectedEnd {
+  --row-borderColor: var(--salt-separable-secondary-borderColor);
+  background-color: var(--salt-selectable-background-selected);
+}
+
+.vuuTable-zebra {
+  .vuuTableRow-even.vuuTableRow-selected,
+  .vuuTableRow-even.vuuTableRow-selectedEnd {
+    /** thisis really where we want a darken function */
+  background-color: var(--vuu-color-gray-07);
+
+  }
+}
 
     .vuuTableRow-selectedStart {
         --vuu-selection-decorator-left-radius: 5px 0 0 0;
@@ -90,9 +103,6 @@
         --vuu-selection-decorator-bg: white;
       }
 
-      .vuuTableRow-selectedStart.vuuTableRow-selectedEnd {
-
-      }
 
       .vuuTableRow-selectedStart .vuuTableRow-selectionDecorator:before,
       .vuuTableRow-selectedEnd .vuuTableRow-selectionDecorator:before {

vuu-ui/packages/vuu-table/src/Row.tsx

@@ -14,7 +14,13 @@ import {
   RowSelected,
 } from "@finos/vuu-utils";
 import cx from "clsx";
-import { CSSProperties, memo, MouseEvent, useCallback } from "react";
+import {
+  CSSProperties,
+  forwardRef,
+  memo,
+  MouseEvent,
+  useCallback,
+} from "react";
 import { TableCell, TableGroupCell } from "./table-cell";
 
 import "./Row.css";
@@ -37,6 +43,23 @@ export interface RowProps {
 const { IDX, IS_EXPANDED, SELECTED } = metadataKeys;
 const classBase = "vuuTableRow";
 
+// A dummy Table Row rendered once and not visible. We measure this to
+// determine height of Row(s) and monitor it for size changes (in
+// case of runtime density switch). This allows ListItem height to
+// be controlled purely through CSS.
+export const RowProxy = forwardRef<HTMLDivElement, { height?: number }>(
+  function RowProxy({ height }, forwardedRef) {
+    return (
+      <div
+        aria-hidden
+        className={cx(classBase, `${classBase}-proxy`)}
+        ref={forwardedRef}
+        style={{ height }}
+      />
+    );
+  }
+);
+
 // export const Row = memo(
 export const Row = memo(
   ({

vuu-ui/packages/vuu-table/src/Table.css

@@ -21,19 +21,14 @@
 }
 
 .vuuTable-colLines {
-  --cell-borderColor: var(--salt-separable-tertiary-borderColor);
+    --cell-borderColor: var(--salt-separable-tertiary-borderColor);
 }
 
 .vuuTable-rowLines {
-  --row-borderColor: var(--salt-separable-tertiary-borderColor);
-}
-
-.vuuTable-highlight .vuuTableRow:hover {
-  background-color: var(--vuu-color-pink-10-fade-20);
+    --row-borderColor: var(--salt-separable-tertiary-borderColor);
 }
 
 .vuuTable-scrollbarContainer {
-  --scroll-content-width: 1100px;
   border-bottom: none !important;
   border-top: none !important;
   border-left: solid 1px var(--salt-container-primary-borderColor);
@@ -98,7 +93,6 @@
   width: var(--content-width);
   margin: 0;
   border: none;
-  background-color: #fff;
   border-collapse: separate;
   border-spacing: 0;
 }
@@ -136,14 +130,13 @@
 
 
   .sizer-cell {
-    background-color: green !important;
     border: none !important;
     height: 0px;
   }
 
   .vuuDraggable-vuuTable {
     --header-height: 25px;
-    --vuuTableHeaderCell-background: var(--vuu-color-gray-25);
+    --vuuTableHeaderCell-background: var(--salt-container-secondary-background);
   }
 .vuuDraggable-vuuTable {
   --row-height: 25px;

vuu-ui/packages/vuu-table/src/Table.tsx

@@ -27,11 +27,13 @@ import {
   FC,
   ForwardedRef,
   forwardRef,
+  RefCallback,
   RefObject,
+  useCallback,
   useRef,
   useState,
 } from "react";
-import { Row as DefaultRow, RowProps } from "./Row";
+import { Row as DefaultRow, RowProps, RowProxy } from "./Row";
 import { TableHeader } from "./table-header/TableHeader";
 import { useTable } from "./useTable";
 
@@ -140,14 +142,15 @@ const TableCore = ({
   onSelect,
   onSelectionChange,
   renderBufferSize = 5,
-  rowHeight = 20,
+  rowHeight,
   scrollingApiRef,
   selectionModel = "extended",
   showColumnHeaders = true,
   headerHeight = showColumnHeaders ? 25 : 0,
   size,
-}: TableProps & {
+}: Omit<TableProps, "rowHeight"> & {
   containerRef: RefObject<HTMLDivElement>;
+  rowHeight: number;
   size: MeasuredSize;
 }) => {
   const id = useId(idProp);
@@ -304,7 +307,7 @@ export const Table = forwardRef(function TableNext(
     onSelect,
     onSelectionChange,
     renderBufferSize,
-    rowHeight,
+    rowHeight = 20,
     scrollingApiRef,
     selectionModel,
     showColumnHeaders,
@@ -318,6 +321,12 @@ export const Table = forwardRef(function TableNext(
 
   const [size, setSize] = useState<MeasuredSize>();
 
+  const rowHeightProxyRef = useCallback<RefCallback<HTMLDivElement>>((el) => {
+    console.log(`row proxy `, {
+      el,
+    });
+  }, []);
+
   if (config === undefined) {
     throw Error(
       "vuu Table requires config prop. Minimum config is list of Column Descriptors"
@@ -335,6 +344,8 @@ export const Table = forwardRef(function TableNext(
       onResize={setSize}
       ref={useForkRef(containerRef, forwardedRef)}
     >
+      <RowProxy ref={rowHeightProxyRef} height={rowHeight} />
+
       {size ? (
         <TableCore
           Row={Row}

vuu-ui/packages/vuu-theme/css/foundations/color.css

@@ -20,8 +20,10 @@
   --vuu-color-pink-10-fade-20: rgba(234, 120, 128, .2); /*  #F37880 */
 
 
+  --vuu-color-gray-02: rgb(235, 235, 236);  /* #EBEBEC */
   --vuu-color-gray-03: rgb(237, 237, 237);  /* #EDEDED */
   --vuu-color-gray-05: rgb(222, 222, 222);  /* #DEDEDE */
+  --vuu-color-gray-07: rgb(226, 226, 227);  /* #E2E2E3 */
   --vuu-color-gray-10: rgb(228, 227, 231);  /* #E4E3E7 */
   --vuu-color-gray-20: rgb(245, 242, 248);  /* #F5F2F8 */
   --vuu-color-gray-25: rgb(244, 244, 244) ;  /* #F4F4F4 */
@@ -34,6 +36,7 @@
   --vuu-color-gray-50: rgb(96, 100, 119);   /* #606477 */
   --vuu-color-gray-80: rgb(21, 23, 27);     /* #15171B */ 
 
+
 --vuu-color-green-50: rgb(102, 174, 90);  /* #66AE5A */
 --vuu-color-green-60: rgb(36, 137, 19);  /* #248913 */
 --vuu-color-green-60-fade-30: rgba(36, 137, 19, .3);  /* #248913 */

vuu-ui/packages/vuu-theme/css/palette/interact.css

@@ -2,7 +2,7 @@
   --salt-palette-interact-background: transparent;
   --salt-palette-interact-background-blurSelected: var(--salt-color-gray-30);
   --salt-palette-interact-background-hover: var(--vuu-color-gray-10);
-  --salt-palette-interact-background-active: var(--vuu-color-blue-40);
+  --salt-palette-interact-background-active: var(--vuu-color-gray-02);
   --salt-palette-interact-background-disabled: var(--vuu-color-gray-35);
   --salt-palette-interact-background-activeDisabled: var(--salt-color-blue-30-fade-background);
   --salt-palette-interact-border: var(--vuu-color-gray-45);

vuu-ui/packages/vuu-theme/css/palette/neutral.css

@@ -15,7 +15,7 @@
   --salt-palette-neutral-secondary-foreground: var(--salt-color-gray-200);
   --salt-palette-neutral-secondary-foreground-disabled: var(--salt-color-gray-200-fade-foreground);
   --salt-palette-neutral-backdrop: var(--salt-color-white-fade-backdrop);
-  --salt-palette-neutral-secondary-separator: var(--salt-color-black-fade-separatorOpacity-secondary);
+  --salt-palette-neutral-secondary-separator: var(--vuu-color-gray-05);
   --salt-palette-neutral-tertiary-separator: var(--vuu-color-gray-03);
 }
 

vuu-ui/packages/vuu-ui-controls/src/list/useListHeight.ts

@@ -1,5 +1,5 @@
 import { MeasuredSize } from "@finos/vuu-ui-controls";
-import { useCallback, useMemo, useRef, useState } from "react";
+import { RefCallback, useCallback, useMemo, useRef, useState } from "react";
 import { HeightOnly, ResizeHandler, useResizeObserver } from "../common-hooks";
 
 export interface ListHeightHookProps {
@@ -17,7 +17,7 @@ export interface HeightHookResult {
   contentHeight: number;
   listClientHeight?: number;
   listItemHeight: number;
-  rowHeightProxyRef: (el: HTMLDivElement | null) => void;
+  rowHeightProxyRef: RefCallback<HTMLDivElement>;
 }
 
 const getContentHeight = (
@@ -101,7 +101,7 @@ export const useListHeight = ({
     }
   }, []);
 
-  const rowHeightProxyRef = useCallback((el: HTMLDivElement | null) => {
+  const rowHeightProxyRef = useCallback<RefCallback<HTMLDivElement>>((el) => {
     proxyItemRef.current = el;
     forceUpdate({});
   }, []);

vuu-ui/sample-apps/feature-filter-table/src/useFilterTable.tsx

@@ -31,6 +31,7 @@ import { FilterTableFeatureProps } from "./VuuFilterTableFeature";
 const NO_CONFIG: FilterTableConfig = {};
 
 const defaultTableConfig: Partial<TableConfig> = {
+  columnDefaultWidth: 130,
   rowSeparators: true,
   zebraStripes: true,
 };