- Updated
EuiTableHeaderCell
to show a subduedsortable
icon for columns that are not currently sorted but can be (#7656) - Updated
EuiBasicTable
andEuiInMemoryTable
'scolumns[].actions[]
's to pass back click events toonClick
callbacks as the second callback (#7667)
- Updated
EuiTable
,EuiBasicTable
, andEuiInMemoryTable
with a newresponsiveBreakpoint
prop, which allows customizing the point at which the table collapses into a mobile-friendly view with cards (#7625) - Updated
EuiProvider
'scomponentDefaults
prop to allow configuringEuiTable.responsiveBreakpoint
(#7625)
Bug fixes
EuiBasicTable
&EuiInMemoryTable
isPrimary
actions are now correctly shown on mobile views (#7640)- Table
mobileOptions
: (#7642)mobileOptions.align
is now respected instead of all cells being forced to left alignmenttextTruncate
andtextOnly
are now respected even if arender
function is not passed
Breaking changes
- Removed unused
EuiTableHeaderButton
component (#7621) - Removed the
responsive
prop fromEuiTable
,EuiBasicTable
, andEuiInMemoryTable
. Use the newresponsiveBreakpoint
prop instead (#7625) - The following props are no longer needed by
EuiBasicTable
orEuiInMemoryTable
for responsive table behavior to work correctly, and can be removed: (#7632)isSelectable
isExpandable
hasActions
- Removed the
showOnHover
prop fromEuiTableRowCell
/EuiBasicTable
/EuiInMemoryTable
'scolumns
API. Use the new actionscolumns[].actions[].showOnHover
API instead. (#7640) - Removed top-level
textOnly
prop fromEuiBasicTable
andEuiInMemoryTable
. Usecolumns[].textOnly
instead. (#7642)
DOM changes
EuiTable
mobile headers no longer render in the DOM when not visible (previously rendered withdisplay: none
). This may affect DOM testing assertions. (#7625)EuiTableRowCell
now applies passedclassName
s to the parent<td>
element, instead of to the inner cell content<div>
. (#7631)EuiTableRow
s rendered by basic and memory tables now only render a.euiTableRow-isSelectable
className if the selection checkbox is not disabled (#7632)EuiTableRowCell
s withtextOnly
set tofalse
will no longer attempt to apply the.euiTableCellContent__text
className to child elements. (#7641)EuiTableRowCell
no longer renders mobile headers to the DOM unless the current table is displaying its responsive view. (#7642)EuiTableHeaderCell
andEuiTableRowCell
will no longer render in the DOM at all on mobile if their columns'mobileOptions.show
is set tofalse
. (#7642)EuiTableHeaderCell
andEuiTableRowCell
will no longer render in the DOM at all on desktop if their columns'mobileOptions.only
is set totrue
. (#7642)
CSS-in-JS conversions
- Converted
EuiTable
,EuiTableRow
,EuiTableRowCell
, and all other table subcomponents to Emotion (#7654) - Removed the following
EuiTable
Sass variables: (#7654)$euiTableCellContentPadding
$euiTableCellContentPaddingCompressed
$euiTableCellCheckboxWidth
$euiTableHoverColor
$euiTableSelectedColor
$euiTableHoverSelectedColor
$euiTableActionsBorderColor
$euiTableHoverClickableColor
$euiTableFocusClickableColor
- Removed the following
EuiTable
Sass mixins: (#7654)euiTableActionsBackgroundMobile
euiTableCellCheckbox
euiTableCell
- Updated
EuiBreadcrumb
styles to improve visual distinction of clickable breadcrumbs (#7615)
Deprecations
- Deprecated
color
prop onEuiBreadcrumb
(#7615)
Bug fixes
- Fixed
EuiComboBox
to correctly select full matches within groups via theEnter
key (#7658)
Accessibility
- Updated
EuiHeaderBreadcrumb
styles to ensure min. required color contrast (#7643) EuiSuperSelect
now correctly reads out parentEuiFormRow
labels to screen readers (#7650)EuiSuperSelect
now more closely mimics native<select>
behavior in its keyboard behavior and navigation (#7650)EuiSuperSelect
no longer strands keyboard focus on close (#7650)EuiSuperSelect
now correctly allows keyboard navigating past disabled options in the middle of the options list (#7650)
Dependency updates
CSS-in-JS conversions
- Updated EUI's internal style memoization/performance utility to have configurable error/warning levels via
setEuiDevProviderWarning
(#7626)
Bug fixes
- Fixed unvirtualized
EuiSelectable
s to not cause Jest/jsdom errors on active option change (#7618)
EuiHeaderLinks
now accepts achildren
render function that will be passed acloseMobilePopover
callback, allowing consumers to close the mobile popover by its content (#7603)- Updated
EuiSelectable
to support scrolling list containers whenlistProps.isVirtualization
is set tofalse
(#7609)
Bug fixes
- Fixed
EuiIconTip
's defaultaria-label
text to be i18n tokenizable (#7606) - Fixed
EuiTextArea
's CSS box model to no longer render a few extra pixels of strut height (#7607)
Dependency updates
- Updated
@types/refractor
to v3.4.0 (#7590) - Updated
@types/lodash
to v4.14.202 (#7591) - Removed
@types/resize-observer-browser
dependency.ResizeObserver
types should already be baked in to Typescript as of 4.2+ (#7592) - Updated
classnames
to v2.5.1 (#7593) - Updated
@types/numeral
to v2.0.5 (#7594) - Updated
@types/react-window
to 1.8.8 (#7597) - Updated
prop-types
to v15.18.1 (#7602) - Removed
prop-types
as a peer dependency, per package recommendation (#7602)
Accessibility
EuiIcons
no longer applyaria-hidden
to empty icons, as long as a valid title or label is provided to the icon. In particular, this is intended to improve the accessibility of loadingEuiIconTip
s. (#7606)
- Added the following properties to
EuiButtonGroup
'soptions
configs:toolTipContent
,toolTipProps
, andtitle
. These new properties allow wrapping buttons inEuiToolTips
, and additionally customizing or disabling the native browsertitle
tooltip. (#7461) - Enhanced
EuiResizeObserver
anduseResizeObserver
's performance to not trigger page reflows on resize event (#7575) - Updated
EuiSuperUpdateButton
to support custom button text via an optionalchildren
prop (#7576)
Bug fixes
- Fixed
EuiFlyout
to not repeatedly remove/add a body class on resize (#7462) - Fixed
EuiToast
title text to wrap instead of overflowing out of the container (#7568) - Fixed a visual bug with
EuiHeaderBreadcrumbs
with popovers (#7580)
Deprecations
- Deprecated
euiPalettePositive
andeuiPaletteNegative
in favour of a more culturally inclusiveeuiPaletteGreen
andeuiPaletteRed
(#7570) - Deprecated all charts theme exports in favor of
@elastic/charts
exports: (#7572)- Deprecated
EUI_CHARTS_THEME_<DARK|LIGHT>
in favor of<DARK|LIGHT>_THEME
from@elastic/charts
. (#7572) - Deprecated
EUI_SPARKLINE_THEME_PARTIAL
in favor ofuseSparklineOverrides
theme from the kibanacharts
plugintheme
service.
- Deprecated
Accessibility
- Updated
EuiModal
to set anaria-modal
attribute and a defaultdialog
role (#7564) - Updated
EuiConfirmModal
to set a defaultalertdialog
role (#7564) - Fixed
EuiModal
andEuiConfirmModal
to properly trap Safari+VoiceOver's virtual cursor (#7564)
- Added new
EuiDataGrid
new prop:cellContext
, an optional object of additional props passed to the cell render function. (#7374) EuiBreadcrumbs
'spopoverContent
API now accepts a render function that will be passed aclosePopover
callback, allowing consumers to close the breadcrumb popover from their popover content (#7555)
Bug fixes
- Fixed missing animation on native
EuiProgress
bar update (#7538) - Fixed an
EuiDataGrid
bug withgridStyle.rowClasses
, where custom consumer classes that began witheuiDataGridRow
would not be correctly removed/reapplied (#7549) - Fixed a visual
EuiDataGrid
bug whereEuiCheckbox
es within control columns were not vertically centered within single height rows (#7549)
- Added
diff
glyph toEuiIcon
(#7520) - Updated
EuiPageSidebar
andEuiPageTemplate.Sidebar
with a newhasEmbellish
prop (defaults to false) (#7521) - Added
newChat
glyph toEuiIcon
(#7524)
Bug fixes
- Fixed
EuiSideNav
not correctly typing theitems
prop as required (#7521) - Fixed the
CSS is not defined
bug inEuiPageTemplate
when rendering in some SSR environments, particularly Next.js v13 and up (#7525) - Fixed
EuiDataGrid
component to clean up timer from side effect on unmount (#7534)
Accessibility
- Fixed
EuiSideNav
to render a fallback aria-label on mobile toggles if no heading or mobile title exists (#7521)
CSS-in-JS conversions
- Converted
EuiSideNav
to Emotion; Removed the following Sass variables: (#7521)$euiSideNavEmphasizedBackgroundColor
$euiSideNavRootTextcolor
$euiSideNavBranchTextcolor
$euiSideNavSelectedTextcolor
$euiSideNavDisabledTextcolor
- Removed the
euiSideNavEmbellish
Sass mixin. Use the newEuiPageSidebar
hasEmbellish
prop instead (#7521) - Added a new memoization/performance optimization utility for CSS-in-JS styles (#7529)
This is a patch release primarily intended for use by Kibana.
- Added top-level
EuiTreeView.Item
export (#7526)
- Added
index
glyph toEuiIcon
(#7498) - Updated
EuiHighlight
to accept an array ofsearch
strings, which allows highlighting multiple, separate words within its children. This new type and behavior only works ifhighlightAll
is also set to true. (#7496) - Updated
EuiContextMenu
with a newpanels.items.renderItem
property, which allows rendering completely custom items next to standardEuiContextMenuItem
objects (#7510) EuiSuperDatePicker
updates:- Updated
EuiSuperDatePicker
with a newrefreshIntervalUnits
prop. Passing this prop allows controlling and overriding the default unit rounding behavior. (#7501) - Updated
EuiAutoRefresh
andEuiRefreshInterval
with a newintervalUnits
prop. Passing this prop allows controlling and overriding the default unit rounding behavior. (#7501) - Updated
onRefreshChange
to pass back a newintervalUnits
key that contains the current interval unit format (seconds, minutes, or hours). (#7501) - Updated
EuiSuperDatePicker
with a newcanRoundRelativeUnits
prop, which defaults to true (current behavior). To preserve displaying the unit that users select for relative time, set this to false. (#7502) - Updated
EuiSuperDatePicker
with a newrefreshMinInterval
prop, which accepts a minimum number in milliseconds (#7516) - Updated
EuiAutoRefresh
andEuiRefreshInterval
with a newminInterval
prop, which accepts a minimum number in milliseconds (#7516)
- Updated
Bug fixes
- Fixed
EuiHighlight
to not parsesearch
strings as regexes (#7496) - Fixed
EuiSuperDatePicker
submit bug when used within<form>
elements (#7504) - Fixed an
EuiTreeView
bug wherearia-expanded
was being applied to items without expandable children (#7513)
CSS-in-JS conversions
- Converted
EuiTreeView
to Emotion. Updates as part of the conversion: (#7513)- Removed
.euiTreeView__wrapper
div node - Enforced consistent
icon
size based ondisplay
size
- Removed
Bug fixes
- Fixed
EuiTextTruncate
component to clean up timer from side effect on unmount (#7495)
Breaking changes
- Removed deprecated
anchorClassName
prop fromEuiPopover
. UseclassName
instead (#7488) - Removed deprecated
buttonRef
prop fromEuiPopover
. UsepopoverRef
instead (#7488) - Removed deprecated
toolTipTitle
andtoolTipPosition
props fromEuiContextMenuItem
. UsetoolTipProps.title
andtoolTipProps.position
instead (#7489) - Removed deprecated internal
setSelection
ref method fromEuiInMemoryTable
andEuiBasicTable
. Use the new controlledselection.selected
prop API instead. (#7491) EuiTourStep
'sclassName
andstyle
props now apply to the anchoring element instead of to the popover panel, to matchEuiPopover
behavior. (#7497)- Convert your existing usages to
panelClassName
andpanelStyle
respectively instead.
- Convert your existing usages to
Performance
- Improved the amount of recomputed styles being generated by
EuiCode
andEuiCodeBlock
(#7486)
CSS-in-JS conversions
- Converted
EuiSearchBar
to Emotion (#7490) - Converted
EuiEmptyPrompt
to Emotion (#7494) - Added
euiBorderColor
anduseEuiBorderColorCSS
style utilities (#7494)
Bug fixes
- Removed unintentional i18n tokens in prior release that should not have been exported
- Updated
EuiFlyoutResizable
with new optionalonResize
callback (#7464)
Bug fixes
- Fixed an issue in
EuiResizableContainer
whereonResizeEnd
could become a stale closure when renders occured between resize start and end, resulting in an outdated version of a consumer'sonResizeEnd
callback being called (#7468) - Fixed
EuiTextArea
to correctly fireonChange
callbacks on clear button click (#7473) - Fixed
EuiContextMenu
's panel titles & items to not show underlines on hover for non-interactive elements (#7474)
Deprecations
- Remove unused public
EuiHue
andEuiSaturation
subcomponent exports. Use the parentEuiColorPicker
component instead (#7460) - Remove unused public
EuiCommentTimeline
subcomponent export. Use the parentEuiComment
orEuiCommentList
components instead. (#7467)
Bug fixes
- Minor
EuiDataGrid
cell performance fixes (#7465)
- Updated
EuiResizableButton
to allow customizing theindicator
style with eitherhandle
(default) orborder
(#7455) - Enhanced
EuiResizableContainer
to preserve the drag/resize event when the user's mouse leaves the parent container and re-enters (#7456)
Bug fixes
- Fixed an
EuiTreeView
JSX Typescript error (#7452) - Fixed a color console warning being generated by disabled
EuiStep
s (#7454)
Accessibility
EuiDataGrid
's keyboard/screenreader experience has been tweaked to be more consistent for varying complex data: (#7448)- Headers are now always navigable by arrow key, regardless of whether the header cells contain interactive content
- Non-expandable cells containing any amount of interactive content now must be entered via Enter or F2 keypress
- Expandable cells continue to be toggled via Enter or F2 keypress
EuiDataGrid
now provides a direct screen reader hint for Enter key behavior for expandable & interactive cells (#7448)
- Updated generic types of
EuiBasicTable
,EuiInMemoryTable
andEuiSearchBar.Query.execute
to addextends object
constraint (#7340)- This change should have no impact on your applications since the updated types only affect properties that exclusively accept object values.
- Added a new
EuiFlyoutResizable
component (#7439) - Updated
EuiTextArea
to acceptisClearable
andicon
as props (#7449)
Bug fixes
EuiRange
/EuiDualRange
's track ticks & highlights now update their positions on resize (#7442)
Deprecations
- Updated
EuiFilterButton
to remove the second.euiFilterButton__textShift
span wrapper. Target.euiFilterButton__text
instead (#7444)
Breaking changes