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

Cannot have more than 99 visualization in Saved Objects page #8044

Closed
lcsthom opened this issue Aug 22, 2016 · 10 comments
Closed

Cannot have more than 99 visualization in Saved Objects page #8044

lcsthom opened this issue Aug 22, 2016 · 10 comments
Labels
bug Fixes for quality problems that affect the customer experience good first issue low hanging fruit

Comments

@lcsthom
Copy link

lcsthom commented Aug 22, 2016

Kibana version:
4.5.0 build 9889
Elasticsearch version:
2.3.2
Server OS version:
Windows server 2012 r2
Browser version:
Chrome v51.0.2704.103 m
Browser OS version:

Original install method (e.g. download page, yum, from source, etc.):
...
Description of the problem including expected versus actual behavior:
Cannot see more than 99 vizualization item in while selecting visualization to manage.
Steps to reproduce:

  1. Add 101 or more visualization
  2. Clic on visualize
  3. Try to find the last added visualization, you won't be able to find it.

Errors in browser console (if relevant):

Provide logs and/or server output (if relevant):

Describe the feature:

@Bargs
Copy link
Contributor

Bargs commented Aug 22, 2016

I was able to confirm this issue exists in 5.0 as well. After creating 100 visualizations, I cannot find any new ones by browsing the list on the initial visualize page. My new viz does show up if I filter for it. Is this the same for you @lcsthom?

@Bargs Bargs added bug Fixes for quality problems that affect the customer experience P2 and removed P2 labels Aug 22, 2016
@lcsthom
Copy link
Author

lcsthom commented Aug 22, 2016

Yes, I can get these using the filter too.

@thomasneirynck
Copy link
Contributor

thomasneirynck commented Aug 22, 2016

I believe this may actually be hardcoded:

@thomasneirynck
Copy link
Contributor

I think this is a crude safety break to ensure performance of the display.

I think we should just remove this restriction, because usability of the page will depend on so much more than the number of returned vis (browser/device for one). To me, this just addressed a hypothetical performance problem that may not even ever have occurred (I can be wrong).

@Bargs @epixa what do you think, just remove it?

If we want to keep it because we don't want to spam the page, we should reframe this issue. User should be notified that not all visualizations are returned, add a warning message that says 'please refine your search' or something like that.

@thomasneirynck thomasneirynck self-assigned this Sep 11, 2016
@Bargs
Copy link
Contributor

Bargs commented Sep 12, 2016

I think the best solution would be to introduce actual pagination so that more results are requested when the current result set is exhausted.

@marius-dr
Copy link
Member

marius-dr commented Mar 11, 2017

Feedback from Elastic{ON} via @LeeDr :
One of our users have saved over 700 visualizations, 100 dashboards, 250 saved searches. It seems like this is starting to become more of a problem so we should be really looking into it.

@epixa
Copy link
Contributor

epixa commented Mar 16, 2017

We need pagination here. We shouldn't wait until the whole revised object management experience is done for this as there seems to be an obvious solution that we should have anyway.

@epixa epixa removed the P3 label Apr 25, 2017
@thomasneirynck thomasneirynck changed the title Cannot have more than 99 visualization Cannot have more than 99 visualization in Saved Objects page May 12, 2017
@thomasneirynck
Copy link
Contributor

changed the title to distinguish this issue from #11415

@marius-dr
Copy link
Member

Note: the PR merged above only fixed the dashboard listing page and the visualizations listing page. The saved object one is still stuck with only 100 maximum objects.

@jen-huang
Copy link
Contributor

This will be fixed with 6.4 with the rework of Saved Objects page: #17426.

cee-chen added a commit that referenced this issue 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:
([#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
`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
# 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
`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
Labels
bug Fixes for quality problems that affect the customer experience good first issue low hanging fruit
Projects
None yet
Development

No branches or pull requests

8 participants