Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bumping EUI to version 64.0.4 #140323

Merged
merged 29 commits into from
Sep 20, 2022
Merged

Conversation

1Copenut
Copy link
Contributor

@1Copenut 1Copenut commented Sep 8, 2022

Summary

eui@63.0.6eui@64.0.4


64.0.4

Note: this release is a backport containing changes originally made in 67.2.0

  • Added the custom_component search filter type for the EuiSearchBar. This new type gives the consumer control to render the search filter dropdown. (#6226)

Bug fixes

  • Fixed EuiPageSection not correctly merging contentProps.css (#6239)
  • Fixed EuiPageHeaderContent not correctly merging passed classNames (#6239)
  • Fixed EuiAccordion not correctly merging buttonProps.css and arrowProps.css (#6239)
  • Fixed EuiProgress not correctly merging labelProps.css (#6239)
  • Fixed EuiImage not correctly merging wrapperProps.css (#6239)

64.0.3

Note: this release is a backport containing changes originally made in 66.0.0

Bug fixes

  • Updated the EuiHeaderSectionItem to not render if empty (#6158)

64.0.2

Note: this release is a backport containing changes originally made in 65.0.0 to 67.0.0

Bug fixes

  • Fixed missing EuiDataGrid cell popover shadows in Safari (#6163)
  • Added memoization to useEuiTheme's return value, supporting React's shallow prop comparison optimizations (#6165)
  • Fixed global styles being inserted into the wrong location when a EuiProvider cache is not configured. (#6202)
  • Fixed various nested componentProps throwing type errors on the css prop (#6211)

Note: The below are backport changes already present in 63.x

  • Added a new component prop to EuiPageSection, allowing overriding of the default section tag (#6192)

Bug fixes

  • Fixed the text size of EuiDescriptionListTitle when EuiDescriptionList is compressed (#6160)
  • Fixed an EuiPageSidebar bug where inline styles were not correctly updating (#6191)

Deprecations

  • Added @deprecated flags to EuiPageContent_Deprecated, EuiPageContentBody_Deprecated, EuiPageContentHeader_Deprecated, EuiPageContentHeaderSection_Deprecated, EuiPageSideBar_Deprecated and EuiPageTemplate_Deprecated, which will provide helpful hints to IDEs that support jsdoc flags. Consumers will have until August 2023 to migrate from these deprecated components. (#6194)

64.0.1

Bug fixes

  • Fixed CollapsedItemActions ref callback not accounting for null value (#6145)

CSS-in-JS conversions

  • Added logicalCSSWithFallback() utility for logical properties without full browser support (#6124)
  • Converted euiFullHeight() Sass mixin to Emotion (#6124)
  • Converted all global CSS utility classes to Emotion (#6124)

64.0.0

  • Added onPositionChange callback prop to EuiPopover for when the popover positon changes (#6087)
  • Added isDisabled prop to EuiAccordion (#6095)
  • Added css prop to CommonProps interface (#6118)
  • Added new useIsWithinMaxBreakpoint and useIsWithinMinBreakpoint service hooks (#6119)

Bug fixes

  • Fixed the steps prop type for useEuiTour to not require onFinish (#6087)
  • Fixed JS breakpoint hooks (useCurrentEuiBreakpoint, useIsWithinBreakpoints, and euiBreakpoint) to correctly handle custom theme breakpoint keys (#6111)
  • Fixed :first-child/:nth-child console warnings for consumers not passing in a cache to EuiProvider (#6126)
  • Fixed EuiScreenReaderLive double announcements on VO when focusRegionOnTextChange is not set (#6133)
  • Fixed onBlur and onFocus handlers from EuiDatePickerRange being incorrectly applied to wrapping element rather than the start/end control datepickers. (#6136)
  • Fixed missing data-fixed-headers property in some layout configurations using EuiPageTemplate. (#6140)
  • Fixed EuiAspectRatio sometimes incorrectly inheriting its height from parent containers as opposed to from its aspect ratio (#6141)
  • Fixed EuiAspectRatio to allow custom styles to be passed by consumers (#6141)
  • Fixed eui.d.ts containing @testing-library type definitions (#6142)

Breaking changes

  • Removed getBreakpoint. Use useCurrentEuiBreakpoint instead (#6119)
  • Removed BREAKPOINTS and BREAKPOINT_KEYS. Use euiTheme.breakpoint instead (#6119)
  • Removed isWithinBreakpoints. Use useIsWithinBreakpoints instead (#6119)
  • Removed isWithinMaxBreakpoint. Use useIsWithinMaxBreakpoint instead (#6119)
  • Removed isWithinMinBreakpoint. Use useIsWithinMinBreakpoint instead (#6119)
  • EuiFlyout now only accepts a named breakpoint size for its pushMinBreakpoint prop (#6119)
  • EuiCollapsibleNav now only accepts a named breakpoint size for its dockedBreakpoint prop (#6119)
  • @emotion/cache is now a required peer dependency, alongside @emotion/react (#6126)

CSS-in-JS conversions

  • Converted EuiTour to Emotion (#6087)

@1Copenut 1Copenut added release_note:skip Skip the PR/issue when compiling release notes EUI v8.5.0 labels Sep 8, 2022
@1Copenut 1Copenut self-assigned this Sep 8, 2022
1Copenut and others added 9 commits September 9, 2022 09:02
- in favor of useCurrentEuiBreakpoint
…e resize observer

- since getBreakpoint is now deprecated, we're only looking at the current EUI breakpoint (based off window width)
- Setup for custom xl+ breakpoint sizes used by APM and Synthetics
- since getBreakpoint is no longer an usable util

- EUI's new breakpoint hooks already use/debounce window resize events, so we now get to skip all that custom logic by simply making custom EUI breakpoint overrides and using EUI breakpoint hooks

- remove returned `breakpoint` and `width` keys - they weren't actually being used anywhere in APM that I could see and were causing type errors.
- If someone wants to access them, they can use `useCurrentEuiBreakpoint` and `useWindowSize` individually instead
- basically the exact same logic, they just also need the xxl and xxxl breakpoints
…ooks

+ add xxl and xxxl breakpoints to Synthetics EUI themes

- `useBreakpoints`: - as far as I can tell, all attached APIs are basically the same APIs that EUI provides OOTB:
  - up -> `useIsWithinMinBreakpoint`
  - down -> `useIsWithinMaxBreakpoint`
  - between -> `useIsWithinBreakpoints`
  - debouncedWidth - not used, but could just use `useWindowSize` directly instead

- note: i'm confused by the `xl` override/conflation with `xxl`, but left the default xl breakpoint size as-is and assumed that all usage instances of 'xl' actually wanted 'xxl'
@cee-chen cee-chen changed the title Bumping EUI to version 64.0.1. Bumping EUI to version 64.0.2 Sep 9, 2022
@cee-chen cee-chen changed the title Bumping EUI to version 64.0.2 Bumping EUI to version 64.0.3 Sep 9, 2022
cee-chen and others added 12 commits September 9, 2022 15:58
- functionally doesn't matter since the array doesn't include undefined, so basically just silence TS complaining about it
… vs table resize observer"

This reverts commit 4e60ce2.
- by replacing the breakpoint logic/switch with custom breakpoint sizes and names

- since the table size can be within panels that don't match `window.innerWidth`, we can't use EUI's breakpoint utils here
- because of their new custom xxl/xxxl breakpoints, the `isLargerBreakpoint` logic was broken on the shared solution nav. switching to a min breakpoint bound fixes the issue and futureproofs the solution nav for all apps that add larger breakpoints than xl
@botelastic botelastic bot added Team:Fleet Team label for Observability Data Collection Fleet team Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability labels Sep 15, 2022
@elasticmachine
Copy link
Contributor

Pinging @elastic/uptime (Team:uptime)

@elasticmachine
Copy link
Contributor

Pinging @elastic/fleet (Team:Fleet)

@elasticmachine
Copy link
Contributor

Pinging @elastic/apm-ui (Team:APM)

@cee-chen
Copy link
Member

cee-chen commented Sep 15, 2022

👋 Hey y'all! The major breaking change of this EUI upgrade is the removal of all our non-hook breakpoint utils. Because breakpoints can now be customized through EuiProvider's modify prop, all our breakpoint helpers are now hooks that call useEuiTheme in order to obtain any custom breakpoints (whereas the previous utils were using a static map).

This most affects the following teams/plugins:

  1. @elastic/apm - see b24bc95
  2. x-pack/plugins/ux (sorry, not sure what team owns this) - see a371dac
  3. @elastic/uptime & x-pack/plugins/synthetics - see 15ec605

For all of the above mentioned teams, I added 2 new breakpoints to your apps/EUI themes: xxl (1600px) and xxxl (2000px). You can click through to your specific commits to see your changes, but essentially what I did was replace or in some cases remove your custom useBreakpoints hook/util since a lot of them had custom code around your custom xxl/xxxl breakpoints that are unnecessary now that EUI fully supports modifying/adding to our theme breakpoints.

Other teams that received mostly 1:1 / non-major hook conversions were:

  • DataViz, specifically the DataVisualizerTable component (I've been messaging @qn895 about this so hopefully works during QA and doesn't have any major surprises)
  • Fleet, Infra Metrics Inventory, & Uptime Monitor - basic util conversion to new hook utils

If you see any issues or bugs behavior around the new breakpoint logic/UX, please don't hesitate to reach out or ping us!

@@ -100,7 +101,7 @@ export const SolutionNav: FC<SolutionNavProps> = ({
}) => {
const isSmallerBreakpoint = useIsWithinBreakpoints(mobileBreakpoints);
const isMediumBreakpoint = useIsWithinBreakpoints(['m']);
const isLargerBreakpoint = useIsWithinBreakpoints(['l', 'xl']);
const isLargerBreakpoint = useIsWithinMinBreakpoint('l');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

what does this do? and where did xl go?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

With the refactored breakpoint hooks, we discovered a situation where the side nav would stop rendering if the browser window was 1600px or wider. By switching to the useIsWithinMinBreakpoint('l') we removed that upper range and effectively said at large breakpoint or wider, always evaluate to true.

Copy link
Member

@cee-chen cee-chen Sep 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

commit message reference: cf858f1

because of [apm/ux/uptime/synthetic's] new custom xxl/xxxl breakpoints, the isLargerBreakpoint logic was broken on the shared solution nav. switching to a min breakpoint bound fixes the issue and futureproofs the solution nav for all apps that add larger breakpoints than xl

For more context: EUI now supports both customizing our existing breakpoint sizes (xs through xl) and adding more custom breakpoints (in this case, xxl: 1600 and xxxl: 2000 for the apm/ux/uptime/synthetic plugins).

This means that using useIsWithinBreakpoints['l', 'xl'] is unintentionally too limiting for plugins with custom larger breakpoints, it translates to is within the l and xl screens only whereas this logic really wants is at least the l screen and above, which is what useIsWithinMinBreakpoint does.

@@ -5,7 +5,6 @@
* 2.0.
*/

import { getBreakpoint } from '@elastic/eui';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is it possible to make use of useCurrentEuiBreakpoint here so we don't have to use hard coded widths like (width <= 575) further down?

Copy link
Member

@cee-chen cee-chen Sep 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unfortunately, no. I tried it in 4e60ce2, but this caused several functional tests to fail (correctly so). I had to revert the commit and do 2aa2234 instead.

The reason why is because useCurrentEuiBreakpoint only uses window.innerWidth and does not accept variable widths like getBreakpoint. Unfortunately, DataVisualizerTable is not always the width of the screen; it is occasionally in panels that are (e.g.) half the size of the screen or less.

So this logic does not translate to the new breakpoint hooks; but to be honest the concept of a breakpoint does tie in to windows/screens and not necessarily arbitrary component sizes/container queries, so the switch usage is perfectly valid - it just happens to use widths that correspond to EUI's breakpoint sizes (which you can now easily change to tailor to your component).

Hope that makes sense, if not LMK and I can tag you into a Slack thread that had more discussion on this.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for clarifying! We'll pick it up in a follow up. Can you please just add a comment like // TODO migrate to use useCurrentEuiBreakpoint or similar in the section below with the hard coded values?

Copy link
Member

@cee-chen cee-chen Sep 19, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure I explained well. You cannot migrate your current resize observer / calculateTableColumnsDimensions logic to useCurrentEuiBreakpoint because your table width is not always 1:1 with window.innerWidth.

At most you can move away the static numbers in your branching logic to not be 1:1 with EUI's breakpoint sizes so it's clear you're not trying to use our screen size breakpoints.

cc @qn895 on this as we discussed this while I was working on the deprecation, hoping you can help clarify!

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Quynh pinged me about it and I suggested this: e6be719

Using a static map/constant and changing the breakpoints slightly from EUI may affect functionality slightly compared to before but helps more clearly distinguish that this table uses its own component-width-based breakpoints, and not EUI's screen-size-based breakpoints.

Copy link
Contributor

@Dosant Dosant left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

src/plugins/kibana_utils/public/theme/kibana_theme_provider.tsx lgtm

@cee-chen
Copy link
Member

@elasticmachine merge upstream

Copy link
Contributor

@walterra walterra left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

ML changes LGTM, we'll pick up using the new breakpoint utils in a follow up.

@@ -5,7 +5,6 @@
* 2.0.
*/

import { getBreakpoint } from '@elastic/eui';
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for clarifying! We'll pick it up in a follow up. Can you please just add a comment like // TODO migrate to use useCurrentEuiBreakpoint or similar in the section below with the hard coded values?

Copy link
Contributor

@majagrubic majagrubic left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

shared-ux changes look good; code review only

cee-chen and others added 2 commits September 19, 2022 09:33
…kpoints

- per discussion with Quynh and Walter, there's some confusion around the breakpoints that the table is using. Since the table is width is not always the width of the browser window, it cannot use EUI's breakpoint hooks, and should instead use its own custom map of table-specific breakpoints to make that separation clearer
@kibana-ci
Copy link
Collaborator

💚 Build Succeeded

Metrics [docs]

Module Count

Fewer modules leads to a faster build time

id before after diff
apm 1306 1304 -2
fleet 729 725 -4
synthetics 969 968 -1
ux 149 145 -4
total -11

Async chunks

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

id before after diff
aiops 753.1KB 753.1KB +1.0B
apm 3.0MB 3.0MB -1016.0B
canvas 1.0MB 1.0MB +1.0B
cases 372.5KB 372.5KB +1.0B
charts 80.1KB 80.1KB +1.0B
cloud 7.7KB 7.7KB +1.0B
cloudSecurityPosture 203.6KB 203.6KB +1.0B
controls 458.6KB 458.6KB +1.0B
dashboard 387.4KB 387.4KB -9.0B
dataViewManagement 148.2KB 148.2KB +1.0B
dataVisualizer 566.7KB 566.7KB +13.0B
discover 477.1KB 477.1KB -4.0B
discoverEnhanced 43.9KB 43.9KB +1.0B
enterpriseSearch 1.7MB 1.7MB -9.0B
expressionHeatmap 90.7KB 90.7KB +1.0B
expressionMetricVis 73.0KB 73.0KB +1.0B
fileUpload 851.2KB 851.2KB +1.0B
fleet 889.1KB 887.8KB -1.3KB
graph 450.0KB 450.0KB -9.0B
home 146.9KB 146.9KB -9.0B
infra 1017.1KB 1017.1KB -12.0B
ingestPipelines 430.8KB 430.8KB +1.0B
inputControlVis 78.2KB 78.2KB +1.0B
kibanaOverview 46.1KB 46.1KB -9.0B
lens 1.2MB 1.2MB -9.0B
lists 149.0KB 149.0KB +1.0B
management 30.4KB 30.4KB -9.0B
maps 2.6MB 2.6MB -10.0B
ml 3.3MB 3.3MB +1.0B
monitoring 479.7KB 479.7KB +1.0B
observability 521.6KB 521.6KB -8.0B
osquery 1009.8KB 1009.8KB +1.0B
presentationUtil 130.5KB 130.5KB +1.0B
profiling 369.3KB 369.3KB +1.0B
security 536.1KB 536.1KB -10.0B
securitySolution 6.4MB 6.4MB -15.0B
stackAlerts 100.7KB 100.7KB +1.0B
synthetics 990.6KB 990.0KB -617.0B
threatIntelligence 71.2KB 71.2KB +1.0B
transform 388.0KB 388.0KB +1.0B
triggersActionsUi 1.0MB 1.0MB +1.0B
unifiedFieldList 54.4KB 54.4KB +1.0B
unifiedSearch 260.4KB 260.4KB +1.0B
upgradeAssistant 179.8KB 179.8KB +1.0B
ux 164.2KB 162.8KB -1.4KB
visTypeTimelion 108.6KB 108.6KB +1.0B
visTypeVega 1.7MB 1.7MB +1.0B
visualizations 217.9KB 217.9KB -9.0B
total -4.4KB

Page load bundle

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

id before after diff
core 362.3KB 362.3KB +1.0B
dashboardEnhanced 42.9KB 42.9KB +1.0B
data 431.8KB 431.8KB +1.0B
esUiShared 152.6KB 152.6KB -9.0B
expressions 97.3KB 97.3KB +1.0B
interactiveSetup 58.4KB 58.4KB +18.0B
kbnUiSharedDeps-css 443.9KB 437.3KB -6.5KB
kbnUiSharedDeps-npmDll 5.0MB 5.0MB +7.2KB
kbnUiSharedDeps-srcJs 3.8MB 3.8MB -1.0B
kibanaReact 52.1KB 52.1KB +18.0B
kibanaUtils 68.8KB 68.8KB +18.0B
maps 81.5KB 81.5KB +1.0B
security 52.3KB 52.3KB +1.0B
securitySolution 261.2KB 261.2KB +1.0B
telemetry 22.3KB 22.3KB +1.0B
timelines 260.8KB 260.8KB +1.0B
total +742.0B

History

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

cc @1Copenut

Copy link
Contributor

@YulNaumenko YulNaumenko left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Security Solution changes LGTM!

Copy link
Contributor

@MiriamAparicio MiriamAparicio left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

APM UI changes LGTM

Copy link
Contributor

@lucasfcosta lucasfcosta left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! Also tested the synthetics app E2E for these changes and it seems to be working just fine. Thanks for the update.

Copy link
Member

@jennypavlova jennypavlova left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks good! Thank you 😊

@1Copenut 1Copenut merged commit 3788293 into elastic:main Sep 20, 2022
@kibanamachine kibanamachine added the backport:skip This commit does not require backporting label Sep 20, 2022
@1Copenut 1Copenut deleted the feature/tpierce-eui-64.0.1 branch September 20, 2022 13:51
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:skip This commit does not require backporting EUI release_note:skip Skip the PR/issue when compiling release notes Team:APM All issues that need APM UI Team support Team:Fleet Team label for Observability Data Collection Fleet team Team:Uptime - DEPRECATED Synthetics & RUM sub-team of Application Observability v8.5.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.