v96.1.0

CSS-in-JS conversions

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

v96.0.0

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

Bug fixes

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

Deprecations

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

Breaking changes

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

CSS-in-JS conversions

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

v95.12.0

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

Bug fixes

• Fixed EuiDatePicker's onClear button to not appear when the input is disabled (#8020)
• Fixed several EuiDataGrid row height bugs: (#8025)
  • Fixed row heights not recalculating when rowHeightOptions.lineHeight, gridStyles.fontSize, or gridStyles.cellPadding changed
  • Fixed incorrect height calculations for rowHeightOptions.rowHeights with lineCounts
  • Fixed control column content to align better with multi-line row heights, as well as custom line-heights

v95.11.0

• Updated EuiText, EuiTextColor, and EuiTextAlign with a new component prop that allows changing the default rendered <div> wrapper to a <span> or <p> tag. (#7993)
• Updated EuiDataGrid's cell actions to always consistently be left-aligned, regardless of text content alignment (#8011)
• Increased EuiDataGrid's cell actions hover zone to reduce UX friction when mousing over from the grid cell to its actions (#8011)

Bug fixes

• Fixed EuiPopover to correctly inherit from EuiProvider's componentDefaults.EuiPortal.insert (#8003)
• Fixed push EuiFlyoutResizables to not potentially block scrollbars on outside content (#8010)
• Fixed an EuiDataGrid bug where the setCellProps callback passed by renderCellValue was not correctly applying custom data-test-subjs (#8011)

Accessibility

• Updated the EuiBasicTable actions button's aria-label by adding a reference to the current row (#7994)

CSS-in-JS conversions

• Converted EuiDataGrid's toolbar controls to Emotion (#7997)
  • Removed $euiDataGridPopoverMaxHeight
• Converted EuiDataGrid to Emotion (#7998)
  • Removed $euiZDataGrid
  • Removed $euiZHeaderBelowDataGrid
• Converted EuiDataGrid's gridStyles to Emotion; Removed the following Sass variables and mixins: (#8006)
  • $euiDataGridCellPaddingS
  • $euiDataGridCellPaddingM
  • $euiDataGridCellPaddingL
  • $euiDataGridVerticalBorder
  • $euiDataGridPrefix
  • $euiDataGridStyles
  • @euiDataGridSelector
  • @euiDataGridStyles
• Converted EuiDataGrid's cell popover, actions, and focus outline to Emotion; Removed the following Sass variables and mixins: (#8011)
  • $euiZDataGridCellPopover
  • @euiDataGridCellFocus
• Converted EuiDataGrid's row, header, and footer cells to Emotion; Removed the following Sass variables and mixins: (#8013)
  • $euiDataGridColumnResizerWidth
  • @euiDataGridRowCell
  • @euiDataGridHeaderCell
  • @euiDataGridFooterCell

v95.10.1

Bug fixes

• Fixed a visual bug in compact density EuiDataGrids, where the header cell height would increase when the actions button became visible (#7999)

v95.10.0

• Updated EuiDataGrid to support interactive header cell content (#7898)
• Updated EuiSearchBar's field_value_selection filter type with a new autoSortOptions config, allowing consumers to configure whether or not selected options are automatically sorted to the top of the filter list (#7958)
• Updated getDefaultEuiMarkdownPlugins to support the following new default plugin configurations: (#7985)
  • parsingConfig.linkValidator, which allows configuring allowRelative and allowProtocols
  • parsingConfig.emoji, which allows configuring emoticon parsing
  • processingConfig.linkProps, which allows configuring rendered links with any props that EuiLink accepts
  • See our Markdown plugins documentation for example EuiMarkdownFormat and EuiMarkdownEditor usage
• Updated EuiDatePicker to support append and prepend nodes in its form control layout (#7987)

Bug fixes

• Fixed border rendering bug with inline EuiDatePickers with shadow={false} (#7987)
• Fixed EuiSuperSelect's placeholder text color to match other form controls (#7995)

Accessibility

• Improved the keyboard navigation and screen reader output for EuiDataGrid header cells (#7898)

v95.9.0

• Updated EuiSearchBar's optional box.schema prop with a new recognizedFields configuration. This allows specifying the phrases that will be parsed as field clauses (#7960)
• Updated EuiIcon with a new tokenSemanticText glyph (#7971)
• Added support for TypeScript 5 (#7980)

Bug fixes

• Fixed EuiSelectableTemplateSitewide styles when used within a dark-themed EuiHeader (#7977)

v95.8.0

• Updated EuiHeaderLinks's mobile menu to set a slight popover padding by default (#7961)
  • This can be overridden via popoverProps.panelPaddingSize if needed.
• Updated EuiHeaderLink to default to a size of s (down from m) (#7961)

Accessibility

• Updated the aria-label attribute for the EuiFieldSearch clear button (#7970)

Bug fixes

• Fixed a visual bug with <EuiDualRange showInput="inputWithPopover" /> form controls (#7957)

Deprecations

• Deprecated EuiFormRow's columnCompressedSwitch display prop. Use columnCompressed instead, which will automatically account for child EuiSwitches (#7968)
• Deprecated EuiFormRow's rowCompressed display prop. Use row instead for vertical forms, or centerCompressed for inline forms (#7968)
• (Styling) Updated EuiFormRow's hasEmptySpaceLabel prop to no longer attempt to automatically align its content to a vertical center. Use the display="center" prop for that instead (#7968)

CSS-in-JS conversions

• Converted EuiFormControlLayout to Emotion (#7954)
  • Removed .euiFormControlLayout--*icons classNames and --eui-form-control-layout-icons-padding CSS var. Use --euiFormControlRightIconsCount or --euiFormControlLeftIconsCount instead
• Converted EuiFormLayoutDelimited to Emotion (#7957)
• Fixed cloneElementWithCss throwing an error when used multiple times without a key prop (#7957)
• Updated cloneElementWithCss utility to support a third argument that allows prepending vs. appending the cloned Emotion css className (#7957)
• Removed @euiFormControlLayoutClearIcon Sass mixin (#7959)
• Converted EuiDescribedFormGroup to Emotion (#7964)
• Converted EuiForm, EuiFormHelpText, and EuiFormErrorText to Emotion (#7966)
• Converted EuiFormLabel and EuiFormLegend to Emotion; Removed @euiFormLabel mixin (#7967)
• Converted EuiFormRow to Emotion (#7968)
• Converted EuiCheckbox to Emotion (#7969)
• Converted EuiRadio to Emotion (#7969)
• Converted EuiSwitch to Emotion (#7969)
• Removed the following Sass variables: (#7969)
  • $euiFormCustomControlDisabledIconColor
  • $euiFormCustomControlBorderColor
  • $euiRadioSize
  • $euiCheckBoxSize
  • $euiCheckboxBorderRadius
  • $euiSwitchHeight (and compressed/mini variants)
  • $euiSwitchWidth (and compressed/mini variants)
  • $euiSwitchThumbSize (and compressed/mini variants)
  • $euiSwitchIconHeight
  • $euiSwitchOffColor
• Removed the following Sass mixins: (#7969)
  • euiIconBackground
  • euiCustomControl
  • euiCustomControlSelected
  • euiCustomControlDisabled
  • euiCustomControlFocused

v95.7.0

CSS-in-JS conversions

• Converted EuiSelectable to Emotion (#7940)
  • Removed $euiSelectableListItemBorder
  • Removed $euiSelectableListItemPadding
• Converted EuiSelectableTemplateSitewide to Emotion (#7944)
  • Removed $euiSelectableTemplateFocusBackgroundLight
  • Removed $euiSelectableTemplateFocusBackgroundDark
  • Removed $euiSelectableTemplateSitewideTypes
• Converted EuiComboBox to Emotion (#7950)

v95.6.0

• Updated EuiIcon with a new crossInCircle glyph (#7924)

Bug fixes

• Fixed EuiEmptyPrompt to correctly collapse and expand responsively when used with custom breakpoints larger than the default xl breakpoint (#7935)

Accessibility

• Improved the experience of EuiModal by ensuring nested EuiPopover closes on Escape keypress instead of the modal (#7939)

CSS-in-JS conversions

• Converted EuiDatePicker to Emotion (#7937)
  • Removed $euiDatePickerCalendarWidth
  • Removed $euiDatePickerPadding
  • Removed $euiDatePickerGap
  • Removed $euiDatePickerCalendarColumns
  • Removed $euiDatePickerButtonSize
  • Removed $euiDatePickerMinControlWidth
  • Removed $euiDatePickerMaxControlWidth
  • Removed @mixin datePickerCaret
  • Removed @mixin datePickerArrow