[EuiDataGrid] Redesign grid header #7371

jughosta · 2023-11-16T12:58:53Z

Closes [EuiDataGrid] Redesign grid header #7137

Summary

This PR updates styles of EuiDataGrid header cells:

Action icon is changed to boxesVertical and it will appear on hover
Sorting icon is moved to after the title
Right-alignment of header cells content for numeric columns

Before:

After:

QA

QA truncation on small column widths, both with and without sorting

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA - N/A
Code quality checklist - N/A - snapshots only, since this is mostly just DOM/CSS changes
Release checklist
- A changelog entry exists and is marked appropriately.
  ~~- [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)~~
Designer checklist
- Updated the Figma library counterpart

- using `margin-left: auto` on the actions toggle icon solves the spacing issue without extra truncation CSS needed + allows us to replace margin/padding left or right with the `gap` property instead

- borked this in my last commit, but this should clean it up

- in favor of using existing EuiPopover className reflecting state

- changelog - fix comment

cee-chen

@jughosta Hope it's okay that I pushed up some cleanup - I found a way to get rid of the extra flex wrapper by using margin-left: auto on the icon indicator instead! Please feel free to QA staging and confirm truncation etc still works for you as expected.

From a code perspective this LGTM, I would just like to check in with the stakeholder designer (which I think is Andrea?) that the hover animation is still desired in light of other redesigns, ~~since it wasn't mentioned in the original issue.~~ - oops no it totally was, I can't read

FWIW I think it does look very snazzy, wonderful job on this!

cee-chen · 2023-11-21T04:02:19Z

src/components/datagrid/body/header/_data_grid_header_row.scss

-      align-self: baseline;
+      width: 0;
+      opacity: 0;
+      transition: width $euiAnimSpeedFast ease-in, opacity $euiAnimSpeedSlow ease-in;


@andreadelrio Can I just check in with you super quick - now that cell actions no longer have the "slide in from the right" behavior (#7343), do we want this icon to still have it? Or do we want to opt for the boxes icon to always be visible?

I believe @MichaelMarcialis was behind this suggestion. Michael, can we have your input here? From my perspective, I like that the boxes icon appears on hover. However, I do find it a bit odd that when the columns are aligned right, the appearance of the boxes icon causes a shift in the column heading. Because of this, I would suggest we consider either having the boxes icon always visible or overlay it on top of the heading on hover, that way we no longer have a shift in the heading's text.

@MichaelMarcialis chatted about this in sync this morning and agreed it feels a little odd, but not super odd, so we're going to move ahead with this as-is for now, with the asterisk that we may come back and revisit this once the schema tokens have been added.

(Michael, feel free to give a more complete/accurate summary of your thoughts - I'm sorta rushing to merge this in, apologies!!)

For a bit of background, my original suggestion originates from the Discover design refresh that @andreadelrio and I collaborated on. With our suggestion to prepend field type tokens to the column headers, we thought that only showing the boxesVertical icon when the user is hovering/focusing that column heading helped to cut down on the visual noise and reveal that additional actions could be taken when the user is in a position to use them. For those reasons, I still prefer the idea of hiding the boxesVertical icon until the user hovers/focuses the column headings. As for the right-aligned text shifting, personally I don't mind it with the animation/transition that @jughosta has in place. I think it does a good job of softening its appearance. However, if I'm in the minority here, I'm happy to discuss further.

That said, @cee-chen recently implemented a newly suggested approach to revealing action buttons when hovering/focusing data grid body cells, as mentioned above. Our approach with the column headings here is technically inconsistent with that new cell body approach. But then again, the data grid column headings have always functioned and appeared differently than the body cells, so perhaps it's a non-issue.

TL;DR: My personal suggestion would be to keep it as @jughosta has here, with the potential future caveat that we may at some point in the future want the action button for data grid column headers to be given the same treatment as body cells. Thoughts?

kibanamachine · 2023-11-21T04:28:08Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_7371/
Storybook: https://eui.elastic.co/pr_7371/storybook

elasticmachine · 2023-11-21T04:28:12Z

💚 Build Succeeded

Buildkite Build
Commit: 08c9a47

History

💚 Build #1060 succeeded 9759255
💚 Build #1056 succeeded ff1cbe1
💚 Build #1054 succeeded d6baabe

jughosta · 2023-11-21T09:13:26Z

@cee-chen Thanks for the updates and a cleaner implementation! Looks great!

`v91.0.0-backport.0`⏩`v91.3.1` ⚠️ The largest set of changes in this PR that touch source code (as opposed to test code) are related to several **EuiDataGrid** redesigns, particularly around the toolbar, column cell headers, and cell actions. We **strongly** recommend QAing your EuiDataGrid usages, **especially** if you have custom CSS styling on data grid cells. | Changes | Screencap | |--------|--------| | Cell actions and popover | <img src="https://github.com/elastic/kibana/assets/549407/6462d983-307f-4a3c-84b1-36d9b276c9a0" width="240" alt=""> | | Column headers | <img src="https://github.com/elastic/kibana/assets/549407/3fd64a15-829a-48f3-9dba-9dae3c73e6b2" alt="" width="360"> | | Toolbar | <img src="https://github.com/elastic/kibana/assets/549407/f876f6d7-635d-497a-b1e7-9daf4e6fd3e3" alt="" width="240"> | --- ## [`v91.3.1`](https://github.com/elastic/eui/releases/v91.3.1) **Bug fixes** - Moved `EuiDataGrid`'s header cells' `dataGridHeaderCellActionButton` test subject attribute from to the clickable button, for easier E2E testing ([#7427](elastic/eui#7427)) - Fixed `EuiBasicTable`/`EuiInMemoryTable` actions to correctly show as disabled when rows are being selected ([#7428](elastic/eui#7428)) ## [`v91.3.0`](https://github.com/elastic/eui/releases/v91.3.0) - Added `esqlVis`, `pipeBreaks`, and `pipeNoBreaks` icon glyphs. ([#7399](elastic/eui#7399)) - Updated `EuiDataGridSchemaDetector`'s comparator arguments to include entry indexes ([#7406](elastic/eui#7406)) ## [`v91.2.0`](https://github.com/elastic/eui/releases/v91.2.0) - Added `endpoint` glyph to `EuiIcon` ([#7383](elastic/eui#7383)) **Bug fixes** - Fixed a bug with `EuiSelectable`s with custom `truncationProps`, where scrollbar widths were not being accounted for ([#7392](elastic/eui#7392)) ## [`v91.1.0`](https://github.com/elastic/eui/releases/tag/v91.1.0) - Updated `EuiDataGrid` cell actions to display above cells instead of within them, to avoid content clipping issues ([#7343](elastic/eui#7343)) - Updated `EuiDataGrid` cell expansion popovers to sit on top of cells instead of below/next to them ([#7343](elastic/eui#7343)) - Updated `EuiListGroupItem` to render an external icon and screen reader affordance for links with `target` set to to `_blank` ([#7352](elastic/eui#7352)) - Updated `EuiListGroupItem` with a new `external` prop, which allows enabling or disabling the new external link icon ([#7352](elastic/eui#7352)) - Updated `EuiText` to no longer set any opinionated styles on child `<img>` tags - use `EuiImage` for image display within text instead ([#7360](elastic/eui#7360)) - Improved `EuiBasicTable`/`EuiInMemoryTable`s mobile UI for custom actions ([#7361](elastic/eui#7361)) - Added a new `EuiDataGridToolbarControl` subcomponent, which is useful for rendering your own custom `EuiDataGrid` toolbar buttons while matching the look of the default controls ([#7369](elastic/eui#7369)) - Updated `EuiDataGrid`'s toolbar controls to show active/current counts in badges, and updated the Columns button icon ([#7369](elastic/eui#7369)) - Updated `EuiButtonEmpty` to allow passing `false` to `textProps`, which allows rendering custom button content without an extra text wrapper ([#7369](elastic/eui#7369)) - Updated `EuiDataGrid` column header cells to show the sort arrow after the heading text, instead of before ([#7371](elastic/eui#7371)) - Updated `EuiDataGrid`'s column header actions icon from a chevron to `boxesVertical` ([#7371](elastic/eui#7371)) - Updated the actions column in `EuiBasicTable` and `EuiInMemoryTable`s. Alongside `name`, the `description`, `href`, and `data-test-subj` properties now also accept an optional callback that the current `item` will be passed to ([#7373](elastic/eui#7373)) - Updated `EuiContextMenuItem` with a new `toolTipProps` prop ([#7373](elastic/eui#7373)) - `EuiSelectable` now allows configurable text truncation via `listProps.truncationProps` ([#7388](elastic/eui#7388)) - `EuiTextTruncate` now supports a new `calculationDelayMs` prop for working around font loading or layout shifting scenarios ([#7388](elastic/eui#7388)) **Bug fixes** - Fixed incorrect `EuiPopover` positioning calculations when `hasArrow` was set to false ([#7343](elastic/eui#7343)) - Fixed `EuiSuperSelect` to render options with falsy values (false, 0, and ''), but not nullish values (undefined or null) ([#7362](elastic/eui#7362)) - Fixed `EuiSuperSelect`'s typing to allow non-string values (e.g., booleans or numbers) ([#7362](elastic/eui#7362)) - Fixed `EuiDataGrid`'s numeric and currency column heading cells to be correctly right-aligned ([#7371](elastic/eui#7371)) - Fixed `EuiBasicTable` and `EuiInMemoryTable` actions not showing tooltip descriptions when rendered in the all actions popover menu ([#7373](elastic/eui#7373)) - Fixed missing underlines on `EuiContextMenu` link hover ([#7373](elastic/eui#7373)) - Fixed visual text truncation of `EuiBreadcrumb`s with `popoverContent` ([#7375](elastic/eui#7375)) - Fixed `EuiFormRow`s with `hasEmptyLabelSpace` being very slightly off in vertical alignment ([#7380](elastic/eui#7380)) **Deprecations** - Deprecated `EuiContextMenuItem`'s `toolTipTitle` prop. Use `toolTipProps.title` instead ([#7373](elastic/eui#7373)) - Deprecated `EuiContextMenuItem`'s `toolTipPosition` prop. Use `toolTipProps.position` instead ([#7373](elastic/eui#7373)) **Accessibility** - Fixed custom `EuiBasicTable`/`EuiInMemoryTable` rendering nested interactive custom actions ([#7361](elastic/eui#7361)) - Fixed `EuiBasicTable` and `EuiInMemoryTable` actions not correctly reading out action descriptions to screen readers ([#7373](elastic/eui#7373)) - Fixed `EuiBasicTable` and `EuiInMemoryTable` primary actions not visibly appearing on keyboard focus ([#7373](elastic/eui#7373)) --------- Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>

`v91.0.0-backport.0`⏩`v91.3.1` ⚠️ The largest set of changes in this PR that touch source code (as opposed to test code) are related to several **EuiDataGrid** redesigns, particularly around the toolbar, column cell headers, and cell actions. We **strongly** recommend QAing your EuiDataGrid usages, **especially** if you have custom CSS styling on data grid cells. | Changes | Screencap | |--------|--------| | Cell actions and popover | <img src="https://github.com/elastic/kibana/assets/549407/6462d983-307f-4a3c-84b1-36d9b276c9a0" width="240" alt=""> | | Column headers | <img src="https://github.com/elastic/kibana/assets/549407/3fd64a15-829a-48f3-9dba-9dae3c73e6b2" alt="" width="360"> | | Toolbar | <img src="https://github.com/elastic/kibana/assets/549407/f876f6d7-635d-497a-b1e7-9daf4e6fd3e3" alt="" width="240"> | --- ## [`v91.3.1`](https://github.com/elastic/eui/releases/v91.3.1) **Bug fixes** - Moved `EuiDataGrid`'s header cells' `dataGridHeaderCellActionButton` test subject attribute from to the clickable button, for easier E2E testing ([elastic#7427](elastic/eui#7427)) - Fixed `EuiBasicTable`/`EuiInMemoryTable` actions to correctly show as disabled when rows are being selected ([elastic#7428](elastic/eui#7428)) ## [`v91.3.0`](https://github.com/elastic/eui/releases/v91.3.0) - Added `esqlVis`, `pipeBreaks`, and `pipeNoBreaks` icon glyphs. ([elastic#7399](elastic/eui#7399)) - Updated `EuiDataGridSchemaDetector`'s comparator arguments to include entry indexes ([elastic#7406](elastic/eui#7406)) ## [`v91.2.0`](https://github.com/elastic/eui/releases/v91.2.0) - Added `endpoint` glyph to `EuiIcon` ([elastic#7383](elastic/eui#7383)) **Bug fixes** - Fixed a bug with `EuiSelectable`s with custom `truncationProps`, where scrollbar widths were not being accounted for ([elastic#7392](elastic/eui#7392)) ## [`v91.1.0`](https://github.com/elastic/eui/releases/tag/v91.1.0) - Updated `EuiDataGrid` cell actions to display above cells instead of within them, to avoid content clipping issues ([elastic#7343](elastic/eui#7343)) - Updated `EuiDataGrid` cell expansion popovers to sit on top of cells instead of below/next to them ([elastic#7343](elastic/eui#7343)) - Updated `EuiListGroupItem` to render an external icon and screen reader affordance for links with `target` set to to `_blank` ([elastic#7352](elastic/eui#7352)) - Updated `EuiListGroupItem` with a new `external` prop, which allows enabling or disabling the new external link icon ([elastic#7352](elastic/eui#7352)) - Updated `EuiText` to no longer set any opinionated styles on child `<img>` tags - use `EuiImage` for image display within text instead ([elastic#7360](elastic/eui#7360)) - Improved `EuiBasicTable`/`EuiInMemoryTable`s mobile UI for custom actions ([elastic#7361](elastic/eui#7361)) - Added a new `EuiDataGridToolbarControl` subcomponent, which is useful for rendering your own custom `EuiDataGrid` toolbar buttons while matching the look of the default controls ([elastic#7369](elastic/eui#7369)) - Updated `EuiDataGrid`'s toolbar controls to show active/current counts in badges, and updated the Columns button icon ([elastic#7369](elastic/eui#7369)) - Updated `EuiButtonEmpty` to allow passing `false` to `textProps`, which allows rendering custom button content without an extra text wrapper ([elastic#7369](elastic/eui#7369)) - Updated `EuiDataGrid` column header cells to show the sort arrow after the heading text, instead of before ([elastic#7371](elastic/eui#7371)) - Updated `EuiDataGrid`'s column header actions icon from a chevron to `boxesVertical` ([elastic#7371](elastic/eui#7371)) - Updated the actions column in `EuiBasicTable` and `EuiInMemoryTable`s. Alongside `name`, the `description`, `href`, and `data-test-subj` properties now also accept an optional callback that the current `item` will be passed to ([elastic#7373](elastic/eui#7373)) - Updated `EuiContextMenuItem` with a new `toolTipProps` prop ([elastic#7373](elastic/eui#7373)) - `EuiSelectable` now allows configurable text truncation via `listProps.truncationProps` ([elastic#7388](elastic/eui#7388)) - `EuiTextTruncate` now supports a new `calculationDelayMs` prop for working around font loading or layout shifting scenarios ([elastic#7388](elastic/eui#7388)) **Bug fixes** - Fixed incorrect `EuiPopover` positioning calculations when `hasArrow` was set to false ([elastic#7343](elastic/eui#7343)) - Fixed `EuiSuperSelect` to render options with falsy values (false, 0, and ''), but not nullish values (undefined or null) ([elastic#7362](elastic/eui#7362)) - Fixed `EuiSuperSelect`'s typing to allow non-string values (e.g., booleans or numbers) ([elastic#7362](elastic/eui#7362)) - Fixed `EuiDataGrid`'s numeric and currency column heading cells to be correctly right-aligned ([elastic#7371](elastic/eui#7371)) - Fixed `EuiBasicTable` and `EuiInMemoryTable` actions not showing tooltip descriptions when rendered in the all actions popover menu ([elastic#7373](elastic/eui#7373)) - Fixed missing underlines on `EuiContextMenu` link hover ([elastic#7373](elastic/eui#7373)) - Fixed visual text truncation of `EuiBreadcrumb`s with `popoverContent` ([elastic#7375](elastic/eui#7375)) - Fixed `EuiFormRow`s with `hasEmptyLabelSpace` being very slightly off in vertical alignment ([elastic#7380](elastic/eui#7380)) **Deprecations** - Deprecated `EuiContextMenuItem`'s `toolTipTitle` prop. Use `toolTipProps.title` instead ([elastic#7373](elastic/eui#7373)) - Deprecated `EuiContextMenuItem`'s `toolTipPosition` prop. Use `toolTipProps.position` instead ([elastic#7373](elastic/eui#7373)) **Accessibility** - Fixed custom `EuiBasicTable`/`EuiInMemoryTable` rendering nested interactive custom actions ([elastic#7361](elastic/eui#7361)) - Fixed `EuiBasicTable` and `EuiInMemoryTable` actions not correctly reading out action descriptions to screen readers ([elastic#7373](elastic/eui#7373)) - Fixed `EuiBasicTable` and `EuiInMemoryTable` primary actions not visibly appearing on keyboard focus ([elastic#7373](elastic/eui#7373)) --------- Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>

jughosta added 10 commits November 16, 2023 12:59

Update grid header styles

c0afbe0

Update snapshots

02f5e13

Fix styles

718bfea

Show the icon only on hover

70ad0aa

Extend tests

cc321d6

Add changelog

d6baabe

Update animations

73ad361

Update snapshots

53509b8

Fix styles

ff1cbe1

Update class names

9759255

jughosta marked this pull request as ready for review November 16, 2023 17:51

jughosta requested a review from a team as a code owner November 16, 2023 17:51

cee-chen changed the base branch from main to datagrid-redesigns November 20, 2023 22:56

cee-chen added 6 commits November 20, 2023 19:06

Merge branch 'datagrid-redesigns' into 7137-grid-header-updates

7d041bf

[CSS cleanup] Remove need for extra flex wrapper

596e717

- using `margin-left: auto` on the actions toggle icon solves the spacing issue without extra truncation CSS needed + allows us to replace margin/padding left or right with the `gap` property instead

Fix right schemas/columns

003db25

- borked this in my last commit, but this should clean it up

Fix non-centered boxes icon

5a4b315

Remove unnecessary extra className

afc7fb1

- in favor of using existing EuiPopover className reflecting state

Copy tweaks

08c9a47

- changelog - fix comment

cee-chen approved these changes Nov 21, 2023

View reviewed changes

cee-chen merged commit d11ffc9 into elastic:datagrid-redesigns Nov 21, 2023
6 checks passed

This was referenced Nov 21, 2023

[EuiDataGrid] Redesigns feature branch #7382

Merged

[EuiDataGrid] Redesign grid header #7137

Closed

jughosta deleted the 7137-grid-header-updates branch November 22, 2023 08:39

This was referenced Dec 18, 2023

Upgrade EUI to v91.3.1 elastic/kibana#173569

Merged

[EuiDataGrid] Move dataGridHeaderCellActionButton data-test-subj hook to button #7427

Merged

cee-chen mentioned this pull request Apr 16, 2024

[EuiDataGrid] cannot apply text alignment styles to Data grid headers #7669

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiDataGrid] Redesign grid header #7371

[EuiDataGrid] Redesign grid header #7371

jughosta commented Nov 16, 2023 •

edited by cee-chen

Loading

cee-chen left a comment •

edited

Loading

cee-chen Nov 21, 2023

andreadelrio Nov 21, 2023

cee-chen Nov 21, 2023

MichaelMarcialis Nov 21, 2023 •

edited

Loading

kibanamachine commented Nov 21, 2023

elasticmachine commented Nov 21, 2023

jughosta commented Nov 21, 2023

[EuiDataGrid] Redesign grid header #7371

[EuiDataGrid] Redesign grid header #7371

Conversation

jughosta commented Nov 16, 2023 • edited by cee-chen Loading

Summary

QA

General checklist

cee-chen left a comment • edited Loading

Choose a reason for hiding this comment

cee-chen Nov 21, 2023

Choose a reason for hiding this comment

andreadelrio Nov 21, 2023

Choose a reason for hiding this comment

cee-chen Nov 21, 2023

Choose a reason for hiding this comment

MichaelMarcialis Nov 21, 2023 • edited Loading

Choose a reason for hiding this comment

kibanamachine commented Nov 21, 2023

elasticmachine commented Nov 21, 2023

💚 Build Succeeded

History

jughosta commented Nov 21, 2023

jughosta commented Nov 16, 2023 •

edited by cee-chen

Loading

cee-chen left a comment •

edited

Loading

MichaelMarcialis Nov 21, 2023 •

edited

Loading