Upgrade EUI to v91.3.1 (#173569)

`v91.0.0-backport.0`⏩`v91.3.1` ⚠️ The largest set of changes in this PR that touch source code (as opposed to test code) are related to several **EuiDataGrid** redesigns, particularly around the toolbar, column cell headers, and cell actions. We **strongly** recommend QAing your EuiDataGrid usages, **especially** if you have custom CSS styling on data grid cells. | Changes | Screencap | |--------|--------| | Cell actions and popover | <img src="https://github.com/elastic/kibana/assets/549407/6462d983-307f-4a3c-84b1-36d9b276c9a0" width="240" alt=""> | | Column headers | <img src="https://github.com/elastic/kibana/assets/549407/3fd64a15-829a-48f3-9dba-9dae3c73e6b2" alt="" width="360"> | | Toolbar | <img src="https://github.com/elastic/kibana/assets/549407/f876f6d7-635d-497a-b1e7-9daf4e6fd3e3" alt="" width="240"> | --- ## [`v91.3.1`](https://github.com/elastic/eui/releases/v91.3.1) **Bug fixes** - Moved `EuiDataGrid`'s header cells' `dataGridHeaderCellActionButton` test subject attribute from to the clickable button, for easier E2E testing ([#7427](elastic/eui#7427)) - Fixed `EuiBasicTable`/`EuiInMemoryTable` actions to correctly show as disabled when rows are being selected ([#7428](elastic/eui#7428)) ## [`v91.3.0`](https://github.com/elastic/eui/releases/v91.3.0) - Added `esqlVis`, `pipeBreaks`, and `pipeNoBreaks` icon glyphs. ([#7399](elastic/eui#7399)) - Updated `EuiDataGridSchemaDetector`'s comparator arguments to include entry indexes ([#7406](elastic/eui#7406)) ## [`v91.2.0`](https://github.com/elastic/eui/releases/v91.2.0) - Added `endpoint` glyph to `EuiIcon` ([#7383](elastic/eui#7383)) **Bug fixes** - Fixed a bug with `EuiSelectable`s with custom `truncationProps`, where scrollbar widths were not being accounted for ([#7392](elastic/eui#7392)) ## [`v91.1.0`](https://github.com/elastic/eui/releases/tag/v91.1.0) - Updated `EuiDataGrid` cell actions to display above cells instead of within them, to avoid content clipping issues ([#7343](elastic/eui#7343)) - Updated `EuiDataGrid` cell expansion popovers to sit on top of cells instead of below/next to them ([#7343](elastic/eui#7343)) - Updated `EuiListGroupItem` to render an external icon and screen reader affordance for links with `target` set to to `_blank` ([#7352](elastic/eui#7352)) - Updated `EuiListGroupItem` with a new `external` prop, which allows enabling or disabling the new external link icon ([#7352](elastic/eui#7352)) - Updated `EuiText` to no longer set any opinionated styles on child `<img>` tags - use `EuiImage` for image display within text instead ([#7360](elastic/eui#7360)) - Improved `EuiBasicTable`/`EuiInMemoryTable`s mobile UI for custom actions ([#7361](elastic/eui#7361)) - Added a new `EuiDataGridToolbarControl` subcomponent, which is useful for rendering your own custom `EuiDataGrid` toolbar buttons while matching the look of the default controls ([#7369](elastic/eui#7369)) - Updated `EuiDataGrid`'s toolbar controls to show active/current counts in badges, and updated the Columns button icon ([#7369](elastic/eui#7369)) - Updated `EuiButtonEmpty` to allow passing `false` to `textProps`, which allows rendering custom button content without an extra text wrapper ([#7369](elastic/eui#7369)) - Updated `EuiDataGrid` column header cells to show the sort arrow after the heading text, instead of before ([#7371](elastic/eui#7371)) - Updated `EuiDataGrid`'s column header actions icon from a chevron to `boxesVertical` ([#7371](elastic/eui#7371)) - Updated the actions column in `EuiBasicTable` and `EuiInMemoryTable`s. Alongside `name`, the `description`, `href`, and `data-test-subj` properties now also accept an optional callback that the current `item` will be passed to ([#7373](elastic/eui#7373)) - Updated `EuiContextMenuItem` with a new `toolTipProps` prop ([#7373](elastic/eui#7373)) - `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 incorrect `EuiPopover` positioning calculations when `hasArrow` was set to false ([#7343](elastic/eui#7343)) - Fixed `EuiSuperSelect` to render options with falsy values (false, 0, and ''), but not nullish values (undefined or null) ([#7362](elastic/eui#7362)) - Fixed `EuiSuperSelect`'s typing to allow non-string values (e.g., booleans or numbers) ([#7362](elastic/eui#7362)) - Fixed `EuiDataGrid`'s numeric and currency column heading cells to be correctly right-aligned ([#7371](elastic/eui#7371)) - Fixed `EuiBasicTable` and `EuiInMemoryTable` actions not showing tooltip descriptions when rendered in the all actions popover menu ([#7373](elastic/eui#7373)) - Fixed missing underlines on `EuiContextMenu` link hover ([#7373](elastic/eui#7373)) - Fixed visual text truncation of `EuiBreadcrumb`s with `popoverContent` ([#7375](elastic/eui#7375)) - Fixed `EuiFormRow`s with `hasEmptyLabelSpace` being very slightly off in vertical alignment ([#7380](elastic/eui#7380)) **Deprecations** - Deprecated `EuiContextMenuItem`'s `toolTipTitle` prop. Use `toolTipProps.title` instead ([#7373](elastic/eui#7373)) - Deprecated `EuiContextMenuItem`'s `toolTipPosition` prop. Use `toolTipProps.position` instead ([#7373](elastic/eui#7373)) **Accessibility** - Fixed custom `EuiBasicTable`/`EuiInMemoryTable` rendering nested interactive custom actions ([#7361](elastic/eui#7361)) - Fixed `EuiBasicTable` and `EuiInMemoryTable` actions not correctly reading out action descriptions to screen readers ([#7373](elastic/eui#7373)) - Fixed `EuiBasicTable` and `EuiInMemoryTable` primary actions not visibly appearing on keyboard focus ([#7373](elastic/eui#7373)) --------- Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>
elastic · Jan 5, 2024 · 7357af5 · 7357af5
1 parent f8408ee
commit 7357af5
Show file tree

Hide file tree

Showing 66 changed files with 443 additions and 325 deletions.
diff --git a/package.json b/package.json
@@ -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": "91.0.0-backport.0",
+    "@elastic/eui": "91.3.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

diff --git a/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap b/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap
diff --git a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx
@@ -167,6 +167,13 @@ export const getEuiContextMapping = (): EuiTokensObject => {
           'ARIA label and tooltip content describing a button that expands an actions menu',
       }
     ),
+    'euiCollapsedItemActions.allActionsDisabled': i18n.translate(
+      'core.euiCollapsedItemActions.allActionsDisabled',
+      {
+        defaultMessage: 'Individual item actions are disabled when rows are being selected.',
+        description: 'Title content when the actions popover toggle is disabled',
+      }
+    ),
     'euiCollapsibleNavBeta.ariaLabel': i18n.translate('core.euiCollapsibleNavBeta.ariaLabel', {
       defaultMessage: 'Site menu',
     }),
@@ -252,16 +259,6 @@ export const getEuiContextMapping = (): EuiTokensObject => {
     'euiColumnSelector.searchcolumns': i18n.translate('core.euiColumnSelector.searchcolumns', {
       defaultMessage: 'Search columns',
     }),
-    'euiColumnSelector.buttonActiveSingular': ({ numberOfHiddenFields }: EuiValues) =>
-      i18n.translate('core.euiColumnSelector.buttonActiveSingular', {
-        defaultMessage: '{numberOfHiddenFields} column hidden',
-        values: { numberOfHiddenFields },
-      }),
-    'euiColumnSelector.buttonActivePlural': ({ numberOfHiddenFields }: EuiValues) =>
-      i18n.translate('core.euiColumnSelector.buttonActivePlural', {
-        defaultMessage: '{numberOfHiddenFields} columns hidden',
-        values: { numberOfHiddenFields },
-      }),
     'euiColumnSorting.clearAll': i18n.translate('core.euiColumnSorting.clearAll', {
       defaultMessage: 'Clear sorting',
     }),
@@ -280,11 +277,6 @@ export const getEuiContextMapping = (): EuiTokensObject => {
     'euiColumnSorting.button': i18n.translate('core.euiColumnSorting.button', {
       defaultMessage: 'Sort fields',
     }),
-    'euiColumnSorting.buttonActive': ({ numberOfSortedFields }: EuiValues) =>
-      i18n.translate('core.euiColumnSorting.buttonActive', {
-        defaultMessage: '{numberOfSortedFields, plural, one {# field} other {# fields}} sorted',
-        values: { numberOfSortedFields },
-      }),
     'euiColumnSortingDraggable.activeSortLabel': ({ display }: EuiValues) =>
       i18n.translate('core.euiColumnSortingDraggable.activeSortLabel', {
         defaultMessage: '{display} is sorting this data grid',
@@ -673,6 +665,11 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         description: 'Descending size label',
       }
     ),
+    'euiDataGridToolbarControl.badgeAriaLabel': ({ count }: EuiValues) =>
+      i18n.translate('core.euiDataGridToolbarControl.badgeAriaLabel', {
+        defaultMessage: 'Active: {count}',
+        values: { count },
+      }),
     'euiDatePopoverButton.invalidTitle': ({ title }: EuiValues) =>
       i18n.translate('core.euiDatePopoverButton.invalidTitle', {
         defaultMessage: 'Invalid date: {title}',
@@ -830,11 +827,11 @@ export const getEuiContextMapping = (): EuiTokensObject => {
       'core.euiInlineEditForm.saveButtonAriaLabel',
       { defaultMessage: 'Save edit' }
     ),
-    'euiLink.external.ariaLabel': i18n.translate('core.euiLink.external.ariaLabel', {
+    'euiExternalLinkIcon.ariaLabel': i18n.translate('core.euiExternalLinkIcon.ariaLabel', {
       defaultMessage: 'External link',
     }),
-    'euiLink.newTarget.screenReaderOnlyText': i18n.translate(
-      'core.euiLink.newTarget.screenReaderOnlyText',
+    'euiExternalLinkIcon.newTarget.screenReaderOnlyText': i18n.translate(
+      'core.euiExternalLinkIcon.newTarget.screenReaderOnlyText',
       {
         defaultMessage: '(opens in a new tab or window)',
       }

diff --git a/...ages/kbn-unified-data-table/src/components/__snapshots__/data_table_columns.test.tsx.snap b/...ages/kbn-unified-data-table/src/components/__snapshots__/data_table_columns.test.tsx.snap
diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss
@@ -40,23 +40,29 @@
     border-bottom: $euiBorderThin;
   }
 
+  .euiDataGridRowCell--controlColumn:hover::after,
+  .euiDataGridRowCell--controlColumn:focus::after,
+  .euiDataGridRowCell--controlColumn.euiDataGridRowCell--open::after {
+    border-color: transparent;
+  }
+
+  .euiDataGridRowCell--controlColumn .euiDataGridRowCell__content,
   .euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='openDetails'],
   .euiDataGridRowCell.euiDataGridRowCell--controlColumn[data-gridcell-column-id='select'] {
     padding-left: 0;
     padding-right: 0;
   }
 
-  .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover,
-  .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover .euiDataGridRowCell__actions--overlay {
+  .euiDataGrid--rowHoverHighlight .euiDataGridRow:hover {
     background-color: tintOrShade($euiColorLightShade, 50%, 0);
   }
 
   .euiDataGrid__scrollOverlay .euiDataGrid__scrollBarOverlayRight {
     background-color: transparent; // otherwise the grid scrollbar border visually conflicts with the grid toolbar controls
   }
 
-  .euiDataGridRowCell__autoHeight,
-  .euiDataGridRowCell__lineCountHeight {
+  .euiDataGridRowCell__content--autoHeight,
+  .euiDataGridRowCell__content--lineCountHeight {
     white-space: pre-wrap;
   }
 }
@@ -79,10 +85,7 @@
 .euiDataGridHeader {
 
   .euiDataGridHeaderCell__content {
-    @include euiTextTruncate;
-    overflow: hidden;
     white-space: pre-wrap;
-    flex-grow: 1;
   }
 
   .euiDataGridHeaderCell__popover {
@@ -114,15 +117,15 @@
 
 .unifiedDataTable__rowControl {
   // fine-tuning the vertical alignment with the text for any row height setting
-  margin-top: -3px;
-  .euiDataGridRowCell__defaultHeight & { // "Single line" row height setting
+  margin-top: -$euiSizeXS;
+  .euiDataGridRowCell__content--defaultHeight & { // "Single line" row height setting
     margin-top: 0;
   }
 }
 
 .unifiedDataTable__descriptionList {
   // force the content truncation when "Single line" row height setting is active
-  .euiDataGridRowCell__defaultHeight & {
+  .euiDataGridRowCell__content--defaultHeight & {
     -webkit-line-clamp: 1;
     display: -webkit-box;
     -webkit-box-orient: vertical;

diff --git a/packages/kbn-unified-data-table/src/components/data_table_columns.tsx b/packages/kbn-unified-data-table/src/components/data_table_columns.tsx
@@ -15,6 +15,7 @@ import {
   EuiScreenReaderOnly,
   EuiToolTip,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { ToastsStart, IUiSettingsClient } from '@kbn/core/public';
 import { DocViewFilterFn } from '@kbn/unified-doc-viewer/types';
@@ -189,7 +190,12 @@ function buildEuiGridColumn({
     });
 
     column.display = (
-      <div aria-label={primaryTimeAriaLabel}>
+      <div
+        aria-label={primaryTimeAriaLabel}
+        css={css`
+          text-align: left;
+        `}
+      >
         <EuiToolTip content={primaryTimeTooltip}>
           <>
             {timeFieldName} <EuiIcon type="clock" />

diff --git a/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx b/packages/kbn-unified-data-table/src/components/data_table_document_selection.tsx
@@ -6,15 +6,13 @@
  * Side Public License, v 1.
  */
 import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
-import classNames from 'classnames';
 import {
-  EuiButtonEmpty,
   EuiCheckbox,
   EuiContextMenuItem,
   EuiContextMenuPanel,
   EuiCopy,
   EuiDataGridCellValueElementProps,
-  EuiNotificationBadge,
+  EuiDataGridToolbarControl,
   EuiPopover,
   EuiFlexGroup,
   EuiFlexItem,
@@ -183,33 +181,20 @@ export function DataTableDocumentToolbarBtn({
       isOpen={isSelectionPopoverOpen}
       panelPaddingSize="none"
       button={
-        <EuiButtonEmpty
-          size="xs"
-          color="text"
+        <EuiDataGridToolbarControl
           iconType="documents"
           onClick={toggleSelectionToolbar}
           data-selected-documents={selectedDocs.length}
           data-test-subj="dscGridSelectionBtn"
           isSelected={isFilterActive}
-          className={classNames({
-            // eslint-disable-next-line @typescript-eslint/naming-convention
-            euiDataGrid__controlBtn: true,
-            'euiDataGrid__controlBtn--active': isFilterActive,
-          })}
+          badgeContent={selectedDocs.length}
         >
-          <EuiFlexGroup responsive={false} direction="row" alignItems="center" gutterSize="s">
-            <EuiFlexItem grow={false}>
-              <FormattedMessage
-                id="unifiedDataTable.selectedRowsButtonLabel"
-                defaultMessage="Selected"
-                description="Selected documents"
-              />
-            </EuiFlexItem>
-            <EuiFlexItem grow={false}>
-              <EuiNotificationBadge color="subdued">{selectedDocs.length}</EuiNotificationBadge>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiButtonEmpty>
+          <FormattedMessage
+            id="unifiedDataTable.selectedRowsButtonLabel"
+            defaultMessage="Selected"
+            description="Selected documents"
+          />
+        </EuiDataGridToolbarControl>
       }
     >
       {isSelectionPopoverOpen && <EuiContextMenuPanel items={getMenuItems()} />}

diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
@@ -85,7 +85,7 @@ export const LICENSE_OVERRIDES = {
   'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/ems-client@8.5.1': ['Elastic License 2.0'],
-  '@elastic/eui@91.0.0-backport.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@91.3.1': ['SSPL-1.0 OR Elastic License 2.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
   '@bufbuild/protobuf@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

diff --git a/src/plugins/data/public/utils/table_inspector_view/components/download_options.tsx b/src/plugins/data/public/utils/table_inspector_view/components/download_options.tsx
@@ -141,7 +141,7 @@ class DataDownloadOptions extends Component<DataDownloadOptionsProps, DataDownlo
             defaultMessage="Download the data in table format"
           />
         }
-        toolTipPosition="left"
+        toolTipProps={{ position: 'left' }}
       >
         <FormattedMessage
           id="data.inspector.table.formattedCSVButtonLabel"
@@ -157,7 +157,7 @@ class DataDownloadOptions extends Component<DataDownloadOptionsProps, DataDownlo
             defaultMessage="Download the data as provided, for example, dates as timestamps"
           />
         }
-        toolTipPosition="left"
+        toolTipProps={{ position: 'left' }}
       >
         <FormattedMessage id="data.inspector.table.rawCSVButtonLabel" defaultMessage="Raw CSV" />
       </EuiContextMenuItem>,

diff --git a/..._editor/public/components/field_format_editor/editors/url/__snapshots__/url.test.tsx.snap b/..._editor/public/components/field_format_editor/editors/url/__snapshots__/url.test.tsx.snap