Skip to content

Commit a773651

Browse files
cee-chencee-chen
committed
[misc] reduce pixel rerender on mount by adjusting default row height
1 parent 9d7b6ff commit a773651

File tree

6 files changed

+64
-64
lines changed

6 files changed

+64
-64
lines changed

‎packages/eui/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap

Lines changed: 34 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -594,7 +594,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
594594
style="position: relative; height: 9007199254740991px; width: 9007199254740991px; overflow: auto; will-change: transform; direction: ltr;"
595595
>
596596
<div
597-
style="height: 202px; width: 200px;"
597+
style="height: 208px; width: 200px;"
598598
>
599599
<div
600600
class="euiDataGridHeader emotion-euiDataGridHeader-shade"
@@ -709,7 +709,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
709709
data-gridcell-visible-row-index="0"
710710
data-test-subj="dataGridRowCell"
711711
role="gridcell"
712-
style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
712+
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
713713
tabindex="-1"
714714
>
715715
<div
@@ -735,7 +735,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
735735
data-gridcell-visible-row-index="0"
736736
data-test-subj="dataGridRowCell"
737737
role="gridcell"
738-
style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
738+
style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
739739
tabindex="-1"
740740
>
741741
<div
@@ -761,7 +761,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
761761
data-gridcell-visible-row-index="1"
762762
data-test-subj="dataGridRowCell"
763763
role="gridcell"
764-
style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
764+
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
765765
tabindex="-1"
766766
>
767767
<div
@@ -787,7 +787,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
787787
data-gridcell-visible-row-index="1"
788788
data-test-subj="dataGridRowCell"
789789
role="gridcell"
790-
style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
790+
style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
791791
tabindex="-1"
792792
>
793793
<div
@@ -813,7 +813,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
813813
data-gridcell-visible-row-index="2"
814814
data-test-subj="dataGridRowCell"
815815
role="gridcell"
816-
style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
816+
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
817817
tabindex="-1"
818818
>
819819
<div
@@ -839,7 +839,7 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
839839
data-gridcell-visible-row-index="2"
840840
data-test-subj="dataGridRowCell"
841841
role="gridcell"
842-
style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
842+
style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
843843
tabindex="-1"
844844
>
845845
<div
@@ -1027,7 +1027,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
10271027
style="position: relative; height: 9007199254740991px; width: 9007199254740991px; overflow: auto; will-change: transform; direction: ltr;"
10281028
>
10291029
<div
1030-
style="height: 202px; width: 300px;"
1030+
style="height: 208px; width: 300px;"
10311031
>
10321032
<div
10331033
class="euiDataGridHeader emotion-euiDataGridHeader-shade"
@@ -1186,7 +1186,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
11861186
data-gridcell-visible-row-index="0"
11871187
data-test-subj="dataGridRowCell"
11881188
role="gridcell"
1189-
style="position: absolute; left: 0px; top: 0px; height: 34px; width: 50px;"
1189+
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 50px;"
11901190
tabindex="-1"
11911191
>
11921192
<div
@@ -1212,7 +1212,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
12121212
data-gridcell-visible-row-index="0"
12131213
data-test-subj="dataGridRowCell"
12141214
role="gridcell"
1215-
style="position: absolute; left: 50px; top: 0px; height: 34px; width: 100px;"
1215+
style="position: absolute; left: 50px; top: 0px; height: 36px; width: 100px;"
12161216
tabindex="-1"
12171217
>
12181218
<div
@@ -1238,7 +1238,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
12381238
data-gridcell-visible-row-index="0"
12391239
data-test-subj="dataGridRowCell"
12401240
role="gridcell"
1241-
style="position: absolute; left: 150px; top: 0px; height: 34px; width: 100px;"
1241+
style="position: absolute; left: 150px; top: 0px; height: 36px; width: 100px;"
12421242
tabindex="-1"
12431243
>
12441244
<div
@@ -1264,7 +1264,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
12641264
data-gridcell-visible-row-index="0"
12651265
data-test-subj="dataGridRowCell"
12661266
role="gridcell"
1267-
style="position: absolute; left: 250px; top: 0px; height: 34px; width: 50px;"
1267+
style="position: absolute; left: 250px; top: 0px; height: 36px; width: 50px;"
12681268
tabindex="-1"
12691269
>
12701270
<div
@@ -1290,7 +1290,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
12901290
data-gridcell-visible-row-index="1"
12911291
data-test-subj="dataGridRowCell"
12921292
role="gridcell"
1293-
style="position: absolute; left: 0px; top: 0px; height: 34px; width: 50px;"
1293+
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 50px;"
12941294
tabindex="-1"
12951295
>
12961296
<div
@@ -1316,7 +1316,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
13161316
data-gridcell-visible-row-index="1"
13171317
data-test-subj="dataGridRowCell"
13181318
role="gridcell"
1319-
style="position: absolute; left: 50px; top: 0px; height: 34px; width: 100px;"
1319+
style="position: absolute; left: 50px; top: 0px; height: 36px; width: 100px;"
13201320
tabindex="-1"
13211321
>
13221322
<div
@@ -1342,7 +1342,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
13421342
data-gridcell-visible-row-index="1"
13431343
data-test-subj="dataGridRowCell"
13441344
role="gridcell"
1345-
style="position: absolute; left: 150px; top: 0px; height: 34px; width: 100px;"
1345+
style="position: absolute; left: 150px; top: 0px; height: 36px; width: 100px;"
13461346
tabindex="-1"
13471347
>
13481348
<div
@@ -1368,7 +1368,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
13681368
data-gridcell-visible-row-index="1"
13691369
data-test-subj="dataGridRowCell"
13701370
role="gridcell"
1371-
style="position: absolute; left: 250px; top: 0px; height: 34px; width: 50px;"
1371+
style="position: absolute; left: 250px; top: 0px; height: 36px; width: 50px;"
13721372
tabindex="-1"
13731373
>
13741374
<div
@@ -1394,7 +1394,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
13941394
data-gridcell-visible-row-index="2"
13951395
data-test-subj="dataGridRowCell"
13961396
role="gridcell"
1397-
style="position: absolute; left: 0px; top: 0px; height: 34px; width: 50px;"
1397+
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 50px;"
13981398
tabindex="-1"
13991399
>
14001400
<div
@@ -1420,7 +1420,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
14201420
data-gridcell-visible-row-index="2"
14211421
data-test-subj="dataGridRowCell"
14221422
role="gridcell"
1423-
style="position: absolute; left: 50px; top: 0px; height: 34px; width: 100px;"
1423+
style="position: absolute; left: 50px; top: 0px; height: 36px; width: 100px;"
14241424
tabindex="-1"
14251425
>
14261426
<div
@@ -1446,7 +1446,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
14461446
data-gridcell-visible-row-index="2"
14471447
data-test-subj="dataGridRowCell"
14481448
role="gridcell"
1449-
style="position: absolute; left: 150px; top: 0px; height: 34px; width: 100px;"
1449+
style="position: absolute; left: 150px; top: 0px; height: 36px; width: 100px;"
14501450
tabindex="-1"
14511451
>
14521452
<div
@@ -1472,7 +1472,7 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
14721472
data-gridcell-visible-row-index="2"
14731473
data-test-subj="dataGridRowCell"
14741474
role="gridcell"
1475-
style="position: absolute; left: 250px; top: 0px; height: 34px; width: 50px;"
1475+
style="position: absolute; left: 250px; top: 0px; height: 36px; width: 50px;"
14761476
tabindex="-1"
14771477
>
14781478
<div
@@ -1657,7 +1657,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
16571657
style="position: relative; height: 9007199254740991px; width: 9007199254740991px; overflow: auto; will-change: transform; direction: ltr;"
16581658
>
16591659
<div
1660-
style="height: 202px; width: 200px;"
1660+
style="height: 208px; width: 200px;"
16611661
>
16621662
<div
16631663
class="euiDataGridHeader emotion-euiDataGridHeader-shade"
@@ -1774,7 +1774,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
17741774
data-gridcell-visible-row-index="0"
17751775
data-test-subj="dataGridRowCell"
17761776
role="gridcell"
1777-
style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
1777+
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
17781778
tabindex="-1"
17791779
>
17801780
<div
@@ -1800,7 +1800,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
18001800
data-gridcell-visible-row-index="0"
18011801
data-test-subj="dataGridRowCell"
18021802
role="gridcell"
1803-
style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
1803+
style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
18041804
tabindex="-1"
18051805
>
18061806
<div
@@ -1826,7 +1826,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
18261826
data-gridcell-visible-row-index="1"
18271827
data-test-subj="dataGridRowCell"
18281828
role="gridcell"
1829-
style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
1829+
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
18301830
tabindex="-1"
18311831
>
18321832
<div
@@ -1852,7 +1852,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
18521852
data-gridcell-visible-row-index="1"
18531853
data-test-subj="dataGridRowCell"
18541854
role="gridcell"
1855-
style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
1855+
style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
18561856
tabindex="-1"
18571857
>
18581858
<div
@@ -1878,7 +1878,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
18781878
data-gridcell-visible-row-index="2"
18791879
data-test-subj="dataGridRowCell"
18801880
role="gridcell"
1881-
style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
1881+
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
18821882
tabindex="-1"
18831883
>
18841884
<div
@@ -1904,7 +1904,7 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
19041904
data-gridcell-visible-row-index="2"
19051905
data-test-subj="dataGridRowCell"
19061906
role="gridcell"
1907-
style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
1907+
style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
19081908
tabindex="-1"
19091909
>
19101910
<div
@@ -2089,7 +2089,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
20892089
style="position: relative; height: 9007199254740991px; width: 9007199254740991px; overflow: auto; will-change: transform; direction: ltr;"
20902090
>
20912091
<div
2092-
style="height: 202px; width: 200px;"
2092+
style="height: 208px; width: 200px;"
20932093
>
20942094
<div
20952095
class="euiDataGridHeader emotion-euiDataGridHeader-shade"
@@ -2204,7 +2204,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
22042204
data-gridcell-visible-row-index="0"
22052205
data-test-subj="dataGridRowCell"
22062206
role="gridcell"
2207-
style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
2207+
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
22082208
tabindex="-1"
22092209
>
22102210
<div
@@ -2230,7 +2230,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
22302230
data-gridcell-visible-row-index="0"
22312231
data-test-subj="dataGridRowCell"
22322232
role="gridcell"
2233-
style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
2233+
style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
22342234
tabindex="-1"
22352235
>
22362236
<div
@@ -2256,7 +2256,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
22562256
data-gridcell-visible-row-index="1"
22572257
data-test-subj="dataGridRowCell"
22582258
role="gridcell"
2259-
style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
2259+
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
22602260
tabindex="-1"
22612261
>
22622262
<div
@@ -2282,7 +2282,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
22822282
data-gridcell-visible-row-index="1"
22832283
data-test-subj="dataGridRowCell"
22842284
role="gridcell"
2285-
style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
2285+
style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
22862286
tabindex="-1"
22872287
>
22882288
<div
@@ -2308,7 +2308,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
23082308
data-gridcell-visible-row-index="2"
23092309
data-test-subj="dataGridRowCell"
23102310
role="gridcell"
2311-
style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
2311+
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
23122312
tabindex="-1"
23132313
>
23142314
<div
@@ -2334,7 +2334,7 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
23342334
data-gridcell-visible-row-index="2"
23352335
data-test-subj="dataGridRowCell"
23362336
role="gridcell"
2337-
style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
2337+
style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
23382338
tabindex="-1"
23392339
>
23402340
<div

‎packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
120120
data-gridcell-visible-row-index="0"
121121
data-test-subj="dataGridRowCell"
122122
role="gridcell"
123-
style="height: 34px; width: 100px;"
123+
style="height: 36px; width: 100px;"
124124
tabindex="-1"
125125
>
126126
<div
@@ -146,7 +146,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
146146
data-gridcell-visible-row-index="0"
147147
data-test-subj="dataGridRowCell"
148148
role="gridcell"
149-
style="height: 34px; width: 100px;"
149+
style="height: 36px; width: 100px;"
150150
tabindex="-1"
151151
>
152152
<div
@@ -176,7 +176,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
176176
data-gridcell-visible-row-index="1"
177177
data-test-subj="dataGridRowCell"
178178
role="gridcell"
179-
style="height: 34px; width: 100px;"
179+
style="height: 36px; width: 100px;"
180180
tabindex="-1"
181181
>
182182
<div
@@ -202,7 +202,7 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
202202
data-gridcell-visible-row-index="1"
203203
data-test-subj="dataGridRowCell"
204204
role="gridcell"
205-
style="height: 34px; width: 100px;"
205+
style="height: 36px; width: 100px;"
206206
tabindex="-1"
207207
>
208208
<div

‎packages/eui/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
66
style="position: relative; height: 9007199254740991px; width: 9007199254740991px; overflow: auto; will-change: transform; direction: ltr;"
77
>
88
<div
9-
style="height: 34px; width: 200px;"
9+
style="height: 36px; width: 200px;"
1010
>
1111
<div
1212
class="euiDataGridHeader emotion-euiDataGridHeader"
@@ -121,7 +121,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
121121
data-gridcell-visible-row-index="0"
122122
data-test-subj="dataGridRowCell"
123123
role="gridcell"
124-
style="position: absolute; left: 0px; top: 0px; height: 34px; width: 100px;"
124+
style="position: absolute; left: 0px; top: 0px; height: 36px; width: 100px;"
125125
tabindex="-1"
126126
>
127127
<div
@@ -149,7 +149,7 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
149149
data-gridcell-visible-row-index="0"
150150
data-test-subj="dataGridRowCell"
151151
role="gridcell"
152-
style="position: absolute; left: 100px; top: 0px; height: 34px; width: 100px;"
152+
style="position: absolute; left: 100px; top: 0px; height: 36px; width: 100px;"
153153
tabindex="-1"
154154
>
155155
<div

‎packages/eui/src/components/datagrid/data_grid.test.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2139,7 +2139,7 @@ describe('EuiDataGrid', () => {
21392139
const cellHeights = extractRowHeights(component);
21402140
expect(cellHeights).toEqual({
21412141
0: 70,
2142-
1: 34,
2142+
1: 36,
21432143
2: 50,
21442144
});
21452145
});
@@ -2181,7 +2181,7 @@ describe('EuiDataGrid', () => {
21812181

21822182
expect(extractRowHeights(component)).toEqual({
21832183
0: 70,
2184-
1: 34,
2184+
1: 36,
21852185
2: 50,
21862186
});
21872187

@@ -2199,7 +2199,7 @@ describe('EuiDataGrid', () => {
21992199

22002200
expect(extractRowHeights(component)).toEqual({
22012201
0: 70,
2202-
1: 34,
2202+
1: 36,
22032203
2: 50,
22042204
});
22052205
});

0 commit comments

Comments
 (0)