Upgrade EUI to v26.3.1 (#70243)

* eui to 26.1.0 * Breadcrumb -> EuiBreadcrumb * keyCode -> key * src snapshot updates * update header variables file location * keyCode -> key in tests * x-pack simple snapshot updates * euitooltip updates * euioverlaymask updates * testbed keycode -> key * fixed header sass mixin * euidatagrid test workaround * euioverlapmask mock * euipaginationbutton markup * nav snapshot update * eui to 26.3.0 * flyout z-index fix * euiflyout snapshot updates * style snapshot updates * table actions have machine readable text * table actions have machine readable text * core api docs update * table actions snapshot update * eui to 26.3.1 * update table actions type * mock issue links; timeout done * breadcrumb -> euibreadcrumb Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
elastic · Jul 10, 2020 · 9537a82 · 9537a82
1 parent afe785b
commit 9537a82
Show file tree

Hide file tree

Showing 93 changed files with 1,406 additions and 1,224 deletions.
diff --git a/package.json b/package.json
@@ -127,7 +127,7 @@
  "@elastic/datemath": "5.0.3",
  "@elastic/elasticsearch": "7.8.0",
  "@elastic/ems-client": "7.9.3",
- "@elastic/eui": "24.1.0",
+ "@elastic/eui": "26.3.1",
  "@elastic/filesaver": "1.1.2",
  "@elastic/good": "8.1.1-kibana2",
  "@elastic/numeral": "^2.5.0",

diff --git a/packages/kbn-ui-shared-deps/package.json b/packages/kbn-ui-shared-deps/package.json
@@ -10,7 +10,7 @@
  },
  "dependencies": {
  "@elastic/charts": "19.8.1",
- "@elastic/eui": "24.1.0",
+ "@elastic/eui": "26.3.1",
  "@elastic/numeral": "^2.5.0",
  "@kbn/i18n": "1.0.0",
  "@kbn/monaco": "1.0.0",

diff --git a/src/core/public/chrome/chrome_service.tsx b/src/core/public/chrome/chrome_service.tsx
@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { Breadcrumb as EuiBreadcrumb, IconType } from '@elastic/eui';
+import { EuiBreadcrumb, IconType } from '@elastic/eui';
 import React from 'react';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { BehaviorSubject, combineLatest, merge, Observable, of, ReplaySubject } from 'rxjs';

diff --git a/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/collapsible_nav.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap b/src/core/public/chrome/ui/header/__snapshots__/header_breadcrumbs.test.tsx.snap
diff --git a/src/core/public/chrome/ui/header/_index.scss b/src/core/public/chrome/ui/header/_index.scss
@@ -1,3 +1,5 @@
+@include euiHeaderAffordForFixed;
+
 // TODO #64541
 // Delete this block
 .chrHeaderWrapper:not(.headerWrapper) {

diff --git a/src/core/public/notifications/toasts/__snapshots__/global_toast_list.test.tsx.snap b/src/core/public/notifications/toasts/__snapshots__/global_toast_list.test.tsx.snap
diff --git a/src/core/public/public.api.md b/src/core/public/public.api.md
@@ -6,7 +6,6 @@
 
 import { Action } from 'history';
 import Boom from 'boom';
-import { Breadcrumb } from '@elastic/eui';
 import { BulkIndexDocumentsParams } from 'elasticsearch';
 import { CatAliasesParams } from 'elasticsearch';
 import { CatAllocationParams } from 'elasticsearch';
@@ -37,6 +36,7 @@ import { DeleteDocumentByQueryParams } from 'elasticsearch';
 import { DeleteDocumentParams } from 'elasticsearch';
 import { DeleteScriptParams } from 'elasticsearch';
 import { DeleteTemplateParams } from 'elasticsearch';
+import { EuiBreadcrumb } from '@elastic/eui';
 import { EuiButtonEmptyProps } from '@elastic/eui';
 import { EuiConfirmModalProps } from '@elastic/eui';
 import { EuiGlobalToastListToast } from '@elastic/eui';
@@ -334,7 +334,7 @@ export interface ChromeBrand {
 }
 
 // @public (undocumented)
-export type ChromeBreadcrumb = Breadcrumb;
+export type ChromeBreadcrumb = EuiBreadcrumb;
 
 // @public
 export interface ChromeDocTitle {

diff --git a/src/core/public/rendering/_base.scss b/src/core/public/rendering/_base.scss
@@ -1,4 +1,4 @@
-@import '@elastic/eui/src/components/header/variables';
+@import '@elastic/eui/src/global_styling/variables/header';
 @import '@elastic/eui/src/components/nav_drawer/variables';
 
 /**

diff --git a/src/legacy/core_plugins/timelion/public/_app.scss b/src/legacy/core_plugins/timelion/public/_app.scss
@@ -1,4 +1,4 @@
-@import '@elastic/eui/src/components/header/variables';
+@import '@elastic/eui/src/global_styling/variables/header';
 
 .timApp {
  position: relative;

diff --git a/src/legacy/core_plugins/timelion/public/directives/timelion_expression_input.js b/src/legacy/core_plugins/timelion/public/directives/timelion_expression_input.js
@@ -51,7 +51,7 @@ import {
  suggest,
  insertAtLocation,
 } from './timelion_expression_input_helpers';
-import { comboBoxKeyCodes } from '@elastic/eui';
+import { comboBoxKeys } from '@elastic/eui';
 import { npStart } from 'ui/new_platform';
 
 const Parser = PEG.generate(grammar);
@@ -178,9 +178,9 @@ export function TimelionExpInput($http, $timeout) {
  });
  }
 
- function isNavigationalKey(keyCode) {
- const keyCodes = _.values(comboBoxKeyCodes);
- return keyCodes.includes(keyCode);
+ function isNavigationalKey(key) {
+ const keyCodes = _.values(comboBoxKeys);
+ return keyCodes.includes(key);
  }
 
  scope.onFocusInput = () => {
@@ -196,12 +196,12 @@ export function TimelionExpInput($http, $timeout) {
  scope.onKeyDownInput = (e) => {
  // If we've pressed any non-navigational keys, then the user has typed something and we
  // can exit early without doing any navigation. The keyup handler will pull up suggestions.
- if (!isNavigationalKey(e.keyCode)) {
+ if (!isNavigationalKey(e.key)) {
  return;
  }
 
  switch (e.keyCode) {
- case comboBoxKeyCodes.UP:
+ case comboBoxKeys.ARROW_UP:
  if (scope.suggestions.isVisible) {
  // Up and down keys navigate through suggestions.
  e.preventDefault();
@@ -210,7 +210,7 @@ export function TimelionExpInput($http, $timeout) {
  }
  break;
 
- case comboBoxKeyCodes.DOWN:
+ case comboBoxKeys.ARROW_DOWN:
  if (scope.suggestions.isVisible) {
  // Up and down keys navigate through suggestions.
  e.preventDefault();
@@ -219,7 +219,7 @@ export function TimelionExpInput($http, $timeout) {
  }
  break;
 
- case comboBoxKeyCodes.TAB:
+ case comboBoxKeys.TAB:
  // If there are no suggestions or none is selected, the user tabs to the next input.
  if (scope.suggestions.isEmpty() || scope.suggestions.index < 0) {
  // Before letting the tab be handled to focus the next element
@@ -234,7 +234,7 @@ export function TimelionExpInput($http, $timeout) {
  insertSuggestionIntoExpression(scope.suggestions.index);
  break;
 
- case comboBoxKeyCodes.ENTER:
+ case comboBoxKeys.ENTER:
  if (e.metaKey || e.ctrlKey) {
  // Re-render the chart when the user hits CMD+ENTER.
  e.preventDefault();
@@ -246,7 +246,7 @@ export function TimelionExpInput($http, $timeout) {
  }
  break;
 
- case comboBoxKeyCodes.ESCAPE:
+ case comboBoxKeys.ESCAPE:
  e.preventDefault();
  scope.suggestions.hide();
  break;
@@ -255,7 +255,7 @@ export function TimelionExpInput($http, $timeout) {
 
  scope.onKeyUpInput = (e) => {
  // If the user isn't navigating, then we should update the suggestions based on their input.
- if (!isNavigationalKey(e.keyCode)) {
+ if (!isNavigationalKey(e.key)) {
  getSuggestions();
  }
  };

diff --git a/src/legacy/ui/public/accessibility/__tests__/kbn_accessible_click.js b/src/legacy/ui/public/accessibility/__tests__/kbn_accessible_click.js
@@ -22,7 +22,7 @@ import sinon from 'sinon';
 import expect from '@kbn/expect';
 import ngMock from 'ng_mock';
 import '../kbn_accessible_click';
-import { keyCodes } from '@elastic/eui';
+import { keys } from '@elastic/eui';
 
 describe('kbnAccessibleClick directive', () => {
  let $compile;
@@ -112,14 +112,14 @@ describe('kbnAccessibleClick directive', () => {
 
  it(`on ENTER keyup`, () => {
  const e = angular.element.Event('keyup'); // eslint-disable-line new-cap
- e.keyCode = keyCodes.ENTER;
+ e.key = keys.ENTER;
  element.trigger(e);
  sinon.assert.calledOnce(scope.handleClick);
  });
 
  it(`on SPACE keyup`, () => {
  const e = angular.element.Event('keyup'); // eslint-disable-line new-cap
- e.keyCode = keyCodes.SPACE;
+ e.key = keys.SPACE;
  element.trigger(e);
  sinon.assert.calledOnce(scope.handleClick);
  });

diff --git a/src/legacy/ui/public/accessibility/__tests__/kbn_ui_ace_keyboard_mode.js b/src/legacy/ui/public/accessibility/__tests__/kbn_ui_ace_keyboard_mode.js
@@ -22,7 +22,7 @@ import sinon from 'sinon';
 import expect from '@kbn/expect';
 import ngMock from 'ng_mock';
 import '../kbn_ui_ace_keyboard_mode';
-import { keyCodes } from '@elastic/eui';
+import { keys } from '@elastic/eui';
 
 describe('kbnUiAceKeyboardMode directive', () => {
  let element;
@@ -48,7 +48,7 @@ describe('kbnUiAceKeyboardMode directive', () => {
  const textarea = element.find('textarea');
  sinon.spy(textarea[0], 'focus');
  const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap
- ev.keyCode = keyCodes.ENTER;
+ ev.key = keys.ENTER;
  element.find('.kbnUiAceKeyboardHint').trigger(ev);
  expect(textarea[0].focus.called).to.be(true);
  expect(
@@ -61,7 +61,7 @@ describe('kbnUiAceKeyboardMode directive', () => {
  const hint = element.find('.kbnUiAceKeyboardHint');
  sinon.spy(hint[0], 'focus');
  const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap
- ev.keyCode = keyCodes.ESCAPE;
+ ev.key = keys.ESCAPE;
  textarea.trigger(ev);
  expect(hint[0].focus.called).to.be(true);
  expect(hint.hasClass('kbnUiAceKeyboardHint-isInactive')).to.be(false);
@@ -101,7 +101,7 @@ describe('kbnUiAceKeyboardModeService', () => {
  const textarea = element.find('textarea');
  sinon.spy(textarea[0], 'focus');
  const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap
- ev.keyCode = keyCodes.ENTER;
+ ev.key = keys.ENTER;
  element.find('.kbnUiAceKeyboardHint').trigger(ev);
  expect(textarea[0].focus.called).to.be(true);
  expect(
@@ -114,7 +114,7 @@ describe('kbnUiAceKeyboardModeService', () => {
  const hint = element.find('.kbnUiAceKeyboardHint');
  sinon.spy(hint[0], 'focus');
  const ev = angular.element.Event('keydown'); // eslint-disable-line new-cap
- ev.keyCode = keyCodes.ESCAPE;
+ ev.key = keys.ESCAPE;
  textarea.trigger(ev);
  expect(hint[0].focus.called).to.be(true);
  expect(hint.hasClass('kbnUiAceKeyboardHint-isInactive')).to.be(false);

diff --git a/src/legacy/ui/public/accessibility/kbn_ui_ace_keyboard_mode.js b/src/legacy/ui/public/accessibility/kbn_ui_ace_keyboard_mode.js
@@ -33,7 +33,7 @@
 
 import angular from 'angular';
 import { uiModules } from '../modules';
-import { keyCodes } from '@elastic/eui';
+import { keys } from '@elastic/eui';
 
 let aceKeyboardModeId = 0;
 
@@ -72,7 +72,7 @@ uiModules
  }
 
  hint.keydown((ev) => {
- if (ev.keyCode === keyCodes.ENTER) {
+ if (ev.key === keys.ENTER) {
  ev.preventDefault();
  startEditing();
  }
@@ -103,7 +103,7 @@ uiModules
  );
 
  uiAceTextbox.keydown((ev) => {
- if (ev.keyCode === keyCodes.ESCAPE) {
+ if (ev.key === keys.ESCAPE) {
  // If the autocompletion context menu is open then we want to let ESC close it but
  // **not** exit out of editing mode.
  if (!isAutoCompleterOpen) {

diff --git a/src/legacy/ui/public/exit_full_screen/exit_full_screen_button.test.js b/src/legacy/ui/public/exit_full_screen/exit_full_screen_button.test.js
@@ -33,7 +33,7 @@ import chrome from 'ui/chrome';
 
 import { ExitFullScreenButton } from './exit_full_screen_button';
 
-import { keyCodes } from '@elastic/eui';
+import { keys } from '@elastic/eui';
 
 test('is rendered', () => {
  const component = renderWithIntl(<ExitFullScreenButton onExitFullScreenMode={() => {}} />);
@@ -57,7 +57,7 @@ describe('onExitFullScreenMode', () => {
 
  mountWithIntl(<ExitFullScreenButton onExitFullScreenMode={onExitHandler} />);
 
- const escapeKeyEvent = new KeyboardEvent('keydown', { keyCode: keyCodes.ESCAPE });
+ const escapeKeyEvent = new KeyboardEvent('keydown', { key: keys.ESCAPE });
  document.dispatchEvent(escapeKeyEvent);
 
  sinon.assert.calledOnce(onExitHandler);

diff --git a/src/plugins/advanced_settings/public/management_app/components/form/_form.scss b/src/plugins/advanced_settings/public/management_app/components/form/_form.scss
@@ -1,4 +1,4 @@
-@import '@elastic/eui/src/components/header/variables';
+@import '@elastic/eui/src/global_styling/variables/header';
 @import '@elastic/eui/src/components/nav_drawer/variables';
 
 // TODO #64541