Upgrade EUI to v95.1.0 #186324

cee-chen · 2024-06-17T18:18:49Z

v95.0.0-backport.0 ⏩ v95.1.0-backport.0

This PR primarily concerns converting multiple common/building block form control components to Emotion (text, number, and search fields). This means that custom CSS or direct className usage of these form controls should be manually QA'd to ensure they still look the same before visually, with no regressions.

Questions? Please see our Kibana upgrade FAQ.

`v95.1.0`

Updated EuiFormControlLayout to automatically pass icon padding affordance down to child inputs (#7799)

Bug fixes

Fixed broken focus/invalid styling on compressed EuiDatePickerRanges (#7770)

CSS-in-JS conversions

Converted EuiFieldText to Emotion (#7770)
Updated the autofill colors of Chrome (and other webkit browsers) to better match EUI's light and dark mode (#7776)
Converted EuiFieldNumber to Emotion (#7802)
Converted EuiFieldSearch to Emotion (#7802)
Converted EuiFieldPassword to Emotion (#7802)
Converted EuiTextArea to Emotion (#7812)
Converted EuiSelect to Emotion (#7812)
Converted EuiSuperSelect to Emotion (#7812)

`v95.1.0-backport.0`

This is a backport release only intended for use by Kibana.

Updated EuiSteps to support a new titleSize="xxs" style, which outputs the same title font size but smaller unnumbered step indicators (#7813)
Updated EuiStepsHorizontal to support a new size="xs" style, which outputs smaller unnumbered step indicators (#7813)
Updated EuiStepNumber to support new titleSize="none" which omits rendering step numbers, and will only render icons (#7813)

- in favor of icon configuration which sets the icon on the desired side (right) and automatically accounts for other icons/padding - remove `[readonly]` CSS, as the component isn't even setting a readonly prop so I'm not sure what that CSS is doing??

- no longer has any styles attached as of Emotion conversion, so manually apply styles instead

- should be using the top level import, not reaching directly into the file

- prefer `.render()`ed snapshot instead Enzyme wrapper snapshot

cee-chen · 2024-06-18T19:40:23Z

/ci

elasticmachine · 2024-06-18T22:00:05Z

Pinging @elastic/eui-team (EUI)

dhurley14

detection engine team changes LGTM. Thanks. Just snapshot updates.

jennypavlova

The code changes look good! 💯
I am not 100% sure if it's related to the PR but I saw this while testing:

The left paddings of the control drop-downs are missing (Infra -> Hosts)
Some search bars have borders on click some do not (APM & Infra -> Alerts)

Screen.Recording.2024-06-20.at.17.06.04.mov

Screen.Recording.2024-06-20.at.16.58.42.mov

Heenawter · 2024-06-20T15:24:02Z

The left paddings of the control drop-downs are missing (Infra -> Hosts)

@jennypavlova FYI - I looked into this, and this is most likely a result of #184533 + how the Hosts page modifies the renderPrepend in .../pages/metrics/hosts/components/search_bar/controls_content.tsx :) Don't think it's related to this EUI update.

jennypavlova · 2024-06-20T16:10:50Z

FYI - I looked into this, and this is most likely a result of #184533 + how the Hosts page modifies the renderPrepend in .../pages/metrics/hosts/components/search_bar/controls_content.tsx :) Don't think it's related to this EUI update.

@Heenawter Thanks for pointing that out! Looks like it's a recent bug as I couldn't see it on an earlier main version. Do we have an open issue for fixing that?

@cee-chen Sorry for that, I wasn't sure where this bug came from and I saw it on the branch, I will approve 👍

From a scan of this theme, this likely shouldn't be affecting _all_ `input` elements wholesale in any case

Heenawter

Canvas snapshot changes + quick review of Dashboard to ensure no style impacts. LGTM 👍

cee-chen · 2024-06-20T16:24:45Z

@jennypavlova Thanks so much for the thorough QA Jenny and Hannah, y'all rock! The missing border on focus issue should be fixed now with the latest commit, and I appreciate you flagging that so much 🙇

Feel free to ping us if we can help out with the odd padding behavior of form prepend/append nodes. As Hannah noted, those should not have been affected by this PR (not yet migrated to Emotion), although that will be happening soon.

jennypavlova · 2024-06-20T16:42:18Z

@cee-chen Thank you for fixing the borders, they look fine now! 💯

kibana-ci · 2024-06-20T20:04:24Z

💛 Build succeeded, but was flaky

Buildkite Build
Commit: 251e3e9
Kibana Serverless Image: docker.elastic.co/kibana-ci/kibana-serverless:pr-186324-251e3e925e22
Observability Deployment

Failed CI Steps

FTR Configs #8

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
`security`	587.8KB	587.8KB	-37.0B
`securitySolution`	13.6MB	13.6MB	-537.0B
`triggersActionsUi`	1.7MB	1.7MB	-23.0B
total			-597.0B

Page load bundle

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

id	before	after	diff
`kbnUiSharedDeps-css`	240.9KB	217.9KB	-23.0KB
`kbnUiSharedDeps-npmDll`	6.0MB	6.0MB	+9.7KB
total			-13.3KB

History

💛 Build #216960 was flaky 8e19a0c
💛 Build #216540 was flaky 0a23af3
💔 Build #216523 failed c29e8450914c0a22f00e9c40989d5c6e05c2cd09
💔 Build #216279 failed 5a77b55a8316b037bb7712567554d0db653cbb2f

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

saarikabhasi

Search changes LGTM. Tested locally.

`v95.0.0-backport.0` ⏩ `v95.1.0-backport.0` This PR primarily concerns converting multiple common/building block form control components to Emotion (text, number, and search fields). This means that custom CSS or direct `className` usage of these form controls **should be manually QA'd** to ensure they still look the same before visually, with no regressions. _[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.1.0`](https://github.com/elastic/eui/releases/v95.1.0) - Updated `EuiFormControlLayout` to automatically pass icon padding affordance down to child `input`s ([elastic#7799](elastic/eui#7799)) **Bug fixes** - Fixed broken focus/invalid styling on compressed `EuiDatePickerRange`s ([elastic#7770](elastic/eui#7770)) **CSS-in-JS conversions** - Converted `EuiFieldText` to Emotion ([elastic#7770](elastic/eui#7770)) - Updated the autofill colors of Chrome (and other webkit browsers) to better match EUI's light and dark mode ([elastic#7776](elastic/eui#7776)) - Converted `EuiFieldNumber` to Emotion ([elastic#7802](elastic/eui#7802)) - Converted `EuiFieldSearch` to Emotion ([elastic#7802](elastic/eui#7802)) - Converted `EuiFieldPassword` to Emotion ([elastic#7802](elastic/eui#7802)) - Converted `EuiTextArea` to Emotion ([elastic#7812](elastic/eui#7812)) - Converted `EuiSelect` to Emotion ([elastic#7812](elastic/eui#7812)) - Converted `EuiSuperSelect` to Emotion ([elastic#7812](elastic/eui#7812)) ## [`v95.1.0-backport.0`](https://github.com/elastic/eui/releases/v95.1.0-backport.0) **This is a backport release only intended for use by Kibana.** - Updated `EuiSteps` to support a new `titleSize="xxs"` style, which outputs the same title font size but smaller unnumbered step indicators ([elastic#7813](elastic/eui#7813)) - Updated `EuiStepsHorizontal` to support a new `size="xs"` style, which outputs smaller unnumbered step indicators ([elastic#7813](elastic/eui#7813)) - Updated `EuiStepNumber` to support new `titleSize="none"` which omits rendering step numbers, and will only render icons ([elastic#7813](elastic/eui#7813))

cee-chen added 4 commits June 18, 2024 10:53

Upgrade EUI to v95.1.0

6382acc

[EuiFieldText] Remove direct className usage, replace with component

6775a4d

[EuiFieldText] Remove custom CSS

420e89f

- in favor of icon configuration which sets the icon on the desired side (right) and automatically accounts for other icons/padding - remove `[readonly]` CSS, as the component isn't even setting a readonly prop so I'm not sure what that CSS is doing??

[EuiFieldText] Remove deprecated className from test selector

7f6da2f

cee-chen force-pushed the eui/v95.1.0 branch from 5a77b55 to c29e845 Compare June 18, 2024 18:22

cee-chen added 5 commits June 18, 2024 12:39

[EuiSuperSelect] Replace direct className usage

9125e17

- no longer has any styles attached as of Emotion conversion, so manually apply styles instead

[EuiSuperSelect] Fix option type imports

0066533

- should be using the top level import, not reaching directly into the file

Update snapshots

d0ce5b9

Update Enzyme snapshot

a93d933

- prefer `.render()`ed snapshot instead Enzyme wrapper snapshot

Fix/update Enzyme tests affected by new Emotion wrappers

0a23af3

cee-chen force-pushed the eui/v95.1.0 branch from c29e845 to 0a23af3 Compare June 18, 2024 19:40

cee-chen marked this pull request as ready for review June 18, 2024 21:59

cee-chen requested review from a team as code owners June 18, 2024 21:59

cee-chen requested a review from dhurley14 June 18, 2024 21:59

cee-chen added release_note:skip Skip the PR/issue when compiling release notes EUI v8.15.0 labels Jun 18, 2024

jbudz approved these changes Jun 18, 2024

View reviewed changes

botelastic bot added the ci:project-deploy-observability Create an Observability project label Jun 18, 2024

smith added the apm:review label Jun 19, 2024

SiddharthMantri approved these changes Jun 19, 2024

View reviewed changes

yuliacech self-requested a review June 20, 2024 09:22

yuliacech approved these changes Jun 20, 2024

View reviewed changes

dej611 approved these changes Jun 20, 2024

View reviewed changes

jennypavlova self-requested a review June 20, 2024 13:45

dhurley14 approved these changes Jun 20, 2024

View reviewed changes

jennypavlova reviewed Jun 20, 2024

View reviewed changes

jennypavlova approved these changes Jun 20, 2024

View reviewed changes

Fix legacy theme CSS overridding Emotion focus border/box-shadow CSS

8e19a0c

From a scan of this theme, this likely shouldn't be affecting _all_ `input` elements wholesale in any case

cee-chen requested a review from a team as a code owner June 20, 2024 16:17

Heenawter approved these changes Jun 20, 2024

View reviewed changes

afharo approved these changes Jun 20, 2024

View reviewed changes

cnasikas approved these changes Jun 20, 2024

View reviewed changes

Merge branch 'main' into eui/v95.1.0

251e3e9

lukasolson approved these changes Jun 20, 2024

View reviewed changes

saarikabhasi approved these changes Jun 20, 2024

View reviewed changes

cee-chen enabled auto-merge (squash) June 21, 2024 14:49

Ikuni17 disabled auto-merge June 21, 2024 16:10

Ikuni17 merged commit 04d6c1d into elastic:main Jun 21, 2024
52 checks passed

kibanamachine added the backport:skip This commit does not require backporting label Jun 21, 2024

cee-chen deleted the eui/v95.1.0 branch June 24, 2024 17:01

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade EUI to v95.1.0 #186324

Upgrade EUI to v95.1.0 #186324

cee-chen commented Jun 17, 2024 •

edited

Loading

cee-chen commented Jun 18, 2024

elasticmachine commented Jun 18, 2024

dhurley14 left a comment

jennypavlova left a comment

Heenawter commented Jun 20, 2024 •

edited

Loading

jennypavlova commented Jun 20, 2024

Heenawter left a comment •

edited

Loading

cee-chen commented Jun 20, 2024

jennypavlova commented Jun 20, 2024

kibana-ci commented Jun 20, 2024 •

edited

Loading

saarikabhasi left a comment

Upgrade EUI to v95.1.0 #186324

Upgrade EUI to v95.1.0 #186324

Conversation

cee-chen commented Jun 17, 2024 • edited Loading

v95.1.0

v95.1.0-backport.0

cee-chen commented Jun 18, 2024

elasticmachine commented Jun 18, 2024

dhurley14 left a comment

Choose a reason for hiding this comment

jennypavlova left a comment

Choose a reason for hiding this comment

Heenawter commented Jun 20, 2024 • edited Loading

jennypavlova commented Jun 20, 2024

Heenawter left a comment • edited Loading

Choose a reason for hiding this comment

cee-chen commented Jun 20, 2024

jennypavlova commented Jun 20, 2024

kibana-ci commented Jun 20, 2024 • edited Loading

💛 Build succeeded, but was flaky

Failed CI Steps

Metrics [docs]

Async chunks

Page load bundle

History

saarikabhasi left a comment

Choose a reason for hiding this comment

cee-chen commented Jun 17, 2024 •

edited

Loading

`v95.1.0`

`v95.1.0-backport.0`

Heenawter commented Jun 20, 2024 •

edited

Loading

Heenawter left a comment •

edited

Loading

kibana-ci commented Jun 20, 2024 •

edited

Loading