Upgrade EUI to v87.1.0 #163961

cee-chen · 2023-08-15T17:10:01Z

v86.0.0⏩v87.1.0

⚠️ The biggest set of type changes in this PR come from the breaking change that makes pageSize and pageSizeOptions now optional props for EuiBasicTable.pagination, EuiInMemoryTable.pagination and EuiDataGrid.pagination.

This caused several other components that were cloning EUI's pagination type to start throwing type warnings about pageSize being optional. Where I came across these errors, I modified the extended types to require pageSize. These types and their usages may end up changing again in any case once the Shared UX team looks into #56406.

`87.1.0`

Updated the underlying library powering EuiAutoSizer. This primarily affects typing around the disableHeight and disableWidth props (#6798)
Added new EuiAutoSize, EuiAutoSizeHorizontal, and EuiAutoSizeVertical types to support EuiAutoSizer's now-stricter typing (#6798)
Updated EuiDatePickerRange to support compressed display (#7058)
Updated EuiFlyoutBody with a new scrollableTabIndex prop (#7061)
Added a new panelMinWidth prop to EuiInputPopover (#7071)
Added a new inputPopoverProps prop for EuiRanges and EuiDualRanges with showInput="inputWithPopover" set (#7082)

Bug fixes

Fixed EuiToolTip overriding instead of merging its aria-describedby tooltip ID with any existing aria-describedbys (#7055)
Fixed EuiSuperDatePicker's compressed display (#7058)
Fixed EuiAccordion to remove tabbable children from sequential keyboard navigation when the accordion is closed (#7064)
Fixed EuiFlyouts to accept custom aria-describedby IDs (#7065)

Accessibility

Removed the default dialog role and tabIndex from push EuiFlyouts. Push flyouts, compared to overlay flyouts, require manual accessibility management. (#7065)

`87.0.0`

Added beta componentDefaults prop to EuiProvider, which will allow configuring certain default props globally. This list of components and defaults is still under consideration. (#6923)
EuiPortal's insert prop can now be configured globally via EuiProvider.componentDefaults (#6941)
EuiFocusTrap's crossFrame and gapMode props can now be configured globally via EuiProvider.componentDefaults (#6942)
EuiTablePagination's itemsPerPage, itemsPerPageOptions, and showPerPageOptions props can now be configured globally via EuiProvider.componentDefaults (#6951)
EuiBasicTable, EuiInMemoryTable, and EuiDataGrid now allow pagination.pageSize to be undefined. If undefined, pageSize defaults to EuiTablePagination's itemsPerPage component default. (#6993)
EuiBasicTable, EuiInMemoryTable, and EuiDataGrid's pagination.pageSizeOptions will now fall back to EuiTablePagination's itemsPerPageOptions component default. (#6993)
Updated EuiHeaderLinks's gutterSize spacings (#7005)
Updated EuiHeaderAlert's stacking styles (#7005)
Added toolTipProps to EuiListGroupItem that allows customizing item tooltips. (#7018)
Updated EuiBreadcrumbs to support breadcrumbs that toggle popovers via popoverContent and popoverProps (#7031)
Improved the contrast ratio of disabled titles within EuiSteps and EuiStepsHorizontal to meet WCAG AA guidelines. (#7032)
Updated EuiSteps and EuiStepsHorizontal to highlight and provide a more clear visual indication of the current step (#7048)

Bug fixes

Single uses of <EuiHeaderSectionItem side="right" /> now align right as expected without needing a previous side="left" sibling. (#7005)
EuiPageTemplate now correctly displays panelled={true} (#7044)

Breaking changes

EuiTablePagination's default itemsPerPage is now 10 (was previously 50). This can be configured through EuiProvider.componentDefaults. (#6993)
EuiTablePagination's default itemsPerPageOptions is now [10, 25, 50] (was previously [10, 20, 50, 100]). This can be configured through EuiProvider.componentDefaults. (#6993)
Removed border prop from EuiHeaderSectionItem (unused since Amsterdam theme) (#7005)
Removed borders object configuration from EuiHeader.sections (#7005)

CSS-in-JS conversions

Converted EuiHeaderAlert to Emotion; Removed unused .euiHeaderAlert__dismiss CSS (#7005)
Converted EuiHeaderSection, EuiHeaderSectionItem, and EuiHeaderSectionItemButton to Emotion (#7005)
Converted EuiHeaderLinks and EuiHeaderLink to Emotion; Removed $euiHeaderLinksGutterSizes Sass variables (#7005)
Removed $euiHeaderBackgroundColor Sass variable; use $euiColorEmptyShade instead (#7005)
Removed $euiHeaderChildSize Sass variable; use $euiSizeXXL instead (#7005)

- Its new Emotion wrapper causes Enzyme to fail

…type

- note: to take advantage of the new table pagination defaults, consider removing the initially set `pageSize` state

…nd DRY out types

cee-chen · 2023-08-16T14:51:26Z

@elasticmachine merge upstream

cee-chen · 2023-08-16T20:40:35Z

@elasticmachine merge upstream

cee-chen · 2023-08-16T21:37:59Z

@elasticmachine merge upstream

maxcold

cloud_security_posture changes looks good

nreese · 2023-08-17T15:51:39Z

...ps/public/classes/styles/heatmap/components/__snapshots__/heatmap_style_editor.test.tsx.snap

-            "#a6afbf",
-            "#8c95a5",
-            "#757c8b",
+            "#c3c9d4",


I could not find any changes in the logs that resulting in color picker snapshot changes. Can you explain why these hex codes changed? The are generated with euiPaletteGray.

Hey Nathan! I was a little confused about this snapshot change too, but it looks like the change likely occurred due to our underlying chroma.js dependency upgrade: elastic/eui#7039

@tkajtoch, do you mind jumping in here if you would consider these changes expected? FWIW, I'm looking at our docs' palettes before and after and I can barely detect a difference to the human eye, so it's likely not a major impact.

Also, just wanted to mention our general changelog philosophy - we've historically skipped logging tech debt items / only log items that would directly impact consumer usage. We didn't expect this one to impact consumers or end-users, but the JS dependency ecosystem being what it is, an unexpected side effect emerged 😬 (although it's fortunately fairly benign in this case).

From a general developer experience perspective, I'd be curious to hear if you think it's worth logging all changes, including dependency upgrades, and whether the extra noise would be worth the extra traceability!

I looked into the changes and compared updated colors. Usually, tools like chroma.js convert input colors to a broader color space before calculating color variations, specifically to have a long enough bit depth for the colors to look correct after processing. 64-bit float values in HSL color space are way more precise than 8-bit RGB. I'm 99% sure it's caused by switching to using a binomial of degree n in this commit. We see the changes in chroma.scale because it's used here and probably in other places as well that eventually affect chroma.scale results.

The color difference can't realistically be noticed to the naked eye and even though hue and saturation are updated for each color it just looks like some kind of gamma correction while keeping luminance the same.

Thanks for the explanation.

From a general developer experience perspective, I'd be curious to hear if you think it's worth logging all changes, including dependency upgrades, and whether the extra noise would be worth the extra traceability!

I think its worth putting all changes in the change log. So there is a single comprehensive list of differences to consult.

Thanks Nathan! I'll take that feedback back to the team and discuss. No promises on timelines, but agreed that it's bitten us in the past before and will potentially make a difference in the future for debugging.

nreese

kibana-gis changes LGTM
code review only

yctercero

LGTM - security-detection-engine changes. Pulled down and tested rule creation, exceptions.

logeekal

@elastic/security-threat-hunting-investigations changes look good. 👍

darnautov · 2023-08-21T12:07:55Z

@cee-chen perhaps because of the EuiPageTemplate changes, the Data Visualizer page has this issue with a box shadow around the panel.

on main:

this branch:

+ remove example

cee-chen · 2023-08-21T15:00:21Z

@darnautov Thanks a million for catching this! Should be fixed with d3b45ad.

darnautov

ML and Transform changes tested and LGTM

andreadelrio

LGTM, thanks!

kibana-ci · 2023-08-21T22:16:40Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: eb3b4e3

Failed CI Steps

Test Failures

[job] [logs] FTR Configs #57 / aiops change point detection shows multiple results when split field is selected

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
`canvas`	1020.3KB	1020.3KB	+2.0B
`charts`	9.8KB	9.8KB	+2.0B
`dataVisualizer`	605.0KB	605.0KB	-12.0B
`enterpriseSearch`	2.6MB	2.6MB	-22.0B
`eventAnnotation`	176.7KB	176.7KB	+2.0B
`expressionPartitionVis`	32.1KB	32.1KB	+2.0B
`graph`	407.8KB	407.8KB	+2.0B
`lens`	1.4MB	1.4MB	+2.0B
`maps`	2.8MB	2.8MB	+2.0B
`mapsEms`	105.5KB	105.5KB	+2.0B
`securitySolution`	15.7MB	15.7MB	-30.0B
`visTypeTimelion`	38.8KB	38.8KB	+2.0B
total			-46.0B

Page load bundle

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

id	before	after	diff
`core`	379.0KB	379.4KB	+453.0B
`kbnUiSharedDeps-css`	293.5KB	291.0KB	-2.5KB
`kbnUiSharedDeps-npmDll`	6.1MB	6.2MB	+73.8KB
`kbnUiSharedDeps-srcJs`	2.2MB	2.2MB	+2.0B
total			+71.7KB

History

💔 Build #152115 failed 5b3ddfb
💔 Build #152097 failed dee75ba
💔 Build #152024 failed 33663cd
💔 Build #151958 failed d3b45ad
💛 Build #151219 was flaky 6792314
💔 Build #151200 failed 7b0e3a2

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

cee-chen force-pushed the eui-v87.1.x branch from 64474fc to a6ba261 Compare August 15, 2023 19:02

cee-chen added EUI v8.11.0 release_note:skip Skip the PR/issue when compiling release notes labels Aug 15, 2023

cee-chen force-pushed the eui-v87.1.x branch from 7f61392 to 76d1bf3 Compare August 15, 2023 19:18

cee-chen added 8 commits August 15, 2023 13:46

Upgrade EUI to v87.1.0

d56687b

i18n updates

1c34b60

[EuiHeader] Remove deprecated border/borders prop

d579e22

[EuiHeader] Remove deprecated Sass variables

da3c80b

[EuiHeader] Update snapshots

5a1e04a

[?] Update color picker snapshot

97e79d3

[EuiHeaderSectionItemButton] Fix failing Jest tests

fc7995c

- Its new Emotion wrapper causes Enzyme to fail

Fix type issues caused by now non-required Pagination pageSize prop…

7c08114

…type

cee-chen force-pushed the eui-v87.1.x branch 2 times, most recently from 860bea3 to 73b2b0a Compare August 15, 2023 21:29

cee-chen added 3 commits August 15, 2023 15:50

Fix more type definitions to require pageSize

c6daf9b

- note: to take advantage of the new table pagination defaults, consider removing the initially set `pageSize` state

[triggers_actions_ui] Require pageSize and DRY out types

abcf499

[kbn-securitysolution-exception-list-components] Require pageSize a…

36e9772

…nd DRY out types

cee-chen force-pushed the eui-v87.1.x branch from 73b2b0a to 36e9772 Compare August 15, 2023 22:50

kibanamachine and others added 2 commits August 16, 2023 10:51

Merge branch 'main' into eui-v87.1.x

a19e6f1

[?] Fix failing AIOps FTR test

b1ae046

cee-chen force-pushed the eui-v87.1.x branch from b0d3033 to b1ae046 Compare August 16, 2023 17:37

kibanamachine added 2 commits August 16, 2023 14:18

Merge branch 'main' into eui-v87.1.x

baa08ce

Merge branch 'main' into eui-v87.1.x

e02a5b2

Merge branch 'main' into eui-v87.1.x

7b0e3a2

kibanamachine and others added 2 commits August 16, 2023 17:38

Merge branch 'main' into eui-v87.1.x

4ff641f

Merge branch 'main' into eui-v87.1.x

6792314

rshen91 approved these changes Aug 17, 2023

View reviewed changes

joeypoon approved these changes Aug 17, 2023

View reviewed changes

maxcold approved these changes Aug 17, 2023

View reviewed changes

nreese reviewed Aug 17, 2023

View reviewed changes

nreese approved these changes Aug 17, 2023

View reviewed changes

patrykkopycinski approved these changes Aug 17, 2023

View reviewed changes

yctercero approved these changes Aug 20, 2023

View reviewed changes

jcger approved these changes Aug 21, 2023

View reviewed changes

logeekal approved these changes Aug 21, 2023

View reviewed changes

sebelga mentioned this pull request Aug 21, 2023

[EuiPageTemplate] Allow panelled={true} elastic/eui#7044

Merged

3 tasks

cee-chen added 2 commits August 21, 2023 07:59

Merge branch 'main' into eui-v87.1.x

684f321

[PR feedback] Fix EuiPageTemplate panelled behavior

d3b45ad

+ remove example

darnautov approved these changes Aug 21, 2023

View reviewed changes

andreadelrio approved these changes Aug 21, 2023

View reviewed changes

cee-chen enabled auto-merge (squash) August 21, 2023 15:26

cee-chen and others added 6 commits August 21, 2023 09:51

Merge branch 'main' into eui-v87.1.x

33663cd

Merge branch 'main' into eui-v87.1.x

8a2a436

Update AIOps assertion again

dee75ba

Merge branch 'main' into eui-v87.1.x

5b3ddfb

Un-fix AIOps test

98e6e42

Merge branch 'main' into eui-v87.1.x

eb3b4e3

Heenawter mentioned this pull request Aug 21, 2023

[Controls] Use new panelMinWidth prop in EuiInputPopover #164375

Closed

cee-chen merged commit 84ca85d into elastic:main Aug 21, 2023

cee-chen deleted the eui-v87.1.x branch August 21, 2023 22:16

kibanamachine added the backport:skip This commit does not require backporting label Aug 21, 2023

sebelga mentioned this pull request Aug 22, 2023

[Chrome UI] Fix background color in serverless #164419

Merged

cee-chen mentioned this pull request Sep 11, 2023

[wiki] Include dependency upgrades in changelog elastic/eui#7177

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade EUI to v87.1.0 #163961

Upgrade EUI to v87.1.0 #163961

cee-chen commented Aug 15, 2023 •

edited

Loading

cee-chen commented Aug 16, 2023

cee-chen commented Aug 16, 2023

cee-chen commented Aug 16, 2023

maxcold left a comment

nreese Aug 17, 2023

cee-chen Aug 17, 2023

cee-chen Aug 17, 2023 •

edited

Loading

tkajtoch Aug 17, 2023 •

edited

Loading

nreese Aug 17, 2023

cee-chen Aug 17, 2023

nreese left a comment

yctercero left a comment

logeekal left a comment •

edited

Loading

darnautov commented Aug 21, 2023

cee-chen commented Aug 21, 2023

darnautov left a comment

andreadelrio left a comment

kibana-ci commented Aug 21, 2023

Upgrade EUI to v87.1.0 #163961

Upgrade EUI to v87.1.0 #163961

Conversation

cee-chen commented Aug 15, 2023 • edited Loading

87.1.0

87.0.0

cee-chen commented Aug 16, 2023

cee-chen commented Aug 16, 2023

cee-chen commented Aug 16, 2023

maxcold left a comment

Choose a reason for hiding this comment

nreese Aug 17, 2023

Choose a reason for hiding this comment

cee-chen Aug 17, 2023

Choose a reason for hiding this comment

cee-chen Aug 17, 2023 • edited Loading

Choose a reason for hiding this comment

tkajtoch Aug 17, 2023 • edited Loading

Choose a reason for hiding this comment

nreese Aug 17, 2023

Choose a reason for hiding this comment

cee-chen Aug 17, 2023

Choose a reason for hiding this comment

nreese left a comment

Choose a reason for hiding this comment

yctercero left a comment

Choose a reason for hiding this comment

logeekal left a comment • edited Loading

Choose a reason for hiding this comment

darnautov commented Aug 21, 2023

cee-chen commented Aug 21, 2023

darnautov left a comment

Choose a reason for hiding this comment

andreadelrio left a comment

Choose a reason for hiding this comment

kibana-ci commented Aug 21, 2023

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

Metrics [docs]

Async chunks

Page load bundle

History

cee-chen commented Aug 15, 2023 •

edited

Loading

`87.1.0`

`87.0.0`

cee-chen Aug 17, 2023 •

edited

Loading

tkajtoch Aug 17, 2023 •

edited

Loading

logeekal left a comment •

edited

Loading