v88.3.0

• EuiGlobalToastList now shows a "Clear all" button by default once above a certain number of toasts (defaults to 3). This threshold is configurable with the showClearAllButtonAt prop (#7111)
• Added an optional onClearAllToasts callback to EuiGlobalToastList (#7111)
• Added the value, onChange, and onCancel props that allow EuiInlineEdit to be used as a controlled component (#7157)
• Added grabOmnidirectional, transitionLeftIn, transitionLeftOut, transitionTopIn, and transitionTopOut icon glyphs. (#7168)

Bug fixes

• Fixed EuiInlineEdit components to correctly spread ...rest attributes to the parent wrapper (#7157)
• Fixed EuiListGroupItem to correctly render the extraAction button when showToolTip is also passed (#7159)

Dependency updates

• Updated @hello-pangea/dnd to v16.3.0 (#7125)
• Updated @types/lodash to v4.14.198 (#7126)

Accessibility

• EuiAccordion now correctly respects reduced motion settings (#7161)
• EuiAccordion now shows a focus outline to keyboard users around its revealed children on open (#7161)

CSS-in-JS conversions

• Converted EuiSplitPanel to Emotion (#7172)

v88.2.0

• Added a new EuiTextTruncate component, which provides custom truncation options beyond native CSS (#7116)
• Fixed-positioned EuiHeaders now set a global CSS --euiFixedHeadersOffset variable, which updates dynamically based on the number of fixed headers on the page. (#7144)
• EuiFlyouts now dynamically set their position, height, and mask based on the number of fixed headers on the page. (#7144)
• Sticky-positioned EuiPageSidebars now dynamically set their position and height based on the number of fixed headers on the page. This can still be overridden via the sticky.offset prop if needed. (#7144)
• EuiPageTemplate now dynamically offsets content from any fixed headers on the page. This can still be overridden via the offset prop if needed. (#7144)
• Updated EuiAccordion with a new borders prop (#7154)
• Updated EuiAccordion with a new buttonProps.paddingSize prop (#7154)

Deprecations

• Deprecated the Sass euiHeaderAffordForFixed mixin. Use the new global CSS var(--euiFixedHeadersOffset) variable instead. (#7144)

CSS-in-JS conversions

• Except for generic CSS utilities, EUI is moving away from providing global classNames that are component-specific. As part of this effort, we have removed the following EuiAccordion-specific classes: (#7154)
  • Removed .euiAccordionForm styles. Use the borders="horizontal" prop instead
  • Removed .euiAccordionForm__button styles. Use the buttonProps={{ paddingSize: 'm' }} prop instead
  • Removed .euiAccordionForm__extraAction styles. Convert this to your own custom CSS if necessary.
  • Removed .euiAccordionForm__title styles. Convert this to your own custom CSS if necessary.

v88.1.0

• Added font.defaultUnits theme token. EUI component font sizes default to rem units - this token allows consumers to configure this to px or em (#7133)
• Updated EuiDescriptionList with new columnWidths prop (#7146)

Bug fixes

• Fixed EuiDataGrid's keyboard shortcuts popover display (#7146)

CSS-in-JS conversions

• Renamed useEuiFontSize()'s measurement option to unit for clarity (#7133)

v88.0.0

• Updated EuiDescriptionList with a new columnGutterSize prop (#7062)

Deprecations

• Deprecated EuiSuggest. We recommend using EuiSelectable or EuiComboBox instead (#7122)
• Deprecated EuiControlBar. We recommend using EuiBottomBar instead (#7122)
• Deprecated EuiColorStops. We recommend copying the component to your application if necessary (#7122)
• Deprecated EuiNotificationEvent. We recommend copying the component to your application if necessary (#7122)

Breaking changes

• Renamed EuiDescriptionList's gutterSize prop to rowGutterSize (#7062)
• EuiDescriptionList's rowGutterSize prop now defaults to a size of s (was previously m) (#7062)

Accessibility

• Fixed the dark mode colors of inline EuiDescriptionListTitles to meet WCAG color contrast requirements (#7062)

CSS-in-JS conversions

• Converted EuiKeyPadMenuItem to Emotion; Removed $euiKeyPadMenuSize and $euiKeyPadMenuMarginSize (#7118)

v87.2.0

• EuiResizableButton is now available as a generic top-level export (#7087)
• Added new alignIndicator prop to EuiResizableButton. Defaults to center, and can now additionally be configured to start and end (#7087)
• Updated useGeneratedHtmlId hook to use React.useId as the source of unique identifiers when available (#7095)

CSS-in-JS conversions

• Converted EuiResizableButton to Emotion; Removed $euiResizableButtonTransitionSpeed and $euiResizableButtonSize (#7081)
• Converted EuiResizableCollapseButton to Emotion (#7091)

v87.1.0

• Updated the underlying library powering EuiAutoSizer. This primarily affects typing around the disableHeight and disableWidth props (#6798)
• Added new EuiAutoSize, EuiAutoSizeHorizontal, and EuiAutoSizeVertical types to support EuiAutoSizer's now-stricter typing (#6798)
• Updated EuiDatePickerRange to support compressed display (#7058)
• Updated EuiFlyoutBody with a new scrollableTabIndex prop (#7061)
• Added a new panelMinWidth prop to EuiInputPopover (#7071)
• Added a new inputPopoverProps prop for EuiRanges and EuiDualRanges with showInput="inputWithPopover" set (#7082)

Bug fixes

• Fixed EuiToolTip overriding instead of merging its aria-describedby tooltip ID with any existing aria-describedbys (#7055)
• Fixed EuiSuperDatePicker's compressed display (#7058)
• Fixed EuiAccordion to remove tabbable children from sequential keyboard navigation when the accordion is closed (#7064)
• Fixed EuiFlyouts to accept custom aria-describedby IDs (#7065)

Accessibility

• Removed the default dialog role and tabIndex from push EuiFlyouts. Push flyouts, compared to overlay flyouts, require manual accessibility management. (#7065)

v87.0.0

• Added beta componentDefaults prop to EuiProvider, which will allow configuring certain default props globally. This list of components and defaults is still under consideration. (#6923)
• EuiPortal's insert prop can now be configured globally via EuiProvider.componentDefaults (#6941)
• EuiFocusTrap's crossFrame and gapMode props can now be configured globally via EuiProvider.componentDefaults (#6942)
• EuiTablePagination's itemsPerPage, itemsPerPageOptions, and showPerPageOptions props can now be configured globally via EuiProvider.componentDefaults (#6951)
• EuiBasicTable, EuiInMemoryTable, and EuiDataGrid now allow pagination.pageSize to be undefined. If undefined, pageSize defaults to EuiTablePagination's itemsPerPage component default. (#6993)
• EuiBasicTable, EuiInMemoryTable, and EuiDataGrid's pagination.pageSizeOptions will now fall back to EuiTablePagination's itemsPerPageOptions component default. (#6993)
• Updated EuiHeaderLinks's gutterSize spacings (#7005)
• Updated EuiHeaderAlert's stacking styles (#7005)
• Added toolTipProps to EuiListGroupItem that allows customizing item tooltips. (#7018)
• Updated EuiBreadcrumbs to support breadcrumbs that toggle popovers via popoverContent and popoverProps (#7031)
• Improved the contrast ratio of disabled titles within EuiSteps and EuiStepsHorizontal to meet WCAG AA guidelines. (#7032)
• Updated EuiSteps and EuiStepsHorizontal to highlight and provide a more clear visual indication of the current step (#7048)

Bug fixes

• Single uses of <EuiHeaderSectionItem side="right" /> now align right as expected without needing a previous side="left" sibling. (#7005)
• EuiPageTemplate now correctly displays panelled={true} (#7044)

Breaking changes

• EuiTablePagination's default itemsPerPage is now 10 (was previously 50). This can be configured through EuiProvider.componentDefaults. (#6993)
• EuiTablePagination's default itemsPerPageOptions is now [10, 25, 50] (was previously [10, 20, 50, 100]). This can be configured through EuiProvider.componentDefaults. (#6993)
• Removed border prop from EuiHeaderSectionItem (unused since Amsterdam theme) (#7005)
• Removed borders object configuration from EuiHeader.sections (#7005)

CSS-in-JS conversions

• Converted EuiHeaderAlert to Emotion; Removed unused .euiHeaderAlert__dismiss CSS (#7005)
• Converted EuiHeaderSection, EuiHeaderSectionItem, and EuiHeaderSectionItemButton to Emotion (#7005)
• Converted EuiHeaderLinks and EuiHeaderLink to Emotion; Removed $euiHeaderLinksGutterSizes Sass variables (#7005)
• Removed $euiHeaderBackgroundColor Sass variable; use $euiColorEmptyShade instead (#7005)
• Removed $euiHeaderChildSize Sass variable; use $euiSizeXXL instead (#7005)

v86.0.0

• Added React 18 support (StrictMode not yet supported). (#7012)

Deprecations

• Deprecated euiPaletteComplimentary; Use euiPaletteComplementary instead. (#6992)

Breaking changes

• Replaced the underlying drag-and-drop library from react-beautiful-dnd to its fork @hello-pangea/dnd (#7012) (#7012)
  • No code updates are needed if using only <EuiDragDropContext>, <EuiDroppable> and <EuiDraggable> with no direct imports from react-beautiful-dnd. In case you were importing things from react-beautiful-dnd and using them together with EUI components, you need to switch to @hello-pangea/dnd which has cross-compatible API

v85.1.0

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

Bug fixes

• Fixed EuiFilterGroup's responsive styles (#6983)

Deprecations

• Deprecated EuiFilterSelectItem; Use EuiSelectable instead (#6982)

CSS-in-JS conversions

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

v85.0.0

• Updated EuiThemeProvider to set an Emotion theme context that returns the values of useEuiTheme() (#6913)
• Added size prop to EuiStepsHorizontal, defaulting to the previous size of m (#6928)
• Added new s sizing to EuiStepsHorizontal (#6928)
• Added at and key icon glyphs. (#6934)
• Added a new cloneElementWithCss Emotion utility (#6939)
• Updated EuiPopover to allow consumer control of all focusTrapProps (#6955)

Bug fixes

• Fixed EuiDataGrid height calculation bug when browser zoom levels are not 100% (#6895)
• Fixed EuiTab not correctly passing selection color state to prepend and append children (#6938)
• Fixed EuiInputPopover to allow consumer control of its focus trap via focusTrapProps (#6955)

Breaking changes

• EuiProvider will no longer render multiple or duplicate nested instances of itself. If a nested EuiProvider is detected, that instance will return early without further processing, and will warn if configured to do so via setEuiDevProviderWarning. For nested theming, use EuiThemeProvider instead. (#6949)
• Removed onTrapDeactivation prop from EuiPopover. Use focusTrapProps.onDeactivation instead (#6955)

CSS-in-JS conversions

• Converted EuiFilterGroup and EuiFilterButton to Emotion; Removed styles attached to .euiFilterGroup__popoverPanel (#6957)