v103.0.0

v103.0.0

• Replaced question icon glyph (#8756)
• Updated EuiResizableCollapseButton to use an empty button (#8736)
• Added info icon glyph (#8744)
• Removed uppercase styling from EuiText h6 headings to match EuiTitle (#8732)
• Removed heavier font weight from xs and s EuiListGroupItem sizes for consistency (#8732)
• Updated the font-weight of default EuiFilterButton and EuiButtonGroupButton to 450 (#8734)
• Added color pallete functions and related hooks: (#8725)
  • euiPaletteSkyBlue, useEuiPaletteSkyBlue
  • euiPaletteYellow, useEuiPaletteYellow
  • euiPaletteOrange, useEuiPaletteOrange
• Added new tokens on colors.vis: (#8725)
  • euiColorVisNeutral0
  • euiColorVisNeutral1
  • euiColorVisWarning1
  • euiColorVisRisk0
  • euiColorVisRisk1
• Updated the value of token colors.vis.euiColorVisWarning0 (#8725)
• Updated EuiFilterButton's numActiveFilters prop to accept percentage values (#8705)

Bug fixes

• Fixed visual positioning issue for notifications in EuiHeaderSectionItemButton (#8736)
• Fixed a visual issue where EuiCollabsibleNavItem did not have a visible selected state (#8736)
• Fixed handling of unregistered code block languages in EuiMarkdownFormat (#8729)

Breaking changes

• Renamed colors.vis.euiColorVisNeutral0 to euiColorVisBase0 (#8725)

Summary

#8736, #8732, and #8732 include a number of small style tweaks to our components.

#8756 and #8744 renames a couple of icons:

questionInCircle -> question
iInCircle > info

In both cases, the old name is backwards-compatible (unless importing directly from assets folder). However, the old name will eventually be deprecated as a part of a larger set of deprecations. It is safe to update to the new name now, or wait until the larger deprecation arrives.

When using appendIconComponentCache, you will need to update imports:

import { icon as EuiQuestion } from "@elastic/eui/es/components/icon/assets/question";
import { icon as EuiInfo } from "@elastic/eui/es/components/icon/assets/info";

appendIconComponentCache({
  question: EuiQuestion, // recommended
  questionInCircle: EuiQuestion, // still works
  info: EuiInfo, // recommended
  iInCircle: EuiInfo, // still works
})

#8725 adds Sky Blue, Yellow, and Orange palettes to EUI's color palettes, as well as new tokens for Risk, Neutral, and Warning.

Please note that as part of this change, the following tokens have been renamed:
euiColorVisNeutral0 -> euiColorVisBase0
euiColorVisWarning0 -> euiColorVisWarning1

If you are using either euiColorVisNeutral0 or euiColorVisWarning0, you will need to update your usages accordingly. The original tokens still exist, but have been updated to use new colors -- if you do not update to the new tokens, you won't receive an error, but the colors will certainly appear incorrectly.

v102.3.0

• Added support for focusTrapProps.returnFocus on EuiFlyout (#8716)
• Updated EuiDataGridToolbarControl hover styles by removing text-decoration and changing the badge background-color to ensure enough contrast (#8670)
• Added prop isToggle on EuiFilterButton to switch between regular and toggle button (#8652)
• Updated hasActiveFilters on EuiFilterButton to only control highlighting filters, not a visual selected state (#8652)
• Updated EuiFilterButton to ensure isSelected prop applies both semantic and visual states (#8652)
• Updated visual styling of EuiButtonGroup, EuiFilterGroup and EuiFilterButton (#8652)
• Updated EuiNotificationBadge border radius to 2px (#8652)
• Updated EuiBreadcrumbs text color for type="application" (#8652)
• Added new refresh design variant for button components: (#8595)
  • EuiButton
  • EuiButtonEmpty
  • EuiButtonIcon
• Added flags.buttonVariant with value classic to euiThemeAmsterdam (#8595)
• Added new button background component tokens to Amsterdam theme: (#8595)
  • background{color}Hover
  • background{color}Active
  • backgroundFilled{color}Hover
  • backgroundFilled{color}Active
  • backgroundEmpty{color}Hover
  • backgroundEmpty{color}Active

Bug fixes

• Fixed an issue with EuiDataGrid where navigating cells with simultaneous key presses would result in a crash in React 18 legacy mode (#8698)

Accessibility

• Improved the accessibility experience of EuiMarkdownEditorFooter by fixing the ARIA attributes of the syntax help modal. (#8702)

Summary

This version primarily contains updates to our button set that affects the following components:
EuiButton
EuiButtonEmpty
EuiButtonIcon
EuiButtonGroup
EuiFilterGroup
EuiFilterButton

They are mainly a visual refresh of the button set -- primarily affecting hover, active, and focus states, as well as adjusting the mid-width. You'll also find a new look for the color="text" variant of EuiButton, which changes the background color and adds a border.

As these changes are primarily visual, we do NOT consider these breaking. However, it is worth checking that any custom style overrides applied to these components still work correctly when updating to this version.

Additionally, please note that our changes to EuiFilterButton could actually be considered breaking. Relying on the hasActiveFilters prop alone to show a selected state for these buttons will no longer work. An isSelected and isToggle prop is required to maintain the same behavior.

These changes apply to the Borealis theme only. They are not present when using the Amsterdam theme.

v102.2.0

• Added useIsDarkMode utility (#8701)
• Added scroll position data as arguments to virtualizationOptions.onScroll for the virtualized EuiDataGrid (#8688)
• Updated secondary fill to primary on EuiIcon (#8687)
• Added white outline on EuiLoadingElastic to make it compliant with the Brand requirements (#8684)

Bug fixes

• Fixed EuiGlobalToastList toasts not being cleaned properly when they are added and removed at the same time (#8692)
• Resolved an issue where the EuiDataGrid cell actions menu was hidden by the header when a cell was clicked to scroll into view (#8640)

Accessibility

• Improved accessibility of EuiSelect by removing the empty <option> added when hasNoInitialSelection is true from the DOM, once a user makes a selection. (#8706)
• Improved the accessibility of EuiSuperDatePicker's quick select buttons by preventing duplicate screen reader output (#8686)

v102.1.0

• Update EuiDataGrid to use expand glyph (#8646)

Accessibility

• Updated EuiTableHeaderCell to output nameTooltip directly on sortable cell elements, ensuring tooltips appear on focus (#8644)
• Improved the accessibility of EuiColorPicker by: (#8639)
  • preventing duplicate color output for screen readers
  • adding tooltips with visual color labels for the selected colors on the saturation and hue sliders
  • updated accessible labels and announcements to be more descriptive

Dependency updates

• Updated typescript to v5.8.3 (#8626)

v102.0.0

• Added semantic severity color tokens: (#8601)
  • colors.severity.unknown
  • colors.severity.neutral
  • colors.severity.success
  • colors.severity.warning
  • colors.severity.risk
  • colors.severity.danger
• Added semantic color tokens for variants neutral and risk: (#8601)
  • colors.textNeutral
  • colors.textRisk
  • colors.backgroundBaseNeutral
  • colors.backgroundBaseRisk
  • colors.backgroundLightNeutral
  • colors.backgroundLightRisk
  • colors.backgroundFilledNeutral
  • colors.backgroundFilledRisk
  • colors.borderBaseNeutral
  • colors.borderBaseRisk
  • colors.borderStrongNeutral
  • colors.borderStrongRisk
• Added semantic color variants neutral and risk for the following components: (#8601)
  • EuiButton
  • EuiButtonEmpty
  • EuiButtonIcon
  • EuiBadge
  • EuiIcon
  • EuiPanel
• Aligned EuiFormControlLayoutIcons to the top (instead of center) to improve usability in multi-line form controls like EuiComboBox with many selected options (#8610)

Breaking changes

• Removed numbered severity color tokens: (#8601)
  • colors.vis.euiColorSeverity0
  • colors.vis.euiColorSeverity1
  • colors.vis.euiColorSeverity2
  • colors.vis.euiColorSeverity3
  • colors.vis.euiColorSeverity4
  • colors.vis.euiColorSeverity5
  • colors.vis.euiColorSeverity6
  • colors.vis.euiColorSeverity7
  • colors.vis.euiColorSeverity8
  • colors.vis.euiColorSeverity9
  • colors.vis.euiColorSeverity10
  • colors.vis.euiColorSeverity11
  • colors.vis.euiColorSeverity12
  • colors.vis.euiColorSeverity13
  • colors.vis.euiColorSeverity14

Accessibility

• Fixed duplicate screen reader output on EuiDataGrid for single sorted header cells with actions (#8598)

v101.4.0

• Spread labelProps to the label element in EuiCheckableCard (#8586)
• Add controls, flask, comment, and readOnly glyphs to EuiIcon (#8580)
• Refactored EuiExpression, EuiFacetGroup, EuiFacetButton, EuiFilterGroup, EuiHeader, EuiImage and EuiListGroup to memoize their internal Emotion styles (#8565)
• Updated global border.radius.medium token value for default Borealis theme to 4px (#8563)
• Updated EuiProvider to build themes including highContrastMode (#8558)

Accessibility

• Removed the aria-label attribute from the ul element in EuiPagination to avoid duplicate screen reader output (#8597)
• Set a more specific aria-current="page" on list items in EuiPagination (#8597)
• Added aria-modal to EuiFlyout with type="overlay" (#8591)

Dependency updates

• Updated @elastic/prismjs-esql to v1.1.0 (#8587)

v101.3.0

• Updated 78 existing and added two new glyphs (code and checkCircle) for EuiIcon (#8530)
• Changed gutterSize to m between right side items on EuiPageHeader (#8529)

Bug fixes

• Fixed a visual bug on disabled EuiButton in high contrast mode where wrong text colors were applied (#8550)

v101.2.0

v101.2.0

• Added showToolTip prop on EuiColorPickerSwatch (#8512)

Bug fixes

• Fixed a visual issue of overlapping borders for layered EuiPanels (#8519)
• Fixes wrong colorMode styling for the search in EuiHeader with theme="dark" (#8496)

Accessibility

• Improved the accessibility of EuiColorPicker by adding color label tooltips on hover and focus for color swatches (#8512)
• Added disableScreenReaderOutput prop on EuiToolTip to manually control if the tooltip content should be read when focusing the trigger. This prevents duplicate screen reader output when the tooltip content and aria-label on the trigger element have the same text content. (#8508)
• Improves text color contrast for EuiButton with color="warning" in high contrast mode (#8496)
• Improves contrast and visible distinction of the following components in high contrast mode: (#8496)
  • EuiCode
  • EuiBadge
  • EuiBetaBadge
  • EuiNotificationBadge

Dependency updates

• Updated prismjs to v1.30.0 (#8506)

v101.1.0

• Updates EuiTableRow styles to check support for :has(+) selector (#8498)

v101.0.1

• Updated EuiProvider and EuiThemeProvider with a new highContrastMode (#8444)
  • This prop allows toggling a higher contrast visual style that primarily affects borders and shadows
  • On EuiProvider, if the highContrastMode prop is not passed, this setting will inherit from the user's OS/system settings
  • If the user is using a forced colors mode (e.g. Windows' high contrast themes), this system setting will take precedence over any highContrastMode or colorMode props passed
• Added highContrastModeStyles and preventForcedColors styling utils (#8444)
• Updated EuiRangeTooltip to be easier to see in dark mode (#8444)
• Updated some deprecated color token usages that have direct substitutes (#8444)
  • text -> textParagraph
  • title -> textHeading
  • subduedText -> textSubdued
  • disabledText -> textDisabled
  • accentText -> textAccent
  • dangerText -> textDanger
  • warningText -> textWarning
• useEuiShadow() now accepts a second options argument (#8234)
• useEuiShadowFlat() now accepts an options object instead of only a color (#8234)
• Updated EuiPopover and EuiToolTip to be easier to see in dark mode. (#8174)

Bug fixes

• Fixed a visual bug where a transparent border would create visible empty space (LIGHT mode only) for the components: (#8427)
  • EuiPanel
  • EuiPopover
  • EuiToolTip
  • EuiToast
  • EuiTour