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 v96.1.0 #194619

Merged
merged 7 commits into from
Oct 4, 2024
Merged

Upgrade EUI to v96.1.0 #194619

merged 7 commits into from
Oct 4, 2024

Conversation

cee-chen
Copy link
Member

@cee-chen cee-chen commented Oct 1, 2024

v95.12.0v96.1.0

Questions? Please see our Kibana upgrade FAQ.


v96.0.0

  • Improved EuiPageHeader/EuiPageTemplate.Header's responsive UX: (#8044)
    • rightSideItems are no longer pushed to the side by wide tabs content
    • rightSideItems now wrap more responsively at smaller container widths
  • Updated EuiDraggable with a new usePortal prop. (#8048)
    • This prop portals the dragged element to the body, allowing it to escape stacking contexts which prevents buggy drag positioning in e.g. popovers, modals, and flyouts.

Bug fixes

  • Fixed EuiProvider's system color mode detection causing errors during server-side rendering (#8040)
  • Fixed an EuiDataGrid rendering bug that was causing bouncing scrollbar issues (#8041)
  • Fixed EuiSearchBox skips input when running with React 18 in Legacy Mode (#8047)

Deprecations

  • Deprecated EuiPopover's hasDragDrop prop. Use EuiDraggable's new usePortal prop instead. (#8048)

Breaking changes

  • Removed the following exported .css files: (#8045)
    • @elastic/eui/dist/eui_theme_light.css
    • @elastic/eui/dist/eui_theme_light.min.css
    • @elastic/eui/dist/eui_theme_dark.css
    • @elastic/eui/dist/eui_theme_dark.min.css
  • All EUI components are now on CSS-in-JS. A CSS file/import in consuming applications is no longer needed, and is safe to remove. (#8045)
  • Removed all src/theme/legacy Sass exports (#8054)

CSS-in-JS conversions

  • Removed the following component-specific Sass variables: (#8031)
    • $euiButtonColorDisabled
    • $euiButtonColorDisabledText
    • $euiButtonColorGhostDisabled
    • $euiButtonFontWeight
    • $euiFormControlIconSizes
    • $euiFormControlLayoutGroupInputHeight
    • $euiFormControlLayoutGroupInputCompressedHeight
    • $euiFormControlLayoutGroupInputCompressedBorderRadius
    • $euiPageSidebarMinWidth
    • $euiPageDefaultMaxWidth
    • $euiPanelPaddingModifiers
    • $euiPanelBorderRadiusModifiers
    • $euiPanelBackgroundColorModifiers
    • $euiRangeTrackColor
    • $euiRangeHighlightColor
    • $euiRangeThumbHeight
    • $euiRangeThumbWidth
    • $euiRangeThumbBorderColor
    • $euiRangeThumbBackgroundColor
    • $euiRangeTrackWidth
    • $euiRangeTrackHeight
    • $euiRangeTrackCompressedHeight
    • $euiRangeTrackBorderWidth
    • $euiRangeTrackBorderColor
    • $euiRangeTrackRadius
    • $euiRangeDisabledOpacity
    • $euiRangeHighlightHeight
    • $euiRangeHighlightCompressedHeight
    • $euiRangeHeight
    • $euiRangeCompressedHeight
    • $euiTooltipAnimations
    • $euiTooltipBackgroundColor
    • $euiTooltipBorderColor
  • Removed the following Sass mixins due to low external usage: (#8031)
    • euiHoverState
    • euiFocusState
    • euiDisabledState
    • euiInteractiveStates
    • euiFormControlStyle
    • euiFormControlStyleCompressed
    • euiFormControlFocusStyle
    • euiFormControlInvalidStyle
    • euiFormControlDisabledTextStyle
    • euiFormControlDisabledStyle
    • euiFormControlReadOnlyStyle
    • euiFormControlText
    • euiFormControlSize
    • euiFormControlGradient
    • euiFormControlLayoutPadding
    • euiFormControlWithIcon
    • euiFormControlIsLoading
    • euiFormControlSideBorderRadius
    • euiPlaceholderPerBrowser
    • euiHiddenSelectableInput
    • euiLink
    • euiLoadingSpinnerBorderColors
    • euiRangeTrackSize
    • euiRangeTrackPerBrowser
    • euiRangeThumbBorder
    • euiRangeThumbBoxShadow
    • euiRangeThumbFocusBoxShadow
    • euiRangeThumbStyle
    • euiRangeThumbPerBrowser
    • euiRangeThumbFocus
    • euiToolTipAnimation

v96.1.0

CSS-in-JS conversions

  • Removed the following component-specific Sass mixins: (#8055)
    • euiButton
    • euiButtonBase
    • euiButtonFocus
    • euiButtonContent
    • euiButtonContentDisabled
    • euiButtonDefaultStyle
    • euiButtonFillStyle
    • euiPanel
    • euiFormControlDefaultShadow
    • euiToolTipTitle

@cee-chen cee-chen added release_note:skip Skip the PR/issue when compiling release notes EUI v9.0.0 v8.16.0 backport:version Backport to applied version labels labels Oct 1, 2024
@cee-chen cee-chen changed the title Upgrade EUI to v96.0.0 Upgrade EUI to v96.1.0 Oct 2, 2024
@cee-chen cee-chen force-pushed the eui/v96.0.0 branch 3 times, most recently from 24e3dee to 938736c Compare October 2, 2024 17:19
@cee-chen cee-chen marked this pull request as ready for review October 2, 2024 21:10
@cee-chen cee-chen requested review from a team as code owners October 2, 2024 21:10
Copy link
Member

@sabarasaba sabarasaba left a comment

Choose a reason for hiding this comment

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

kibana management changes lgtm

@cee-chen cee-chen enabled auto-merge (squash) October 4, 2024 17:22
@kibana-ci
Copy link
Collaborator

💛 Build succeeded, but was flaky

Failed CI Steps

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
cases 491.4KB 491.4KB -2.0B
ml 4.6MB 4.6MB +7.0B
unifiedSearch 347.3KB 347.3KB -65.0B
total -60.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-npmDll 6.2MB 6.2MB +629.0B

History

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

@cee-chen cee-chen merged commit 19e37bf into elastic:main Oct 4, 2024
40 of 41 checks passed
@cee-chen cee-chen deleted the eui/v96.0.0 branch October 4, 2024 17:53
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/11184622384

@kibanamachine
Copy link
Contributor

💔 All backports failed

Status Branch Result
8.x Backport failed because of merge conflicts

Manual backport

To create the backport manually run:

node scripts/backport --pr 194619

Questions ?

Please refer to the Backport tool documentation

@cee-chen
Copy link
Member Author

cee-chen commented Oct 4, 2024

💚 All backports created successfully

Status Branch Result
8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

cee-chen added a commit to cee-chen/kibana that referenced this pull request Oct 4, 2024
`v95.12.0`⏩`v96.1.0`

_[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)_

---

## [`v96.0.0`](https://github.com/elastic/eui/releases/v96.0.0)

- Improved `EuiPageHeader`/`EuiPageTemplate.Header`'s responsive UX:
([elastic#8044](elastic/eui#8044))
- `rightSideItems` are no longer pushed to the side by wide `tabs`
content
- `rightSideItems` now wrap more responsively at smaller container
widths
- Updated `EuiDraggable` with a new `usePortal` prop.
([elastic#8048](elastic/eui#8048))
- This prop portals the dragged element to the body, allowing it to
escape stacking contexts which prevents buggy drag positioning in e.g.
popovers, modals, and flyouts.

**Bug fixes**

- Fixed `EuiProvider`'s system color mode detection causing errors
during server-side rendering
([elastic#8040](elastic/eui#8040))
- Fixed an `EuiDataGrid` rendering bug that was causing bouncing
scrollbar issues ([elastic#8041](elastic/eui#8041))
- Fixed `EuiSearchBox` skips input when running with React 18 in Legacy
Mode ([elastic#8047](elastic/eui#8047))

**Deprecations**

- Deprecated `EuiPopover`'s `hasDragDrop` prop. Use `EuiDraggable`'s new
`usePortal` prop instead.
([elastic#8048](elastic/eui#8048))

**Breaking changes**

- Removed the following exported `.css` files:
([elastic#8045](elastic/eui#8045))
  - `@elastic/eui/dist/eui_theme_light.css`
  - `@elastic/eui/dist/eui_theme_light.min.css`
  - `@elastic/eui/dist/eui_theme_dark.css`
  - `@elastic/eui/dist/eui_theme_dark.min.css`
- All EUI components are now on CSS-in-JS. A CSS file/import in
consuming applications is no longer needed, and is safe to remove.
([elastic#8045](elastic/eui#8045))
- Removed all `src/theme/legacy` Sass exports
([elastic#8054](elastic/eui#8054))

**CSS-in-JS conversions**

- Removed the following component-specific Sass variables:
([elastic#8031](elastic/eui#8031))
  - `$euiButtonColorDisabled`
  - `$euiButtonColorDisabledText`
  - `$euiButtonColorGhostDisabled`
  - `$euiButtonFontWeight`
  - `$euiFormControlIconSizes`
  - `$euiFormControlLayoutGroupInputHeight`
  - `$euiFormControlLayoutGroupInputCompressedHeight`
  - `$euiFormControlLayoutGroupInputCompressedBorderRadius`
  - `$euiPageSidebarMinWidth`
  - `$euiPageDefaultMaxWidth`
  - `$euiPanelPaddingModifiers`
  - `$euiPanelBorderRadiusModifiers`
  - `$euiPanelBackgroundColorModifiers`
  - `$euiRangeTrackColor`
  - `$euiRangeHighlightColor`
  - `$euiRangeThumbHeight`
  - `$euiRangeThumbWidth`
  - `$euiRangeThumbBorderColor`
  - `$euiRangeThumbBackgroundColor`
  - `$euiRangeTrackWidth`
  - `$euiRangeTrackHeight`
  - `$euiRangeTrackCompressedHeight`
  - `$euiRangeTrackBorderWidth`
  - `$euiRangeTrackBorderColor`
  - `$euiRangeTrackRadius`
  - `$euiRangeDisabledOpacity`
  - `$euiRangeHighlightHeight`
  - `$euiRangeHighlightCompressedHeight`
  - `$euiRangeHeight`
  - `$euiRangeCompressedHeight`
  - `$euiTooltipAnimations`
  - `$euiTooltipBackgroundColor`
  - `$euiTooltipBorderColor`
- Removed the following Sass mixins due to low external usage:
([elastic#8031](elastic/eui#8031))
  - `euiHoverState`
  - `euiFocusState`
  - `euiDisabledState`
  - `euiInteractiveStates`
  - `euiFormControlStyle`
  - `euiFormControlStyleCompressed`
  - `euiFormControlFocusStyle`
  - `euiFormControlInvalidStyle`
  - `euiFormControlDisabledTextStyle`
  - `euiFormControlDisabledStyle`
  - `euiFormControlReadOnlyStyle`
  - `euiFormControlText`
  - `euiFormControlSize`
  - `euiFormControlGradient`
  - `euiFormControlLayoutPadding`
  - `euiFormControlWithIcon`
  - `euiFormControlIsLoading`
  - `euiFormControlSideBorderRadius`
  - `euiPlaceholderPerBrowser`
  - `euiHiddenSelectableInput`
  - `euiLink`
  - `euiLoadingSpinnerBorderColors`
  - `euiRangeTrackSize`
  - `euiRangeTrackPerBrowser`
  - `euiRangeThumbBorder`
  - `euiRangeThumbBoxShadow`
  - `euiRangeThumbFocusBoxShadow`
  - `euiRangeThumbStyle`
  - `euiRangeThumbPerBrowser`
  - `euiRangeThumbFocus`
  - `euiToolTipAnimation`

## [`v96.1.0`](https://github.com/elastic/eui/releases/v96.1.0)

**CSS-in-JS conversions**

- Removed the following component-specific Sass mixins:
([elastic#8055](elastic/eui#8055))
  - `euiButton`
  - `euiButtonBase`
  - `euiButtonFocus`
  - `euiButtonContent`
  - `euiButtonContentDisabled`
  - `euiButtonDefaultStyle`
  - `euiButtonFillStyle`
  - `euiPanel`
  - `euiFormControlDefaultShadow`
  - `euiToolTipTitle`

(cherry picked from commit 19e37bf)

# Conflicts:
#	packages/kbn-securitysolution-exception-list-components/src/list_header/__snapshots__/list_header.test.tsx.snap
cee-chen added a commit that referenced this pull request Oct 4, 2024
# Backport

This will backport the following commits from `main` to `8.x`:
- [Upgrade EUI to v96.1.0
(#194619)](#194619)

<!--- Backport version: 8.9.8 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Cee
Chen","email":"549407+cee-chen@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-10-04T17:53:45Z","message":"Upgrade
EUI to v96.1.0 (#194619)\n\n`v95.12.0`⏩`v96.1.0`\r\n\r\n_[Questions?
Please see our Kibana
upgrade\r\nFAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_\r\n\r\n---\r\n\r\n##
[`v96.0.0`](https://github.com/elastic/eui/releases/v96.0.0)\r\n\r\n-
Improved `EuiPageHeader`/`EuiPageTemplate.Header`'s responsive
UX:\r\n([#8044](https://github.com/elastic/eui/pull/8044))\r\n-
`rightSideItems` are no longer pushed to the side by wide
`tabs`\r\ncontent\r\n- `rightSideItems` now wrap more responsively at
smaller container\r\nwidths\r\n- Updated `EuiDraggable` with a new
`usePortal`
prop.\r\n([#8048](https://github.com/elastic/eui/pull/8048))\r\n- This
prop portals the dragged element to the body, allowing it to\r\nescape
stacking contexts which prevents buggy drag positioning in
e.g.\r\npopovers, modals, and flyouts.\r\n\r\n**Bug fixes**\r\n\r\n-
Fixed `EuiProvider`'s system color mode detection causing
errors\r\nduring server-side
rendering\r\n([#8040](https://github.com/elastic/eui/pull/8040))\r\n-
Fixed an `EuiDataGrid` rendering bug that was causing
bouncing\r\nscrollbar issues
([#8041](https://github.com/elastic/eui/pull/8041))\r\n- Fixed
`EuiSearchBox` skips input when running with React 18 in Legacy\r\nMode
([#8047](https://github.com/elastic/eui/pull/8047))\r\n\r\n**Deprecations**\r\n\r\n-
Deprecated `EuiPopover`'s `hasDragDrop` prop. Use `EuiDraggable`'s
new\r\n`usePortal` prop
instead.\r\n([#8048](https://github.com/elastic/eui/pull/8048))\r\n\r\n**Breaking
changes**\r\n\r\n- Removed the following exported `.css`
files:\r\n([#8045](https://github.com/elastic/eui/pull/8045))\r\n -
`@elastic/eui/dist/eui_theme_light.css`\r\n -
`@elastic/eui/dist/eui_theme_light.min.css`\r\n -
`@elastic/eui/dist/eui_theme_dark.css`\r\n -
`@elastic/eui/dist/eui_theme_dark.min.css`\r\n- All EUI components are
now on CSS-in-JS. A CSS file/import in\r\nconsuming applications is no
longer needed, and is safe to
remove.\r\n([#8045](https://github.com/elastic/eui/pull/8045))\r\n-
Removed all `src/theme/legacy` Sass
exports\r\n([#8054](https://github.com/elastic/eui/pull/8054))\r\n\r\n**CSS-in-JS
conversions**\r\n\r\n- Removed the following component-specific Sass
variables:\r\n([#8031](https://github.com/elastic/eui/pull/8031))\r\n -
`$euiButtonColorDisabled`\r\n - `$euiButtonColorDisabledText`\r\n -
`$euiButtonColorGhostDisabled`\r\n - `$euiButtonFontWeight`\r\n -
`$euiFormControlIconSizes`\r\n -
`$euiFormControlLayoutGroupInputHeight`\r\n -
`$euiFormControlLayoutGroupInputCompressedHeight`\r\n -
`$euiFormControlLayoutGroupInputCompressedBorderRadius`\r\n -
`$euiPageSidebarMinWidth`\r\n - `$euiPageDefaultMaxWidth`\r\n -
`$euiPanelPaddingModifiers`\r\n - `$euiPanelBorderRadiusModifiers`\r\n -
`$euiPanelBackgroundColorModifiers`\r\n - `$euiRangeTrackColor`\r\n -
`$euiRangeHighlightColor`\r\n - `$euiRangeThumbHeight`\r\n -
`$euiRangeThumbWidth`\r\n - `$euiRangeThumbBorderColor`\r\n -
`$euiRangeThumbBackgroundColor`\r\n - `$euiRangeTrackWidth`\r\n -
`$euiRangeTrackHeight`\r\n - `$euiRangeTrackCompressedHeight`\r\n -
`$euiRangeTrackBorderWidth`\r\n - `$euiRangeTrackBorderColor`\r\n -
`$euiRangeTrackRadius`\r\n - `$euiRangeDisabledOpacity`\r\n -
`$euiRangeHighlightHeight`\r\n -
`$euiRangeHighlightCompressedHeight`\r\n - `$euiRangeHeight`\r\n -
`$euiRangeCompressedHeight`\r\n - `$euiTooltipAnimations`\r\n -
`$euiTooltipBackgroundColor`\r\n - `$euiTooltipBorderColor`\r\n- Removed
the following Sass mixins due to low external
usage:\r\n([#8031](https://github.com/elastic/eui/pull/8031))\r\n -
`euiHoverState`\r\n - `euiFocusState`\r\n - `euiDisabledState`\r\n -
`euiInteractiveStates`\r\n - `euiFormControlStyle`\r\n -
`euiFormControlStyleCompressed`\r\n - `euiFormControlFocusStyle`\r\n -
`euiFormControlInvalidStyle`\r\n - `euiFormControlDisabledTextStyle`\r\n
- `euiFormControlDisabledStyle`\r\n - `euiFormControlReadOnlyStyle`\r\n
- `euiFormControlText`\r\n - `euiFormControlSize`\r\n -
`euiFormControlGradient`\r\n - `euiFormControlLayoutPadding`\r\n -
`euiFormControlWithIcon`\r\n - `euiFormControlIsLoading`\r\n -
`euiFormControlSideBorderRadius`\r\n - `euiPlaceholderPerBrowser`\r\n -
`euiHiddenSelectableInput`\r\n - `euiLink`\r\n -
`euiLoadingSpinnerBorderColors`\r\n - `euiRangeTrackSize`\r\n -
`euiRangeTrackPerBrowser`\r\n - `euiRangeThumbBorder`\r\n -
`euiRangeThumbBoxShadow`\r\n - `euiRangeThumbFocusBoxShadow`\r\n -
`euiRangeThumbStyle`\r\n - `euiRangeThumbPerBrowser`\r\n -
`euiRangeThumbFocus`\r\n - `euiToolTipAnimation`\r\n\r\n##
[`v96.1.0`](https://github.com/elastic/eui/releases/v96.1.0)\r\n\r\n**CSS-in-JS
conversions**\r\n\r\n- Removed the following component-specific Sass
mixins:\r\n([#8055](https://github.com/elastic/eui/pull/8055))\r\n -
`euiButton`\r\n - `euiButtonBase`\r\n - `euiButtonFocus`\r\n -
`euiButtonContent`\r\n - `euiButtonContentDisabled`\r\n -
`euiButtonDefaultStyle`\r\n - `euiButtonFillStyle`\r\n - `euiPanel`\r\n
- `euiFormControlDefaultShadow`\r\n -
`euiToolTipTitle`","sha":"19e37bf5c52bd0ae3f788ae2b4015c614c901950","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","EUI","v9.0.0","v8.16.0","backport:version"],"number":194619,"url":"https://github.com/elastic/kibana/pull/194619","mergeCommit":{"message":"Upgrade
EUI to v96.1.0 (#194619)\n\n`v95.12.0`⏩`v96.1.0`\r\n\r\n_[Questions?
Please see our Kibana
upgrade\r\nFAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_\r\n\r\n---\r\n\r\n##
[`v96.0.0`](https://github.com/elastic/eui/releases/v96.0.0)\r\n\r\n-
Improved `EuiPageHeader`/`EuiPageTemplate.Header`'s responsive
UX:\r\n([#8044](https://github.com/elastic/eui/pull/8044))\r\n-
`rightSideItems` are no longer pushed to the side by wide
`tabs`\r\ncontent\r\n- `rightSideItems` now wrap more responsively at
smaller container\r\nwidths\r\n- Updated `EuiDraggable` with a new
`usePortal`
prop.\r\n([#8048](https://github.com/elastic/eui/pull/8048))\r\n- This
prop portals the dragged element to the body, allowing it to\r\nescape
stacking contexts which prevents buggy drag positioning in
e.g.\r\npopovers, modals, and flyouts.\r\n\r\n**Bug fixes**\r\n\r\n-
Fixed `EuiProvider`'s system color mode detection causing
errors\r\nduring server-side
rendering\r\n([#8040](https://github.com/elastic/eui/pull/8040))\r\n-
Fixed an `EuiDataGrid` rendering bug that was causing
bouncing\r\nscrollbar issues
([#8041](https://github.com/elastic/eui/pull/8041))\r\n- Fixed
`EuiSearchBox` skips input when running with React 18 in Legacy\r\nMode
([#8047](https://github.com/elastic/eui/pull/8047))\r\n\r\n**Deprecations**\r\n\r\n-
Deprecated `EuiPopover`'s `hasDragDrop` prop. Use `EuiDraggable`'s
new\r\n`usePortal` prop
instead.\r\n([#8048](https://github.com/elastic/eui/pull/8048))\r\n\r\n**Breaking
changes**\r\n\r\n- Removed the following exported `.css`
files:\r\n([#8045](https://github.com/elastic/eui/pull/8045))\r\n -
`@elastic/eui/dist/eui_theme_light.css`\r\n -
`@elastic/eui/dist/eui_theme_light.min.css`\r\n -
`@elastic/eui/dist/eui_theme_dark.css`\r\n -
`@elastic/eui/dist/eui_theme_dark.min.css`\r\n- All EUI components are
now on CSS-in-JS. A CSS file/import in\r\nconsuming applications is no
longer needed, and is safe to
remove.\r\n([#8045](https://github.com/elastic/eui/pull/8045))\r\n-
Removed all `src/theme/legacy` Sass
exports\r\n([#8054](https://github.com/elastic/eui/pull/8054))\r\n\r\n**CSS-in-JS
conversions**\r\n\r\n- Removed the following component-specific Sass
variables:\r\n([#8031](https://github.com/elastic/eui/pull/8031))\r\n -
`$euiButtonColorDisabled`\r\n - `$euiButtonColorDisabledText`\r\n -
`$euiButtonColorGhostDisabled`\r\n - `$euiButtonFontWeight`\r\n -
`$euiFormControlIconSizes`\r\n -
`$euiFormControlLayoutGroupInputHeight`\r\n -
`$euiFormControlLayoutGroupInputCompressedHeight`\r\n -
`$euiFormControlLayoutGroupInputCompressedBorderRadius`\r\n -
`$euiPageSidebarMinWidth`\r\n - `$euiPageDefaultMaxWidth`\r\n -
`$euiPanelPaddingModifiers`\r\n - `$euiPanelBorderRadiusModifiers`\r\n -
`$euiPanelBackgroundColorModifiers`\r\n - `$euiRangeTrackColor`\r\n -
`$euiRangeHighlightColor`\r\n - `$euiRangeThumbHeight`\r\n -
`$euiRangeThumbWidth`\r\n - `$euiRangeThumbBorderColor`\r\n -
`$euiRangeThumbBackgroundColor`\r\n - `$euiRangeTrackWidth`\r\n -
`$euiRangeTrackHeight`\r\n - `$euiRangeTrackCompressedHeight`\r\n -
`$euiRangeTrackBorderWidth`\r\n - `$euiRangeTrackBorderColor`\r\n -
`$euiRangeTrackRadius`\r\n - `$euiRangeDisabledOpacity`\r\n -
`$euiRangeHighlightHeight`\r\n -
`$euiRangeHighlightCompressedHeight`\r\n - `$euiRangeHeight`\r\n -
`$euiRangeCompressedHeight`\r\n - `$euiTooltipAnimations`\r\n -
`$euiTooltipBackgroundColor`\r\n - `$euiTooltipBorderColor`\r\n- Removed
the following Sass mixins due to low external
usage:\r\n([#8031](https://github.com/elastic/eui/pull/8031))\r\n -
`euiHoverState`\r\n - `euiFocusState`\r\n - `euiDisabledState`\r\n -
`euiInteractiveStates`\r\n - `euiFormControlStyle`\r\n -
`euiFormControlStyleCompressed`\r\n - `euiFormControlFocusStyle`\r\n -
`euiFormControlInvalidStyle`\r\n - `euiFormControlDisabledTextStyle`\r\n
- `euiFormControlDisabledStyle`\r\n - `euiFormControlReadOnlyStyle`\r\n
- `euiFormControlText`\r\n - `euiFormControlSize`\r\n -
`euiFormControlGradient`\r\n - `euiFormControlLayoutPadding`\r\n -
`euiFormControlWithIcon`\r\n - `euiFormControlIsLoading`\r\n -
`euiFormControlSideBorderRadius`\r\n - `euiPlaceholderPerBrowser`\r\n -
`euiHiddenSelectableInput`\r\n - `euiLink`\r\n -
`euiLoadingSpinnerBorderColors`\r\n - `euiRangeTrackSize`\r\n -
`euiRangeTrackPerBrowser`\r\n - `euiRangeThumbBorder`\r\n -
`euiRangeThumbBoxShadow`\r\n - `euiRangeThumbFocusBoxShadow`\r\n -
`euiRangeThumbStyle`\r\n - `euiRangeThumbPerBrowser`\r\n -
`euiRangeThumbFocus`\r\n - `euiToolTipAnimation`\r\n\r\n##
[`v96.1.0`](https://github.com/elastic/eui/releases/v96.1.0)\r\n\r\n**CSS-in-JS
conversions**\r\n\r\n- Removed the following component-specific Sass
mixins:\r\n([#8055](https://github.com/elastic/eui/pull/8055))\r\n -
`euiButton`\r\n - `euiButtonBase`\r\n - `euiButtonFocus`\r\n -
`euiButtonContent`\r\n - `euiButtonContentDisabled`\r\n -
`euiButtonDefaultStyle`\r\n - `euiButtonFillStyle`\r\n - `euiPanel`\r\n
- `euiFormControlDefaultShadow`\r\n -
`euiToolTipTitle`","sha":"19e37bf5c52bd0ae3f788ae2b4015c614c901950"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","labelRegex":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/194619","number":194619,"mergeCommit":{"message":"Upgrade
EUI to v96.1.0 (#194619)\n\n`v95.12.0`⏩`v96.1.0`\r\n\r\n_[Questions?
Please see our Kibana
upgrade\r\nFAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_\r\n\r\n---\r\n\r\n##
[`v96.0.0`](https://github.com/elastic/eui/releases/v96.0.0)\r\n\r\n-
Improved `EuiPageHeader`/`EuiPageTemplate.Header`'s responsive
UX:\r\n([#8044](https://github.com/elastic/eui/pull/8044))\r\n-
`rightSideItems` are no longer pushed to the side by wide
`tabs`\r\ncontent\r\n- `rightSideItems` now wrap more responsively at
smaller container\r\nwidths\r\n- Updated `EuiDraggable` with a new
`usePortal`
prop.\r\n([#8048](https://github.com/elastic/eui/pull/8048))\r\n- This
prop portals the dragged element to the body, allowing it to\r\nescape
stacking contexts which prevents buggy drag positioning in
e.g.\r\npopovers, modals, and flyouts.\r\n\r\n**Bug fixes**\r\n\r\n-
Fixed `EuiProvider`'s system color mode detection causing
errors\r\nduring server-side
rendering\r\n([#8040](https://github.com/elastic/eui/pull/8040))\r\n-
Fixed an `EuiDataGrid` rendering bug that was causing
bouncing\r\nscrollbar issues
([#8041](https://github.com/elastic/eui/pull/8041))\r\n- Fixed
`EuiSearchBox` skips input when running with React 18 in Legacy\r\nMode
([#8047](https://github.com/elastic/eui/pull/8047))\r\n\r\n**Deprecations**\r\n\r\n-
Deprecated `EuiPopover`'s `hasDragDrop` prop. Use `EuiDraggable`'s
new\r\n`usePortal` prop
instead.\r\n([#8048](https://github.com/elastic/eui/pull/8048))\r\n\r\n**Breaking
changes**\r\n\r\n- Removed the following exported `.css`
files:\r\n([#8045](https://github.com/elastic/eui/pull/8045))\r\n -
`@elastic/eui/dist/eui_theme_light.css`\r\n -
`@elastic/eui/dist/eui_theme_light.min.css`\r\n -
`@elastic/eui/dist/eui_theme_dark.css`\r\n -
`@elastic/eui/dist/eui_theme_dark.min.css`\r\n- All EUI components are
now on CSS-in-JS. A CSS file/import in\r\nconsuming applications is no
longer needed, and is safe to
remove.\r\n([#8045](https://github.com/elastic/eui/pull/8045))\r\n-
Removed all `src/theme/legacy` Sass
exports\r\n([#8054](https://github.com/elastic/eui/pull/8054))\r\n\r\n**CSS-in-JS
conversions**\r\n\r\n- Removed the following component-specific Sass
variables:\r\n([#8031](https://github.com/elastic/eui/pull/8031))\r\n -
`$euiButtonColorDisabled`\r\n - `$euiButtonColorDisabledText`\r\n -
`$euiButtonColorGhostDisabled`\r\n - `$euiButtonFontWeight`\r\n -
`$euiFormControlIconSizes`\r\n -
`$euiFormControlLayoutGroupInputHeight`\r\n -
`$euiFormControlLayoutGroupInputCompressedHeight`\r\n -
`$euiFormControlLayoutGroupInputCompressedBorderRadius`\r\n -
`$euiPageSidebarMinWidth`\r\n - `$euiPageDefaultMaxWidth`\r\n -
`$euiPanelPaddingModifiers`\r\n - `$euiPanelBorderRadiusModifiers`\r\n -
`$euiPanelBackgroundColorModifiers`\r\n - `$euiRangeTrackColor`\r\n -
`$euiRangeHighlightColor`\r\n - `$euiRangeThumbHeight`\r\n -
`$euiRangeThumbWidth`\r\n - `$euiRangeThumbBorderColor`\r\n -
`$euiRangeThumbBackgroundColor`\r\n - `$euiRangeTrackWidth`\r\n -
`$euiRangeTrackHeight`\r\n - `$euiRangeTrackCompressedHeight`\r\n -
`$euiRangeTrackBorderWidth`\r\n - `$euiRangeTrackBorderColor`\r\n -
`$euiRangeTrackRadius`\r\n - `$euiRangeDisabledOpacity`\r\n -
`$euiRangeHighlightHeight`\r\n -
`$euiRangeHighlightCompressedHeight`\r\n - `$euiRangeHeight`\r\n -
`$euiRangeCompressedHeight`\r\n - `$euiTooltipAnimations`\r\n -
`$euiTooltipBackgroundColor`\r\n - `$euiTooltipBorderColor`\r\n- Removed
the following Sass mixins due to low external
usage:\r\n([#8031](https://github.com/elastic/eui/pull/8031))\r\n -
`euiHoverState`\r\n - `euiFocusState`\r\n - `euiDisabledState`\r\n -
`euiInteractiveStates`\r\n - `euiFormControlStyle`\r\n -
`euiFormControlStyleCompressed`\r\n - `euiFormControlFocusStyle`\r\n -
`euiFormControlInvalidStyle`\r\n - `euiFormControlDisabledTextStyle`\r\n
- `euiFormControlDisabledStyle`\r\n - `euiFormControlReadOnlyStyle`\r\n
- `euiFormControlText`\r\n - `euiFormControlSize`\r\n -
`euiFormControlGradient`\r\n - `euiFormControlLayoutPadding`\r\n -
`euiFormControlWithIcon`\r\n - `euiFormControlIsLoading`\r\n -
`euiFormControlSideBorderRadius`\r\n - `euiPlaceholderPerBrowser`\r\n -
`euiHiddenSelectableInput`\r\n - `euiLink`\r\n -
`euiLoadingSpinnerBorderColors`\r\n - `euiRangeTrackSize`\r\n -
`euiRangeTrackPerBrowser`\r\n - `euiRangeThumbBorder`\r\n -
`euiRangeThumbBoxShadow`\r\n - `euiRangeThumbFocusBoxShadow`\r\n -
`euiRangeThumbStyle`\r\n - `euiRangeThumbPerBrowser`\r\n -
`euiRangeThumbFocus`\r\n - `euiToolTipAnimation`\r\n\r\n##
[`v96.1.0`](https://github.com/elastic/eui/releases/v96.1.0)\r\n\r\n**CSS-in-JS
conversions**\r\n\r\n- Removed the following component-specific Sass
mixins:\r\n([#8055](https://github.com/elastic/eui/pull/8055))\r\n -
`euiButton`\r\n - `euiButtonBase`\r\n - `euiButtonFocus`\r\n -
`euiButtonContent`\r\n - `euiButtonContentDisabled`\r\n -
`euiButtonDefaultStyle`\r\n - `euiButtonFillStyle`\r\n - `euiPanel`\r\n
- `euiFormControlDefaultShadow`\r\n -
`euiToolTipTitle`","sha":"19e37bf5c52bd0ae3f788ae2b4015c614c901950"}},{"branch":"8.x","label":"v8.16.0","labelRegex":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->
tiansivive pushed a commit to tiansivive/kibana that referenced this pull request Oct 7, 2024
`v95.12.0`⏩`v96.1.0`

_[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)_

---

## [`v96.0.0`](https://github.com/elastic/eui/releases/v96.0.0)

- Improved `EuiPageHeader`/`EuiPageTemplate.Header`'s responsive UX:
([elastic#8044](elastic/eui#8044))
- `rightSideItems` are no longer pushed to the side by wide `tabs`
content
- `rightSideItems` now wrap more responsively at smaller container
widths
- Updated `EuiDraggable` with a new `usePortal` prop.
([elastic#8048](elastic/eui#8048))
- This prop portals the dragged element to the body, allowing it to
escape stacking contexts which prevents buggy drag positioning in e.g.
popovers, modals, and flyouts.

**Bug fixes**

- Fixed `EuiProvider`'s system color mode detection causing errors
during server-side rendering
([elastic#8040](elastic/eui#8040))
- Fixed an `EuiDataGrid` rendering bug that was causing bouncing
scrollbar issues ([elastic#8041](elastic/eui#8041))
- Fixed `EuiSearchBox` skips input when running with React 18 in Legacy
Mode ([elastic#8047](elastic/eui#8047))

**Deprecations**

- Deprecated `EuiPopover`'s `hasDragDrop` prop. Use `EuiDraggable`'s new
`usePortal` prop instead.
([elastic#8048](elastic/eui#8048))

**Breaking changes**

- Removed the following exported `.css` files:
([elastic#8045](elastic/eui#8045))
  - `@elastic/eui/dist/eui_theme_light.css`
  - `@elastic/eui/dist/eui_theme_light.min.css`
  - `@elastic/eui/dist/eui_theme_dark.css`
  - `@elastic/eui/dist/eui_theme_dark.min.css`
- All EUI components are now on CSS-in-JS. A CSS file/import in
consuming applications is no longer needed, and is safe to remove.
([elastic#8045](elastic/eui#8045))
- Removed all `src/theme/legacy` Sass exports
([elastic#8054](elastic/eui#8054))

**CSS-in-JS conversions**

- Removed the following component-specific Sass variables:
([elastic#8031](elastic/eui#8031))
  - `$euiButtonColorDisabled`
  - `$euiButtonColorDisabledText`
  - `$euiButtonColorGhostDisabled`
  - `$euiButtonFontWeight`
  - `$euiFormControlIconSizes`
  - `$euiFormControlLayoutGroupInputHeight`
  - `$euiFormControlLayoutGroupInputCompressedHeight`
  - `$euiFormControlLayoutGroupInputCompressedBorderRadius`
  - `$euiPageSidebarMinWidth`
  - `$euiPageDefaultMaxWidth`
  - `$euiPanelPaddingModifiers`
  - `$euiPanelBorderRadiusModifiers`
  - `$euiPanelBackgroundColorModifiers`
  - `$euiRangeTrackColor`
  - `$euiRangeHighlightColor`
  - `$euiRangeThumbHeight`
  - `$euiRangeThumbWidth`
  - `$euiRangeThumbBorderColor`
  - `$euiRangeThumbBackgroundColor`
  - `$euiRangeTrackWidth`
  - `$euiRangeTrackHeight`
  - `$euiRangeTrackCompressedHeight`
  - `$euiRangeTrackBorderWidth`
  - `$euiRangeTrackBorderColor`
  - `$euiRangeTrackRadius`
  - `$euiRangeDisabledOpacity`
  - `$euiRangeHighlightHeight`
  - `$euiRangeHighlightCompressedHeight`
  - `$euiRangeHeight`
  - `$euiRangeCompressedHeight`
  - `$euiTooltipAnimations`
  - `$euiTooltipBackgroundColor`
  - `$euiTooltipBorderColor`
- Removed the following Sass mixins due to low external usage:
([elastic#8031](elastic/eui#8031))
  - `euiHoverState`
  - `euiFocusState`
  - `euiDisabledState`
  - `euiInteractiveStates`
  - `euiFormControlStyle`
  - `euiFormControlStyleCompressed`
  - `euiFormControlFocusStyle`
  - `euiFormControlInvalidStyle`
  - `euiFormControlDisabledTextStyle`
  - `euiFormControlDisabledStyle`
  - `euiFormControlReadOnlyStyle`
  - `euiFormControlText`
  - `euiFormControlSize`
  - `euiFormControlGradient`
  - `euiFormControlLayoutPadding`
  - `euiFormControlWithIcon`
  - `euiFormControlIsLoading`
  - `euiFormControlSideBorderRadius`
  - `euiPlaceholderPerBrowser`
  - `euiHiddenSelectableInput`
  - `euiLink`
  - `euiLoadingSpinnerBorderColors`
  - `euiRangeTrackSize`
  - `euiRangeTrackPerBrowser`
  - `euiRangeThumbBorder`
  - `euiRangeThumbBoxShadow`
  - `euiRangeThumbFocusBoxShadow`
  - `euiRangeThumbStyle`
  - `euiRangeThumbPerBrowser`
  - `euiRangeThumbFocus`
  - `euiToolTipAnimation`

## [`v96.1.0`](https://github.com/elastic/eui/releases/v96.1.0)

**CSS-in-JS conversions**

- Removed the following component-specific Sass mixins:
([elastic#8055](elastic/eui#8055))
  - `euiButton`
  - `euiButtonBase`
  - `euiButtonFocus`
  - `euiButtonContent`
  - `euiButtonContentDisabled`
  - `euiButtonDefaultStyle`
  - `euiButtonFillStyle`
  - `euiPanel`
  - `euiFormControlDefaultShadow`
  - `euiToolTipTitle`
jaredburgettelastic added a commit that referenced this pull request Oct 11, 2024
#195666)

## Summary

After the most recent EUI upgrade
[here](#194619), the Security
Entity Risk Scoring Management page had significant spacing issues with
regards to the page header. This PR alleviates those issues, and also
simplifies the DOM structure for that component a bit.

## Before


![image](https://github.com/user-attachments/assets/4d59ee6c-c2a4-4025-be68-25046d29f25d)


## After 

<img width="1727" alt="Screenshot 2024-10-09 at 1 20 14 PM"
src="https://github.com/user-attachments/assets/4117d280-231d-48aa-b36b-82e99a8a294c">
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Oct 11, 2024
elastic#195666)

## Summary

After the most recent EUI upgrade
[here](elastic#194619), the Security
Entity Risk Scoring Management page had significant spacing issues with
regards to the page header. This PR alleviates those issues, and also
simplifies the DOM structure for that component a bit.

## Before

![image](https://github.com/user-attachments/assets/4d59ee6c-c2a4-4025-be68-25046d29f25d)

## After

<img width="1727" alt="Screenshot 2024-10-09 at 1 20 14 PM"
src="https://github.com/user-attachments/assets/4117d280-231d-48aa-b36b-82e99a8a294c">

(cherry picked from commit 52e7dec)
kibanamachine added a commit that referenced this pull request Oct 11, 2024
…ent EUI (#195666) (#195987)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Fixed issue with Entity Risk Scoring Management page due to recent
EUI (#195666)](#195666)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Jared
Burgett","email":"147995946+jaredburgettelastic@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-10-11T19:22:03Z","message":"Fixed
issue with Entity Risk Scoring Management page due to recent EUI
(#195666)\n\n## Summary\r\n\r\nAfter the most recent EUI
upgrade\r\n[here](#194619), the
Security\r\nEntity Risk Scoring Management page had significant spacing
issues with\r\nregards to the page header. This PR alleviates those
issues, and also\r\nsimplifies the DOM structure for that component a
bit.\r\n\r\n##
Before\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/4d59ee6c-c2a4-4025-be68-25046d29f25d)\r\n\r\n\r\n##
After \r\n\r\n<img width=\"1727\" alt=\"Screenshot 2024-10-09 at 1 20
14 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/4117d280-231d-48aa-b36b-82e99a8a294c\">","sha":"52e7dece2d26a249f90e9d0e332d0cd35e2c5eb2","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","backport:prev-minor"],"title":"Fixed
issue with Entity Risk Scoring Management page due to recent
EUI","number":195666,"url":"https://github.com/elastic/kibana/pull/195666","mergeCommit":{"message":"Fixed
issue with Entity Risk Scoring Management page due to recent EUI
(#195666)\n\n## Summary\r\n\r\nAfter the most recent EUI
upgrade\r\n[here](#194619), the
Security\r\nEntity Risk Scoring Management page had significant spacing
issues with\r\nregards to the page header. This PR alleviates those
issues, and also\r\nsimplifies the DOM structure for that component a
bit.\r\n\r\n##
Before\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/4d59ee6c-c2a4-4025-be68-25046d29f25d)\r\n\r\n\r\n##
After \r\n\r\n<img width=\"1727\" alt=\"Screenshot 2024-10-09 at 1 20
14 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/4117d280-231d-48aa-b36b-82e99a8a294c\">","sha":"52e7dece2d26a249f90e9d0e332d0cd35e2c5eb2"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/195666","number":195666,"mergeCommit":{"message":"Fixed
issue with Entity Risk Scoring Management page due to recent EUI
(#195666)\n\n## Summary\r\n\r\nAfter the most recent EUI
upgrade\r\n[here](#194619), the
Security\r\nEntity Risk Scoring Management page had significant spacing
issues with\r\nregards to the page header. This PR alleviates those
issues, and also\r\nsimplifies the DOM structure for that component a
bit.\r\n\r\n##
Before\r\n\r\n\r\n![image](https://github.com/user-attachments/assets/4d59ee6c-c2a4-4025-be68-25046d29f25d)\r\n\r\n\r\n##
After \r\n\r\n<img width=\"1727\" alt=\"Screenshot 2024-10-09 at 1 20
14 PM\"\r\nsrc=\"https://github.com/user-attachments/assets/4117d280-231d-48aa-b36b-82e99a8a294c\">","sha":"52e7dece2d26a249f90e9d0e332d0cd35e2c5eb2"}}]}]
BACKPORT-->

Co-authored-by: Jared Burgett <147995946+jaredburgettelastic@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:version Backport to applied version labels EUI release_note:skip Skip the PR/issue when compiling release notes v8.16.0 v9.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.