Skip to content

Commit

Permalink
Upgrade EUI to v91.0.0 (with backports) (#170716)
Browse files Browse the repository at this point in the history
`v90.0.0`⏩`v91.0.0-backport.0`

⚠️ While this upgrade pings many teams and has a large code diff, **the
majority of the changes are snapshots or tests-related** and do not
touch source code, so should theoretically only need a code review and
not dedicated QA.

The changes in EUI that required a large swathe of these updates are:

- **EuiPopover** removed an extra unnecessary `<div>` wrapper on its
anchors, which affected many snapshots and a few CSS overrides, which
should have been updated
- **EuiButtonGroup** now renders `<button>` elements instead of `<input
type="radio">` elements for single selection, which affected both
snapshots and E2E tests
- **EuiSuperDatePicker**'s absolute date input now requires an `Enter`
keypress when parsing dates (affected E2E tests)
- **EuiComboBox**, when rendered with `singleSelection={{ plainText:
'true' }}`, no longer renders a pill (i.e. text). This combobox type now
behaves more like an `EuiFieldText`, where the selection is rendered via
input `value` instead. This affected a high amount of E2E tests (both
FTR and Cypress), both in terms of updating assertions and changing
selections, but should **not** significantly affect user experience -
see elastic/eui#7332 for more.

---

##
[`v91.0.0-backport.0`](https://github.com/elastic/eui/tree/v91.0.0-backport.0)

**This is a backport release only intended for use by Kibana.**

- Added `esqlVis`, `pipeBreaks`, and `pipeNoBreaks` icon glyphs.
- `EuiSelectable` now allows configurable text truncation via
`listProps.truncationProps`
([#7388](elastic/eui#7388))
- `EuiTextTruncate` now supports a new `calculationDelayMs` prop for
working around font loading or layout shifting scenarios
([#7388](elastic/eui#7388))

**Bug fixes**

- Fixed a bug with `EuiSelectable`s with custom `truncationProps`, where
scrollbar widths were not being accounted for
([#7392](elastic/eui#7392))

## [`91.0.0`](https://github.com/elastic/eui/tree/v91.0.0)

- Updated the background color of `EuiPopover`s in dark mode to increase
visibility & contrast against other page/panel backgrounds
([#7310](elastic/eui#7310))
- Memoized `EuiDataGrid` to prevent unneeded re-renders
([#7324](elastic/eui#7324))
- Added a configurable `role` prop to `EuiAccordion`
([#7326](elastic/eui#7326))
- Added a configurable `role` prop to `EuiGlobalToastList`
([#7328](elastic/eui#7328))
- For greater flexibility, `EuiSuperDatePicker` now allows users to
paste ISO 8601, RFC 2822, and Unix timestamps in the `Absolute` tab
input, in addition to timestamps in the `dateFormat` prop
([#7331](elastic/eui#7331))
- Plain text `EuiComboBox`es now behave more like a normal text
field/input. Backspacing will no longer delete the entire value, and
selected values can now be double clicked and copied.
([#7332](elastic/eui#7332))
- `EuiDataGrid`'s display settings popover now allows users to clear the
"Lines per row" input before typing in a new number
([#7338](elastic/eui#7338))
- Improved the UX of `EuiSuperDatePicker`'s Absolute tab for users
manually typing in timestamps
([#7341](elastic/eui#7341))
- Updated `EuiI18n`s with multiple `tokens` to accept dynamic `values`
([#7341](elastic/eui#7341))

**Bug fixes**

- Fixed `EuiComboBox`'s `onSearchChange` callback to pass the correct
`hasMatchingOptions` value
([#7334](elastic/eui#7334))
- Fixed an `EuiSelectableTemplateSitewide` bug where the `popoverButton`
behavior would break if passed a non-DOM React wrapper
([#7339](elastic/eui#7339))

**Deprecations**

- `EuiPopover`: deprecated `anchorClassName`. Use `className` instead
([#7311](elastic/eui#7311))
- `EuiPopover`: deprecated `buttonRef`. Use `popoverRef` instead
([#7311](elastic/eui#7311))
- `EuiPopover`: removed extra `.euiPopover__anchor` div wrapper. Target
`.euiPopover` instead if necessary
([#7311](elastic/eui#7311))
- Deprecated `EuiButtonGroup`'s `name` prop. This can safely be removed.
([#7325](elastic/eui#7325))

**Breaking changes**

- Removed deprecated `euiPaletteComplimentary` - use
`euiPaletteComplementary` Instead
([#7333](elastic/eui#7333))

**Accessibility**

- Updated `type="single"` `EuiButtonGroup`s to render standard buttons
instead of radio buttons under the hood, per recent a11y recommendations
([#7325](elastic/eui#7325))
- `EuiAccordion` now defaults to a less screenreader-noisy `group` role
instead of `region`. If your accordion contains significant enough
content to be a document landmark role, you may re-configure it back to
`region`. ([#7326](elastic/eui#7326))
- Reduced screen reader noisiness when sorting `EuiDataGrid` columns via
toolbar ([#7327](elastic/eui#7327))
- `EuiGlobalToastList` now defaults to a `log` role. If your toasts will
always require immediate user action, consider (with caution) using the
`alert` role instead.
([#7328](elastic/eui#7328))

**CSS-in-JS conversions**

- Updated `$euiFontFamily` and `$euiCodeFontFamily` to match Emotion
fonts ([#7332](elastic/eui#7332))

---------

Co-authored-by: Cee Chen <constance.chen@elastic.co>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
Co-authored-by: Stratoula Kalafateli <efstratia.kalafateli@elastic.co>
  • Loading branch information
5 people committed Dec 18, 2023
1 parent ce293db commit b043545
Show file tree
Hide file tree
Showing 139 changed files with 4,583 additions and 5,108 deletions.
2 changes: 0 additions & 2 deletions examples/discover_customization_examples/public/plugin.tsx
Expand Up @@ -213,7 +213,6 @@ export class DiscoverCustomizationExamplesPlugin implements Plugin {
{currentSavedSearch.title ?? 'None selected'}
</EuiButton>
}
anchorClassName="eui-fullWidth"
isOpen={isPopoverOpen}
panelPaddingSize="none"
closePopover={closePopover}
Expand Down Expand Up @@ -280,7 +279,6 @@ export class DiscoverCustomizationExamplesPlugin implements Plugin {
{currentSavedSearch.title ?? 'None selected'}
</EuiButton>
}
anchorClassName="eui-fullWidth"
isOpen={isPopoverOpen}
panelPaddingSize="none"
closePopover={closePopover}
Expand Down
2 changes: 1 addition & 1 deletion package.json
Expand Up @@ -102,7 +102,7 @@
"@elastic/datemath": "5.0.3",
"@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1",
"@elastic/ems-client": "8.5.1",
"@elastic/eui": "90.0.1-backport.0",
"@elastic/eui": "91.0.0-backport.0",
"@elastic/filesaver": "1.1.2",
"@elastic/node-crypto": "1.2.1",
"@elastic/numeral": "^2.5.1",
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Expand Up @@ -1434,7 +1434,7 @@ export const getEuiContextMapping = (): EuiTokensObject => {
),
'euiAbsoluteTab.dateFormatError': ({ dateFormat }: EuiValues) =>
i18n.translate('core.euiAbsoluteTab.dateFormatError', {
defaultMessage: 'Expected format: {dateFormat}',
defaultMessage: 'Allowed formats: {dateFormat}, ISO 8601, RFC 2822, or Unix timestamp.',
values: { dateFormat },
}),
'euiRelativeTab.fullDescription': ({ unit }: EuiValues) =>
Expand All @@ -1454,6 +1454,9 @@ export const getEuiContextMapping = (): EuiTokensObject => {
'euiRelativeTab.dateInputError': i18n.translate('core.euiRelativeTab.dateInputError', {
defaultMessage: 'Must be a valid range',
}),
'euiAbsoluteTab.dateFormatHint': i18n.translate('core.euiAbsoluteTab.dateFormatHint', {
defaultMessage: 'Press the Enter key to parse as a date.',
}),
'euiResizableButton.horizontalResizerAriaLabel': i18n.translate(
'core.euiResizableButton.horizontalResizerAriaLabel',
{
Expand Down

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit b043545

Please sign in to comment.