-
Notifications
You must be signed in to change notification settings - Fork 8.2k
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
Upgrade EUI to v96.1.0 #194619
Conversation
24e3dee
to
938736c
Compare
There was a problem hiding this 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
💛 Build succeeded, but was flaky
Failed CI StepsMetrics [docs]Async chunks
Page load bundle
History
To update your PR or re-run it, just comment with: |
Starting backport for target branches: 8.x |
💔 All backports failed
Manual backportTo create the backport manually run:
Questions ?Please refer to the Backport tool documentation |
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
`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
# 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":"[email protected]"},"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-->
`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`
#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">
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)
…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":"[email protected]"},"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 <[email protected]>
v95.12.0
⏩v96.1.0
Questions? Please see our Kibana upgrade FAQ.
v96.0.0
EuiPageHeader
/EuiPageTemplate.Header
's responsive UX: (#8044)rightSideItems
are no longer pushed to the side by widetabs
contentrightSideItems
now wrap more responsively at smaller container widthsEuiDraggable
with a newusePortal
prop. (#8048)Bug fixes
EuiProvider
's system color mode detection causing errors during server-side rendering (#8040)EuiDataGrid
rendering bug that was causing bouncing scrollbar issues (#8041)EuiSearchBox
skips input when running with React 18 in Legacy Mode (#8047)Deprecations
EuiPopover
'shasDragDrop
prop. UseEuiDraggable
's newusePortal
prop instead. (#8048)Breaking changes
.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
src/theme/legacy
Sass exports (#8054)CSS-in-JS conversions
$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
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
euiButton
euiButtonBase
euiButtonFocus
euiButtonContent
euiButtonContentDisabled
euiButtonDefaultStyle
euiButtonFillStyle
euiPanel
euiFormControlDefaultShadow
euiToolTipTitle