mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 17:59:23 -04:00
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:
parent
889f067187
commit
3cb13fb9c1
53 changed files with 381 additions and 551 deletions
|
@ -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>,
|
||||
]
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue