From 229b6dcbda2cec103bf2f7437b716409e6dc7578 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 2 Jan 2024 10:01:19 -0600 Subject: [PATCH 1/4] Remove lineHeight and use `align-content` to vertically align items --- src/DataGrid.tsx | 3 --- src/GroupRow.tsx | 3 +-- src/HeaderRow.tsx | 1 - src/Row.tsx | 3 +-- src/SummaryRow.tsx | 2 -- src/style/cell.ts | 1 + src/style/row.ts | 1 - src/types.ts | 1 - src/utils/styleUtils.ts | 9 +-------- 9 files changed, 4 insertions(+), 20 deletions(-) diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx index f386331d0b..8fa7be8007 100644 --- a/src/DataGrid.tsx +++ b/src/DataGrid.tsx @@ -991,7 +991,6 @@ function DataGrid( onCellContextMenu: onCellContextMenuLatest, rowClass, gridRowStart, - height: getRowHeight(rowIdx), copiedCellIdx: copiedCell !== null && copiedCell.row === row ? columns.findIndex((c) => c.key === copiedCell.columnKey) @@ -1064,8 +1063,6 @@ function DataGrid( : undefined, gridTemplateColumns, gridTemplateRows: templateRows, - '--rdg-header-row-height': `${headerRowHeight}px`, - '--rdg-summary-row-height': `${summaryRowHeight}px`, '--rdg-sign': isRtl ? -1 : 1, ...layoutCssVars } as unknown as React.CSSProperties diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx index 32ccf0cf77..49d1593877 100644 --- a/src/GroupRow.tsx +++ b/src/GroupRow.tsx @@ -39,7 +39,6 @@ function GroupedRow({ isRowSelected, selectCell, gridRowStart, - height, groupBy, toggleGroup, ...props @@ -67,7 +66,7 @@ function GroupedRow({ className )} onClick={handleSelectGroup} - style={getRowStyle(gridRowStart, height)} + style={getRowStyle(gridRowStart)} {...props} > {viewportColumns.map((column) => ( diff --git a/src/HeaderRow.tsx b/src/HeaderRow.tsx index 09fced82e4..df499aaa1a 100644 --- a/src/HeaderRow.tsx +++ b/src/HeaderRow.tsx @@ -28,7 +28,6 @@ export interface HeaderRowProps extends SharedDataGr const headerRow = css` @layer rdg.HeaderRow { display: contents; - line-height: var(--rdg-header-row-height); background-color: var(--rdg-header-background-color); font-weight: bold; diff --git a/src/Row.tsx b/src/Row.tsx index aab22bda6b..5775162568 100644 --- a/src/Row.tsx +++ b/src/Row.tsx @@ -12,7 +12,6 @@ function Row( className, rowIdx, gridRowStart, - height, selectedCellIdx, isRowSelected, copiedCellIdx, @@ -94,7 +93,7 @@ function Row( ref={ref} className={className} onMouseEnter={handleDragEnter} - style={getRowStyle(gridRowStart, height)} + style={getRowStyle(gridRowStart)} {...props} > {cells} diff --git a/src/SummaryRow.tsx b/src/SummaryRow.tsx index daedb0ecb3..2a956f31d7 100644 --- a/src/SummaryRow.tsx +++ b/src/SummaryRow.tsx @@ -26,8 +26,6 @@ interface SummaryRowProps extends SharedRenderRowProps { const summaryRow = css` @layer rdg.SummaryRow { - line-height: var(--rdg-summary-row-height); - > .${cell} { position: sticky; } diff --git a/src/style/cell.ts b/src/style/cell.ts index ba8702cb42..06a34c09b5 100644 --- a/src/style/cell.ts +++ b/src/style/cell.ts @@ -14,6 +14,7 @@ export const cell = css` border-inline-end: 1px solid var(--rdg-border-color); border-block-end: 1px solid var(--rdg-border-color); grid-row-start: var(--rdg-grid-row-start); + align-content: center; background-color: inherit; white-space: nowrap; diff --git a/src/style/row.ts b/src/style/row.ts index 5da38552e1..fa3ad15d59 100644 --- a/src/style/row.ts +++ b/src/style/row.ts @@ -3,7 +3,6 @@ import { css } from '@linaria/core'; export const row = css` @layer rdg.Row { display: contents; - line-height: var(--rdg-row-height); background-color: var(--rdg-background-color); &:hover { diff --git a/src/types.ts b/src/types.ts index dac37209ae..1f6a97d9b3 100644 --- a/src/types.ts +++ b/src/types.ts @@ -211,7 +211,6 @@ export interface BaseRenderRowProps selectedCellIdx: number | undefined; isRowSelected: boolean; gridRowStart: number; - height: number; selectCell: (position: Position, enableEditor?: Maybe) => void; } diff --git a/src/utils/styleUtils.ts b/src/utils/styleUtils.ts index d8683c2dc0..3a63c27ea7 100644 --- a/src/utils/styleUtils.ts +++ b/src/utils/styleUtils.ts @@ -4,14 +4,7 @@ import clsx from 'clsx'; import type { CalculatedColumn, CalculatedColumnOrColumnGroup } from '../types'; import { cellClassname, cellFrozenClassname, cellFrozenLastClassname } from '../style/cell'; -export function getRowStyle(rowIdx: number, height?: number): CSSProperties { - if (height !== undefined) { - return { - '--rdg-grid-row-start': rowIdx, - '--rdg-row-height': `${height}px` - } as unknown as CSSProperties; - } - +export function getRowStyle(rowIdx: number): CSSProperties { return { '--rdg-grid-row-start': rowIdx } as unknown as CSSProperties; } From 8e4361a10a4259cd0301dbf340af743c4a7d0816 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 2 Jan 2024 10:06:29 -0600 Subject: [PATCH 2/4] No need to animate line height --- website/demos/Animation.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/website/demos/Animation.tsx b/website/demos/Animation.tsx index 5e7d14a82d..43388ea94f 100644 --- a/website/demos/Animation.tsx +++ b/website/demos/Animation.tsx @@ -14,10 +14,6 @@ const rangeClassname = css` const transitionClassname = css` transition: grid-template-rows 0.5s ease; - - > :is(.rdg-header-row, .rdg-row) { - transition: line-height 0.5s ease; - } `; interface Row { From 23c5f6051e6cebfce09bf6156f19caf1ecd0396e Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 2 Jan 2024 10:09:16 -0600 Subject: [PATCH 3/4] Fix tests --- test/rowHeight.test.ts | 20 ++++++++------------ 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/test/rowHeight.test.ts b/test/rowHeight.test.ts index 2a46eb0085..a364b4e7a0 100644 --- a/test/rowHeight.test.ts +++ b/test/rowHeight.test.ts @@ -24,14 +24,11 @@ function setupGrid(rowHeight: DataGridProps['rowHeight']) { test('rowHeight is number', async () => { setupGrid(40); - const rows = getRows(); - expect(rows[0]).toHaveStyle({ '--rdg-row-height': '40px' }); - expect(rows[1]).toHaveStyle({ '--rdg-row-height': '40px' }); - expect(rows[2]).toHaveStyle({ '--rdg-row-height': '40px' }); + const grid = screen.getByRole('grid'); + expect(grid).toHaveStyle({ 'grid-template-rows': 'repeat(1, 40px) repeat(50, 40px)' }); expect(getRows()).toHaveLength(31); await userEvent.tab(); - const grid = screen.getByRole('grid'); expect(grid.scrollTop).toBe(0); // Go to the last cell @@ -43,15 +40,14 @@ test('rowHeight is number', async () => { test('rowHeight is function', async () => { setupGrid((row) => [40, 60, 80][row % 3]); - const rows = getRows(); - expect(rows[0]).toHaveStyle({ '--rdg-row-height': '40px' }); - expect(rows[1]).toHaveStyle({ '--rdg-row-height': '60px' }); - expect(rows[2]).toHaveStyle({ '--rdg-row-height': '80px' }); - expect(rows[3]).toHaveStyle({ '--rdg-row-height': '40px' }); - expect(rows).toHaveLength(22); + const grid = screen.getByRole('grid'); + expect(grid).toHaveStyle({ + 'grid-template-rows': + 'repeat(1, 35px) 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px 80px 40px 60px' + }); + expect(getRows()).toHaveLength(22); await userEvent.tab(); - const grid = screen.getByRole('grid'); expect(grid.scrollTop).toBe(0); const spy = vi.spyOn(window.HTMLElement.prototype, 'scrollIntoView'); From 2d3060cf1804041dc2b6dec8ee957b07088f452a Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 8 Jul 2024 12:29:24 -0500 Subject: [PATCH 4/4] Fix treeview and master detail examples --- website/demos/TreeView.tsx | 29 +++++++++++-------- .../components/CellExpanderFormatter.tsx | 19 ++++-------- .../demos/components/ChildRowDeleteButton.tsx | 3 +- 3 files changed, 24 insertions(+), 27 deletions(-) diff --git a/website/demos/TreeView.tsx b/website/demos/TreeView.tsx index 2c11971672..57b094dd44 100644 --- a/website/demos/TreeView.tsx +++ b/website/demos/TreeView.tsx @@ -139,7 +139,14 @@ export default function TreeView({ direction }: Props) { const hasChildren = row.children !== undefined; const style = hasChildren ? undefined : { marginInlineStart: 30 }; return ( - <> +
{hasChildren && ( dispatch({ id: row.id, type: 'toggleSubRow' })} /> )} -
- {!hasChildren && ( - dispatch({ id: row.id, type: 'deleteSubRow' })} - /> - )} -
{row.format}
-
- + {!hasChildren && ( + dispatch({ id: row.id, type: 'deleteSubRow' })} + /> + )} +
{row.format}
+
); } }, diff --git a/website/demos/components/CellExpanderFormatter.tsx b/website/demos/components/CellExpanderFormatter.tsx index 6e23768744..9ca93aec00 100644 --- a/website/demos/components/CellExpanderFormatter.tsx +++ b/website/demos/components/CellExpanderFormatter.tsx @@ -1,17 +1,10 @@ import { css } from '@linaria/core'; const cellExpandClassname = css` - /* needed on chrome */ - float: right; - float: inline-end; - display: table; block-size: 100%; - - > span { - display: table-cell; - vertical-align: middle; - cursor: pointer; - } + align-content: center; + text-align: center; + cursor: pointer; `; interface CellExpanderFormatterProps { @@ -33,10 +26,8 @@ export function CellExpanderFormatter({ } return ( -
- - {expanded ? '\u25BC' : '\u25B6'} - +
+ {expanded ? '\u25BC' : '\u25B6'}
); } diff --git a/website/demos/components/ChildRowDeleteButton.tsx b/website/demos/components/ChildRowDeleteButton.tsx index 34efa51a2e..87a30561a7 100644 --- a/website/demos/components/ChildRowDeleteButton.tsx +++ b/website/demos/components/ChildRowDeleteButton.tsx @@ -1,6 +1,7 @@ import { css } from '@linaria/core'; const childRowActionCrossClassname = css` + block-size: 100%; &::before, &::after { content: ''; @@ -16,7 +17,7 @@ const childRowActionCrossClassname = css` &::after { inset-block-start: 50%; - inset-inline-start: 20px; + inset-inline-start: 21px; block-size: 1px; inline-size: 15px; }