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.

Sign up for GitHub

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

Jump to bottom

Sidebar should be expanded by default #8040

Closed
epixa opened this issue Aug 20, 2016 · 0 comments
Closed

Sidebar should be expanded by default #8040

epixa opened this issue Aug 20, 2016 · 0 comments
Assignees
@cjcenizal
Labels
release_note:enhancement v5.0.0

Comments

@epixa
Copy link
Contributor

epixa commented Aug 20, 2016

With the new expand/collapse functionality on the sidebar in place, the sidebar should be expanded by default. People can collapse the sidebar and the preference will be preserved across sessions, but the initial state should be optimized for first-time experience.
@cjcenizal cjcenizal self-assigned this Aug 23, 2016
@cjcenizal cjcenizal mentioned this issue Aug 23, 2016
Merged
jbudz pushed a commit that referenced this issue Sep 30, 2024
@cee-chen
Upgrade EUI to v95.12.0 (#193805)
8a89c85 
`v95.11.0`⏩`v95.12.0-backport.0`

> [!note]
> A few fun highlights from this release:
> - Content within `EuiDataGrid`, `EuiBasicTable`, and
`EuiInMemoryTable`, when manually selected/highlighted by users, should
now more cleanly copy and paste into various spreadsheet apps
> - `EuiProvider` will now detect the user's system-level dark or light
mode and default to that if no `colorMode` prop is passed manually

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

---

## [`v95.12.0`](https://github.com/elastic/eui/releases/v95.12.0)

- Enhanced `EuiDataGrid` and `EuiBasic/InMemoryTable` to clean content
newlines/tabs when users copy and paste from their tabular data
([#8019](elastic/eui#8019))
- Updated `EuiResizableButton` with a new `accountForScrollbars` prop
([#8021](elastic/eui#8021))
- Updated `EuiProvider` to inherit from the user's OS/system light/dark
mode setting if a `colorMode` prop has not been passed
([#8026](elastic/eui#8026))

**Bug fixes**

- Fixed `EuiDatePicker`'s `onClear` button to not appear when the input
is `disabled` ([#8020](elastic/eui#8020))
- Fixed several `EuiDataGrid` row height bugs:
([#8025](elastic/eui#8025))
- Fixed row heights not recalculating when
`rowHeightOptions.lineHeight`, `gridStyles.fontSize`, or
`gridStyles.cellPadding` changed
- Fixed incorrect height calculations for `rowHeightOptions.rowHeights`
with `lineCount`s
- Fixed control column content to align better with multi-line row
heights, as well as custom line-heights
##
[`v95.12.0-backport.0`](https://github.com/elastic/eui/releases/v95.12.0-backport.0)

**This is a backport release only intended for use by Kibana.**

**Bug fixes**

- Fixed `EuiProvider`'s system color mode detection causing errors
during server-side rendering
([#8040](elastic/eui#8040))
- Fixed an `EuiDataGrid` rendering bug that was causing bouncing
scrollbar issues ([#8041](elastic/eui#8041))
kibanamachine pushed a commit to kibanamachine/kibana that referenced this issue Sep 30, 2024
@cee-chen
Upgrade EUI to v95.12.0 (elastic#193805)
ab674ac 
`v95.11.0`⏩`v95.12.0-backport.0`

> [!note]
> A few fun highlights from this release:
> - Content within `EuiDataGrid`, `EuiBasicTable`, and
`EuiInMemoryTable`, when manually selected/highlighted by users, should
now more cleanly copy and paste into various spreadsheet apps
> - `EuiProvider` will now detect the user's system-level dark or light
mode and default to that if no `colorMode` prop is passed manually

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

---

## [`v95.12.0`](https://github.com/elastic/eui/releases/v95.12.0)

- Enhanced `EuiDataGrid` and `EuiBasic/InMemoryTable` to clean content
newlines/tabs when users copy and paste from their tabular data
([elastic#8019](elastic/eui#8019))
- Updated `EuiResizableButton` with a new `accountForScrollbars` prop
([elastic#8021](elastic/eui#8021))
- Updated `EuiProvider` to inherit from the user's OS/system light/dark
mode setting if a `colorMode` prop has not been passed
([elastic#8026](elastic/eui#8026))

**Bug fixes**

- Fixed `EuiDatePicker`'s `onClear` button to not appear when the input
is `disabled` ([elastic#8020](elastic/eui#8020))
- Fixed several `EuiDataGrid` row height bugs:
([elastic#8025](elastic/eui#8025))
- Fixed row heights not recalculating when
`rowHeightOptions.lineHeight`, `gridStyles.fontSize`, or
`gridStyles.cellPadding` changed
- Fixed incorrect height calculations for `rowHeightOptions.rowHeights`
with `lineCount`s
- Fixed control column content to align better with multi-line row
heights, as well as custom line-heights
##
[`v95.12.0-backport.0`](https://github.com/elastic/eui/releases/v95.12.0-backport.0)

**This is a backport release only intended for use by Kibana.**

**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))

(cherry picked from commit 8a89c85)
kibanamachine added a commit that referenced this issue Oct 1, 2024
@kibanamachine @cee-chen
[8.x] Upgrade EUI to v95.12.0 (#193805) (#194500)
20ee61b 
# Backport

This will backport the following commits from `main` to `8.x`:
- [Upgrade EUI to v95.12.0
(#193805)](#193805)

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

### 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-09-30T23:25:47Z","message":"Upgrade
EUI to v95.12.0 (#193805)\n\n`v95.11.0`⏩`v95.12.0-backport.0`\r\n\r\n>
[!note]\r\n> A few fun highlights from this release:\r\n> - Content
within `EuiDataGrid`, `EuiBasicTable`, and\r\n`EuiInMemoryTable`, when
manually selected/highlighted by users, should\r\nnow more cleanly copy
and paste into various spreadsheet apps\r\n> - `EuiProvider` will now
detect the user's system-level dark or light\r\nmode and default to that
if no `colorMode` prop is passed manually\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##
[`v95.12.0`](https://github.com/elastic/eui/releases/v95.12.0)\r\n\r\n-
Enhanced `EuiDataGrid` and `EuiBasic/InMemoryTable` to clean
content\r\nnewlines/tabs when users copy and paste from their tabular
data\r\n([#8019](https://github.com/elastic/eui/pull/8019))\r\n- Updated
`EuiResizableButton` with a new `accountForScrollbars`
prop\r\n([#8021](https://github.com/elastic/eui/pull/8021))\r\n- Updated
`EuiProvider` to inherit from the user's OS/system light/dark\r\nmode
setting if a `colorMode` prop has not been
passed\r\n([#8026](https://github.com/elastic/eui/pull/8026))\r\n\r\n**Bug
fixes**\r\n\r\n- Fixed `EuiDatePicker`'s `onClear` button to not appear
when the input\r\nis `disabled`
([#8020](https://github.com/elastic/eui/pull/8020))\r\n- Fixed several
`EuiDataGrid` row height
bugs:\r\n([#8025](https://github.com/elastic/eui/pull/8025))\r\n- Fixed
row heights not recalculating when\r\n`rowHeightOptions.lineHeight`,
`gridStyles.fontSize`, or\r\n`gridStyles.cellPadding` changed\r\n- Fixed
incorrect height calculations for `rowHeightOptions.rowHeights`\r\nwith
`lineCount`s\r\n- Fixed control column content to align better with
multi-line row\r\nheights, as well as custom
line-heights\r\n##\r\n[`v95.12.0-backport.0`](https://github.com/elastic/eui/releases/v95.12.0-backport.0)\r\n\r\n**This
is a backport release only intended for use by Kibana.**\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))","sha":"8a89c8576df104c16ae3abf39b9db766e56d4e3b","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"],"title":"Upgrade
EUI to
v95.12.0","number":193805,"url":"https://github.com/elastic/kibana/pull/193805","mergeCommit":{"message":"Upgrade
EUI to v95.12.0 (#193805)\n\n`v95.11.0`⏩`v95.12.0-backport.0`\r\n\r\n>
[!note]\r\n> A few fun highlights from this release:\r\n> - Content
within `EuiDataGrid`, `EuiBasicTable`, and\r\n`EuiInMemoryTable`, when
manually selected/highlighted by users, should\r\nnow more cleanly copy
and paste into various spreadsheet apps\r\n> - `EuiProvider` will now
detect the user's system-level dark or light\r\nmode and default to that
if no `colorMode` prop is passed manually\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##
[`v95.12.0`](https://github.com/elastic/eui/releases/v95.12.0)\r\n\r\n-
Enhanced `EuiDataGrid` and `EuiBasic/InMemoryTable` to clean
content\r\nnewlines/tabs when users copy and paste from their tabular
data\r\n([#8019](https://github.com/elastic/eui/pull/8019))\r\n- Updated
`EuiResizableButton` with a new `accountForScrollbars`
prop\r\n([#8021](https://github.com/elastic/eui/pull/8021))\r\n- Updated
`EuiProvider` to inherit from the user's OS/system light/dark\r\nmode
setting if a `colorMode` prop has not been
passed\r\n([#8026](https://github.com/elastic/eui/pull/8026))\r\n\r\n**Bug
fixes**\r\n\r\n- Fixed `EuiDatePicker`'s `onClear` button to not appear
when the input\r\nis `disabled`
([#8020](https://github.com/elastic/eui/pull/8020))\r\n- Fixed several
`EuiDataGrid` row height
bugs:\r\n([#8025](https://github.com/elastic/eui/pull/8025))\r\n- Fixed
row heights not recalculating when\r\n`rowHeightOptions.lineHeight`,
`gridStyles.fontSize`, or\r\n`gridStyles.cellPadding` changed\r\n- Fixed
incorrect height calculations for `rowHeightOptions.rowHeights`\r\nwith
`lineCount`s\r\n- Fixed control column content to align better with
multi-line row\r\nheights, as well as custom
line-heights\r\n##\r\n[`v95.12.0-backport.0`](https://github.com/elastic/eui/releases/v95.12.0-backport.0)\r\n\r\n**This
is a backport release only intended for use by Kibana.**\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))","sha":"8a89c8576df104c16ae3abf39b9db766e56d4e3b"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/193805","number":193805,"mergeCommit":{"message":"Upgrade
EUI to v95.12.0 (#193805)\n\n`v95.11.0`⏩`v95.12.0-backport.0`\r\n\r\n>
[!note]\r\n> A few fun highlights from this release:\r\n> - Content
within `EuiDataGrid`, `EuiBasicTable`, and\r\n`EuiInMemoryTable`, when
manually selected/highlighted by users, should\r\nnow more cleanly copy
and paste into various spreadsheet apps\r\n> - `EuiProvider` will now
detect the user's system-level dark or light\r\nmode and default to that
if no `colorMode` prop is passed manually\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##
[`v95.12.0`](https://github.com/elastic/eui/releases/v95.12.0)\r\n\r\n-
Enhanced `EuiDataGrid` and `EuiBasic/InMemoryTable` to clean
content\r\nnewlines/tabs when users copy and paste from their tabular
data\r\n([#8019](https://github.com/elastic/eui/pull/8019))\r\n- Updated
`EuiResizableButton` with a new `accountForScrollbars`
prop\r\n([#8021](https://github.com/elastic/eui/pull/8021))\r\n- Updated
`EuiProvider` to inherit from the user's OS/system light/dark\r\nmode
setting if a `colorMode` prop has not been
passed\r\n([#8026](https://github.com/elastic/eui/pull/8026))\r\n\r\n**Bug
fixes**\r\n\r\n- Fixed `EuiDatePicker`'s `onClear` button to not appear
when the input\r\nis `disabled`
([#8020](https://github.com/elastic/eui/pull/8020))\r\n- Fixed several
`EuiDataGrid` row height
bugs:\r\n([#8025](https://github.com/elastic/eui/pull/8025))\r\n- Fixed
row heights not recalculating when\r\n`rowHeightOptions.lineHeight`,
`gridStyles.fontSize`, or\r\n`gridStyles.cellPadding` changed\r\n- Fixed
incorrect height calculations for `rowHeightOptions.rowHeights`\r\nwith
`lineCount`s\r\n- Fixed control column content to align better with
multi-line row\r\nheights, as well as custom
line-heights\r\n##\r\n[`v95.12.0-backport.0`](https://github.com/elastic/eui/releases/v95.12.0-backport.0)\r\n\r\n**This
is a backport release only intended for use by Kibana.**\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))","sha":"8a89c8576df104c16ae3abf39b9db766e56d4e3b"}},{"branch":"8.x","label":"v8.16.0","branchLabelMappingKey":"^v8.16.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
cee-chen added a commit that referenced this issue Oct 4, 2024
@cee-chen
Upgrade EUI to v96.1.0 (#194619)
19e37bf 
`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:
([#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.
([#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
([#8040](elastic/eui#8040))
- Fixed an `EuiDataGrid` rendering bug that was causing bouncing
scrollbar issues ([#8041](elastic/eui#8041))
- Fixed `EuiSearchBox` skips input when running with React 18 in Legacy
Mode ([#8047](elastic/eui#8047))

**Deprecations**

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

**Breaking changes**

- Removed the following exported `.css` files:
([#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.
([#8045](elastic/eui#8045))
- Removed all `src/theme/legacy` Sass exports
([#8054](elastic/eui#8054))

**CSS-in-JS conversions**

- Removed the following component-specific Sass variables:
([#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:
([#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:
([#8055](elastic/eui#8055))
  - `euiButton`
  - `euiButtonBase`
  - `euiButtonFocus`
  - `euiButtonContent`
  - `euiButtonContentDisabled`
  - `euiButtonDefaultStyle`
  - `euiButtonFillStyle`
  - `euiPanel`
  - `euiFormControlDefaultShadow`
  - `euiToolTipTitle`
cee-chen added a commit to cee-chen/kibana that referenced this issue Oct 4, 2024
@cee-chen
Upgrade EUI to v96.1.0 (elastic#194619)
273d52c 
`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 issue Oct 4, 2024
@cee-chen
[8.x] Upgrade EUI to v96.1.0 (#194619) (#195141)
a4075f7 
# 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 issue Oct 7, 2024
@cee-chen @tiansivive
Upgrade EUI to v96.1.0 (elastic#194619)
784cc49 
`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`
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@cjcenizal cjcenizal

Labels
release_note:enhancement v5.0.0
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@epixa @cjcenizal