[misc] reduce pixel rerender on mount by adjusting default row height

elastic · Sep 25, 2024 · ee744fd · ee744fd
1 parent 7551600
commit ee744fd
Show file tree

Hide file tree

Showing 6 changed files with 64 additions and 64 deletions.
diff --git a/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -594,7 +594,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
           style="position: relative; height: 9007199254740991px; width: 9007199254740991px; overflow: auto; will-change: transform; direction: ltr;"
         >
           <div
-            style="height: 202px; width: 200px;"
+            style="height: 208px; width: 200px;"
           >
             <div
               class="euiDataGridHeader emotion-euiDataGridHeader-shade"
@@ -709,7 +709,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
               data-gridcell-visible-row-index="0"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -735,7 +735,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
               data-gridcell-visible-row-index="0"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -761,7 +761,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
               data-gridcell-visible-row-index="1"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -787,7 +787,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
               data-gridcell-visible-row-index="1"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -813,7 +813,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
               data-gridcell-visible-row-index="2"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -839,7 +839,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
               data-gridcell-visible-row-index="2"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -1027,7 +1027,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
           style="position: relative; height: 9007199254740991px; width: 9007199254740991px; overflow: auto; will-change: transform; direction: ltr;"
         >
           <div
-            style="height: 202px; width: 300px;"
+            style="height: 208px; width: 300px;"
           >
             <div
               class="euiDataGridHeader emotion-euiDataGridHeader-shade"
@@ -1186,7 +1186,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               data-gridcell-visible-row-index="0"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 0px; top: 0px; height: 34px; width: 50px;"
+              style="position: absolute; left: 0px; top: 0px; height: 36px; width: 50px;"
               tabindex="-1"
             >
               <div
@@ -1212,7 +1212,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               data-gridcell-visible-row-index="0"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 50px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 50px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -1238,7 +1238,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               data-gridcell-visible-row-index="0"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 150px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 150px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -1264,7 +1264,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               data-gridcell-visible-row-index="0"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 250px; top: 0px; height: 34px; width: 50px;"
+              style="position: absolute; left: 250px; top: 0px; height: 36px; width: 50px;"
               tabindex="-1"
             >
               <div
@@ -1290,7 +1290,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               data-gridcell-visible-row-index="1"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 0px; top: 0px; height: 34px; width: 50px;"
+              style="position: absolute; left: 0px; top: 0px; height: 36px; width: 50px;"
               tabindex="-1"
             >
               <div
@@ -1316,7 +1316,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               data-gridcell-visible-row-index="1"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 50px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 50px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -1342,7 +1342,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               data-gridcell-visible-row-index="1"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 150px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 150px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -1368,7 +1368,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               data-gridcell-visible-row-index="1"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 250px; top: 0px; height: 34px; width: 50px;"
+              style="position: absolute; left: 250px; top: 0px; height: 36px; width: 50px;"
               tabindex="-1"
             >
               <div
@@ -1394,7 +1394,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               data-gridcell-visible-row-index="2"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 0px; top: 0px; height: 34px; width: 50px;"
+              style="position: absolute; left: 0px; top: 0px; height: 36px; width: 50px;"
               tabindex="-1"
             >
               <div
@@ -1420,7 +1420,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               data-gridcell-visible-row-index="2"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 50px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 50px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -1446,7 +1446,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               data-gridcell-visible-row-index="2"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 150px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 150px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -1472,7 +1472,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               data-gridcell-visible-row-index="2"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 250px; top: 0px; height: 34px; width: 50px;"
+              style="position: absolute; left: 250px; top: 0px; height: 36px; width: 50px;"
               tabindex="-1"
             >
               <div
@@ -1657,7 +1657,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
           style="position: relative; height: 9007199254740991px; width: 9007199254740991px; overflow: auto; will-change: transform; direction: ltr;"
         >
           <div
-            style="height: 202px; width: 200px;"
+            style="height: 208px; width: 200px;"
           >
             <div
               class="euiDataGridHeader emotion-euiDataGridHeader-shade"
@@ -1774,7 +1774,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
               data-gridcell-visible-row-index="0"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -1800,7 +1800,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
               data-gridcell-visible-row-index="0"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -1826,7 +1826,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
               data-gridcell-visible-row-index="1"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -1852,7 +1852,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
               data-gridcell-visible-row-index="1"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -1878,7 +1878,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
               data-gridcell-visible-row-index="2"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -1904,7 +1904,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
               data-gridcell-visible-row-index="2"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -2089,7 +2089,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
           style="position: relative; height: 9007199254740991px; width: 9007199254740991px; overflow: auto; will-change: transform; direction: ltr;"
         >
           <div
-            style="height: 202px; width: 200px;"
+            style="height: 208px; width: 200px;"
           >
             <div
               class="euiDataGridHeader emotion-euiDataGridHeader-shade"
@@ -2204,7 +2204,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
               data-gridcell-visible-row-index="0"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -2230,7 +2230,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
               data-gridcell-visible-row-index="0"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -2256,7 +2256,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
               data-gridcell-visible-row-index="1"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -2282,7 +2282,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
               data-gridcell-visible-row-index="1"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -2308,7 +2308,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
               data-gridcell-visible-row-index="2"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div
@@ -2334,7 +2334,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
               data-gridcell-visible-row-index="2"
               data-test-subj="dataGridRowCell"
               role="gridcell"
-              style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
+              style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
               tabindex="-1"
             >
               <div

diff --git a/packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap b/packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
@@ -120,7 +120,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
       data-gridcell-visible-row-index="0"
       data-test-subj="dataGridRowCell"
       role="gridcell"
-      style="height: 34px; width: 100px;"
+      style="height: 36px; width: 100px;"
       tabindex="-1"
     >
       <div
@@ -146,7 +146,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
       data-gridcell-visible-row-index="0"
       data-test-subj="dataGridRowCell"
       role="gridcell"
-      style="height: 34px; width: 100px;"
+      style="height: 36px; width: 100px;"
       tabindex="-1"
     >
       <div
@@ -176,7 +176,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
       data-gridcell-visible-row-index="1"
       data-test-subj="dataGridRowCell"
       role="gridcell"
-      style="height: 34px; width: 100px;"
+      style="height: 36px; width: 100px;"
       tabindex="-1"
     >
       <div
@@ -202,7 +202,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
       data-gridcell-visible-row-index="1"
       data-test-subj="dataGridRowCell"
       role="gridcell"
-      style="height: 34px; width: 100px;"
+      style="height: 36px; width: 100px;"
       tabindex="-1"
     >
       <div

diff --git a/...s/eui/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap b/...s/eui/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
   style="position: relative; height: 9007199254740991px; width: 9007199254740991px; overflow: auto; will-change: transform; direction: ltr;"
 >
   <div
-    style="height: 34px; width: 200px;"
+    style="height: 36px; width: 200px;"
   >
     <div
       class="euiDataGridHeader emotion-euiDataGridHeader"
@@ -121,7 +121,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
       data-gridcell-visible-row-index="0"
       data-test-subj="dataGridRowCell"
       role="gridcell"
-      style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
+      style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
       tabindex="-1"
     >
       <div
@@ -149,7 +149,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
       data-gridcell-visible-row-index="0"
       data-test-subj="dataGridRowCell"
       role="gridcell"
-      style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
+      style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
       tabindex="-1"
     >
       <div

diff --git a/packages/eui/src/components/datagrid/data_grid.test.tsx b/packages/eui/src/components/datagrid/data_grid.test.tsx
@@ -2139,7 +2139,7 @@ describe('EuiDataGrid', () => {
       const cellHeights = extractRowHeights(component);
       expect(cellHeights).toEqual({
         0: 70,
-        1: 34,
+        1: 36,
         2: 50,
       });
     });
@@ -2181,7 +2181,7 @@ describe('EuiDataGrid', () => {
 
       expect(extractRowHeights(component)).toEqual({
         0: 70,
-        1: 34,
+        1: 36,
         2: 50,
       });
 
@@ -2199,7 +2199,7 @@ describe('EuiDataGrid', () => {
 
       expect(extractRowHeights(component)).toEqual({
         0: 70,
-        1: 34,
+        1: 36,
         2: 50,
       });
     });
-Original file line number
+Diff line change
@@ Expand Up / @@ -2139,7 +2139,7 @@ describe('EuiDataGrid', () => { @@
           const cellHeights = extractRowHeights(component);
           expect(cellHeights).toEqual({
 : 70,
-: 34,
+: 36,
 : 50,
           });
         });
@@ Expand Down Expand Up / @@ -2181,7 +2181,7 @@ describe('EuiDataGrid', () => { @@
           expect(extractRowHeights(component)).toEqual({
 : 70,
-: 34,
+: 36,
 : 50,
           });
@@ Expand All / @@ -2199,7 +2199,7 @@ describe('EuiDataGrid', () => { @@
           expect(extractRowHeights(component)).toEqual({
 : 70,
-: 34,
+: 36,
 : 50,
           });
         });
@@ Expand Down @@