Remove lineHeight and use align-content to vertically align items (…

…#3415) * Remove lineHeight and use `align-content` to vertically align items * No need to animate line height * Fix tests * Fix treeview and master detail examples
adazzle · Jul 8, 2024 · 3904d58 · 3904d58
1 parent f8220f9
commit 3904d58
Show file tree

Hide file tree

Showing 14 changed files with 36 additions and 64 deletions.
diff --git a/src/DataGrid.tsx b/src/DataGrid.tsx
@@ -1004,7 +1004,6 @@ function DataGrid<R, SR, K extends Key>(
           onCellContextMenu: onCellContextMenuLatest,
           rowClass,
           gridRowStart,
-          height: getRowHeight(rowIdx),
           copiedCellIdx:
             copiedCell !== null && copiedCell.row === row
               ? columns.findIndex((c) => c.key === copiedCell.columnKey)
@@ -1077,8 +1076,6 @@ function DataGrid<R, SR, K extends Key>(
               : undefined,
           gridTemplateColumns,
           gridTemplateRows: templateRows,
-          '--rdg-header-row-height': `${headerRowHeight}px`,
-          '--rdg-summary-row-height': `${summaryRowHeight}px`,
           '--rdg-scroll-height': `${scrollHeight}px`,
           '--rdg-sign': isRtl ? -1 : 1,
           ...layoutCssVars

diff --git a/src/GroupRow.tsx b/src/GroupRow.tsx
@@ -40,7 +40,6 @@ function GroupedRow<R, SR>({
   isRowSelected,
   selectCell,
   gridRowStart,
-  height,
   groupBy,
   toggleGroup,
   ...props
@@ -68,7 +67,7 @@ function GroupedRow<R, SR>({
           className
         )}
         onClick={handleSelectGroup}
-        style={getRowStyle(gridRowStart, height)}
+        style={getRowStyle(gridRowStart)}
         {...props}
       >
         {viewportColumns.map((column) => (

diff --git a/src/HeaderRow.tsx b/src/HeaderRow.tsx
@@ -28,7 +28,6 @@ export interface HeaderRowProps<R, SR, K extends React.Key> 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
@@ -12,7 +12,6 @@ function Row<R, SR>(
     className,
     rowIdx,
     gridRowStart,
-    height,
     selectedCellIdx,
     isRowSelected,
     copiedCellIdx,
@@ -94,7 +93,7 @@ function Row<R, SR>(
         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
@@ -30,8 +30,6 @@ interface SummaryRowProps<R, SR> extends SharedRenderRowProps<R, SR> {
 
 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
@@ -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
@@ -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
@@ -210,7 +210,6 @@ export interface BaseRenderRowProps<TRow, TSummaryRow = unknown>
   selectedCellIdx: number | undefined;
   isRowSelected: boolean;
   gridRowStart: number;
-  height: number;
   selectCell: (position: Position, enableEditor?: Maybe<boolean>) => void;
 }
 

diff --git 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 } 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;
 }
 

diff --git a/test/rowHeight.test.ts b/test/rowHeight.test.ts
@@ -24,14 +24,11 @@ function setupGrid(rowHeight: DataGridProps<Row>['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');

diff --git a/website/demos/Animation.tsx b/website/demos/Animation.tsx
@@ -14,11 +14,6 @@ const rangeClassname = css`
 
 const transitionClassname = css`
   transition: grid-template-rows 0.5s ease;
-
-  > .rdg-header-row,
-  > .rdg-row {
-    transition: line-height 0.5s ease;
-  }
 `;
 
 interface Row {

diff --git a/website/demos/TreeView.tsx b/website/demos/TreeView.tsx
@@ -139,25 +139,30 @@ export default function TreeView({ direction }: Props) {
           const hasChildren = row.children !== undefined;
           const style = hasChildren ? undefined : { marginInlineStart: 30 };
           return (
-            <>
+            <div
+              className={css`
+                display: flex;
+                gap: 10px;
+                block-size: 100%;
+                align-items: center;
+              `}
+            >
               {hasChildren && (
                 <CellExpanderFormatter
                   tabIndex={tabIndex}
                   expanded={row.isExpanded === true}
                   onCellExpand={() => dispatch({ id: row.id, type: 'toggleSubRow' })}
                 />
               )}
-              <div className="rdg-cell-value">
-                {!hasChildren && (
-                  <ChildRowDeleteButton
-                    tabIndex={tabIndex}
-                    isDeleteSubRowEnabled={allowDelete}
-                    onDeleteSubRow={() => dispatch({ id: row.id, type: 'deleteSubRow' })}
-                  />
-                )}
-                <div style={style}>{row.format}</div>
-              </div>
-            </>
+              {!hasChildren && (
+                <ChildRowDeleteButton
+                  tabIndex={tabIndex}
+                  isDeleteSubRowEnabled={allowDelete}
+                  onDeleteSubRow={() => dispatch({ id: row.id, type: 'deleteSubRow' })}
+                />
+              )}
+              <div style={style}>{row.format}</div>
+            </div>
           );
         }
       },

diff --git 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 (
-    <div className={cellExpandClassname}>
-      <span onClick={onCellExpand} onKeyDown={handleKeyDown}>
-        <span tabIndex={tabIndex}>{expanded ? '\u25BC' : '\u25B6'}</span>
-      </span>
+    <div className={cellExpandClassname} onClick={onCellExpand} onKeyDown={handleKeyDown}>
+      <span tabIndex={tabIndex}>{expanded ? '\u25BC' : '\u25B6'}</span>
     </div>
   );
 }
diff --git 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;
   }