Upgrade EUI to v91.3.1 #173569

cee-chen · 2023-12-18T19:51:38Z

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
Column headers
Toolbar

`v91.3.1`

Bug fixes

Moved EuiDataGrid's header cells' dataGridHeaderCellActionButton test subject attribute from to the clickable button, for easier E2E testing (#7427)
Fixed EuiBasicTable/EuiInMemoryTable actions to correctly show as disabled when rows are being selected (#7428)

`v91.3.0`

Added esqlVis, pipeBreaks, and pipeNoBreaks icon glyphs. (#7399)
Updated EuiDataGridSchemaDetector's comparator arguments to include entry indexes (#7406)

`v91.2.0`

Added endpoint glyph to EuiIcon (#7383)

Bug fixes

Fixed a bug with EuiSelectables with custom truncationProps, where scrollbar widths were not being accounted for (#7392)

`v91.1.0`

Updated EuiDataGrid cell actions to display above cells instead of within them, to avoid content clipping issues (#7343)
Updated EuiDataGrid cell expansion popovers to sit on top of cells instead of below/next to them (#7343)
Updated EuiListGroupItem to render an external icon and screen reader affordance for links with target set to to _blank (#7352)
Updated EuiListGroupItem with a new external prop, which allows enabling or disabling the new external link icon (#7352)
Updated EuiText to no longer set any opinionated styles on child <img> tags - use EuiImage for image display within text instead (#7360)
Improved EuiBasicTable/EuiInMemoryTables mobile UI for custom actions (#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)
Updated EuiDataGrid's toolbar controls to show active/current counts in badges, and updated the Columns button icon (#7369)
Updated EuiButtonEmpty to allow passing false to textProps, which allows rendering custom button content without an extra text wrapper (#7369)
Updated EuiDataGrid column header cells to show the sort arrow after the heading text, instead of before (#7371)
Updated EuiDataGrid's column header actions icon from a chevron to boxesVertical (#7371)
Updated the actions column in EuiBasicTable and EuiInMemoryTables. 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)
Updated EuiContextMenuItem with a new toolTipProps prop (#7373)
EuiSelectable now allows configurable text truncation via listProps.truncationProps (#7388)
EuiTextTruncate now supports a new calculationDelayMs prop for working around font loading or layout shifting scenarios (#7388)

Bug fixes

Fixed incorrect EuiPopover positioning calculations when hasArrow was set to false (#7343)
Fixed EuiSuperSelect to render options with falsy values (false, 0, and ''), but not nullish values (undefined or null) (#7362)
Fixed EuiSuperSelect's typing to allow non-string values (e.g., booleans or numbers) (#7362)
Fixed EuiDataGrid's numeric and currency column heading cells to be correctly right-aligned (#7371)
Fixed EuiBasicTable and EuiInMemoryTable actions not showing tooltip descriptions when rendered in the all actions popover menu (#7373)
Fixed missing underlines on EuiContextMenu link hover (#7373)
Fixed visual text truncation of EuiBreadcrumbs with popoverContent (#7375)
Fixed EuiFormRows with hasEmptyLabelSpace being very slightly off in vertical alignment (#7380)

Deprecations

Deprecated EuiContextMenuItem's toolTipTitle prop. Use toolTipProps.title instead (#7373)
Deprecated EuiContextMenuItem's toolTipPosition prop. Use toolTipProps.position instead (#7373)

Accessibility

Fixed custom EuiBasicTable/EuiInMemoryTable rendering nested interactive custom actions (#7361)
Fixed EuiBasicTable and EuiInMemoryTable actions not correctly reading out action descriptions to screen readers (#7373)
Fixed EuiBasicTable and EuiInMemoryTable primary actions not visibly appearing on keyboard focus (#7373)

- `textProps` can now be false, so we need the specific falsy check instead of using optional chaining

- the component now allows setting non-nullish falsy values (e.g. false, 0, etc) as option values, so specifying `string` is needed here

- hash changed due to removed child `img` styles

- now that we're no longer opinionatedly adding margins to `<img>` tags within EuiText - see elastic/eui#7356 (comment)

- icon is still there, but the text is not if `target="_blank"` is not set

- EuiBasicTable no longer disables the `...` icon if all actions are disabled, only if the row is selected - this is effectively the same UX as the individual actions in the popover are still disabled, but users now know specifically what actions they don't have access to

… is selected - a previous test that was selecting rows was polluting subsequent tests - to be clear, the previous UX was already that the actions would be disabled on selection - the EUI fix was to remove the disabled actions from the DOM, which the test was asserting on

… for new redesign + replace theme token usage with new preferred Emotion-inferred theme, which involves adding an `emotion.d.ts` file (https://emotion.sh/docs/typescript#define-a-theme)

- not totally sure why this changed slightly, but my best guess is the header redesign

- should no longer be necessary with new design

MichaelMarcialis · 2024-01-02T19:19:36Z

@PhilippeOberti Good catch! @MichaelMarcialis, any design thoughts/suggestions here? My gut reaction would be to strongly suggest moving the tooltip position for your content to use position="bottom" & align the tooltip below the cell, instead of above/top.

Thanks, @cee-chen. As discussed in today's EUI weekly meeting, I think the best path forward is to:

Utilize a tooltip position other than top for any tooltips within a data grid cell (as you also mentioned above).
Change the elements' z-index so that the tooltips will always appear behind the data grid cell actions. This is for the case that the tooltip is rendered in close proximity to the edge of the user's viewport, and forcing the tooltip to position itself to the top again. This will prevent the cell actions from being partially obscured by the tooltip. I don't believe the overlapping of the actions above the tooltip will cause any usability issues, as the tooltip's padding should prevent any covering of the text within.

gergoabraham

Defend Workflow related changes look good! 🚢

a big thank you for the cypress test updates 🙇

- when combined with tooltips

cee-chen · 2024-01-04T18:02:36Z

@PhilippeOberti - so unfortunately the z-index approach we wanted to take doesn't work due to tooltips being portalled to the document body 😞 I settled for changing the position to bottom for all tooltips, and bumping up the offset of top-aligned tooltips (that don't have enough room at the bottom) so that actions are at least more visible:

(ac3bef9) That's the best I can do in this PR for now - if your team still wants a better longer-term solution, please let us/@MichaelMarcialis know so we can brainstorm something!

- restore left alignment of header cells - fix vertical center alignment of cell contents - add more left spacing to custom toolbar data - give timestamp tooltips the same workaround for new cell actions design that Security timeline received

opauloh · 2024-01-04T22:21:14Z

x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/hooks/use_styles.ts

+    /* EUI QUESTION: Why is this being done via CSS instead of setting isExpandable: false in the columns API? */
+    & .euiDataGridRowCell__actions > .euiDataGridRowCell__expandCell {
      display: none;
    }


Thanks for pointing this out! I actually wasn't aware about this option, I'll update it to use isExpanded in a follow up PR

Thanks!! 🙇 I was able to take a peek at this when I was fixing the UI locally. display: none isn't visually breaking in this case, but it could be a very minor accessibility issue for keyboards users with no screen readers (since keyboard users can't access cell actions except via the expansion popover).

If it's not a blocker, we'd love for this CSS to simply be removed, but we'll leave it up to you all/another PR!

opauloh

cloud security changes LGTM 🚀🚀🚀

kibana-ci · 2024-01-04T22:22:48Z

💚 Build Succeeded

Buildkite Build
Commit: f008ede

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`aiops`	387.2KB	387.2KB	+8.0B
`apm`	3.1MB	3.1MB	+1.0B
`cloudSecurityPosture`	455.2KB	455.4KB	+145.0B
`data`	46.9KB	46.9KB	+16.0B
`discover`	594.6KB	594.4KB	-172.0B
`exploratoryView`	203.3KB	203.3KB	+1.0B
`fileUpload`	956.6KB	956.6KB	+1.0B
`infra`	1.3MB	1.3MB	+9.0B
`lens`	1.4MB	1.4MB	-12.0B
`ml`	3.6MB	3.6MB	+417.0B
`monitoring`	462.2KB	462.2KB	+1.0B
`securitySolution`	11.3MB	11.4MB	+586.0B
`serverlessSearch`	424.3KB	424.2KB	-48.0B
`synthetics`	843.9KB	843.9KB	+1.0B
`transform`	402.5KB	402.9KB	+415.0B
`uptime`	458.4KB	458.4KB	+1.0B
total			+1.3KB

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`core`	378.0KB	377.8KB	-200.0B
`inspector`	22.0KB	22.0KB	+8.0B
`kbnUiSharedDeps-css`	255.8KB	258.0KB	+2.2KB
`kbnUiSharedDeps-npmDll`	6.2MB	6.2MB	+1.1KB
`logsShared`	219.1KB	219.1KB	+1.0B
`observability`	100.7KB	100.8KB	+1.0B
total			+3.1KB

Unknown metric groups

ESLint disabled line counts

id	before	after	diff
`@kbn/ml-data-grid`	3	4	+1
`@kbn/unified-data-table`	5	4	-1
total			-0

Total ESLint disabled count

id	before	after	diff
`@kbn/ml-data-grid`	3	4	+1
`@kbn/unified-data-table`	5	4	-1
total			-0

History

💔 Build #185951 failed 35a86f3
💛 Build #185471 was flaky 5d2266d
💛 Build #185090 was flaky 2fe4fc1
💔 Build #185085 failed aa84895
💚 Build #184848 succeeded 654deea

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

PhilippeOberti

thanks @cee-chen for fixing the weird tooltip issue. The solution you have now seems actually pretty good!

ymao1

Response Ops changes LGTM

`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>

## Summary issue: #177410 Adding `overflow: hidden` style was causing the cell actions to disappear after the upgrade to [EUI upgrade to v91.3.1](#173569) The `overflow: hidden` style is no longer needed, it has been removed. So cell actions are displayed

## Summary issue: elastic#177410 Adding `overflow: hidden` style was causing the cell actions to disappear after the upgrade to [EUI upgrade to v91.3.1](elastic#173569) The `overflow: hidden` style is no longer needed, it has been removed. So cell actions are displayed (cherry picked from commit ab864b4)

#177501) # Backport This will backport the following commits from `main` to `8.13`: - [[Security Solution] Fix cell actions in Explore pages (#177478)](#177478)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Sergi Massaneda <sergi.massaneda@elastic.co>

## Summary issue: elastic#177410 Adding `overflow: hidden` style was causing the cell actions to disappear after the upgrade to [EUI upgrade to v91.3.1](elastic#173569) The `overflow: hidden` style is no longer needed, it has been removed. So cell actions are displayed

Heenawter mentioned this pull request Dec 19, 2023

[Dashboard navigation] Show icon on external links and Dashboard links that open in a new tab #165771

Closed

cee-chen mentioned this pull request Dec 20, 2023

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

Merged

2 tasks

cee-chen changed the title ~~Upgrade EUI to v91.3.0~~ Upgrade EUI to v91.3.1 Dec 20, 2023

cee-chen force-pushed the eui-v91.3.0 branch 2 times, most recently from 0faea55 to 16ff1ba Compare December 20, 2023 23:49

cee-chen added 5 commits December 20, 2023 17:38

Upgrade EUI to latest v91.3.1

b110caa

i18n updates

26bc58b

[EuiButton] Fix new textProps typing

f5bc81e

- `textProps` can now be false, so we need the specific falsy check instead of using optional chaining

[EuiSuperSelect] Fix type issue

70fbbb7

- the component now allows setting non-nullish falsy values (e.g. false, 0, etc) as option values, so specifying `string` is needed here

[EuiText] Emotion className hash updates

b3b1da2

- hash changed due to removed child `img` styles

cee-chen force-pushed the eui-v91.3.0 branch from 16ff1ba to ef30127 Compare December 21, 2023 01:40

cee-chen added 14 commits December 20, 2023 17:41

[EuiText] Remove serverless search <p> workaround

a0a5190

- now that we're no longer opinionatedly adding margins to `<img>` tags within EuiText - see elastic/eui#7356 (comment)

[EuiLink] External icon className snapshot updates

f8fcc4f

[EuiLink] Test fix for external icon logic

7c179db

- icon is still there, but the text is not if `target="_blank"` is not set

[EuiBasicTable] Test changes to account for table action updates

06e309e

[EuiDataGrid] Test changes to account for toolbar UI updates

b5162eb

[EuiDataGrid] Test fixes/updates for new column count copy/UI

13817ab

[EuiDataGrid] Fix test to account for new cell actions location

7e5d870

[EuiDataGrid][ml] Fix custom headers with histogram charts to account…

a905e5e

… for new redesign + replace theme token usage with new preferred Emotion-inferred theme, which involves adding an `emotion.d.ts` file (https://emotion.sh/docs/typescript#define-a-theme)

[ml] Update chart assertion percentage

6f38de0

- not totally sure why this changed slightly, but my best guess is the header redesign

[EuiDataGrid] Remove CSS overrides for cell actions

3dd3794

- should no longer be necessary with new design

[EuiDataGrid] Update CSS selector, question about usage

640a4ff

[EuiDataGrid] Update row height CSS selectors

e4a480a

cee-chen force-pushed the eui-v91.3.0 branch from ef30127 to 9ed96cf Compare December 21, 2023 01:41

cee-chen marked this pull request as ready for review December 21, 2023 02:47

cee-chen requested review from a team as code owners December 21, 2023 02:47

cee-chen mentioned this pull request Jan 2, 2024

[EuiContextMenu] Missing underline hover on link items in Firefox elastic/eui#7429

Closed

gergoabraham approved these changes Jan 3, 2024

View reviewed changes

cee-chen added 2 commits January 4, 2024 08:33

Merge remote-tracking branch 'upstream/main' into eui-v91.3.0

95b5526

[Security Solution] Improve visibility of new cell actions design

ac3bef9

- when combined with tooltips

cee-chen requested a review from a team as a code owner January 4, 2024 17:59

cee-chen and others added 2 commits January 4, 2024 10:55

[Cloud Security Posture] EuiDataGrid tweaks

35a86f3

- restore left alignment of header cells - fix vertical center alignment of cell contents - add more left spacing to custom toolbar data - give timestamp tooltips the same workaround for new cell actions design that Security timeline received

Merge branch 'main' into eui-v91.3.0

f008ede

opauloh reviewed Jan 4, 2024

View reviewed changes

opauloh approved these changes Jan 4, 2024

View reviewed changes

PhilippeOberti approved these changes Jan 4, 2024

View reviewed changes

jughosta mentioned this pull request Jan 5, 2024

[Discover] Truncate table header to 3 lines #171013

Merged

ymao1 approved these changes Jan 5, 2024

View reviewed changes

cee-chen merged commit 7357af5 into elastic:main Jan 5, 2024
39 checks passed

cee-chen deleted the eui-v91.3.0 branch January 5, 2024 16:22

kibanamachine added the backport:skip This commit does not require backporting label Jan 5, 2024

Dosant mentioned this pull request Jan 8, 2024

[UI Actions] On Firefox Drilldown text is missing underline hover #105664

Closed

cee-chen mentioned this pull request Jan 8, 2024

[Discover] Selecting a number with a short value covers the field entirely #133739

Closed

semd mentioned this pull request Mar 5, 2024

[Security Solution] Layout shift in Data Grid Cell actions UI #161857

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade EUI to v91.3.1 #173569

Upgrade EUI to v91.3.1 #173569

cee-chen commented Dec 18, 2023 •

edited

Loading

MichaelMarcialis commented Jan 2, 2024

gergoabraham left a comment

cee-chen commented Jan 4, 2024 •

edited

Loading

opauloh Jan 4, 2024

cee-chen Jan 4, 2024 •

edited

Loading

opauloh left a comment •

edited

Loading

kibana-ci commented Jan 4, 2024

ESLint disabled line counts

Total ESLint disabled count

PhilippeOberti left a comment

ymao1 left a comment

Upgrade EUI to v91.3.1 #173569

Upgrade EUI to v91.3.1 #173569

Conversation

cee-chen commented Dec 18, 2023 • edited Loading

v91.3.1

v91.3.0

v91.2.0

v91.1.0

MichaelMarcialis commented Jan 2, 2024

gergoabraham left a comment

Choose a reason for hiding this comment

cee-chen commented Jan 4, 2024 • edited Loading

opauloh Jan 4, 2024

Choose a reason for hiding this comment

cee-chen Jan 4, 2024 • edited Loading

Choose a reason for hiding this comment

opauloh left a comment • edited Loading

Choose a reason for hiding this comment

kibana-ci commented Jan 4, 2024

💚 Build Succeeded

Metrics [docs]

Async chunks

Page load bundle

ESLint disabled line counts

Total ESLint disabled count

History

PhilippeOberti left a comment

Choose a reason for hiding this comment

ymao1 left a comment

Choose a reason for hiding this comment

cee-chen commented Dec 18, 2023 •

edited

Loading

`v91.3.1`

`v91.3.0`

`v91.2.0`

`v91.1.0`

cee-chen commented Jan 4, 2024 •

edited

Loading

cee-chen Jan 4, 2024 •

edited

Loading

opauloh left a comment •

edited

Loading