eui

Deprecations

• Renamed EuiPageSideBarProps to EuiPageSideBarProps_Deprecated, to reduce usage/confusion with EuiPageSidebar (#6468)

• Implemented new EuiRange and EuiDualRange designs where the levels are now on top of the tracks (#6092)
• Added discuss and dotInCircle glyphs to EuiIcon (#6434)
• Added article glyph to EuiIcon (#6437)
• Changed the EuiProvider usage warnings to not rely on development mode. (#6451)

Breaking changes

• EuiDualRange now explicitly requires both min and max via props types, to match EuiRange (#6092)
• EuiRange and EuiDualRange's compressed size no longer impacts track or level sizes, but continues to compress tick and input sizes. (#6092)
• Removed all variables for the following components from EUI's theme JSON files: (#6443)
  • euiCollapsibleNav*
  • euiColorPicker*
  • euiContextMenu*
  • euiControlBar*
  • euiDataGrid* (except for z-indices and cell padding sizes)
  • euiDatePicker*
  • euiSuperDatePicker*
  • euiDragAndDrop*
  • euiEuiEmptyPrompt*
  • euiFilePicker*
  • euiRange*
  • euiHeaderLinks*
  • euiKeyPad*
  • euiMarkdownEditor*
  • euiResizable*
  • euiSelectable*
  • euiSideNav*
  • euiStep*
  • euiSuggest*
  • euiTable* (except for color variables)
  • euiTooltip*
  • euiButtonFontWeight, euiButtonDefaultTransparency, and euiButtonMinWidth
• If you were importing any of the above removed JSON variables, we strongly recommend using generic color or sizing variables from useEuiTheme() instead. (#6443)

CSS-in-JS conversions

• Converted EuiRange and EuiDualRange to Emotion; Removed $euiRangeThumbRadius (#6092)
• Added a new logicalStyles utility that automatically converts all non-logical properties in a style object to their corresponding logical properties (#6426)
• Added a new logicalShorthandCSS utility that automatically converts margin, padding, and other 4-sided shorthands to their corresponding logical properties (#6429)
• Added a new logicalBorderRadiusCSS utility that automatically converts border-radius to corresponding logical properties (#6429)

• Updated EuiTourStep.footerAction type to accept ReactNode[] (#6384)
• Vertically aligned all footer content so that euiTourStepIndicator is always centered (#6384)
• Added filterInCircle glyph to EuiIcon (#6385)
• Added color prop to EuiBeacon (#6420)
• Added the euiMaxBreakpoint and euiMinBreakpoint CSS-in-JS utilities for creating min/max-width media queries (#6431)

Bug fixes

• Restores the previous match operator behaviour when the query value is split into multiple terms after analysis. (#6409)
• Fixed missing slide-in animation on EuiCollapsibleNavs and left-side EuiFlyouts (#6422)
• Fix bug in EuiCard where footer were not aligned to the bottom of the card (#6424)
• Fixed multiple component media queries for consumers with custom theme breakpoints (#6431)

• EuiSearchBar now automatically wraps special characters not used by query syntax in quotes (#6356)
• Added alignment prop to EuiBetaBadge (#6361)
• EuiButton now accepts minWidth={false} (#6373)

Bug fixes

• Fixed EuiPageTemplate not correctly passing the component prop to the inner main content wrapper. (#6352)
• EuiSkipLink now correctly calls onClick even when fallbackDestination is invalid (#6355)
• Permanently fixed EuiModal to not cause scroll-jumping issues on modal open (#6360)
• Re-fixed EuiPageSection not correctly merging contentProps.css (#6365)
• Fixed EuiTab not defaulting to size m (#6366)
• Fixed the shadow sizes of .eui-yScrollWithShadows and .eui-xScrollWithShadows (#6374)
• Fixed bug in EuiCard where the inner content in vertical cards was not growing 100% in width (#6377)
• Fixed incorrect margins in EuiSuperDatePicker caused by EuiFlex CSS gap change (#6380)
• Fixed visual bug in nested EuiFlexGroups, where the parent EuiFlexGroup is responsive but a child EuiFlexGroup is not (#6381)

CSS-in-JS conversions

• Converted EuiModal to Emotion (#6321)

Fixes

• EuiButton no longer outputs unnecessary inline styles for minWidth={0} or minWidth={false} (#6373)
• EuiFacetButton no longer reports type issues when passing props accepted by EuiButton (#6373)

• Added a keyboard shortcuts popover to EuiDataGrid's toolbar. This can be visually hidden via toolbarVisibility.showKeyboardShortcuts, but will always remain accessible to keyboard and screen reader users. (#6036)
• EuiScreenReaderOnly's showOnFocus prop now also shows on focus within its children (#6036)
• Added onFocus prop callback to EuiSuperDatePicker (#6320)

Bug fixes

• Fixed EuiSelectable to ensure the full options list is re-displayed when the search bar is controlled and cleared using searchProps.value (#6317)
• Fixed incorrect padding on xl-sized EuiTabs (#6336)
• Fixed EuiCard not correctly merging css on its child icons (#6341)
• Fixed EuiCheckableCard not setting css on the correct DOM node (#6341)
• Fixed a webkit rendering issue with EuiModals containing EuiBasicTables tall enough to scroll (#6343)
• Fixed bug in to_initials that truncates custom initials (#6346)
• Fix bug in EuiCard where layout breaks when horizontal and selectable are both passed (#6348)

• Added the hint prop to the <EuiSearchBar />. This prop lets the consumer render a hint below the search bar that will be displayed on focus. (#6319)
• Added the hasDragDrop prop to EuiPopover. Use this prop if your popover contains EuiDragDropContext. (#6329)

Bug fixes

• Fixed EuiButton's cursor style when the button is disabled (#6323)
• Fixed EuiPageTemplate not recognizing child EuiPageSidebars/EuiPageTemplate.Sidebars with css props (#6324)
• Fixed EuiBetaBadge to always respect its anchorProps values, including when there is no tooltip content (#6326)
• Temporarily patched EuiModal to not cause scroll-jumping issues on modal open (#6327)
• Fixed buggy drag & drop behavior within EuiDataGrid's columns & sorting toolbar popovers (#6329)
• Fixed EuiButton not correctly passing textProps for children inside fragments or i18n components (#6332)
• Fixed EuiButton not correctly respecting minWidth={0} (#6332)

CSS-in-JS conversions

• Converted EuiTabs to Emotion (#6311)

Bug fixes

• Fixed EuiButton's cursor style when the button is disabled (#6323)

• Added the enabled option to the <EuiInMemoryTable /> executeQueryOptions prop. This option prevents the Query from being executed when controlled by the consumer. (#6284)

Bug fixes

• Fixed EuiOverlayMask to set a [data-relative-to-header=above|below] attribute to replace the --aboveHeader and --belowHeader classNames removed in its Emotion conversion (#6289)
• Fixed EuiHeader CSS using removed EuiOverlayMask class modifiers (#6293)
• Fixed EuiToolTip not respecting reduced motion preferences (#6295)
• Fixed a bug with EuiTour where passing any panelProps would cause the beacon to disappear (#6298)

Breaking changes

• @emotion/css is now a required peer dependency, alongside @emotion/react (#6288)
• @emotion/cache is no longer required peer dependency, although your project must still use it if setting custom cache/injection locations (#6288)

CSS-in-JS conversions

• Converted EuiCode and EuiCodeBlock to Emotion; Removed euiCodeSyntaxTokens Sass mixin and $euiCodeBlockPaddingModifiers; (#6263)
• Converted EuiResizableContainer and EuiResizablePanel to Emotion (#6287)

• Added support for fullWidth prop on EuiForm, which will be the default for all rows/controls within (#6229)
• Added support for onResizeStart and onResizeEnd callbacks to EuiResizableContainer (#6236)
• Added optional case sensitive option matching to EuiComboBox with the isCaseSensitive prop (#6268)
• EuiFlexItem now supports grow={0} (#6270)
• Added the alignItems prop to EuiFlexGrid (#6281)
• Added filter, filterExclude, filterIgnore, filterInclude, indexTemporary, infinity, sortAscending, and sortDescending glyphs to EuiIcon (#6282)

Bug fixes

• Fixed EuiTextProps to show the color type option inherit as default (#6267)
• EuiFlexGroup now correctly respects gutterSize when responsive (#6270)
• Fixed the last breadcrumb in EuiBreadcrumbs's breadcrumbs array not respecting truncate overrides (#6280)

Breaking changes

• EuiFlexGrid no longer supports columns={0}. Use EuiFlexGroup instead for normal flex display (#6270)
• EuiFlexGrid now uses modern display: grid CSS (#6270)
• EuiFlexGroup, EuiFlexGrid, and EuiFlexItem now use modern gap CSS instead of margins and negative margins (#6270)
• EuiFlexGroup no longer applies responsive styles to column or columnReverse directions (#6270)

CSS-in-JS conversions

• Converted EuiFlexGroup, EuiFlexGrid, and EuiFlexItem to Emotion (#6270)

Bug fixes

• Fixed EuiFlyout not correctly merging passed css (#6248)
• Fixed EuiNotificationEvent not correctly merging passed classNames (#6248)
• Fixed EuiAvatar to no longer mutate the object passed to its style prop (#6251)

Note: this release is a backport containing changes originally made in 67.1.0, 67.1.1, and 67.1.2

Bug fixes

• Fixed EuiInMemoryTable's internal state tracking to include changes of sorting.sort values (#6228)
• Fixed EuiDataGrid's broken fullscreen mode when nested within an EuiAccordion (#6235)
• Fixed EuiAvatar to no longer mutate the object passed to its style prop (#6251)

Bug fixes

• Fixed EuiDataGrid's broken fullscreen mode when nested within an EuiAccordion (#6235)
• Fixed EuiPageSection not correctly merging contentProps.css (#6239)
• Fixed EuiPageHeaderContent not correctly merging passed classNames (#6239)
• Fixed EuiAccordion not correctly merging buttonProps.css and arrowProps.css (#6239)
• Fixed EuiProgress not correctly merging labelProps.css (#6239)
• Fixed EuiImage not correctly merging wrapperProps.css (#6239)

CSS-in-JS conversions

• Converted EuiFlyout to Emotion; Removed $euiFlyoutBorder and $euiFlyoutPaddingModifiers (#6213)

• Added an optional dev-mode check to log, warn, or error if a component is rendered outside of EuiProvider (#6216)
• Updated EuiBadge's disabled styling to match EuiButton (#6224)
• Added the custom_component search filter type for the EuiSearchBar. This new type gives the consumer control to render the search filter dropdown. (#6226)

Bug fixes

• Fixed Query.toESQuery() to generate bool queries instead of relying on match query logic, to work with non-text fields (#6220)
• Fixed EuiInMemoryTable's internal state tracking to include changes of sorting.sort values (#6228)
• Fixed bug in EuiButton where iconSize was not being applied (#6230)

CSS-in-JS conversions

• Converted EuiBadge to Emotion (#6224)

• Updated EuiSuggest to accept the isPreFiltered prop (#5930)
• Updated EuiOverlayMask to use EuiPortal (#6090)
• Updated EuiToolTipPopover to be a function component (#6104)
• Added EuiToolTipAnchor and EuiToolTipArrow components (#6104)
• Added a new component prop to EuiPageSection, allowing overriding of the default section tag (#6192)

Bug fixes

• Fixed global styles being inserted into the wrong location when a EuiProvider cache is not configured. (#6202)
• Fixed bug where className and rest props were not being passed to the EuiNotificationEvent (#6208)
• Fixed various nested componentProps throwing type errors on the css prop (#6211)

Deprecations

• Added @deprecated flags to EuiPageContent_Deprecated, EuiPageContentBody_Deprecated, EuiPageContentHeader_Deprecated, EuiPageContentHeaderSection_Deprecated, EuiPageSideBar_Deprecated and EuiPageTemplate_Deprecated, which will provide helpful hints to IDEs that support jsdoc flags. Consumers will have until August 2023 to migrate from these deprecated components. (#6194)

Breaking changes

• Removed onClick prop from EuiOverlayMask. Use a nested EuiFocusTrap instead. (#6090)
• Removed euiCallOutColor Sass mixin (#6201)

CSS-in-JS conversions

• Converted EuiOverlayMask to Emotion (#6090)
• Converted EuiToolTip to Emotion styling (#6104)
• Converted EuiPagination, EuiPaginationButton, and EuiPaginationButtonArrow to Emotion (#6109)

• Added the gutterSize prop to EuiDescriptionList (#6175)
• Added tooltipText as an optional prop on EuiListGroupItem (#6186)

Bug fixes

• Updated the EuiHeaderSectionItem to not render if empty (#6158)
• Added memoization to useEuiTheme's return value, supporting React's shallow prop comparison optimizations (#6165)
• Fixed an EuiPageSidebar bug where inline styles were not correctly updating (#6191)

Breaking changes

• Removed .euiIEFlexWrapFix global className and internetExplorerOnly() Sass mixin, as IE is no longer a supported browser (#6154)
• Removed all IE fixes/fallbacks in EUI CSS (#6161)
• Removed all IE fixes/fallbacks in EUI JS (#6162)

Bug fixes

• Fixed missing EuiDataGrid cell popover shadows in Safari (#6163)
• Fixed a bug in some development environments which prevented EuiIcon from loading icons asynchronously (#6166)
• Updated the build process to include json files, fixing imports from the @elastic/eui package (#6172)

Bug fixes

• Fixed the text size of EuiDescriptionListTitle when EuiDescriptionList is compressed (#6160)

65.0.0

• Added anchorProps to allow passing more props to the anchoring wrapper in EuiToolTip and EuiBetaBadge (#6110)
• Added an empty shade background color to hollow style EuiBetaBadge (#6110)
• Changed design of select button in selectable EuiCards (#6110)
• Updated button ghost colors to be colorMode = 'dark' themed text buttons (#6150)
• Renamed ButtonColor and ButtonSize types to prefixed versions EuiButtonColor and EuiButtonSize (#6150)

Deprecations

• Deprecated ghost color for EuiButton, EuiButtonIcon, EuiButtonEmpty (#6150)

Breaking changes

• Removed EuiButtonIconColor and EuiButtonEmptyColor types, use EuiButtonIconProps['color'] and EuiButtonEmptyProps['color'] instead (#6150)
• Removed support for ghost color from EuiButtonGroup (#6150)

CSS-in-JS conversions

• Removed euiHasBetaBadge() Sass mixin (#6110)
• Converted EuiCard, EuiCheckableCard to Emotion, removed $euiCheckableCardPadding, $euiCardSpacing, $euiCardBottomNodeHeight, $euiCardSelectButtonBorders, $euiCardSelectButtonBackgrounds, and $euiCardPaddingModifiers (#6110)
• Converted EuiButton to Emotion (#6150)
• Converted color styles of EuiButtonIcon, EuiButtonEmpty, EuiButtonGroup (#6150)

Bug fixes

• Fixed CollapsedItemActions ref callback not accounting for null value (#6145)

CSS-in-JS conversions

• Added logicalCSSWithFallback() utility for logical properties without full browser support (#6124)
• Converted euiFullHeight() Sass mixin to Emotion (#6124)
• Converted all global CSS utility classes to Emotion (#6124)

• Added onPositionChange callback prop to EuiPopover for when the popover positon changes (#6087)
• Added isDisabled prop to EuiAccordion (#6095)
• Added css prop to CommonProps interface (#6118)
• Added new useIsWithinMaxBreakpoint and useIsWithinMinBreakpoint service hooks (#6119)

Bug fixes

• Fixed the steps prop type for useEuiTour to not require onFinish (#6087)
• Fixed JS breakpoint hooks (useCurrentEuiBreakpoint, useIsWithinBreakpoints, and euiBreakpoint) to correctly handle custom theme breakpoint keys (#6111)
• Fixed :first-child/:nth-child console warnings for consumers not passing in a cache to EuiProvider (#6126)
• Fixed EuiScreenReaderLive double announcements on VO when focusRegionOnTextChange is not set (#6133)
• Fixed onBlur and onFocus handlers from EuiDatePickerRange being incorrectly applied to wrapping element rather than the start/end control datepickers. (#6136)
• Fixed missing data-fixed-headers property in some layout configurations using EuiPageTemplate. (#6140)
• Fixed EuiAspectRatio sometimes incorrectly inheriting its height from parent containers as opposed to from its aspect ratio (#6141)
• Fixed EuiAspectRatio to allow custom styles to be passed by consumers (#6141)
• Fixed eui.d.ts containing @testing-library type definitions (#6142)

Breaking changes

• Removed getBreakpoint. Use useCurrentEuiBreakpoint instead (#6119)
• Removed BREAKPOINTS and BREAKPOINT_KEYS. Use euiTheme.breakpoint instead (#6119)
• Removed isWithinBreakpoints. Use useIsWithinBreakpoints instead (#6119)
• Removed isWithinMaxBreakpoint. Use useIsWithinMaxBreakpoint instead (#6119)
• Removed isWithinMinBreakpoint. Use useIsWithinMinBreakpoint instead (#6119)
• EuiFlyout now only accepts a named breakpoint size for its pushMinBreakpoint prop (#6119)
• EuiCollapsibleNav now only accepts a named breakpoint size for its dockedBreakpoint prop (#6119)
• @emotion/cache is now a required peer dependency, alongside @emotion/react (#6126)

CSS-in-JS conversions

• Converted EuiTour to Emotion (#6087)