Upgrade EUI to v43.1.1 #120935

thompsongl · 2021-12-09T15:27:56Z

Summary

[email protected] ⏩ [email protected]

Date picker UI has been partially redesigned
- Enable auto refresh prior to changing interval
- "Show dates" button replaced with click target over the input
- Start date popover opens automatically when showing range
EuiCode and EuiCodeBlock have be refactored to share less code and simplify markup
Amsterdam is now the default theme in EUI
- Kibana had already made this theme change
- EUI Sass files were moved to new locations
Updates CoreThemeProvider to use EuiProvider, which extends EuiThemeProvider
- Provides reset and global styles
- Accepts an @emotion/cache configuration for reset and global styles
Adds a @emotion/cache configuration for reset and global styles to ensure they load before static CSS
Updates various theme-related types and constants to import from EUI
showStyleSelector prop was renamed showDisplaySelector in EuiDataGrid

`43.1.1`

Bug fixes

Fixed EuiDataGrid's cell popover overlapping with modals and flyouts (#5461)
Fixed an accessibility issue where EuiDatePicker time options did not have unique IDs (#5466)
Fixed global and reset styles when using the legacy theme (#5473)
Fixed EuiSuperDatePicker not passing isDisabled to EuiAutoRefresh (#5472)

`43.1.0`

Added magnifyWithExclamation icon (#5455)

Bug fixes

Reinstated EuiCode and EuiCodeBlock testenv mocking (#5464)

`43.0.0`

Updated the organization of EuiDataGrid's toolbar/grid controls (#5334)
Updated EuiDataGrid's full screen mode to use the fullScreenExit icon (#5415)
Added left.append and left.prepend to EuiDataGrid's toolbarVisibility.additionalControls prop #5394)
Added a row height control to EuiDataGrid's toolbar (#5372)
Added onChange callbacks to EuiDataGrid's gridStyle and rowHeightOptions settings (#5424)
Added a reset button to EuiDataGrid's display controls (#5428)
Added timeRefresh icon (#5383)
Added responsive and iconOnly props to EuiSuperUpdateButton (#5383)
Added better auto refresh indicator to EuiSuperDatePicker (#5383)
Added compressed, width, isQuickSelectOnly props to EuiSuperDatePicker (#5383)
Updated showUpdateButton prop with iconOnly option in EuiSuperDatePicker (#5383)
Increased default refreshInterval of EuiSuperDatePicker to 1000 (#5383)
Remove Show dates button from pretty format of EuiSuperDatePicker in favor of directly opening start date popover (#5383)
Added shortHand option to prettyInterval (#5383)
Moved rounding switch to popover footer in relative tab of EuiSuperDatePicker (#5383)
Simplified EuiRefreshInterval to use a switch to start/stop and other visual touch ups (#5383)
Created stand alone EuiAutoRefresh and EuiAutoRefreshButton components (#5383)

Bug fixes

Fixed persistent EuiDataGrid full screen <body> class (#5354)
Fixed dark mode background color of EuiFormControlLayout prepend and append (#5383)
Fixed background color of EuiFormControlLayout when readOnly (#5383)
Fixed the name of data-test-subj prop of EuiFormControlLayout (#5383)
Fixed global reset styles for plain <button>s (#5452)

Breaking changes

Removed toolbarVisibility's showStyleSelector prop of EuiDataGrid in favor of showDisplaySelector, which allows configuration of both grid density and row height (#5372)
Changed prop name applyRefreshInterval to onRefreshChange in EuiRefreshInterval (#5383)
Increased the size of s-sized EuiLoadingSpinners to match s-sized EuiIcons (#5440)

`42.1.0`

Added first and last page arrow buttons to EuiPagination when compressed=true (#5362)
Added support for indeterminate EuiPagination when pageCount=0 (#5362)
Moved mobile behavior to a customizable responsive prop to EuiPagination that renders the compressed display (#5362)
Added doubleArrowLeft, doubleArrowRight, arrowStart, arrowEnd icons (#5362)

Bug fixes

Fixed scrollbars in EuiRange tick labels in Safari (#5427)
Fixed an EuiOverlayMask bug where it calls window.document on server side(#5422)
Fixed unremoved event listener memory leak in EuiPopover (#5437)
Fixed EuiDatePicker not correctly handling the onBlur callback (#5441)
Fixed EuiToolTip not correctly handling child onBlur and onFocus callbacks (#5441)

`42.0.0`

Feature: CSS-in-JS (#5121)

Added reset and global styles via CSS-in-JS with @emotion/react/Global
Added EuiProvider, a React context provider for theming and global styles
Added isDefaultTheme and isLegacyTheme utilities

Breaking changes

Added @emotion/react to peerDependencies
Amsterdam is now the default theme, deprecated and renamed old theme as "legacy"
Re-organized Sass files including where the globals are imported from

`41.4.0`

Added payment glyph to EuiIcon (#5414)
Updated EuiCodeBlock's full screen mode to use the fullScreenExit icon (#5421)

Bug fixes

Fixed an EuiCodeBlock bug where empty code blocks could be copyable (#5421)
Fixed an accessibility issue in EuiAvatar by adding a meaningful role (#5423)

`41.3.0`

Updated color of EuiHorizontalRule when rendered inside EuiToolTip (#5378)

Bug fixes

Fixed an EuiDataGrid bug where paginated overflowing data grids could become unscrollable when rowCount changed (#5400)
Fixed EuiCode line-wrapping (#5379)
Fixed EuiCodeBlock not passing data-test-subj or aria-label to virtualized & full-screen code blocks (#5379)
Fixed EuiCodeBlock not closing full-screen mode when the Escape key is pressed (#5379)
Fixed virtualized EuiCodeBlocks blanking out when entering & exiting full-screen mode (#5379)
Fixed EuiCodeBlock's full-screen mode to use a large font and padding size & added several missing wrapper classes (#5379)
Fixed EuiCodeBlock broken line wrapping when using virtualization (#5379)
Fixed type exports to not include test mocks & specs (#5412)

Theme: Amsterdam

Fixed EuiCodeBlock not properly increasing large font sizes on Amsterdam (#5379)

For maintainers

This was checked for breaking API changes and was labeled appropriately

pgayvallet · 2021-12-16T06:42:58Z

src/core/public/theme/convert_core_theme.ts

  return {
-    colorMode: darkMode ? 'DARK' : 'LIGHT',
+    colorMode: darkMode ? COLOR_MODES_STANDARD.dark : COLOR_MODES_STANDARD.light,


👍 thanks for that

pgayvallet · 2021-12-16T06:56:35Z

src/core/public/theme/core_theme_provider.tsx

 * @internal Only meant to be used within core for internal usages of EUI/React
 */
 export const CoreThemeProvider: FC<CoreThemeProviderProps> = ({ theme$, children }) => {
  const coreTheme = useObservable(theme$, defaultTheme);
  const euiTheme = useMemo(() => convertCoreTheme(coreTheme), [coreTheme]);
  return (
-    <EuiThemeProvider colorMode={euiTheme.colorMode} theme={euiTheme.euiThemeSystem}>
+    <EuiProvider
+      modify={{ LIGHT: { colors: { primary: '#FF0000' } } }}


I think declaring a const for this modify value outside of the component is slightly better for memory and rerendering triggers as it would not be recreated at each rerendering + only one instance will be used for all usages of CoreThemeProvider

Thanks for flagging this. This was meant entirely to test the setup and will be removed before merging.

We will want to expand the API to pass modify to KibanaThemeProvider, but I don't see that as an immediate need.

pgayvallet · 2021-12-16T06:58:56Z

src/core/public/theme/core_theme_provider.tsx

+const emotionCache = createCache({
+  key: 'eui-styles',
+  container: document.querySelector(`meta[name="${EUI_STYLES_GLOBAL}"]`) as HTMLElement,
+});


Hum, shouldn't this also be used in the public version of the EuiProvider wrapper in src/plugins/kibana_react/public/theme/kibana_theme_provider.tsx ? (same for modify)

If that's the case, we'll have to expose this cache from core somehow, so that both version of the wrapper use the same cache instance?

Only the top-level theme provider needs the cache because it's the only provider that now also provides global styles. Those global styles only need to be included once and are the only styles that require the cache. Eventually, once EUI has converted all components to Emotion, the global style cache will be unnecessary and can be removed.

Ok, Just to be sure we're on the same page, this CoreThemeProvider component is not used only once.

It is used as a 'top level' provider for chrome's react tree, but is also used for internal core's components, such as toasts, flyout and modal, as all those components are their own distinct react tree / ReactDOM.render call.

Is it still fine?

Yes, this is fine, thanks for clarifying. My main point was that a nested KibanaThemeProvider does not need to be aware of the cache.

I'll probably have a follow-up PR that ensures no duplication of the global styles from the various toasts, flyout and modal, etc. instances, but there will be no adverse affects in the meantime.

cnasikas

Security solution changes LGTM!

kertal

Data discover code changes LGTM, didn't test for now, but I'm excited that data grid row height selection is now available in Kibana 🥳

claudiopro · 2021-12-16T12:03:39Z

test/functional/page_objects/time_picker.ts

+    const toggleButtonChecked = await this.testSubjects.getAttribute(
+      'superDatePickerToggleRefreshButton',
+      'aria-checked'


I <3 this tweak

claudiopro

Observability test changes look good, thanks for the fix.

patrykkopycinski

Asset management LGTM

walterra

ML/transform changes LGTM

weltenwort

no visible breakage in infra and monitoring 👍

pgayvallet

LGTM for core changes

Dosant

App services LGTM
I tested refresh interval in Discover and Dashboard and didn't find any issues

kertal · 2021-12-20T15:03:19Z

@elasticmachine merge upstream

thompsongl · 2021-12-20T15:37:18Z

Remaining reviews are for snapshot changes only. Will merge on the next successful CI run.

kibana-ci · 2021-12-20T16:47:58Z

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id	before	after	diff
`core`	325	331	+6

Async chunks

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

id	before	after	diff
`core`	132.5KB	132.5KB	+12.0B
`discover`	316.4KB	316.4KB	+2.0B
`ml`	3.5MB	3.5MB	+4.0B
`osquery`	942.3KB	942.3KB	+2.0B
`securitySolution`	4.6MB	4.6MB	-1.0B
`timelines`	227.0KB	227.0KB	+2.0B
`visTypeTable`	15.7KB	15.7KB	+2.0B
total			+23.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`	277.6KB	290.6KB	+13.0KB
`data`	441.0KB	441.1KB	+75.0B
`interactiveSetup`	58.4KB	58.4KB	+42.0B
`kbnUiSharedDeps-css`	590.8KB	591.5KB	+691.0B
`kbnUiSharedDeps-npmDll`	5.1MB	6.1MB	⚠️ +1.0MB
`kbnUiSharedDeps-srcJs`	3.8MB	3.8MB	-3.0B
`kibanaReact`	58.5KB	58.6KB	+42.0B
total			⚠️ +1.0MB

History

💚 Build #13974 succeeded b4c2ab7
💚 Build #13694 succeeded b582282
💚 Build #13528 succeeded 75f7ac4
💚 Build #13462 succeeded 07eee93
💔 Build #13292 failed db050f0
💔 Build #13271 failed b579d27

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

* eui to v43.0.0 * update themeprovider types * update sass import location * storyshots * snapshots * jest * jest * timepicker functional test helpers * snapshots * timepicker functional test helpers * invert checked logic * fix i18n token * snapshots * handle new refresh interval operations order * refactor refresh interval logic, test * jest * timepicker popover order * eui to v43.1.0 * jest * jest * jest * euicode selector * jest * functional tests * functional tests * timepicker * bump timeout * conditional click to close * clean up * eui to v43.1.1 * clean up * loading background Co-authored-by: Kibana Machine <[email protected]>

This reverts commit 604409b.

thompsongl added 3 commits December 9, 2021 09:08

eui to v43.0.0

3d27dde

update themeprovider types

ae5276c

Merge branch 'main' into eui/43.0

c233f80

thompsongl added release_note:skip Skip the PR/issue when compiling release notes EUI v8.1.0 labels Dec 9, 2021

thompsongl added 24 commits December 9, 2021 09:41

update sass import location

9e49e8f

storyshots

d73dbee

snapshots

138ab58

jest

72de6ee

jest

4ef571f

Merge branch 'main' into eui/43.0

8c67812

timepicker functional test helpers

0a4c8ed

snapshots

1460999

timepicker functional test helpers

655ab86

invert checked logic

af37e56

Merge branch 'main' into eui/43.0

d97e9fd

fix i18n token

7f85b10

snapshots

5e4a764

handle new refresh interval operations order

f370b20

Merge branch 'main' into eui/43.0

25d8b6b

refactor refresh interval logic, test

9b530e0

jest

719c5a8

Merge branch 'main' into eui/43.0

104ba53

timepicker popover order

4616bc7

eui to v43.1.0

1e9a278

jest

3f10425

Merge branch 'main' into eui/43.0

5d514cc

jest

35705e1

jest

3a33df2

pgayvallet reviewed Dec 16, 2021

View reviewed changes

cnasikas approved these changes Dec 16, 2021

View reviewed changes

kertal approved these changes Dec 16, 2021

View reviewed changes

claudiopro reviewed Dec 16, 2021

View reviewed changes

claudiopro approved these changes Dec 16, 2021

View reviewed changes

patrykkopycinski approved these changes Dec 16, 2021

View reviewed changes

clean up

dc71e80

weltenwort self-requested a review December 16, 2021 15:48

Merge branch 'main' into eui/43.0

b582282

walterra approved these changes Dec 16, 2021

View reviewed changes

weltenwort approved these changes Dec 16, 2021

View reviewed changes

pgayvallet approved these changes Dec 16, 2021

View reviewed changes

thompsongl added 2 commits December 17, 2021 10:51

loading background

69a308a

Merge branch 'main' into eui/43.0

b4c2ab7

tylersmalley approved these changes Dec 17, 2021

View reviewed changes

Dosant approved these changes Dec 20, 2021

View reviewed changes

MichaelMarcialis approved these changes Dec 20, 2021

View reviewed changes

Merge branch 'main' into eui/43.0

a280d69

thompsongl merged commit 604409b into elastic:main Dec 20, 2021

kibanamachine added the backport:skip This commit does not require backporting label Dec 20, 2021

estermv mentioned this pull request Dec 27, 2021

[Unified Observability] Fix stories #121557

Merged

Dosant mentioned this pull request Dec 29, 2021

Customize panel time range display auto-refresh UI #122135

Closed

thompsongl added a commit to thompsongl/kibana that referenced this pull request Jan 4, 2022

Revert "Upgrade EUI to v43.1.1 (elastic#120935)"

a733604

This reverts commit 604409b.

jen-huang mentioned this pull request Jan 4, 2022

[Fleet]: Screenshots column is broken under integration overview page. #122202

Closed

cee-chen mentioned this pull request Jan 6, 2022

Upgrade EUI to v44.0.0 #122386

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Upgrade EUI to v43.1.1 #120935

Upgrade EUI to v43.1.1 #120935

thompsongl commented Dec 9, 2021 •

edited

Loading

pgayvallet Dec 16, 2021

pgayvallet Dec 16, 2021 •

edited

Loading

thompsongl Dec 16, 2021

thompsongl Dec 16, 2021

pgayvallet Dec 16, 2021 •

edited

Loading

thompsongl Dec 16, 2021

pgayvallet Dec 16, 2021

thompsongl Dec 16, 2021

cnasikas left a comment

kertal left a comment

claudiopro Dec 16, 2021

claudiopro left a comment

patrykkopycinski left a comment

walterra left a comment

weltenwort left a comment

pgayvallet left a comment

Dosant left a comment

kertal commented Dec 20, 2021

thompsongl commented Dec 20, 2021

kibana-ci commented Dec 20, 2021

Upgrade EUI to v43.1.1 #120935

Upgrade EUI to v43.1.1 #120935

Conversation

thompsongl commented Dec 9, 2021 • edited Loading

Summary

Feature: CSS-in-JS (#5121)

For maintainers

Choose a reason for hiding this comment

pgayvallet Dec 16, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

pgayvallet Dec 16, 2021 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

cnasikas left a comment

Choose a reason for hiding this comment

kertal left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

claudiopro left a comment

Choose a reason for hiding this comment

patrykkopycinski left a comment

Choose a reason for hiding this comment

walterra left a comment

Choose a reason for hiding this comment

weltenwort left a comment

Choose a reason for hiding this comment

pgayvallet left a comment

Choose a reason for hiding this comment

Dosant left a comment

Choose a reason for hiding this comment

kertal commented Dec 20, 2021

thompsongl commented Dec 20, 2021

kibana-ci commented Dec 20, 2021

💚 Build Succeeded

Metrics [docs]

Module Count

Async chunks

Page load bundle

History

thompsongl commented Dec 9, 2021 •

edited

Loading

pgayvallet Dec 16, 2021 •

edited

Loading

pgayvallet Dec 16, 2021 •

edited

Loading