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="https://github.com/elastic/kibana/assets/934879/c17aef28-ed3b-40c4-84c3-396e788b13bb">

**Prior `EuiDescriptionList` with default `gutterSize="m"`**
<img width="721" alt=""
src="https://github.com/elastic/kibana/assets/934879/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](elastic/eui#7133))
- Updated `EuiDescriptionList` with new `columnWidths` prop
([#7146](elastic/eui#7146))

**Bug fixes**

- Fixed `EuiDataGrid`'s keyboard shortcuts popover display
([#7146](elastic/eui#7146))

**CSS-in-JS conversions**

- Renamed `useEuiFontSize()`'s `measurement` option to `unit` for
clarity ([#7133](elastic/eui#7133))

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

- Updated `EuiDescriptionList` with a new `columnGutterSize` prop
([#7062](elastic/eui#7062))

**Deprecations**

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

**Breaking changes**

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

**Accessibility**

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

**CSS-in-JS conversions**

- Converted `EuiKeyPadMenuItem` to Emotion; Removed `$euiKeyPadMenuSize`
and `$euiKeyPadMenuMarginSize`
([#7118](elastic/eui#7118))

---------

Co-authored-by: Cee Chen <[email protected]>
Co-authored-by: Cee Chen <[email protected]>
Co-authored-by: kibanamachine <[email protected]>
Co-authored-by: Nikita Indik <[email protected]>

package.json

@@ -100,7 +100,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/[email protected]",
     "@elastic/ems-client": "8.4.0",
-    "@elastic/eui": "87.2.0",
+    "@elastic/eui": "88.1.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

src/dev/license_checker/config.ts

@@ -85,7 +85,7 @@ export const LICENSE_OVERRIDES = {
   '[email protected]': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/[email protected]': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/[email protected]': ['Elastic License 2.0'],
-  '@elastic/eui@87.2.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@88.1.0': ['SSPL-1.0 OR Elastic License 2.0'],
   '[email protected]': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   '[email protected]': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
 };

src/plugins/data/public/shard_failure_modal/_shard_failure_modal.scss

@@ -19,21 +19,3 @@
   // could be much higher than the available screenspace
   max-width: 686px;
 }
-
-.shardFailureModal__descTitle {
-  width: 12% !important;
-}
-
-.shardFailureModal__descValue {
-  width: 88% !important;
-}
-
-@include euiBreakpoint('xs','s') {
-  .shardFailureModal__descTitle {
-    width: 100% !important;
-  }
-
-  .shardFailureModal__descValue {
-    width: 100% !important;
-  }
-}

src/plugins/data/public/shard_failure_modal/shard_failure_description.tsx

@@ -96,7 +96,7 @@ export function ShardFailureDescription(props: ShardFailure) {
       <EuiFlexItem grow={false}>
         <EuiDescriptionList
           type="responsiveColumn"
-          gutterSize="s"
+          columnWidths={[1, 6]}
           listItems={items}
           compressed
           className="shardFailureModal__desc"

x-pack/plugins/canvas/public/components/workpad_filters/filter.component.tsx

@@ -16,14 +16,6 @@ interface Props {
 
 type CustomComponentProps = Omit<Props, 'filter'> & { value: string };
 
-const titleStyle = {
-  width: '30%',
-};
-
-const descriptionStyle = {
-  width: '70%',
-};
-
 const renderElement = (
   Component: FC<
     Omit<CustomComponentProps, 'updateFilter'> & { onChange?: CustomComponentProps['updateFilter'] }
@@ -53,11 +45,12 @@ export const Filter: FC<Props> = ({ filter, ...restProps }) => {
     <EuiPanel grow={false} hasShadow={false} paddingSize="m">
       <EuiDescriptionList
         type="column"
+        columnWidths={[3, 7]}
         className="workpadFilter"
         compressed
         listItems={filterView}
-        titleProps={{ style: titleStyle, className: 'eui-textBreakWord' }}
-        descriptionProps={{ style: descriptionStyle, className: 'eui-textBreakWord' }}
+        titleProps={{ className: 'eui-textBreakWord' }}
+        descriptionProps={{ className: 'eui-textBreakWord' }}
       />
     </EuiPanel>
   );

x-pack/plugins/cloud_security_posture/public/pages/vulnerabilities/vulnerabilities_by_resource/severity_map.tsx

@@ -14,7 +14,7 @@ import {
   EuiFlexItem,
   EuiText,
 } from '@elastic/eui';
-import { ColorStop } from '@elastic/eui/src/components/color_picker/color_stops';
+import { PaletteColorStop } from '@elastic/eui/src/components/color_picker/color_palette_picker';
 import { i18n } from '@kbn/i18n';
 import { getSeverityStatusColor } from '../../../common/utils/get_vulnerability_colors';
 import { VulnSeverity } from '../../../../common/types';
@@ -53,7 +53,7 @@ const formatPercentage = (percentage: number) => {
 export const SeverityMap = ({ severityMap, total }: Props) => {
   const { euiTheme } = useEuiTheme();
 
-  const severityMapPallet: ColorStop[] = [];
+  const severityMapPallet: PaletteColorStop[] = [];
   const severityMapTooltip: SeverityMapTooltip[] = [];
 
   if (total > 0) {

x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/_index.scss

@@ -1,4 +1,3 @@
-@import 'analysis_summary/index';
 @import 'edit_flyout/index';
 @import 'file_contents/index';
 @import 'import_summary/index';

x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/analysis_summary/analysis_summary.tsx

@@ -28,7 +28,12 @@ export const AnalysisSummary: FC<{ results: FindFileStructureResponse }> = ({ re
 
       <EuiSpacer size="m" />
 
-      <EuiDescriptionList type="column" listItems={items} className="analysis-summary-list" />
+      <EuiDescriptionList
+        type="column"
+        columnWidths={[15, 85]}
+        listItems={items}
+        className="analysis-summary-list"
+      />
     </React.Fragment>
   );
 };

x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_summary/_import_summary.scss

@@ -1,15 +1,3 @@
-.import-summary-list.euiDescriptionList {
-  // adding overrides for title and desciption
-  // these have to be overridden here as they are not
-  // accessable as overrides in the EuiDescriptionList component
-  .euiDescriptionList__title {
-    flex-basis: 15%;
-  }
-  .euiDescriptionList__description {
-    flex-basis: 85%;
-  }
-}
-
 .failure-list {
   max-height: 200px;
   overflow-y: auto;

x-pack/plugins/data_visualizer/public/application/file_data_visualizer/components/import_summary/import_summary.tsx

@@ -53,7 +53,12 @@ export const ImportSummary: FC<Props> = ({
         iconType="check"
         data-test-subj="dataVisualizerFileImportSuccessCallout"
       >
-        <EuiDescriptionList type="column" listItems={items} className="import-summary-list" />
+        <EuiDescriptionList
+          type="column"
+          columnWidths={[15, 85]}
+          listItems={items}
+          className="import-summary-list"
+        />
       </EuiCallOut>
 
       {importFailures && importFailures.length > 0 && (