diff --git a/src/components/Table/GridTable.stories.tsx b/src/components/Table/GridTable.stories.tsx index a6ab0846f..e1f3bf2f3 100644 --- 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 = { @@ -2241,11 +2242,17 @@ export function EditableRows() { w: "120px", }; + const style = getTableStyles({ bordered: true, allWhite: true }); + return ( ); } diff --git a/src/components/Table/GridTable.tsx b/src/components/Table/GridTable.tsx index 7863f3c10..5ebf2b52d 100644 --- a/src/components/Table/GridTable.tsx +++ b/src/components/Table/GridTable.tsx @@ -260,6 +260,7 @@ export function GridTable = 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 index 62e2151af..7a0052f4b 100644 --- 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 index e0478cd6c..84e36c01d 100644 --- a/src/components/Table/components/Row.tsx +++ b/src/components/Table/components/Row.tsx @@ -125,10 +125,11 @@ function RowImpl(props: RowProps): 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(props: RowProps): 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(props: RowProps): 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(props: RowProps): 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 = @@ -362,17 +361,7 @@ function RowImpl(props: RowProps): 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); }) )} diff --git a/src/components/Table/components/cell.tsx b/src/components/Table/components/cell.tsx index 01ffa48f7..3e30226d2 100644 --- a/src/components/Table/components/cell.tsx +++ b/src/components/Table/components/cell.tsx @@ -47,14 +47,12 @@ export type RenderCellFn = ( rowStyle: RowStyle | 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 = - (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 ( RenderCellFn onHover?.(true)} - onMouseLeave={() => onHover?.(false)} {...(as === "table" && { colSpan })} > {content}