Upgrade EUI to v95.11.0 #192756

cee-chen · 2024-09-12T18:11:00Z

v95.10.1⏩v95.11.0

Note

The bulk of this release is EuiDataGrid. The component has been fully converted to Emotion, and several UX changes have been made to data cell actions. We recommend QA testing any data grid(s) that have custom styles applied to them.

Questions? Please see our Kibana upgrade FAQ.

`v95.11.0`

Updated EuiText, EuiTextColor, and EuiTextAlign with a new component prop that allows changing the default rendered <div> wrapper to a <span> or <p> tag. (#7993)
Updated EuiDataGrid's cell actions to always consistently be left-aligned, regardless of text content alignment (#8011)
Increased EuiDataGrid's cell actions hover zone to reduce UX friction when mousing over from the grid cell to its actions (#8011)

Bug fixes

Fixed EuiPopover to correctly inherit from EuiProvider's componentDefaults.EuiPortal.insert (#8003)
Fixed push EuiFlyoutResizables to not potentially block scrollbars on outside content (#8010)
Fixed an EuiDataGrid bug where the setCellProps callback passed by renderCellValue was not correctly applying custom data-test-subjs (#8011)

Accessibility

Updated the EuiBasicTable actions button's aria-label by adding a reference to the current row (#7994)

CSS-in-JS conversions

Converted EuiDataGrid's toolbar controls to Emotion (#7997)
- Removed $euiDataGridPopoverMaxHeight
Converted EuiDataGrid to Emotion (#7998)
- Removed $euiZDataGrid
- Removed $euiZHeaderBelowDataGrid
Converted EuiDataGrid's gridStyles to Emotion; Removed the following Sass variables and mixins: (#8006)
- $euiDataGridCellPaddingS
- $euiDataGridCellPaddingM
- $euiDataGridCellPaddingL
- $euiDataGridVerticalBorder
- $euiDataGridPrefix
- $euiDataGridStyles
- @euiDataGridSelector
- @euiDataGridStyles
Converted EuiDataGrid's cell popover, actions, and focus outline to Emotion; Removed the following Sass variables and mixins: (#8011)
- $euiZDataGridCellPopover
- @euiDataGridCellFocus
Converted EuiDataGrid's row, header, and footer cells to Emotion; Removed the following Sass variables and mixins: (#8013)
- $euiDataGridColumnResizerWidth
- @euiDataGridRowCell
- @euiDataGridHeaderCell
- @euiDataGridFooterCell

- header control cells no longer have `.euiDataGridHeaderCell__content` wrappers

- not totally sure how the Emotion conversion broke this :T but hovering over cells/etc helps ensure the button remains clickable

- `.euiDataGridHeader__action--selected` isn't a className that EUI sets anymore (as it wasn't doing anything) - we use sort/unsort copy - Lens is overriding EUI's copy, so we need to update the tests to be more manual and remove the `none` option

- prefer className specific to column selector instead

…eader text peter_griffin_blinds.gif

- `.euiDataGridHeaderCell__button` now behaves very differently due to interactive children change, so center it instead of stretching it - `.euiDataGridHeaderCell__popover` no longer exists - `.euiDataGridRowCell__content` no longer exists for control columns - `.euiDataGridRowCell--numeric` text alignment is already being applied by EUI, delete it

- `.euiDataGridHeaderCell__icon` no longer exists, use the data-test-subj attached directly to the column actions button instead - `.euiDataGridHeaderCell__content` no longer exists in control columns - `Unsort` text has been added to datagrid column actions to indicate a column is already being sorted

…text

- row # has been added to each actions button

elasticmachine · 2024-09-18T01:10:22Z

Pinging @elastic/eui-team (EUI)

peteharverson

ML changes LGTM. Tested locally (data grid usage in transforms and DFA).

packages/kbn-unified-data-table/src/components/data_table.scss

l-suarez

From the design point of view, all looks good.

I checked for visual regressions comparing current state and this pull request and didn't find differences. DataGrids checked in both light and dark theme:

Dashboards
Lens
Discover

Thank you!

PS - @elastic/kibana-design could you double check at your end? I'm not 100% familiar with the product yet and I might be missing something :S

…ntent div I was derping and should not have removed the `__content` selector 🤦

PhilippeOberti

code LGTM for the Threat Hunting Investigations team!

jughosta

Data Discovery changes LGTM, thanks! 👍

markov00 · 2024-09-20T12:02:34Z

x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx

-      'shoes- a, column 1, row 1',
-      '1588024800000- b, column 2, row 1',
-      '3- c, column 3, row 1',


I'm wondering why this has changed

The - a, column 1, row 1 is screen reader only text that I'm currently making several efforts to make less visible to users (e.g. in snapshots, during copy/paste events) while still remaining accessible to screen readers. This snapshot/test assertion change is a result of that.

Follow up note: if you still wish to assert on cell col/row placement in EuiDataGrid, please use the data-gridcell-column-index and data-gridcell-visible-row-index attributes.

x-pack/test/functional/apps/lens/group2/table_dashboard.ts

dej611 · 2024-09-20T12:27:47Z

x-pack/test/functional/apps/lens/group2/table.ts

@@ -36,7 +36,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
      expect(await lens.getDatatableCellText(0, 0)).to.eql('169.228.188.120');
      // Remove the sorting
      await retry.try(async () => {
-        await lens.changeTableSortingBy(0, 'none');
+        await lens.changeTableSortingBy(0, 'descending');


Why this change?

Had a look at the code underneath this change: apparently the new datagrid does mark any more the current sorting button as selected on the column actions dropdown.
So right now there's no way to get which "sorting" mode is currently "active" other than looking at the presence of the icon on the column.
Before a --selected class was added to the item.

Is this intentional?

Yep, I removed .euiDataGridHeader__action--selected from our classNames/CSS as it wasn't actually applying any useful styles anymore, and I hadn't realized this FTR test was hooking into it 😬 I replaced it instead with logic that adds "Sort/Unsort" text to represent currently sorted state:

But it looks like the Lens datagrid completely overrides the sort label with your own Sort ascending/descending node, which means that the default "Unsort" text can't be hooked into.

Options I can look into:

Remove your label override with a schemaLabel instead, which means that you get EuiDataGrid's "Unsort" text (the schemaLabel replaces the A-Z/Z-A text only)

Re-add a selected state as a data- attribute of some kind that you can hook into (would likely be the next release, and I can revert the Lens changes at that point)

Will convert this into a new follow up issue: #193826

x-pack/test/functional/apps/lens/group2/table.ts

ryankeairns · 2024-09-20T18:47:23Z

I don't know for certain it was this PR that changed it, but the header is no longer fully clickable.
Perhaps that was intentional, so I am seeking clarification.

For comparison, on the oblt demo instance (8.16 snapshot), you can click anywhere in the column header to open the action menu (sort, etc.). In this PR, you now must click on the overflow menu button to open the menu. As I said, this may well have been intentional but want to double check the source/reason for the change.

Thanks!

This PR

8.16 snapshot

cee-chen · 2024-09-20T19:11:26Z

@ryankeairns This change was not made in this EUI release or upgrade, it was made in #192026. Please see elastic/eui#7898, elastic/eui#7660, and elastic/eui#7469 for more context on the change and why several Kibana teams have requested it.

ryankeairns

Thanks for the additional context!

kibana-ci · 2024-09-23T20:05:42Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 7d15173
Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-192756-7d15173bc6bd

Failed CI Steps

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
`cloudSecurityPosture`	496.7KB	496.5KB	-240.0B
`discover`	812.9KB	812.6KB	-240.0B
`esqlDataGrid`	153.0KB	152.7KB	-240.0B
`securitySolution`	20.4MB	20.4MB	-1.2KB
`slo`	854.1KB	853.9KB	-240.0B
`unifiedDocViewer`	122.1KB	122.1KB	-16.0B
total			-2.1KB

Page load bundle

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

id	before	after	diff
`core`	454.6KB	455.0KB	+480.0B
`kbnUiSharedDeps-css`	148.7KB	129.6KB	-19.1KB
`kbnUiSharedDeps-npmDll`	6.2MB	6.2MB	+23.8KB
total			+5.2KB

History

💚 Build #235713 succeeded b373231
💛 Build #235409 was flaky dddde79
💔 Build #235381 failed f8cae9d
💛 Build #235042 was flaky f2df1a9
💔 Build #235030 failed 3d394c05c00e756a2ba3f82a6623e1820814a5ed

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

cee-chen · 2024-09-23T22:41:24Z

@dej611 @markov00 I'm moving forward with asking KibanaOps for an admin merge as we need to unblock EUI's release/upgrade process. @elastic/kibana-visualizations is the only CODEOWNER team remaining and your owned code only touches tests and no actual source code/user-impacting code, so I feel comfortable getting this into main for now. If you'd like me to follow up with another PR later, please feel free to ping me separately or over Slack. Thanks!

`v95.10.1`⏩`v95.11.0` > [!note] > The bulk of this release is **EuiDataGrid**. The component has been fully converted to Emotion, and several UX changes have been made to data cell actions. We recommend QA testing any data grid(s) that have custom styles applied to them. _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.11.0`](https://github.com/elastic/eui/releases/v95.11.0) - Updated `EuiText`, `EuiTextColor`, and `EuiTextAlign` with a new `component` prop that allows changing the default rendered `<div>` wrapper to a `<span>` or `<p>` tag. ([elastic#7993](elastic/eui#7993)) - Updated `EuiDataGrid`'s cell actions to always consistently be left-aligned, regardless of text content alignment ([elastic#8011](elastic/eui#8011)) - Increased `EuiDataGrid`'s cell actions hover zone to reduce UX friction when mousing over from the grid cell to its actions ([elastic#8011](elastic/eui#8011)) **Bug fixes** - Fixed `EuiPopover` to correctly inherit from `EuiProvider`'s `componentDefaults.EuiPortal.insert` ([elastic#8003](elastic/eui#8003)) - Fixed push `EuiFlyoutResizable`s to not potentially block scrollbars on outside content ([elastic#8010](elastic/eui#8010)) - Fixed an `EuiDataGrid` bug where the `setCellProps` callback passed by `renderCellValue` was not correctly applying custom `data-test-subj`s ([elastic#8011](elastic/eui#8011)) **Accessibility** - Updated the `EuiBasicTable` actions button's `aria-label` by adding a reference to the current row ([elastic#7994](elastic/eui#7994)) **CSS-in-JS conversions** - Converted `EuiDataGrid`'s toolbar controls to Emotion ([elastic#7997](elastic/eui#7997)) - Removed `$euiDataGridPopoverMaxHeight` - Converted `EuiDataGrid` to Emotion ([elastic#7998](elastic/eui#7998)) - Removed `$euiZDataGrid` - Removed `$euiZHeaderBelowDataGrid` - Converted `EuiDataGrid`'s `gridStyle`s to Emotion; Removed the following Sass variables and mixins: ([elastic#8006](elastic/eui#8006)) - `$euiDataGridCellPaddingS` - `$euiDataGridCellPaddingM` - `$euiDataGridCellPaddingL` - `$euiDataGridVerticalBorder` - `$euiDataGridPrefix` - `$euiDataGridStyles` - `@euiDataGridSelector` - `@euiDataGridStyles` - Converted `EuiDataGrid`'s cell popover, actions, and focus outline to Emotion; Removed the following Sass variables and mixins: ([elastic#8011](elastic/eui#8011)) - `$euiZDataGridCellPopover` - `@euiDataGridCellFocus` - Converted `EuiDataGrid`'s row, header, and footer cells to Emotion; Removed the following Sass variables and mixins: ([elastic#8013](elastic/eui#8013)) - `$euiDataGridColumnResizerWidth` - `@euiDataGridRowCell` - `@euiDataGridHeaderCell` - `@euiDataGridFooterCell` (cherry picked from commit 9bbb296)

kibanamachine · 2024-09-23T22:50:16Z

💚 All backports created successfully

Status	Branch	Result
✅	8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

# Backport This will backport the following commits from `main` to `8.x`: - [Upgrade EUI to v95.11.0 (#192756)](#192756)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  --------- Co-authored-by: Cee Chen <[email protected]> Co-authored-by: Cee Chen <[email protected]>

cee-chen added release_note:skip Skip the PR/issue when compiling release notes EUI v8.16.0 labels Sep 12, 2024

cee-chen force-pushed the eui/v95.11.0 branch 3 times, most recently from 7b4aaf3 to 6336a4d Compare September 16, 2024 23:02

cee-chen added 3 commits September 17, 2024 10:55

Upgrade EUI to v95.11.0

ddad948

i18n updates

251155a

[FTR] Update EuiDataGrid service based on DOM cleanup

c494941

- header control cells no longer have `.euiDataGridHeaderCell__content` wrappers

cee-chen force-pushed the eui/v95.11.0 branch 3 times, most recently from 8492a9b to 3d394c0 Compare September 17, 2024 21:38

cee-chen added 10 commits September 17, 2024 16:25

[FTR] Harden datagrid cell actions clicking

092a949

- not totally sure how the Emotion conversion broke this :T but hovering over cells/etc helps ensure the button remains clickable

[Lens][FTR] Fix FTR sorting failure

4eabb39

- `.euiDataGridHeader__action--selected` isn't a className that EUI sets anymore (as it wasn't doing anything) - we use sort/unsort copy - Lens is overriding EUI's copy, so we need to update the tests to be more manual and remove the `none` option

[ML][FTR] Fix test selector based on removed SR text

7a4f633

[ML][FTR] Fix test to account for removed className

dd3b630

- prefer className specific to column selector instead

[Discover][FTR] Update cell headers assertion to account for screen r…

83e605d

…eader text peter_griffin_blinds.gif

Fix Enzyme tests to account for new Emotion wrappers

ae8c25b

Update datagrid cell content test assertion w/ removed screen reader …

6bdfd0b

…text

Update EuiBasicTable to account for new a11y text

f2df1a9

- row # has been added to each actions button

cee-chen force-pushed the eui/v95.11.0 branch from 3d394c0 to f2df1a9 Compare September 17, 2024 23:25

cee-chen added the v9.0.0 label Sep 17, 2024

cee-chen marked this pull request as ready for review September 18, 2024 01:10

cee-chen requested review from a team as code owners September 18, 2024 01:10

vadimkibana approved these changes Sep 19, 2024

View reviewed changes

peteharverson approved these changes Sep 19, 2024

View reviewed changes

jughosta reviewed Sep 19, 2024

View reviewed changes

packages/kbn-unified-data-table/src/components/data_table.scss Outdated Show resolved Hide resolved

adcoelho approved these changes Sep 19, 2024

View reviewed changes

l-suarez reviewed Sep 19, 2024

View reviewed changes

[PR feedback] Revert incorrectly removed styles targeting row cell co…

b373231

…ntent div I was derping and should not have removed the `__content` selector 🤦

cee-chen added the backport:version Backport to applied version labels label Sep 19, 2024

davismcphee linked an issue Sep 19, 2024 that may be closed by this pull request

(Accessibility) top right "Filter out" hover menu in result list conflicts with browser scroll bar #192664

Closed

PhilippeOberti approved these changes Sep 19, 2024

View reviewed changes

jughosta approved these changes Sep 20, 2024

View reviewed changes

markov00 reviewed Sep 20, 2024

View reviewed changes

dej611 reviewed Sep 20, 2024

View reviewed changes

x-pack/test/functional/apps/lens/group2/table.ts Show resolved Hide resolved

ryankeairns requested a review from a team September 20, 2024 20:34

ryankeairns approved these changes Sep 20, 2024

View reviewed changes

Merge branch 'main' into eui/v95.11.0

7d15173

cee-chen requested review from markov00 and dej611 September 23, 2024 19:06

Ikuni17 merged commit 9bbb296 into elastic:main Sep 23, 2024
47 checks passed

kibanamachine mentioned this pull request Sep 23, 2024

[8.x] Upgrade EUI to v95.11.0 (#192756) #193803

Merged

cee-chen deleted the eui/v95.11.0 branch September 23, 2024 23:44

kibanamachine mentioned this pull request Sep 24, 2024

[ML] Move FieldStatsFlyout, parseInterval, validators to packages. #193657

Merged

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade EUI to v95.11.0 #192756

Upgrade EUI to v95.11.0 #192756

cee-chen commented Sep 12, 2024 •

edited by kibanamachine

Loading

elasticmachine commented Sep 18, 2024

peteharverson left a comment

l-suarez left a comment

PhilippeOberti left a comment

jughosta left a comment

markov00 Sep 20, 2024

cee-chen Sep 20, 2024

cee-chen Sep 20, 2024

dej611 Sep 20, 2024

dej611 Sep 20, 2024

cee-chen Sep 20, 2024 •

edited

Loading

dej611 Sep 24, 2024 •

edited

Loading

ryankeairns commented Sep 20, 2024 •

edited

Loading

cee-chen commented Sep 20, 2024

ryankeairns left a comment

kibana-ci commented Sep 23, 2024 •

edited

Loading

cee-chen commented Sep 23, 2024

kibanamachine commented Sep 23, 2024

Upgrade EUI to v95.11.0 #192756

Upgrade EUI to v95.11.0 #192756

Conversation

cee-chen commented Sep 12, 2024 • edited by kibanamachine Loading

v95.11.0

elasticmachine commented Sep 18, 2024

peteharverson left a comment

Choose a reason for hiding this comment

l-suarez left a comment

Choose a reason for hiding this comment

PhilippeOberti left a comment

Choose a reason for hiding this comment

jughosta left a comment

Choose a reason for hiding this comment

markov00 Sep 20, 2024

Choose a reason for hiding this comment

cee-chen Sep 20, 2024

Choose a reason for hiding this comment

cee-chen Sep 20, 2024

Choose a reason for hiding this comment

dej611 Sep 20, 2024

Choose a reason for hiding this comment

dej611 Sep 20, 2024

Choose a reason for hiding this comment

cee-chen Sep 20, 2024 • edited Loading

Choose a reason for hiding this comment

dej611 Sep 24, 2024 • edited Loading

Choose a reason for hiding this comment

ryankeairns commented Sep 20, 2024 • edited Loading

This PR

8.16 snapshot

cee-chen commented Sep 20, 2024

ryankeairns left a comment

Choose a reason for hiding this comment

kibana-ci commented Sep 23, 2024 • edited Loading

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Async chunks

Page load bundle

History

cee-chen commented Sep 23, 2024

kibanamachine commented Sep 23, 2024

💚 All backports created successfully

Questions ?

cee-chen commented Sep 12, 2024 •

edited by kibanamachine

Loading

`v95.11.0`

cee-chen Sep 20, 2024 •

edited

Loading

dej611 Sep 24, 2024 •

edited

Loading

ryankeairns commented Sep 20, 2024 •

edited

Loading

kibana-ci commented Sep 23, 2024 •

edited

Loading