Upgrade EUI to v95.11.0 (#192756)

`v95.10.1`⏩`v95.11.0` > [!note] > The bulk of this release is **EuiDataGrid**. The component has been fully converted to Emotion, and several UX changes have been made to data cell actions. We recommend QA testing any data grid(s) that have custom styles applied to them. _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v95.11.0`](https://github.com/elastic/eui/releases/v95.11.0) - Updated `EuiText`, `EuiTextColor`, and `EuiTextAlign` with a new `component` prop that allows changing the default rendered `<div>` wrapper to a `<span>` or `<p>` tag. ([#7993](elastic/eui#7993)) - Updated `EuiDataGrid`'s cell actions to always consistently be left-aligned, regardless of text content alignment ([#8011](elastic/eui#8011)) - Increased `EuiDataGrid`'s cell actions hover zone to reduce UX friction when mousing over from the grid cell to its actions ([#8011](elastic/eui#8011)) **Bug fixes** - Fixed `EuiPopover` to correctly inherit from `EuiProvider`'s `componentDefaults.EuiPortal.insert` ([#8003](elastic/eui#8003)) - Fixed push `EuiFlyoutResizable`s to not potentially block scrollbars on outside content ([#8010](elastic/eui#8010)) - Fixed an `EuiDataGrid` bug where the `setCellProps` callback passed by `renderCellValue` was not correctly applying custom `data-test-subj`s ([#8011](elastic/eui#8011)) **Accessibility** - Updated the `EuiBasicTable` actions button's `aria-label` by adding a reference to the current row ([#7994](elastic/eui#7994)) **CSS-in-JS conversions** - Converted `EuiDataGrid`'s toolbar controls to Emotion ([#7997](elastic/eui#7997)) - Removed `$euiDataGridPopoverMaxHeight` - Converted `EuiDataGrid` to Emotion ([#7998](elastic/eui#7998)) - Removed `$euiZDataGrid` - Removed `$euiZHeaderBelowDataGrid` - Converted `EuiDataGrid`'s `gridStyle`s to Emotion; Removed the following Sass variables and mixins: ([#8006](elastic/eui#8006)) - `$euiDataGridCellPaddingS` - `$euiDataGridCellPaddingM` - `$euiDataGridCellPaddingL` - `$euiDataGridVerticalBorder` - `$euiDataGridPrefix` - `$euiDataGridStyles` - `@euiDataGridSelector` - `@euiDataGridStyles` - Converted `EuiDataGrid`'s cell popover, actions, and focus outline to Emotion; Removed the following Sass variables and mixins: ([#8011](elastic/eui#8011)) - `$euiZDataGridCellPopover` - `@euiDataGridCellFocus` - Converted `EuiDataGrid`'s row, header, and footer cells to Emotion; Removed the following Sass variables and mixins: ([#8013](elastic/eui#8013)) - `$euiDataGridColumnResizerWidth` - `@euiDataGridRowCell` - `@euiDataGridHeaderCell` - `@euiDataGridFooterCell`
elastic · Sep 23, 2024 · 9bbb296 · 9bbb296
1 parent a8ebc7f
commit 9bbb296
Show file tree

Hide file tree

Showing 23 changed files with 113 additions and 164 deletions.
diff --git a/package.json b/package.json
@@ -115,7 +115,7 @@
     "@elastic/ecs": "^8.11.1",
     "@elastic/elasticsearch": "^8.15.0",
     "@elastic/ems-client": "8.5.3",
-    "@elastic/eui": "95.10.1",
+    "@elastic/eui": "95.11.0",
     "@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
@@ -163,12 +163,18 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         description: 'ARIA label for a button that enters fullscreen view',
       }
     ),
-    'euiCollapsedItemActions.allActions': i18n.translate(
-      'core.euiCollapsedItemActions.allActions',
+    'euiCollapsedItemActions.allActions': ({ index }: EuiValues) =>
+      i18n.translate('core.euiCollapsedItemActions.allActions', {
+        defaultMessage: 'All actions, row {index}',
+        values: { index },
+        description:
+          'ARIA label for a button that is rendered on multiple table rows, that expands an actions menu',
+      }),
+    'euiCollapsedItemActions.allActionsTooltip': i18n.translate(
+      'core.euiCollapsedItemActions.allActionsTooltip',
       {
         defaultMessage: 'All actions',
-        description:
-          'ARIA label and tooltip content describing a button that expands an actions menu',
+        description: 'Tooltip content describing a button that expands an actions menu',
       }
     ),
     'euiCollapsedItemActions.allActionsDisabled': i18n.translate(
@@ -251,6 +257,11 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         defaultMessage: 'Sort {schemaLabel}',
         values: { schemaLabel },
       }),
+    'euiColumnActions.unsort': ({ schemaLabel }: EuiValues) =>
+      i18n.translate('core.euiColumnActions.unsort', {
+        defaultMessage: 'Unsort {schemaLabel}',
+        values: { schemaLabel },
+      }),
     'euiColumnActions.moveLeft': i18n.translate('core.euiColumnActions.moveLeft', {
       defaultMessage: 'Move left',
     }),
@@ -529,10 +540,10 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         values: { page, pageCount },
         description: 'Screen reader text to describe the size of the data grid',
       }),
-    'euiDataGridCell.position': ({ columnId, row, col }: EuiValues) =>
+    'euiDataGridCell.position': ({ columnName, columnIndex, rowIndex }: EuiValues) =>
       i18n.translate('core.euiDataGridCell.position', {
-        defaultMessage: '{columnId}, column {col}, row {row}',
-        values: { columnId, row, col },
+        defaultMessage: '{columnName}, column {columnIndex}, row {rowIndex}',
+        values: { columnName, columnIndex, rowIndex },
       }),
     'euiDataGridCell.expansionEnterPrompt': i18n.translate(
       'core.euiDataGridCell.expansionEnterPrompt',

diff --git a/packages/kbn-unified-data-table/src/components/data_table.scss b/packages/kbn-unified-data-table/src/components/data_table.scss
@@ -43,13 +43,16 @@
   .euiDataGridHeaderCell {
     align-items: start;
 
-    &:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__button {
-      height: 100%;
-      align-items: flex-start;
+    .euiPopover[class*='euiDataGridHeaderCell__popover'] {
+      align-self: center;
     }
   }
 
-  .euiDataGrid--headerUnderline .euiDataGridHeaderCell {
+  .euiDataGrid--bordersHorizontal .euiDataGridHeader {
+    border-top: none;
+  }
+
+  .euiDataGrid--headerUnderline .euiDataGridHeader {
     border-bottom: $euiBorderThin;
   }
 
@@ -93,7 +96,8 @@
   }
 
   .euiDataGridRowCell__content--autoHeight,
-  .euiDataGridRowCell__content--lineCountHeight {
+  .euiDataGridRowCell__content--lineCountHeight,
+  .euiDataGridHeaderCell__content {
     white-space: pre-wrap;
   }
 }
@@ -104,25 +108,6 @@
   min-height: 0;
 }
 
-// We only truncate if the cell is not a control column.
-.euiDataGridHeader {
-
-  .euiDataGridHeaderCell__content {
-    white-space: pre-wrap;
-  }
-
-  .euiDataGridHeaderCell__popover {
-    flex-grow: 0;
-    flex-basis: auto;
-    width: auto;
-    padding-left: $euiSizeXS;
-  }
-}
-
-.euiDataGridRowCell--numeric {
-  text-align: right;
-}
-
 .euiDataGrid__loading,
 .euiDataGrid__noResults {
   display: flex;

diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
@@ -87,7 +87,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@95.10.1': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0'],
+  '@elastic/eui@95.11.0': ['Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.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
   '@bufbuild/[email protected]': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

diff --git a/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.scss b/src/plugins/unified_doc_viewer/public/components/doc_viewer_table/table.scss
@@ -68,11 +68,11 @@
 }
 
 .kbnDocViewer__fieldsGrid {
-  &.euiDataGrid--noControls.euiDataGrid--bordersHorizontal .euiDataGridHeaderCell {
+  &.euiDataGrid--noControls.euiDataGrid--bordersHorizontal .euiDataGridHeader {
     border-top: none;
   }
 
-  &.euiDataGrid--headerUnderline .euiDataGridHeaderCell {
+  &.euiDataGrid--headerUnderline .euiDataGridHeader {
     border-bottom: $euiBorderThin;
   }
 

diff --git a/test/functional/apps/discover/esql/_esql_view.ts b/test/functional/apps/discover/esql/_esql_view.ts
@@ -199,7 +199,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         const cell = await dataGrid.getCellElementExcludingControlColumns(0, 1);
         expect(await cell.getVisibleText()).to.be(' - ');
         expect(await dataGrid.getHeaders()).to.eql([
-          'Select column',
+          "Select columnPress the Enter key to interact with this cell's contents.", // contains screen reader help text
           'Control column',
           'Access to degraded docs',
           'Access to available stacktraces',

diff --git a/test/functional/services/data_grid.ts b/test/functional/services/data_grid.ts
@@ -34,7 +34,7 @@ export class DataGridService extends FtrService {
     const table = await this.find.byCssSelector('.euiDataGrid');
     const $ = await table.parseDomContent();
 
-    const columns = $('.euiDataGridHeaderCell__content')
+    const columns = $('.euiDataGridHeaderCell')
       .toArray()
       .map((cell) => $(cell).text());
     const cells = $.findTestSubjects('dataGridRowCell')
@@ -59,7 +59,7 @@ export class DataGridService extends FtrService {
     cellDataTestSubj: string
   ): Promise<string[][]> {
     const $ = await element.parseDomContent();
-    const columnNumber = $('.euiDataGridHeaderCell__content').length;
+    const columnNumber = $('.euiDataGridHeaderCell').length;
     const cells = $.findTestSubjects('dataGridRowCell')
       .toArray()
       .map((cell) =>
@@ -79,7 +79,7 @@ export class DataGridService extends FtrService {
   public async getHeaders() {
     const header = await this.testSubjects.find('euiDataGridBody > dataGridHeader');
     const $ = await header.parseDomContent();
-    return $('.euiDataGridHeaderCell__content')
+    return $('.euiDataGridHeaderCell')
       .toArray()
       .map((cell) => $(cell).text());
   }
@@ -134,6 +134,7 @@ export class DataGridService extends FtrService {
     let actionButton: WebElementWrapper | undefined;
     await this.retry.try(async () => {
       const cell = await this.getCellElement(rowIndex, columnIndex);
+      await cell.moveMouseTo();
       await cell.click();
       actionButton = await cell.findByTestSubject(selector);
       if (!actionButton) {
@@ -154,6 +155,7 @@ export class DataGridService extends FtrService {
       columnIndex,
       'euiDataGridCellExpandButton'
     );
+    await actionButton.moveMouseTo();
     await actionButton.click();
     await this.retry.waitFor('popover to be opened', async () => {
       return await this.testSubjects.exists('euiDataGridExpansionPopover');
@@ -197,6 +199,7 @@ export class DataGridService extends FtrService {
    */
   public async clickCellFilterForButton(rowIndex: number = 0, columnIndex: number = 0) {
     const actionButton = await this.getCellActionButton(rowIndex, columnIndex, 'filterForButton');
+    await actionButton.moveMouseTo();
     await actionButton.click();
   }
 
@@ -215,11 +218,13 @@ export class DataGridService extends FtrService {
       controlsCount + columnIndex,
       'filterForButton'
     );
+    await actionButton.moveMouseTo();
     await actionButton.click();
   }
 
   public async clickCellFilterOutButton(rowIndex: number = 0, columnIndex: number = 0) {
     const actionButton = await this.getCellActionButton(rowIndex, columnIndex, 'filterOutButton');
+    await actionButton.moveMouseTo();
     await actionButton.click();
   }
 
@@ -233,6 +238,7 @@ export class DataGridService extends FtrService {
       controlsCount + columnIndex,
       'filterOutButton'
     );
+    await actionButton.moveMouseTo();
     await actionButton.click();
   }
 
@@ -374,6 +380,7 @@ export class DataGridService extends FtrService {
 
     if (toggle) {
       await toggle.scrollIntoViewIfNecessary();
+      await toggle.moveMouseTo();
       await toggle.click();
       await this.retry.waitFor('doc viewer to open', async () => {
         return this.isShowingDocViewer();
@@ -402,9 +409,7 @@ export class DataGridService extends FtrService {
   }
 
   public async getHeaderFields(): Promise<string[]> {
-    const result = await this.find.allByCssSelector(
-      '.euiDataGridHeaderCell:not(.euiDataGridHeaderCell--controlColumn) .euiDataGridHeaderCell__content'
-    );
+    const result = await this.find.allByCssSelector('.euiDataGridHeaderCell__content');
 
     const textArr = [];
     for (const cell of result) {
@@ -415,9 +420,7 @@ export class DataGridService extends FtrService {
   }
 
   public async getControlColumnHeaderFields(): Promise<string[]> {
-    const result = await this.find.allByCssSelector(
-      '.euiDataGridHeaderCell--controlColumn .euiDataGridHeaderCell__content'
-    );
+    const result = await this.find.allByCssSelector('.euiDataGridHeaderCell--controlColumn');
 
     const textArr = [];
     for (const cell of result) {
@@ -628,15 +631,20 @@ export class DataGridService extends FtrService {
     const cellSelector = ['addFilterForValueButton', 'addFilterOutValueButton'].includes(actionName)
       ? `tableDocViewRow-${fieldName}-value`
       : `tableDocViewRow-${fieldName}-name`;
+    await this.testSubjects.moveMouseTo(cellSelector);
     await this.testSubjects.click(cellSelector);
+
     await this.retry.waitFor('grid cell actions to appear', async () => {
       return this.testSubjects.exists(`${actionName}-${fieldName}`);
     });
   }
 
   public async clickFieldActionInFlyout(fieldName: string, actionName: string): Promise<void> {
     await this.showFieldCellActionInFlyout(fieldName, actionName);
-    await this.testSubjects.click(`${actionName}-${fieldName}`);
+
+    const actionSelector = `${actionName}-${fieldName}`;
+    await this.testSubjects.moveMouseTo(actionSelector);
+    await this.testSubjects.click(actionSelector);
   }
 
   public async isFieldPinnedInFlyout(fieldName: string): Promise<boolean> {
@@ -658,11 +666,14 @@ export class DataGridService extends FtrService {
   }
 
   public async expandFieldNameCellInFlyout(fieldName: string): Promise<void> {
+    const cellSelector = `tableDocViewRow-${fieldName}-name`;
     const buttonSelector = 'euiDataGridCellExpandButton';
-    await this.testSubjects.click(`tableDocViewRow-${fieldName}-name`);
+    await this.testSubjects.moveMouseTo(cellSelector);
+    await this.testSubjects.click(cellSelector);
     await this.retry.waitFor('grid cell actions to appear', async () => {
       return this.testSubjects.exists(buttonSelector);
     });
+    await this.testSubjects.moveMouseTo(buttonSelector);
     await this.testSubjects.click(buttonSelector);
   }
 

diff --git a/x-pack/packages/security-solution/data_table/components/data_table/index.test.tsx b/x-pack/packages/security-solution/data_table/components/data_table/index.test.tsx
@@ -139,9 +139,9 @@ describe('DataTable', () => {
       wrapper.update();
       expect(
         wrapper
-          .find('[data-test-subj="dataGridRowCell"]')
+          .find('div[data-test-subj="dataGridRowCell"]')
           .at(0)
-          .find('.euiDataGridRowCell__content')
+          .find('div.euiDataGridRowCell__content')
           .childAt(0)
           .text()
       ).toEqual(mockTimelineData[0].ecs.timestamp);

diff --git a/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx b/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx
@@ -141,9 +141,9 @@ describe('DatatableComponent', () => {
     expect(screen.getByLabelText('My fanci metric chart')).toBeInTheDocument();
     expect(screen.getByRole('row')).toBeInTheDocument();
     expect(screen.queryAllByRole('gridcell').map((cell) => cell.textContent)).toEqual([
-      'shoes- a, column 1, row 1',
-      '1588024800000- b, column 2, row 1',
-      '3- c, column 3, row 1',
+      'shoes',
+      '1588024800000',
+      '3',
     ]);
   });
 
@@ -352,8 +352,8 @@ describe('DatatableComponent', () => {
       },
     });
     expect(screen.queryAllByRole('gridcell').map((cell) => cell.textContent)).toEqual([
-      '1588024800000- b, column 1, row 1',
-      '3- c, column 2, row 1',
+      '1588024800000',
+      '3',
     ]);
   });
 
@@ -698,9 +698,9 @@ describe('DatatableComponent', () => {
           .map((cell) => [cell.textContent, cell.style.backgroundColor]);
 
         expect(cellColors).toEqual([
-          ['shoes- a, column 1, row 1', 'red'],
-          ['1588024800000- b, column 2, row 1', ''],
-          ['3- c, column 3, row 1', ''],
+          ['shoes', 'red'],
+          ['1588024800000', ''],
+          ['3', ''],
         ]);
       });
 
@@ -717,9 +717,9 @@ describe('DatatableComponent', () => {
           .map((cell) => [cell.textContent, cell.style.backgroundColor]);
 
         expect(cellColors).toEqual([
-          ['shoes- a, column 1, row 1', ''],
-          ['1588024800000- b, column 2, row 1', ''],
-          ['3- c, column 3, row 1', 'red'],
+          ['shoes', ''],
+          ['1588024800000', ''],
+          ['3', 'red'],
         ]);
       });
     });