Skip to content

Commit

Permalink
[EuiDataGrid] Redesign grid header (#7371)
Browse files Browse the repository at this point in the history 
Co-authored-by: Cee Chen <constance.chen@elastic.co>
  • Loading branch information
@jughosta @cee-chen
jughosta and cee-chen authored Nov 21, 2023
1 parent 7430ef5 commit d11ffc9
Show file tree
Hide file tree
Showing 7 changed files with 169 additions and 111 deletions.
6 changes: 6 additions & 0 deletions changelogs/upcoming/7371.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
- Updated `EuiDataGrid` column header cells to show the sort arrow after the heading text, instead of before
- Updated `EuiDataGrid`'s column header actions icon from a chevron to `boxesVertical`

**Bug fixes**

- Fixed `EuiDataGrid`'s numeric and currency column heading cells to be correctly right-aligned
104 changes: 64 additions & 40 deletions src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -617,12 +617,15 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
>
A
</div>
<span
<div
class="euiDataGridHeaderCell__icon"
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-A"
/>
>
<span
color="text"
data-euiicon-type="boxesVertical"
data-test-subj="dataGridHeaderCellActionButton-A"
/>
</div>
</button>
</div>
<p
Expand Down Expand Up @@ -667,12 +670,15 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
>
B
</div>
<span
<div
class="euiDataGridHeaderCell__icon"
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-B"
/>
>
<span
color="text"
data-euiicon-type="boxesVertical"
data-test-subj="dataGridHeaderCellActionButton-B"
/>
</div>
</button>
</div>
<p
Expand Down Expand Up @@ -1049,12 +1055,15 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
>
A
</div>
<span
<div
class="euiDataGridHeaderCell__icon"
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-A"
/>
>
<span
color="text"
data-euiicon-type="boxesVertical"
data-test-subj="dataGridHeaderCellActionButton-A"
/>
</div>
</button>
</div>
<p
Expand Down Expand Up @@ -1099,12 +1108,15 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
>
B
</div>
<span
<div
class="euiDataGridHeaderCell__icon"
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-B"
/>
>
<span
color="text"
data-euiicon-type="boxesVertical"
data-test-subj="dataGridHeaderCellActionButton-B"
/>
</div>
</button>
</div>
<p
Expand Down Expand Up @@ -1718,12 +1730,15 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
>
Column A
</div>
<span
<div
class="euiDataGridHeaderCell__icon"
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-A"
/>
>
<span
color="text"
data-euiicon-type="boxesVertical"
data-test-subj="dataGridHeaderCellActionButton-A"
/>
</div>
</button>
</div>
<p
Expand Down Expand Up @@ -1770,12 +1785,15 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
More Elements
</div>
</div>
<span
<div
class="euiDataGridHeaderCell__icon"
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-B"
/>
>
<span
color="text"
data-euiicon-type="boxesVertical"
data-test-subj="dataGridHeaderCellActionButton-B"
/>
</div>
</button>
</div>
<p
Expand Down Expand Up @@ -2130,12 +2148,15 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
>
A
</div>
<span
<div
class="euiDataGridHeaderCell__icon"
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-A"
/>
>
<span
color="text"
data-euiicon-type="boxesVertical"
data-test-subj="dataGridHeaderCellActionButton-A"
/>
</div>
</button>
</div>
<p
Expand Down Expand Up @@ -2180,12 +2201,15 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
>
B
</div>
<span
<div
class="euiDataGridHeaderCell__icon"
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-B"
/>
>
<span
color="text"
data-euiicon-type="boxesVertical"
data-test-subj="dataGridHeaderCellActionButton-B"
/>
</div>
</button>
</div>
<p
Expand Down
26 changes: 16 additions & 10 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 @@ -40,12 +40,15 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
>
columnA
</div>
<span
<div
class="euiDataGridHeaderCell__icon"
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-columnA"
/>
>
<span
color="text"
data-euiicon-type="boxesVertical"
data-test-subj="dataGridHeaderCellActionButton-columnA"
/>
</div>
</button>
</div>
<p
Expand Down Expand Up @@ -90,12 +93,15 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
>
columnB
</div>
<span
<div
class="euiDataGridHeaderCell__icon"
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-columnB"
/>
>
<span
color="text"
data-euiicon-type="boxesVertical"
data-test-subj="dataGridHeaderCellActionButton-columnB"
/>
</div>
</button>
</div>
<p
Expand Down
26 changes: 16 additions & 10 deletions src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,12 +44,15 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
>
columnA
</div>
<span
<div
class="euiDataGridHeaderCell__icon"
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-columnA"
/>
>
<span
color="text"
data-euiicon-type="boxesVertical"
data-test-subj="dataGridHeaderCellActionButton-columnA"
/>
</div>
</button>
</div>
<p
Expand Down Expand Up @@ -94,12 +97,15 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
>
columnB
</div>
<span
<div
class="euiDataGridHeaderCell__icon"
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-columnB"
/>
>
<span
color="text"
data-euiicon-type="boxesVertical"
data-test-subj="dataGridHeaderCellActionButton-columnB"
/>
</div>
</button>
</div>
<p
Expand Down
13 changes: 8 additions & 5 deletions src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,15 @@ exports[`EuiDataGridHeaderCell renders 1`] = `
>
someColumn
</div>
<span
<div
class="euiDataGridHeaderCell__icon"
color="text"
data-euiicon-type="arrowDown"
data-test-subj="dataGridHeaderCellActionButton-someColumn"
/>
>
<span
color="text"
data-euiicon-type="boxesVertical"
data-test-subj="dataGridHeaderCellActionButton-someColumn"
/>
</div>
</button>
</div>
<p
Expand Down
64 changes: 38 additions & 26 deletions src/components/datagrid/body/header/_data_grid_header_row.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,6 @@
align-items: center;
display: flex;

&.euiDataGridHeaderCell--numeric {
text-align: right;
}

&.euiDataGridHeaderCell--currency {
text-align: right;
}

&:focus {
@include euiDataGridCellFocus;
border-top: none;
Expand All @@ -37,38 +29,58 @@
border-top: none;
}

.euiDataGridHeaderCell__sortingArrow {
margin-right: $euiSizeXS;
}

.euiDataGridHeaderCell__button {
flex: 0 0 auto;
position: relative;
align-items: center;
display: flex;
align-items: center;
gap: $euiSizeXS;
width: 100%;
font-weight: $euiFontWeightBold;
outline: none;

.euiDataGridHeaderCell__sortingArrow {
flex-grow: 0;
}
}

.euiDataGridHeaderCell__content {
@include euiTextTruncate;
}

.euiDataGridHeaderCell__sortingArrow {
flex: 0 0 auto; // Ensure icon doesn't shrink
}

.euiDataGridHeaderCell__icon {
flex: 0 0 auto; // Ensure icon doesn't shrink
margin-left: auto; // Aligns the icon to the right
// Center the icon vertically
display: flex;
align-items: center;
height: $euiSize;
overflow: hidden;
white-space: nowrap;
text-align: left;
flex-grow: 1;
align-self: baseline;
width: 0;
opacity: 0;
transition: width $euiAnimSpeedFast ease-in, opacity $euiAnimSpeedSlow ease-in;
}

&:focus-within,
&:hover,
.euiPopover-isOpen {
.euiDataGridHeaderCell__icon {
width: $euiSize;
opacity: 1;
}
}
}

// Align numeric and currency schemas to the right
&.euiDataGridHeaderCell--numeric,
&.euiDataGridHeaderCell--currency {
justify-content: flex-end; // Accounts for columns with disabled actions (no popover)

.euiDataGridHeaderCell__button {
justify-content: flex-end; // Accounts for cells with a popover
}

.euiDataGridHeaderCell__icon {
flex-grow: 0;
flex-basis: auto;
width: auto;
padding-left: $euiSizeXS;
margin-left: 0;
}
}
}
Expand Down
Loading

0 comments on commit d11ffc9

Please sign in to comment.