Upgrade EUI to v88.1.0 (#165047)

## PR change summary

`v87.2.0``v88.1.0`

⚠️ The biggest thing to QA in this PR is several **breaking changes** to
`EuiDescriptionList`.

### Description list `columnWidths` prop

This PR introduces a new `columnWidths` prop and removes several Kibana
instances of custom CSS overrides to title/description column widths.

The primary motivation behind this is not just to reduce custom CSS, but
also because v88.0.0 introduced an underlying CSS change of `column`
description lists to using [`display: grid`
CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout).
The new prop allows us to support existing description list custom
widths while not requiring Kibana developers to understand or write grid
CSS (except for 1 or two scenarios around `max-width`).

⚠️ **No user-facing UI around column widths should have regressed as a
result of these changes. If they have, please let us know in this PR.**

### Description list gutter size changes

The prop `gutterSize` has been renamed to `rowGutterSize` and the
default size is now `s` instead of `m`.

The change to `s` from `m` means there is an **expected** smaller gap
between list items (see below screenshots):

**Current `EuiDescriptionList` with default `rowGutterSize="s"`**
<img width="753" alt=""
src="c17aef28-ed3b-40c4-84c3-396e788b13bb">

**Prior `EuiDescriptionList` with default `gutterSize="m"`**
<img width="721" alt=""
src="84d5f5a2-8fa6-4f99-9dc0-73fd143aa1e1">

If Kibana teams prefer to keep the previous `m` gutter for their
instances of `EuiDescriptionList`, you have a couple of options:

1. Let EUI team know in the PR and we can set usage back to what it was
before
2. Set `rowGutterSize="m"` yourselves manually

---

## [`88.1.0`](https://github.com/elastic/eui/tree/v88.1.0)

- Added `font.defaultUnits` theme token. EUI component font sizes
default to `rem` units - this token allows consumers to configure this
to `px` or `em` ([#7133](https://github.com/elastic/eui/pull/7133))
- Updated `EuiDescriptionList` with new `columnWidths` prop
([#7146](https://github.com/elastic/eui/pull/7146))

**Bug fixes**

- Fixed `EuiDataGrid`'s keyboard shortcuts popover display
([#7146](https://github.com/elastic/eui/pull/7146))

**CSS-in-JS conversions**

- Renamed `useEuiFontSize()`'s `measurement` option to `unit` for
clarity ([#7133](https://github.com/elastic/eui/pull/7133))

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

- Updated `EuiDescriptionList` with a new `columnGutterSize` prop
([#7062](https://github.com/elastic/eui/pull/7062))

**Deprecations**

- Deprecated `EuiSuggest`. We recommend using `EuiSelectable` or
`EuiComboBox` instead
([#7122](https://github.com/elastic/eui/pull/7122))
- Deprecated `EuiControlBar`. We recommend using `EuiBottomBar` instead
([#7122](https://github.com/elastic/eui/pull/7122))
- Deprecated `EuiColorStops`. We recommend copying the component to your
application if necessary
([#7122](https://github.com/elastic/eui/pull/7122))
- Deprecated `EuiNotificationEvent`. We recommend copying the component
to your application if necessary
([#7122](https://github.com/elastic/eui/pull/7122))

**Breaking changes**

- Renamed `EuiDescriptionList`'s `gutterSize` prop to `rowGutterSize`
([#7062](https://github.com/elastic/eui/pull/7062))
- `EuiDescriptionList`'s `rowGutterSize` prop now defaults to a size of
`s` (was previously `m`)
([#7062](https://github.com/elastic/eui/pull/7062))

**Accessibility**

- Fixed the dark mode colors of inline `EuiDescriptionListTitle`s to
meet WCAG color contrast requirements
([#7062](https://github.com/elastic/eui/pull/7062))

**CSS-in-JS conversions**

- Converted `EuiKeyPadMenuItem` to Emotion; Removed `$euiKeyPadMenuSize`
and `$euiKeyPadMenuMarginSize`
([#7118](https://github.com/elastic/eui/pull/7118))

---------

Co-authored-by: Cee Chen <constance.chen@elastic.co>
Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Nikita Indik <nikita.indik@elastic.co>
This commit is contained in:
Trevor Pierce 2023-09-05 15:16:55 -05:00 committed by GitHub
parent 889f067187
commit 3cb13fb9c1
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
53 changed files with 381 additions and 551 deletions

View file

@ -14,17 +14,17 @@ Array [
}
<dl
class="euiDescriptionList emotion-euiDescriptionList-column-left"
class="euiDescriptionList emotion-euiDescriptionList-column-left-s-s"
data-type="column"
style="width:300px"
>
<dt
class="euiDescriptionList__title c0 eui-textNoWrap emotion-euiDescriptionList__title-column-m-reverse"
class="euiDescriptionList__title c0 eui-textNoWrap emotion-euiDescriptionList__title-column-reverse"
>
Average page load duration
</dt>
<dd
class="euiDescriptionList__description c1 emotion-euiDescriptionList__description-column-compressed-m"
class="euiDescriptionList__description c1 emotion-euiDescriptionList__description-column-compressed"
/>
</dl>,
]