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

Upgrade EUI to v85.1.0 #162660

Merged
merged 12 commits into from
Aug 3, 2023
Merged

Upgrade EUI to v85.1.0 #162660

merged 12 commits into from
Aug 3, 2023

Conversation

breehall
Copy link
Contributor

@breehall breehall commented Jul 27, 2023

85.0.0 ➡️ 85.1.0

⚠️ The biggest change in this PR by far is the removal of several EuiFilterSelectItem CSS classes and styles associated with those classes. EUI has previously exported component-specific CSS classes for usage such as .euiFilterSelect__items, .euiFilterGroup__popoverPanel, or .euiAccordionForm.

As of our move to CSS-in-JS, we are actively moving away from this architecture. The goal is to either provide either a component or prop directly to you instead of a CSS class. As a reminder, our classNames are not guaranteed APIs and are subject to change without warning - should you need to tweak or customize EUI's styling, we strongly recommend passing in your own className.

💬 Moving forward, EUI will attempted to convert any usages of removed CSS classes and their direct usages in Kibana for you. In most cases, we'll hopefully be able to take the correct path of using a component or prop instead. In cases where we cannot or significant/complex changes are required, we may temporarily convert the CSS to a static CSS-in-JS usage instead and add a TODO asking the relevant team to address this in their own time (for example, the deprecation of EuiFilterSelectItem and its conversion to EuiSelectable).

85.1.0

  • Updated EuiComboBox's options to accept option.append and option.prepend props (#6953)
  • Updated deprecated .substr() usages to .substring() (#6954)
  • Updated EuiInlineEdit's read mode button to include a title tooltip, increasing readability of truncated text (#6966)

Bug fixes

  • Fixed EuiFilterGroup's responsive styles (#6983)

Deprecations

  • Deprecated EuiFilterSelectItem; Use EuiSelectable instead (#6982)

CSS-in-JS conversions

  • Converted EuiFilterSelectItem to Emotion (#6982)
  • Removed .euiFilterSelect__items CSS; Use EuiSelectable instead (#6982)
  • Removed .euiFilterSelect__note and .euiFilterSelect__noteContent CSS; Use EuiSelectableMessage instead (#6982)
  • Added focus.transparency and focus.backgroundColor theme tokens (#6984)

@breehall breehall added release_note:skip Skip the PR/issue when compiling release notes EUI v8.10.0 labels Jul 27, 2023
cee-chen and others added 4 commits July 27, 2023 12:21
- in favor of an actual component
- This CSS is no longer valid as of `EuiFilterSelectItem`'s Emotion conversion, and additionally we strongly recommend devs switch to using `EuiSelectable` as `EuiFilterSelectItem` will be deprecated at some point in the future
…e of EUI. This includes the conversion of EuiFilterGroupItem to Emotion and the removal of various euiFilterSelect classes.
@breehall breehall marked this pull request as ready for review July 28, 2023 20:38
@breehall breehall requested review from a team as code owners July 28, 2023 20:38
@breehall breehall requested a review from a team July 28, 2023 20:38
@breehall breehall requested a review from a team as a code owner July 28, 2023 20:38
@elasticmachine
Copy link
Contributor

Pinging @elastic/eui-team (EUI)

@botelastic botelastic bot added the Team:Fleet Team label for Observability Data Collection Fleet team label Jul 28, 2023
@elasticmachine
Copy link
Contributor

Pinging @elastic/fleet (Team:Fleet)

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 related changes LGTM.

</p>
</div>
</div>
<EuiSelectableMessage>
Copy link
Contributor

Choose a reason for hiding this comment

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

@breehall what are the plans for switching out the deprecated EuiFilterSelectItem for EuiSelectable, as is still being used in our file here?

Copy link
Member

Choose a reason for hiding this comment

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

There's a few too many usages in Kibana for EUI to tackle every single one of these ourselves, so we left the inline comments in hopes that Kibana teams would grab the deprecation conversions in their own time. It should hopefully be a fairly straightforward conversion, and if needed you can reference our docs example: https://elastic.github.io/eui/#/forms/filter-group#multi-select

As I mentioned in another comment, the final removal of EuiFilterSelectItem is still 6months+ out, so hopefully plenty of time for y'all - but please let us know if we can be a resource for this!

Copy link
Contributor

@jeramysoucy jeramysoucy left a comment

Choose a reason for hiding this comment

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

Kibana security (Spaces navigation) changes LGTM

Copy link
Contributor

@alisonelizabeth alisonelizabeth left a comment

Choose a reason for hiding this comment

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

I found a small visual regression in Index Management. Please let me know if you need help addressing. Thanks!

@@ -76,7 +83,10 @@ export function FilterListButton({ onChange, filters }: Props) {
panelPaddingSize="none"
data-test-subj="filterList"
>
<div className="euiFilterSelect__items">
{/* EUI NOTE: Please use EuiSelectable (which already has height/scrolling built in)
Copy link
Contributor

Choose a reason for hiding this comment

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

Is there an approximate timeline yet for the deprecation of EuiFilterSelectItem?

Copy link
Member

Choose a reason for hiding this comment

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

Apologies for not clarifying this - we're shooting for the end of the 2023, although this isn't a firm timeline on our end and we're super happy to flex/work with Kibana teams on this!

Copy link
Member

@spong spong left a comment

Choose a reason for hiding this comment

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

Checked out, tested locally and Security Detection Rules changes (ML Popover) LGTM! 👍

Copy link
Member

@sphilipse sphilipse left a comment

Choose a reason for hiding this comment

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

ent-search changes LGTM!

Copy link
Contributor

@cqliu1 cqliu1 left a comment

Choose a reason for hiding this comment

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

Presentation team changes LGTM 👍

@cee-chen

This comment was marked as duplicate.

@cee-chen

This comment was marked as duplicate.

@cee-chen
Copy link
Member

cee-chen commented Aug 1, 2023

@elasticmachine merge upstream

@cee-chen cee-chen requested a review from a team as a code owner August 1, 2023 18:15
Copy link
Contributor

@alisonelizabeth alisonelizabeth left a comment

Choose a reason for hiding this comment

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

Deployment Management changes LGTM

@kibana-ci
Copy link
Collaborator

💚 Build Succeeded

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
controls 199.8KB 199.8KB -83.0B
dataVisualizer 605.0KB 604.9KB -78.0B
enterpriseSearch 2.5MB 2.5MB +148.0B
fleet 1012.4KB 1012.8KB +424.0B
indexManagement 523.3KB 523.6KB +358.0B
infra 2.0MB 2.0MB +166.0B
securitySolution 15.6MB 15.6MB +957.0B
triggersActionsUi 1.4MB 1.4MB +365.0B
visTypeVega 1.8MB 1.8MB +165.0B
total +2.4KB

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 294.1KB 293.5KB -604.0B
kbnUiSharedDeps-npmDll 6.0MB 6.0MB +14.1KB
total +13.6KB

History

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

@cee-chen
Copy link
Member

cee-chen commented Aug 1, 2023

Thanks everyone for your terrific reviews and QA so far! ❤️

Pinging the remaining listed CODEOWNERS: @elastic/kibana-design, @elastic/security-threat-hunting-explore, @elastic/security-detection-engine and @gergoabraham. I'll be asking @elastic/kibana-operations to admin merge this in sometime tomorrow as a heads up.

Copy link
Contributor

@angorayc angorayc left a comment

Choose a reason for hiding this comment

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

Added #162943 to our todo list.

Copy link
Contributor

@vitaliidm vitaliidm left a comment

Choose a reason for hiding this comment

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

Detection Engine area LGTM

@mistic mistic merged commit 68fec4b into elastic:main Aug 3, 2023
@kibanamachine kibanamachine added the backport:skip This commit does not require backporting label Aug 3, 2023
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:Fleet Team label for Observability Data Collection Fleet team v8.10.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.