Skip to content

Commit

Permalink
[EuiDataGrid] Update to use EuiTextBreakTruncate + cell DOM & CSS c…
Browse files Browse the repository at this point in the history 
…leanup (#7255)
  • Loading branch information
@cee-chen
cee-chen committed Oct 9, 2023
1 parent f2cb634 commit cff6f41
Show file tree
Hide file tree
Showing 14 changed files with 763 additions and 815 deletions.
780 changes: 330 additions & 450 deletions src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
View file

Large diffs are not rendered by default.

111 changes: 40 additions & 71 deletions src/components/datagrid/_data_grid_data_row.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,22 +38,6 @@
animation-delay: $euiAnimSpeedNormal;
animation-fill-mode: forwards;
}
/*
* For some incredibly bizarre reason, Safari doesn't correctly update the flex
* width of the content (when rows are an undefined height/single flex row),
* which causes the action icons to overlap & makes the content less readable.
* This workaround "animation" forces a rerender of the flex content width
*
* TODO: Remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=258539 is resolved
*/
.euiDataGridRowCell__expandContent {
animation-name: euiDataGridCellActionsSafariWorkaround;
animation-duration: 1000ms; // I don't know why the duration matters or why it being longer works more consistently 🥲
animation-delay: $euiAnimSpeedNormal + $euiAnimSpeedExtraFast; // Wait for above animation to finish
animation-iteration-count: 1;
animation-fill-mode: forwards;
animation-timing-function: linear;
}
}

// On focus, directly show action buttons (without animation)
Expand Down Expand Up @@ -95,23 +79,6 @@
&.euiDataGridRowCell--capitalize {
text-transform: capitalize;
}

.euiDataGridRowCell__definedHeight {
@include euiTextBreakWord;
flex-grow: 1;
}

// We only truncate if the cell is not a control column.
&:not(.euiDataGridRowCell--controlColumn) {
.euiDataGridRowCell__content,
.euiDataGridRowCell__truncate,
&.euiDataGridRowCell__truncate,
.euiDataGridRowCell__expandContent {
@include euiTextTruncate;
overflow: hidden;
white-space: nowrap;
}
}
}

.euiDataGridRowCell__popover {
Expand All @@ -130,39 +97,51 @@
@include euiBottomShadow; // TODO: Convert to euiShadowMedium() in Emotion
}

.euiDataGridRowCell__expandFlex {
position: relative; // for positioning expand button
.euiDataGridRowCell__contentWrapper {
position: relative; // Needed for .euiDataGridRowCell__actions--overlay
height: 100%;
overflow: hidden;
}

.euiDataGridRowCell__defaultHeight {
display: flex;
align-items: baseline;
height: 100%;
max-width: 100%;

.euiDataGridRowCell__content {
flex-grow: 1;
}

.euiDataGridRowCell__actions {
flex-grow: 0;
}

.euiDataGridRowCell--controlColumn & {
height: 100%;
align-items: center;
}
}

.euiDataGridRowCell__expandContent {
flex-grow: 1;
}

.euiDataGridRowCell__contentByHeight {
flex-grow: 1;
height: 100%;
.euiDataGridRowCell__numericalHeight {
// Without this rule, popover anchors content that overflows off the page
[data-euiportal],
.euiPopover,
.euiPopover__anchor {
height: 100%;
}
}

// Cell actions
.euiDataGridRowCell__expandActions {
.euiDataGridRowCell__actions {
display: flex;
}
@include euiDataGridRowCellActions($definedHeight: false) {
flex-grow: 0;
}
@include euiDataGridRowCellActions($definedHeight: true) {
background-color: $euiColorEmptyShade;
position: absolute;
right: 0;
top: 0;
padding: $euiDataGridCellPaddingM 0;

&--overlay {
position: absolute;
right: 0;
top: 0;
padding: $euiDataGridCellPaddingM 0;
background-color: $euiColorEmptyShade;
}
}

.euiDataGridRowCell__actionButtonIcon {
Expand All @@ -181,20 +160,20 @@
// Row stripes
@include euiDataGridStyles(stripes) {
.euiDataGridRow--striped {
@include euiDataGridRowCellActions($definedHeight: true) {
&,
.euiDataGridRowCell__actions--overlay {
background-color: $euiColorLightestShade;
}
background-color: $euiColorLightestShade;
}
}

// Row highlights
@include euiDataGridStyles(rowHoverHighlight) {
.euiDataGridRow:hover {
@include euiDataGridRowCellActions($definedHeight: true) {
&,
.euiDataGridRowCell__actions--overlay {
background-color: $euiColorHighlight;
}
background-color: $euiColorHighlight;
}
}

Expand Down Expand Up @@ -240,10 +219,11 @@

// Compressed density grids - height tweaks
@include euiDataGridStyles(fontSizeSmall, paddingSmall) {
@include euiDataGridRowCellActions($definedHeight: true) {
.euiDataGridRowCell__actions--overlay {
padding: ($euiDataGridCellPaddingS / 2) 0;
}
@include euiDataGridRowCellActions($definedHeight: false) {

.euiDataGridRowCell__defaultHeight .euiDataGridRowCell__actions {
transform: translateY(1px);
}
}
Expand All @@ -259,14 +239,3 @@
width: $euiSizeM;
}
}
@keyframes euiDataGridCellActionsSafariWorkaround {
from {
width: 100%;
flex-basis: 100%;
}

to {
width: auto;
flex-basis: auto;
}
}
15 changes: 0 additions & 15 deletions src/components/datagrid/_mixins.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,18 +82,3 @@ $euiDataGridStyles: (
@content;
}
}

@mixin euiDataGridRowCellActions($definedHeight: false) {
@if $definedHeight {
// Defined heights are cells with row heights of auto, lineCount, or a static height
// that set the __contentByHeight class
.euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
@content;
}
} @else {
// Otherwise, an undefined height (single flex row) will set __expandContent
.euiDataGridRowCell__expandContent + .euiDataGridRowCell__expandActions {
@content;
}
}
}
104 changes: 44 additions & 60 deletions src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -134,25 +134,21 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
tabindex="-1"
>
<div
class="euiDataGridRowCell__expandFlex"
class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
>
<div
class="euiDataGridRowCell__expandContent"
class="euiDataGridRowCell__content eui-textTruncate"
data-datagrid-cellcontent="true"
>
<div
class="euiDataGridRowCell__truncate"
data-datagrid-cellcontent="true"
>
hello
</div>
<p
class="emotion-euiScreenReaderOnly"
hidden=""
>
-
columnA, column 1, row 1
</p>
hello
</div>
<p
class="emotion-euiScreenReaderOnly"
hidden=""
>
-
columnA, column 1, row 1
</p>
</div>
</div>
<div
Expand All @@ -168,25 +164,21 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
tabindex="-1"
>
<div
class="euiDataGridRowCell__expandFlex"
class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
>
<div
class="euiDataGridRowCell__expandContent"
class="euiDataGridRowCell__content eui-textTruncate"
data-datagrid-cellcontent="true"
>
<div
class="euiDataGridRowCell__truncate"
data-datagrid-cellcontent="true"
>
world
</div>
<p
class="emotion-euiScreenReaderOnly"
hidden=""
>
-
columnB, column 2, row 1
</p>
world
</div>
<p
class="emotion-euiScreenReaderOnly"
hidden=""
>
-
columnB, column 2, row 1
</p>
</div>
</div>
</div>
Expand All @@ -206,25 +198,21 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
tabindex="-1"
>
<div
class="euiDataGridRowCell__expandFlex"
class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
>
<div
class="euiDataGridRowCell__expandContent"
class="euiDataGridRowCell__content eui-textTruncate"
data-datagrid-cellcontent="true"
>
<div
class="euiDataGridRowCell__truncate"
data-datagrid-cellcontent="true"
>
lorem
</div>
<p
class="emotion-euiScreenReaderOnly"
hidden=""
>
-
columnA, column 1, row 2
</p>
lorem
</div>
<p
class="emotion-euiScreenReaderOnly"
hidden=""
>
-
columnA, column 1, row 2
</p>
</div>
</div>
<div
Expand All @@ -240,25 +228,21 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
tabindex="-1"
>
<div
class="euiDataGridRowCell__expandFlex"
class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
>
<div
class="euiDataGridRowCell__expandContent"
class="euiDataGridRowCell__content eui-textTruncate"
data-datagrid-cellcontent="true"
>
<div
class="euiDataGridRowCell__truncate"
data-datagrid-cellcontent="true"
>
ipsum
</div>
<p
class="emotion-euiScreenReaderOnly"
hidden=""
>
-
columnB, column 2, row 2
</p>
ipsum
</div>
<p
class="emotion-euiScreenReaderOnly"
hidden=""
>
-
columnB, column 2, row 2
</p>
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit cff6f41

Please sign in to comment.