Upgrade EUI to v27.4.0 (#74004)

* eui to 27.1.0

* eui to 27.2.0

* buttoniconside type

* euiselectable type

* update onScroll callback and polyfill size references

* findTestSubject ts

* buttoncontent and collapsiblenav src snapshot updates

* update prop retrieval

* xpack snapshots

* jest updates

* type fixes

* more snapshots

* virtual list changes

* more virtualization changes

* merge

* fix functional tests

* data-test-subj for indexPatter-switcher

* storyshots

* eui to 27.3.1

* Fix unit tests

* Fix broken unit test

* Updated snapshots

* Fixed types

* search for value in euiselectable before selection

* select the correct element

* mock virtualized dep

* ts fix

* reinstate storyshot

* ts fix

Co-authored-by: Chandler Prall <chandler.prall@gmail.com>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

package.json

@@ -124,7 +124,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "7.9.0-rc.2",
     "@elastic/ems-client": "7.9.3",
-    "@elastic/eui": "26.3.1",
+    "@elastic/eui": "27.4.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "^2.5.0",

packages/kbn-ui-shared-deps/package.json

@@ -10,7 +10,7 @@
   },
   "dependencies": {
     "@elastic/charts": "19.8.1",
-    "@elastic/eui": "26.3.1",
+    "@elastic/eui": "27.4.0",
     "@elastic/numeral": "^2.5.0",
     "@kbn/i18n": "1.0.0",
     "@kbn/monaco": "1.0.0",

src/core/public/overlays/modal/__snapshots__/modal_service.test.tsx.snap

@@ -31,7 +31,7 @@ Array [
 ]
 `;
 
-exports[`ModalService openConfirm() renders a mountpoint confirm message 2`] = `"<div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-guard=\\"true\\" tabindex=\\"1\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-lock-disabled=\\"false\\"><div class=\\"euiModal euiModal--maxWidth-default euiModal--confirmation\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiModal__closeIcon\\" type=\\"button\\" aria-label=\\"Closes this modal window\\"><div data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button><div class=\\"euiModal__flex\\"><div class=\\"euiModalBody\\"><div class=\\"euiModalBody__overflow\\"><div class=\\"euiText euiText--medium\\" data-test-subj=\\"confirmModalBodyText\\"><div class=\\"kbnOverlayMountWrapper\\"><span>Modal content</span></div></div></div></div><div class=\\"euiModalFooter\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" data-test-subj=\\"confirmModalCancelButton\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Cancel</span></span></button><button class=\\"euiButton euiButton--primary euiButton--fill\\" type=\\"button\\" data-test-subj=\\"confirmModalConfirmButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Confirm</span></span></button></div></div></div></div><div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div>"`;
+exports[`ModalService openConfirm() renders a mountpoint confirm message 2`] = `"<div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-guard=\\"true\\" tabindex=\\"1\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-lock-disabled=\\"false\\"><div class=\\"euiModal euiModal--maxWidth-default euiModal--confirmation\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiModal__closeIcon\\" type=\\"button\\" aria-label=\\"Closes this modal window\\"><div data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button><div class=\\"euiModal__flex\\"><div class=\\"euiModalBody\\"><div class=\\"euiModalBody__overflow\\"><div class=\\"euiText euiText--medium\\" data-test-subj=\\"confirmModalBodyText\\"><div class=\\"kbnOverlayMountWrapper\\"><span>Modal content</span></div></div></div></div><div class=\\"euiModalFooter\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" data-test-subj=\\"confirmModalCancelButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Cancel</span></span></button><button class=\\"euiButton euiButton--primary euiButton--fill\\" type=\\"button\\" data-test-subj=\\"confirmModalConfirmButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Confirm</span></span></button></div></div></div></div><div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div>"`;
 
 exports[`ModalService openConfirm() renders a string confirm message 1`] = `
 Array [
@@ -53,7 +53,7 @@ Array [
 ]
 `;
 
-exports[`ModalService openConfirm() renders a string confirm message 2`] = `"<div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-guard=\\"true\\" tabindex=\\"1\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-lock-disabled=\\"false\\"><div class=\\"euiModal euiModal--maxWidth-default euiModal--confirmation\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiModal__closeIcon\\" type=\\"button\\" aria-label=\\"Closes this modal window\\"><div data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button><div class=\\"euiModal__flex\\"><div class=\\"euiModalBody\\"><div class=\\"euiModalBody__overflow\\"><div class=\\"euiText euiText--medium\\" data-test-subj=\\"confirmModalBodyText\\"><p>Some message</p></div></div></div><div class=\\"euiModalFooter\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" data-test-subj=\\"confirmModalCancelButton\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Cancel</span></span></button><button class=\\"euiButton euiButton--primary euiButton--fill\\" type=\\"button\\" data-test-subj=\\"confirmModalConfirmButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Confirm</span></span></button></div></div></div></div><div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div>"`;
+exports[`ModalService openConfirm() renders a string confirm message 2`] = `"<div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-guard=\\"true\\" tabindex=\\"1\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div><div data-focus-lock-disabled=\\"false\\"><div class=\\"euiModal euiModal--maxWidth-default euiModal--confirmation\\" tabindex=\\"0\\"><button class=\\"euiButtonIcon euiButtonIcon--text euiModal__closeIcon\\" type=\\"button\\" aria-label=\\"Closes this modal window\\"><div data-euiicon-type=\\"cross\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button><div class=\\"euiModal__flex\\"><div class=\\"euiModalBody\\"><div class=\\"euiModalBody__overflow\\"><div class=\\"euiText euiText--medium\\" data-test-subj=\\"confirmModalBodyText\\"><p>Some message</p></div></div></div><div class=\\"euiModalFooter\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" data-test-subj=\\"confirmModalCancelButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Cancel</span></span></button><button class=\\"euiButton euiButton--primary euiButton--fill\\" type=\\"button\\" data-test-subj=\\"confirmModalConfirmButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Confirm</span></span></button></div></div></div></div><div data-focus-guard=\\"true\\" tabindex=\\"0\\" style=\\"width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;\\"></div>"`;
 
 exports[`ModalService openConfirm() with a currently active confirm replaces the current confirm with the new one 1`] = `
 Array [

src/plugins/advanced_settings/public/management_app/components/field/field.test.tsx

@@ -25,7 +25,6 @@ import { FieldSetting } from '../../types';
 import { UiSettingsType, StringValidation } from '../../../../../../core/public';
 import { notificationServiceMock, docLinksServiceMock } from '../../../../../../core/public/mocks';
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { Field, getEditableValue } from './field';
 

src/plugins/advanced_settings/public/management_app/components/form/form.test.tsx

@@ -21,7 +21,6 @@ import React from 'react';
 import { shallowWithI18nProvider, mountWithI18nProvider } from 'test_utils/enzyme_helpers';
 import { UiSettingsType } from '../../../../../../core/public';
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 import { notificationServiceMock } from '../../../../../../core/public/mocks';

src/plugins/advanced_settings/public/management_app/components/search/search.test.tsx

@@ -20,7 +20,6 @@
 import React from 'react';
 import { shallowWithI18nProvider, mountWithI18nProvider } from 'test_utils/enzyme_helpers';
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 import { Query } from '@elastic/eui';

src/plugins/dashboard/public/application/__snapshots__/dashboard_empty_screen.test.tsx.snap

@@ -671,35 +671,54 @@ exports[`DashboardEmptyScreen renders correctly with visualize paragraph 1`] = `
               iconType="plusInCircle"
               size="s"
             >
-              <button
+              <EuiButtonDisplay
                 aria-label="Create new visualization button"
-                className="euiButton euiButton--primary euiButton--small"
                 data-test-subj="addVisualizationButton"
+                element="button"
+                iconSide="left"
+                iconType="plusInCircle"
+                size="s"
                 type="button"
               >
-                <span
-                  className="euiButton__content"
+                <button
+                  aria-label="Create new visualization button"
+                  className="euiButton euiButton--primary euiButton--small"
+                  data-test-subj="addVisualizationButton"
+                  type="button"
                 >
-                  <EuiIcon
-                    aria-hidden="true"
-                    className="euiButton__icon"
-                    size="m"
-                    type="plusInCircle"
+                  <EuiButtonContent
+                    className="euiButton__content"
+                    iconSide="left"
+                    iconType="plusInCircle"
+                    textProps={
+                      Object {
+                        "className": "euiButton__text",
+                      }
+                    }
                   >
-                    <div
-                      aria-hidden="true"
-                      className="euiButton__icon"
-                      data-euiicon-type="plusInCircle"
-                      size="m"
-                    />
-                  </EuiIcon>
-                  <span
-                    className="euiButton__text"
-                  >
-                    Create new
-                  </span>
-                </span>
-              </button>
+                    <span
+                      className="euiButtonContent euiButton__content"
+                    >
+                      <EuiIcon
+                        className="euiButtonContent__icon"
+                        size="m"
+                        type="plusInCircle"
+                      >
+                        <div
+                          className="euiButtonContent__icon"
+                          data-euiicon-type="plusInCircle"
+                          size="m"
+                        />
+                      </EuiIcon>
+                      <span
+                        className="euiButton__text"
+                      >
+                        Create new
+                      </span>
+                    </span>
+                  </EuiButtonContent>
+                </button>
+              </EuiButtonDisplay>
             </EuiButton>
           </p>
         </div>

src/plugins/dashboard/public/application/dashboard_empty_screen.test.tsx

@@ -19,7 +19,6 @@
 import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { DashboardEmptyScreen, DashboardEmptyScreenProps } from './dashboard_empty_screen';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { coreMock } from '../../../../core/public/mocks';
 

src/plugins/dashboard/public/application/embeddable/viewport/dashboard_viewport.test.tsx

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import React from 'react';
 import { skip } from 'rxjs/operators';

src/plugins/dashboard/public/application/tests/dashboard_container.test.tsx

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import React from 'react';
 import { mount } from 'enzyme';

src/plugins/data/public/ui/shard_failure_modal/shard_failure_open_modal_button.test.tsx

@@ -22,7 +22,6 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ShardFailureOpenModalButton } from './shard_failure_open_modal_button';
 import { shardFailureRequest } from './__mocks__/shard_failure_request';
 import { shardFailureResponse } from './__mocks__/shard_failure_response';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('ShardFailureOpenModalButton', () => {

src/plugins/discover/public/application/angular/context/components/action_bar/action_bar.test.tsx

@@ -20,7 +20,6 @@
 import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ActionBar, ActionBarProps } from './action_bar';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { MAX_CONTEXT_SIZE, MIN_CONTEXT_SIZE } from '../../query_parameters/constants';
 

src/plugins/discover/public/application/angular/doc_table/components/pager/tool_bar_pager_buttons.test.tsx

@@ -20,7 +20,6 @@
 import React from 'react';
 import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';
 import { ToolBarPagerButtons } from './tool_bar_pager_buttons';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 test('it renders ToolBarPagerButtons', () => {

src/plugins/discover/public/application/angular/doc_table/components/table_header/table_header.test.tsx

@@ -20,7 +20,6 @@
 import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { TableHeader } from './table_header';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { SortOrder } from './helpers';
 import { IndexPattern, IFieldType } from '../../../../../kibana_services';

src/plugins/discover/public/application/components/context_error_message/context_error_message.test.tsx

@@ -22,7 +22,6 @@ import { ReactWrapper } from 'enzyme';
 import { ContextErrorMessage } from './context_error_message';
 // @ts-ignore
 import { FAILURE_REASONS, LOADING_STATUS } from '../../angular/context/query';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('loading spinner', function () {

src/plugins/discover/public/application/components/doc/doc.test.tsx

@@ -20,7 +20,6 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { Doc, DocProps } from './doc';
 

src/plugins/discover/public/application/components/doc_viewer/doc_viewer.test.tsx

@@ -19,7 +19,6 @@
 import React from 'react';
 import { mount, shallow } from 'enzyme';
 import { DocViewer } from './doc_viewer';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { getDocViewsRegistry } from '../../../kibana_services';
 import { DocViewRenderProps } from '../../doc_views/doc_views_types';

src/plugins/discover/public/application/components/hits_counter/hits_counter.test.tsx

@@ -20,7 +20,6 @@ import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { HitsCounter, HitsCounterProps } from './hits_counter';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('hits counter', function () {

src/plugins/discover/public/application/components/loading_spinner/loading_spinner.test.tsx

@@ -20,7 +20,6 @@ import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { LoadingSpinner } from './loading_spinner';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('loading spinner', function () {

src/plugins/discover/public/application/components/sidebar/discover_field.test.tsx

@@ -18,7 +18,6 @@
  */
 
 import React from 'react';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 // @ts-ignore
 import StubIndexPattern from 'test_utils/stub_index_pattern';

src/plugins/discover/public/application/components/sidebar/discover_field_search.test.tsx

@@ -19,7 +19,6 @@
 import React, { EventHandler, MouseEvent as ReactMouseEvent } from 'react';
 import { act } from 'react-dom/test-utils';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { DiscoverFieldSearch, Props } from './discover_field_search';
 import { EuiButtonGroupProps, EuiPopover } from '@elastic/eui';

src/plugins/discover/public/application/components/sidebar/discover_index_pattern.test.tsx

@@ -24,7 +24,7 @@ import { ShallowWrapper } from 'enzyme';
 import { ChangeIndexPattern } from './change_indexpattern';
 import { SavedObject } from 'kibana/server';
 import { DiscoverIndexPattern } from './discover_index_pattern';
-import { EuiSelectable, EuiSelectableList } from '@elastic/eui';
+import { EuiSelectable } from '@elastic/eui';
 import { IIndexPattern } from 'src/plugins/data/public';
 
 const indexPattern = {
@@ -57,7 +57,7 @@ function getIndexPatternPickerList(instance: ShallowWrapper) {
 }
 
 function getIndexPatternPickerOptions(instance: ShallowWrapper) {
-  return getIndexPatternPickerList(instance).dive().find(EuiSelectableList).prop('options');
+  return getIndexPatternPickerList(instance).prop('options');
 }
 
 function selectIndexPatternPickerOption(instance: ShallowWrapper, selectedLabel: string) {

src/plugins/discover/public/application/components/sidebar/discover_sidebar.test.tsx

@@ -19,7 +19,6 @@
 
 import _ from 'lodash';
 import { ReactWrapper } from 'enzyme';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 // @ts-ignore
 import StubIndexPattern from 'test_utils/stub_index_pattern';

src/plugins/discover/public/application/components/skip_bottom_button/skip_bottom_button.test.tsx

@@ -20,8 +20,6 @@ import React from 'react';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { SkipBottomButton, SkipBottomButtonProps } from './skip_bottom_button';
-// @ts-ignore
-import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('Skip to Bottom Button', function () {
   let props: SkipBottomButtonProps;

src/plugins/discover/public/application/components/table/table.test.tsx

@@ -18,7 +18,6 @@
  */
 import React from 'react';
 import { mount } from 'enzyme';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { DocViewTable } from './table';
 import { indexPatterns, IndexPattern } from '../../../../../data/public';

src/plugins/discover/public/application/components/timechart_header/timechart_header.test.tsx

@@ -21,7 +21,6 @@ import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { TimechartHeader, TimechartHeaderProps } from './timechart_header';
 import { EuiIconTip } from '@elastic/eui';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('timechart header', function () {

src/plugins/embeddable/public/lib/embeddables/embeddable_root.test.tsx

@@ -20,7 +20,6 @@ import React from 'react';
 import { HelloWorldEmbeddable } from '../../../../../../examples/embeddable_examples/public';
 import { EmbeddableRoot } from './embeddable_root';
 import { mount } from 'enzyme';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 test('EmbeddableRoot renders an embeddable', async () => {

src/plugins/embeddable/public/lib/panel/embeddable_panel.test.tsx

@@ -21,7 +21,6 @@ import React from 'react';
 import { mount } from 'enzyme';
 import { nextTick } from 'test_utils/enzyme_helpers';
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { I18nProvider } from '@kbn/i18n/react';
 import { CONTEXT_MENU_TRIGGER } from '../triggers';

src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/add_panel/add_panel_flyout.test.tsx

@@ -30,7 +30,6 @@ import { ContainerInput } from '../../../../containers';
 import { mountWithIntl as mount } from 'test_utils/enzyme_helpers';
 import { ReactWrapper } from 'enzyme';
 import { coreMock } from '../../../../../../../../core/public/mocks';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { embeddablePluginMock } from '../../../../../mocks';
 
@@ -125,7 +124,7 @@ test('selecting embeddable in "Create new ..." list calls createNewEmbeddable()'
       notifications={core.notifications}
       SavedObjectFinder={(props) => <DummySavedObjectFinder {...props} />}
     />
-  ) as ReactWrapper<unknown, unknown, AddPanelFlyout>;
+  ) as ReactWrapper<any, {}, AddPanelFlyout>;
 
   const spy = jest.fn();
   component.instance().createNewEmbeddable = spy;

src/plugins/embeddable/public/lib/panel/panel_header/panel_actions/customize_title/customize_panel_action.test.ts

@@ -18,8 +18,6 @@
  */
 
 import { Container, isErrorEmbeddable } from '../../../..';
-// @ts-ignore
-import { findTestSubject } from '@elastic/eui/lib/test';
 import { nextTick } from 'test_utils/enzyme_helpers';
 import { CustomizePanelTitleAction } from './customize_panel_action';
 import {

src/plugins/embeddable/public/tests/customize_panel_modal.test.tsx

@@ -17,7 +17,6 @@
  * under the License.
  */
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import * as React from 'react';
 import { Container, isErrorEmbeddable } from '../lib';

src/plugins/home/public/application/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap

@@ -245,22 +245,41 @@ exports[`bulkCreate should display error message when bulkCreate request fails 1
                       isLoading={false}
                       onClick={[Function]}
                     >
-                      <button
-                        className="euiButton euiButton--primary"
+                      <EuiButtonDisplay
                         data-test-subj="loadSavedObjects"
+                        element="button"
+                        isLoading={false}
                         onClick={[Function]}
                         type="button"
                       >
-                        <span
-                          className="euiButton__content"
+                        <button
+                          className="euiButton euiButton--primary"
+                          data-test-subj="loadSavedObjects"
+                          onClick={[Function]}
+                          type="button"
                         >
-                          <span
-                            className="euiButton__text"
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="left"
+                            isLoading={false}
+                            textProps={
+                              Object {
+                                "className": "euiButton__text",
+                              }
+                            }
                           >
-                            Load Kibana objects
-                          </span>
-                        </span>
-                      </button>
+                            <span
+                              className="euiButtonContent euiButton__content"
+                            >
+                              <span
+                                className="euiButton__text"
+                              >
+                                Load Kibana objects
+                              </span>
+                            </span>
+                          </EuiButtonContent>
+                        </button>
+                      </EuiButtonDisplay>
                     </EuiButton>
                   </div>
                 </EuiFlexItem>
@@ -565,22 +584,41 @@ exports[`bulkCreate should display success message when bulkCreate is successful
                       isLoading={false}
                       onClick={[Function]}
                     >
-                      <button
-                        className="euiButton euiButton--primary"
+                      <EuiButtonDisplay
                         data-test-subj="loadSavedObjects"
+                        element="button"
+                        isLoading={false}
                         onClick={[Function]}
                         type="button"
                       >
-                        <span
-                          className="euiButton__content"
+                        <button
+                          className="euiButton euiButton--primary"
+                          data-test-subj="loadSavedObjects"
+                          onClick={[Function]}
+                          type="button"
                         >
-                          <span
-                            className="euiButton__text"
+                          <EuiButtonContent
+                            className="euiButton__content"
+                            iconSide="left"
+                            isLoading={false}
+                            textProps={
+                              Object {
+                                "className": "euiButton__text",
+                              }
+                            }
                           >
-                            Load Kibana objects
-                          </span>
-                        </span>
-                      </button>
+                            <span
+                              className="euiButtonContent euiButton__content"
+                            >
+                              <span
+                                className="euiButton__text"
+                              >
+                                Load Kibana objects
+                              </span>
+                            </span>
+                          </EuiButtonContent>
+                        </button>
+                      </EuiButtonDisplay>
                     </EuiButton>
                   </div>
                 </EuiFlexItem>

src/plugins/index_pattern_management/public/components/edit_index_pattern/scripted_fields_table/components/header/__snapshots__/header.test.tsx.snap

@@ -33,7 +33,7 @@ exports[`Header should render normally 1`] = `
       type="button"
     >
       <span
-        class="euiButton__content"
+        class="euiButtonContent euiButton__content"
       >
         <span
           class="euiButton__text"

src/plugins/index_pattern_management/public/components/index_pattern_table/empty_state/empty_state.test.tsx

@@ -21,7 +21,6 @@ import React from 'react';
 import { EmptyState } from '../empty_state';
 import { shallow } from 'enzyme';
 import sinon from 'sinon';
-// @ts-expect-error
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 import { docLinksServiceMock } from '../../../../../../core/public/mocks';

src/plugins/input_control_vis/public/components/editor/controls_tab.test.tsx

@@ -19,7 +19,6 @@
 
 import React from 'react';
 import { shallowWithIntl, mountWithIntl } from 'test_utils/enzyme_helpers';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { getDepsMock, getIndexPatternMock } from '../../test_utils';
 import { ControlsTab, ControlsTabUiProps } from './controls_tab';

src/plugins/input_control_vis/public/components/editor/list_control_editor.test.tsx

@@ -21,7 +21,6 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 import { mountWithIntl, shallowWithIntl } from 'test_utils/enzyme_helpers';

src/plugins/input_control_vis/public/components/editor/range_control_editor.test.tsx

@@ -22,7 +22,6 @@ import { shallow } from 'enzyme';
 import { SinonSpy, spy, assert } from 'sinon';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
 
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 import { RangeControlEditor } from './range_control_editor';

src/plugins/input_control_vis/public/components/vis/input_control_vis.test.tsx

@@ -21,7 +21,6 @@ import React from 'react';
 import sinon from 'sinon';
 import { shallow } from 'enzyme';
 import { mountWithIntl } from 'test_utils/enzyme_helpers';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 import { InputControlVis } from './input_control_vis';

src/plugins/inspector/public/ui/__snapshots__/inspector_panel.test.tsx.snap

@@ -256,43 +256,52 @@ exports[`InspectorPanel should render as expected 1`] = `
                           size="s"
                         >
                           <button
-                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small euiButtonEmpty--iconRight"
+                            className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--small"
                             data-test-subj="inspectorViewChooser"
                             onClick={[Function]}
                             type="button"
                           >
-                            <span
+                            <EuiButtonContent
                               className="euiButtonEmpty__content"
+                              iconSide="right"
+                              iconType="arrowDown"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
                             >
-                              <EuiIcon
-                                aria-hidden="true"
-                                className="euiButtonEmpty__icon"
-                                size="m"
-                                type="arrowDown"
-                              >
-                                <div
-                                  aria-hidden="true"
-                                  className="euiButtonEmpty__icon"
-                                  data-euiicon-type="arrowDown"
-                                  size="m"
-                                />
-                              </EuiIcon>
                               <span
-                                className="euiButtonEmpty__text"
+                                className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                               >
-                                <FormattedMessage
-                                  defaultMessage="View: {viewName}"
-                                  id="inspector.view"
-                                  values={
-                                    Object {
-                                      "viewName": "View 1",
-                                    }
-                                  }
+                                <EuiIcon
+                                  className="euiButtonContent__icon"
+                                  size="m"
+                                  type="arrowDown"
                                 >
-                                  View: View 1
-                                </FormattedMessage>
+                                  <div
+                                    className="euiButtonContent__icon"
+                                    data-euiicon-type="arrowDown"
+                                    size="m"
+                                  />
+                                </EuiIcon>
+                                <span
+                                  className="euiButtonEmpty__text"
+                                >
+                                  <FormattedMessage
+                                    defaultMessage="View: {viewName}"
+                                    id="inspector.view"
+                                    values={
+                                      Object {
+                                        "viewName": "View 1",
+                                      }
+                                    }
+                                  >
+                                    View: View 1
+                                  </FormattedMessage>
+                                </span>
                               </span>
-                            </span>
+                            </EuiButtonContent>
                           </button>
                         </EuiButtonEmpty>
                       </div>

src/plugins/navigation/public/top_nav_menu/top_nav_menu_data.tsx

@@ -17,7 +17,7 @@
  * under the License.
  */
 
-import { ButtonIconSide } from '@elastic/eui';
+import { EuiButtonProps } from '@elastic/eui';
 
 export type TopNavMenuAction = (anchorElement: HTMLElement) => void;
 
@@ -32,7 +32,7 @@ export interface TopNavMenuData {
   tooltip?: string | (() => string | undefined);
   emphasize?: boolean;
   iconType?: string;
-  iconSide?: ButtonIconSide;
+  iconSide?: EuiButtonProps['iconSide'];
 }
 
 export interface RegisteredTopNavMenuData extends TopNavMenuData {

src/plugins/saved_objects_management/public/management_section/object_view/components/__snapshots__/header.test.tsx.snap

@@ -58,45 +58,63 @@ exports[`Intro component renders correctly 1`] = `
                     iconType="eye"
                     size="s"
                   >
-                    <a
-                      className="euiButton euiButton--primary euiButton--small"
+                    <EuiButtonDisplay
                       data-test-subj="savedObjectEditViewInApp"
+                      element="a"
                       href="/some-url"
+                      iconType="eye"
                       rel="noreferrer"
+                      size="s"
                     >
-                      <span
-                        className="euiButton__content"
+                      <a
+                        className="euiButton euiButton--primary euiButton--small"
+                        data-test-subj="savedObjectEditViewInApp"
+                        href="/some-url"
+                        rel="noreferrer"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButton__icon"
-                          size="m"
-                          type="eye"
-                        >
-                          <div
-                            aria-hidden="true"
-                            className="euiButton__icon"
-                            data-euiicon-type="eye"
-                            size="m"
-                          />
-                        </EuiIcon>
-                        <span
-                          className="euiButton__text"
-                        >
-                          <FormattedMessage
-                            defaultMessage="View {title}"
-                            id="savedObjectsManagement.view.viewItemButtonLabel"
-                            values={
-                              Object {
-                                "title": "search",
-                              }
+                        <EuiButtonContent
+                          className="euiButton__content"
+                          iconSide="left"
+                          iconType="eye"
+                          textProps={
+                            Object {
+                              "className": "euiButton__text",
                             }
+                          }
+                        >
+                          <span
+                            className="euiButtonContent euiButton__content"
                           >
-                            View search
-                          </FormattedMessage>
-                        </span>
-                      </span>
-                    </a>
+                            <EuiIcon
+                              className="euiButtonContent__icon"
+                              size="m"
+                              type="eye"
+                            >
+                              <div
+                                className="euiButtonContent__icon"
+                                data-euiicon-type="eye"
+                                size="m"
+                              />
+                            </EuiIcon>
+                            <span
+                              className="euiButton__text"
+                            >
+                              <FormattedMessage
+                                defaultMessage="View {title}"
+                                id="savedObjectsManagement.view.viewItemButtonLabel"
+                                values={
+                                  Object {
+                                    "title": "search",
+                                  }
+                                }
+                              >
+                                View search
+                              </FormattedMessage>
+                            </span>
+                          </span>
+                        </EuiButtonContent>
+                      </a>
+                    </EuiButtonDisplay>
                   </EuiButton>
                 </div>
               </EuiFlexItem>
@@ -113,45 +131,64 @@ exports[`Intro component renders correctly 1`] = `
                     onClick={[Function]}
                     size="s"
                   >
-                    <button
-                      className="euiButton euiButton--danger euiButton--small"
+                    <EuiButtonDisplay
+                      color="danger"
                       data-test-subj="savedObjectEditDelete"
+                      element="button"
+                      iconType="trash"
                       onClick={[Function]}
+                      size="s"
                       type="button"
                     >
-                      <span
-                        className="euiButton__content"
+                      <button
+                        className="euiButton euiButton--danger euiButton--small"
+                        data-test-subj="savedObjectEditDelete"
+                        onClick={[Function]}
+                        type="button"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButton__icon"
-                          size="m"
-                          type="trash"
-                        >
-                          <div
-                            aria-hidden="true"
-                            className="euiButton__icon"
-                            data-euiicon-type="trash"
-                            size="m"
-                          />
-                        </EuiIcon>
-                        <span
-                          className="euiButton__text"
-                        >
-                          <FormattedMessage
-                            defaultMessage="Delete {title}"
-                            id="savedObjectsManagement.view.deleteItemButtonLabel"
-                            values={
-                              Object {
-                                "title": "search",
-                              }
+                        <EuiButtonContent
+                          className="euiButton__content"
+                          iconSide="left"
+                          iconType="trash"
+                          textProps={
+                            Object {
+                              "className": "euiButton__text",
                             }
+                          }
+                        >
+                          <span
+                            className="euiButtonContent euiButton__content"
                           >
-                            Delete search
-                          </FormattedMessage>
-                        </span>
-                      </span>
-                    </button>
+                            <EuiIcon
+                              className="euiButtonContent__icon"
+                              size="m"
+                              type="trash"
+                            >
+                              <div
+                                className="euiButtonContent__icon"
+                                data-euiicon-type="trash"
+                                size="m"
+                              />
+                            </EuiIcon>
+                            <span
+                              className="euiButton__text"
+                            >
+                              <FormattedMessage
+                                defaultMessage="Delete {title}"
+                                id="savedObjectsManagement.view.deleteItemButtonLabel"
+                                values={
+                                  Object {
+                                    "title": "search",
+                                  }
+                                }
+                              >
+                                Delete search
+                              </FormattedMessage>
+                            </span>
+                          </span>
+                        </EuiButtonContent>
+                      </button>
+                    </EuiButtonDisplay>
                   </EuiButton>
                 </div>
               </EuiFlexItem>

src/plugins/saved_objects_management/public/management_section/objects_table/components/table.test.tsx

@@ -19,7 +19,6 @@
 
 import React from 'react';
 import { shallowWithI18nProvider, mountWithI18nProvider } from 'test_utils/enzyme_helpers';
-// @ts-expect-error
 import { findTestSubject } from '@elastic/eui/lib/test';
 import { keys } from '@elastic/eui';
 import { httpServiceMock } from '../../../../../../core/public/mocks';

src/plugins/vis_type_timeseries/public/application/components/color_picker.test.tsx

@@ -22,7 +22,6 @@ import { ColorPicker, ColorPickerProps } from './color_picker';
 import { mount } from 'enzyme';
 import { ReactWrapper } from 'enzyme';
 import { EuiColorPicker, EuiIconTip } from '@elastic/eui';
-// @ts-ignore
 import { findTestSubject } from '@elastic/eui/lib/test';
 
 describe('ColorPicker', () => {

src/plugins/vis_type_vislib/public/vislib/components/legend/__snapshots__/legend.test.tsx.snap

@@ -2,4 +2,4 @@
 
 exports[`VisLegend Component Legend closed should match the snapshot 1`] = `"<div class=\\"visLegend\\"><button type=\\"button\\" class=\\"visLegend__toggle kbn-resetFocusState\\" aria-label=\\"Toggle legend\\" aria-expanded=\\"false\\" aria-controls=\\"legendId\\" data-test-subj=\\"vislibToggleLegend\\" title=\\"Toggle legend\\"><div data-euiicon-type=\\"list\\" color=\\"text\\"></div></button></div>"`;
 
-exports[`VisLegend Component Legend open should match the snapshot 1`] = `"<div class=\\"visLegend\\"><button type=\\"button\\" class=\\"visLegend__toggle kbn-resetFocusState visLegend__toggle--isOpen\\" aria-label=\\"Toggle legend\\" aria-expanded=\\"true\\" aria-controls=\\"legendId\\" data-test-subj=\\"vislibToggleLegend\\" title=\\"Toggle legend\\"><div data-euiicon-type=\\"list\\" color=\\"text\\"></div></button><ul class=\\"visLegend__list\\" id=\\"legendId\\"><li class=\\"visLegend__value\\"><div class=\\"euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty--flushLeft visLegend__button\\" type=\\"button\\" data-label=\\"A\\" title=\\"A\\" aria-label=\\"A, toggle options\\" data-test-subj=\\"legend-A\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></div><span class=\\"visLegend__valueTitle\\">A</span></span></span></button></div></div></li><li class=\\"visLegend__value\\"><div class=\\"euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty--flushLeft visLegend__button\\" type=\\"button\\" data-label=\\"B\\" title=\\"B\\" aria-label=\\"B, toggle options\\" data-test-subj=\\"legend-B\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></div><span class=\\"visLegend__valueTitle\\">B</span></span></span></button></div></div></li></ul></div>"`;
+exports[`VisLegend Component Legend open should match the snapshot 1`] = `"<div class=\\"visLegend\\"><button type=\\"button\\" class=\\"visLegend__toggle kbn-resetFocusState visLegend__toggle--isOpen\\" aria-label=\\"Toggle legend\\" aria-expanded=\\"true\\" aria-controls=\\"legendId\\" data-test-subj=\\"vislibToggleLegend\\" title=\\"Toggle legend\\"><div data-euiicon-type=\\"list\\" color=\\"text\\"></div></button><ul class=\\"visLegend__list\\" id=\\"legendId\\"><li class=\\"visLegend__value\\"><div class=\\"euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty--flushLeft visLegend__button\\" type=\\"button\\" data-label=\\"A\\" title=\\"A\\" aria-label=\\"A, toggle options\\" data-test-subj=\\"legend-A\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></div><span class=\\"visLegend__valueTitle\\">A</span></span></span></button></div></div></li><li class=\\"visLegend__value\\"><div class=\\"euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty--flushLeft visLegend__button\\" type=\\"button\\" data-label=\\"B\\" title=\\"B\\" aria-label=\\"B, toggle options\\" data-test-subj=\\"legend-B\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div data-euiicon-type=\\"dot\\" color=\\"red\\" data-test-subj=\\"legendSelectedColor-red\\"></div><span class=\\"visLegend__valueTitle\\">B</span></span></span></button></div></div></li></ul></div>"`;

test/functional/apps/dashboard/dashboard_filter_bar.js

@@ -67,7 +67,7 @@ export default function ({ getService, getPageObjects }) {
 
       it('uses default index pattern on an empty dashboard', async () => {
         await testSubjects.click('addFilter');
-        await dashboardExpect.fieldSuggestions(['bytes']);
+        await dashboardExpect.fieldSuggestions(['agent']);
         await filterBar.ensureFieldEditorModalIsClosed();
       });
 

test/functional/apps/visualize/input_control_vis/chained_controls.js

@@ -39,7 +39,7 @@ export default function ({ getService, getPageObjects }) {
 
     it('should disable child control when parent control is not set', async () => {
       const parentControlMenu = await comboBox.getOptionsList('listControlSelect0');
-      expect(parentControlMenu.trim().split('\n').join()).to.equal('BD,BR,CN,ID,IN,JP,NG,PK,RU,US');
+      expect(parentControlMenu.trim().split('\n').join()).to.equal('BD,BR,CN,ID,IN,JP,NG,PK,RU');
 
       const childControlInput = await find.byCssSelector('[data-test-subj="inputControl1"] input');
       const isDisabled = await childControlInput.getAttribute('disabled');

test/functional/apps/visualize/input_control_vis/dynamic_options.js

@@ -34,13 +34,13 @@ export default function ({ getService, getPageObjects }) {
 
       it('should fetch new options when string field is filtered', async () => {
         const initialOptions = await comboBox.getOptionsList('listControlSelect0');
-        expect(initialOptions.trim().split('\n').join()).to.equal('BD,BR,CN,ID,IN,JP,NG,PK,RU,US');
+        expect(initialOptions.trim().split('\n').join()).to.equal('BD,BR,CN,ID,IN,JP,NG,PK,RU');
 
         await comboBox.filterOptionsList('listControlSelect0', 'R');
         await PageObjects.header.waitUntilLoadingHasFinished();
 
         const updatedOptions = await comboBox.getOptionsList('listControlSelect0');
-        expect(updatedOptions.trim().split('\n').join()).to.equal('AR,BR,FR,GR,IR,KR,RO,RU,RW,TR');
+        expect(updatedOptions.trim().split('\n').join()).to.equal('AR,BR,FR,GR,IR,KR,RO,RU,RW');
       });
 
       it('should not fetch new options when non-string is filtered', async () => {
@@ -74,13 +74,13 @@ export default function ({ getService, getPageObjects }) {
 
       it('should fetch new options when string field is filtered', async () => {
         const initialOptions = await comboBox.getOptionsList('listControlSelect1');
-        expect(initialOptions.trim().split('\n').join()).to.equal('BD,BR,CN,ID,IN,JP,MX,NG,PK,US');
+        expect(initialOptions.trim().split('\n').join()).to.equal('BD,BR,CN,ID,IN,JP,MX,NG,PK');
 
         await comboBox.filterOptionsList('listControlSelect1', 'R');
         await PageObjects.header.waitUntilLoadingHasFinished();
 
         const updatedOptions = await comboBox.getOptionsList('listControlSelect1');
-        expect(updatedOptions.trim().split('\n').join()).to.equal('AR,BR,FR,GR,IR,KR,RO,RS,RU,TR');
+        expect(updatedOptions.trim().split('\n').join()).to.equal('AR,BR,FR,GR,IR,KR,RO,RS,RU');
       });
     });
   });

test/functional/page_objects/discover_page.ts

@@ -332,6 +332,7 @@ export function DiscoverPageProvider({ getService, getPageObjects }: FtrProvider
 
     public async selectIndexPattern(indexPattern: string) {
       await testSubjects.click('indexPattern-switch-link');
+      await find.setValue('[data-test-subj="indexPattern-switcher"] input', indexPattern);
       await find.clickByCssSelector(
         `[data-test-subj="indexPattern-switcher"] [title="${indexPattern}"]`
       );

test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json

@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "26.3.1",
+    "@elastic/eui": "27.4.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   },

test/plugin_functional/plugins/kbn_sample_panel_action/package.json

@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "26.3.1",
+    "@elastic/eui": "27.4.0",
     "react": "^16.12.0"
   },
   "scripts": {

test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json

@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "26.3.1",
+    "@elastic/eui": "27.4.0",
     "react": "^16.12.0"
   },
   "scripts": {

x-pack/package.json

@@ -205,7 +205,7 @@
     "@elastic/apm-rum-react": "^1.2.2",
     "@elastic/datemath": "5.0.3",
     "@elastic/ems-client": "7.9.3",
-    "@elastic/eui": "26.3.1",
+    "@elastic/eui": "27.4.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/maki": "6.3.0",
     "@elastic/node-crypto": "1.2.1",

x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.tsx.snap

@@ -104,16 +104,15 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
                     className="euiPopover__anchor"
                   >
                     <button
-                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiButtonEmpty--flushRight"
+                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
                       onClick={[Function]}
                       type="button"
                     >
                       <span
-                        className="euiButtonEmpty__content"
+                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                       >
                         <div
-                          aria-hidden="true"
-                          className="euiButtonEmpty__icon"
+                          className="euiButtonContent__icon"
                           data-euiicon-type="arrowDown"
                           size="m"
                         />
@@ -521,16 +520,15 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                     className="euiPopover__anchor"
                   >
                     <button
-                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiButtonEmpty--flushRight"
+                      className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
                       onClick={[Function]}
                       type="button"
                     >
                       <span
-                        className="euiButtonEmpty__content"
+                        className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                       >
                         <div
-                          aria-hidden="true"
-                          className="euiButtonEmpty__icon"
+                          className="euiButtonContent__icon"
                           data-euiicon-type="arrowDown"
                           size="m"
                         />
@@ -1727,14 +1725,14 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
                     aria-controls="generated-id"
                     aria-current={true}
                     aria-label="Page 1 of 1"
-                    className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+                    className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
                     data-test-subj="pagination-button-0"
                     disabled={true}
                     onClick={[Function]}
                     type="button"
                   >
                     <span
-                      className="euiButtonEmpty__content"
+                      className="euiButtonContent euiButtonEmpty__content"
                     >
                       <span
                         className="euiButtonEmpty__text"

x-pack/plugins/apm/public/components/app/ServiceOverview/__test__/__snapshots__/ServiceOverview.test.tsx.snap

@@ -104,11 +104,10 @@ NodeList [
                 type="button"
               >
                 <span
-                  class="euiButton__content"
+                  class="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    class="euiButton__icon"
+                    class="euiButtonContent__icon"
                     data-euiicon-type="help"
                   />
                   <span

x-pack/plugins/apm/public/components/shared/TransactionActionMenu/__test__/__snapshots__/TransactionActionMenu.test.tsx.snap

@@ -1,7 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TransactionActionMenu component should match the snapshot 1`] = `
-<div>
+<div
+  aria-hidden="true"
+  data-aria-hidden="true"
+>
   <div
     class="euiPopover euiPopover--anchorDownRight"
     id="transactionActionMenu"
@@ -10,15 +13,14 @@ exports[`TransactionActionMenu component should match the snapshot 1`] = `
       class="euiPopover__anchor"
     >
       <button
-        class="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--iconRight"
+        class="euiButtonEmpty euiButtonEmpty--primary"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content"
+          class="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
         >
           <div
-            aria-hidden="true"
-            class="euiButtonEmpty__icon"
+            class="euiButtonContent__icon"
             data-euiicon-type="arrowDown"
           />
           <span

x-pack/plugins/canvas/canvas_plugin_src/renderers/filters/time_filter/components/__stories__/__snapshots__/time_filter.stories.storyshot

@@ -34,18 +34,16 @@ exports[`Storyshots renderers/TimeFilter default 1`] = `
             >
               <button
                 aria-label="Date quick select"
-                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
+                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
                 data-test-subj="superDatePickerToggleQuickMenuButton"
-                disabled={false}
                 onClick={[Function]}
                 type="button"
               >
                 <span
-                  className="euiButtonEmpty__content"
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButtonEmpty__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="arrowDown"
                     size="m"
                   />
@@ -122,18 +120,16 @@ exports[`Storyshots renderers/TimeFilter with absolute time bounds 1`] = `
             >
               <button
                 aria-label="Date quick select"
-                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
+                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
                 data-test-subj="superDatePickerToggleQuickMenuButton"
-                disabled={false}
                 onClick={[Function]}
                 type="button"
               >
                 <span
-                  className="euiButtonEmpty__content"
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButtonEmpty__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="arrowDown"
                     size="m"
                   />
@@ -250,18 +246,16 @@ exports[`Storyshots renderers/TimeFilter with commonlyUsedRanges 1`] = `
             >
               <button
                 aria-label="Date quick select"
-                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
+                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
                 data-test-subj="superDatePickerToggleQuickMenuButton"
-                disabled={false}
                 onClick={[Function]}
                 type="button"
               >
                 <span
-                  className="euiButtonEmpty__content"
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButtonEmpty__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="arrowDown"
                     size="m"
                   />
@@ -338,18 +332,16 @@ exports[`Storyshots renderers/TimeFilter with dateFormat 1`] = `
             >
               <button
                 aria-label="Date quick select"
-                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
+                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
                 data-test-subj="superDatePickerToggleQuickMenuButton"
-                disabled={false}
                 onClick={[Function]}
                 type="button"
               >
                 <span
-                  className="euiButtonEmpty__content"
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButtonEmpty__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="arrowDown"
                     size="m"
                   />
@@ -426,18 +418,16 @@ exports[`Storyshots renderers/TimeFilter with relative time bounds 1`] = `
             >
               <button
                 aria-label="Date quick select"
-                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiFormControlLayout__prepend"
+                className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__prepend"
                 data-test-subj="superDatePickerToggleQuickMenuButton"
-                disabled={false}
                 onClick={[Function]}
                 type="button"
               >
                 <span
-                  className="euiButtonEmpty__content"
+                  className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButtonEmpty__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="arrowDown"
                     size="m"
                   />

x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot

@@ -36,6 +36,11 @@ Array [
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiModal canvasAssetManager canvasModal--fixedSize"
@@ -175,6 +180,7 @@ Array [
               className="euiFlexItem"
             >
               <progress
+                aria-hidden={false}
                 aria-labelledby="CanvasAssetManagerLabel"
                 className="euiProgress euiProgress--native euiProgress--s euiProgress--secondary"
                 max={25000}
@@ -198,7 +204,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <span
                 className="euiButton__text"
@@ -265,6 +271,11 @@ Array [
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiModal canvasAssetManager canvasModal--fixedSize"
@@ -714,6 +725,7 @@ Array [
               className="euiFlexItem"
             >
               <progress
+                aria-hidden={false}
                 aria-labelledby="CanvasAssetManagerLabel"
                 className="euiProgress euiProgress--native euiProgress--s euiProgress--secondary"
                 max={25000}
@@ -737,7 +749,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <span
                 className="euiButton__text"

x-pack/plugins/canvas/public/components/custom_element_modal/__stories__/__snapshots__/custom_element_modal.stories.storyshot

@@ -36,6 +36,11 @@ Array [
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiModal canvasCustomElementModal"
@@ -244,7 +249,7 @@ Array [
                   className="euiSpacer euiSpacer--s"
                 />
                 <div
-                  className="euiCard euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
+                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
                   onClick={[Function]}
                 >
                   <div
@@ -297,7 +302,7 @@ Array [
                 type="button"
               >
                 <span
-                  className="euiButtonEmpty__content"
+                  className="euiButtonContent euiButtonEmpty__content"
                 >
                   <span
                     className="euiButtonEmpty__text"
@@ -317,7 +322,7 @@ Array [
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <span
                     className="euiButton__text"
@@ -386,6 +391,11 @@ Array [
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiModal canvasCustomElementModal"
@@ -594,7 +604,7 @@ Array [
                   className="euiSpacer euiSpacer--s"
                 />
                 <div
-                  className="euiCard euiCard--leftAligned canvasElementCard"
+                  className="euiCard euiCard--paddingMedium euiCard--leftAligned canvasElementCard"
                   onClick={[Function]}
                 >
                   <div
@@ -650,7 +660,7 @@ Array [
                 type="button"
               >
                 <span
-                  className="euiButtonEmpty__content"
+                  className="euiButtonContent euiButtonEmpty__content"
                 >
                   <span
                     className="euiButtonEmpty__text"
@@ -670,7 +680,7 @@ Array [
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <span
                     className="euiButton__text"
@@ -739,6 +749,11 @@ Array [
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiModal canvasCustomElementModal"
@@ -948,7 +963,7 @@ Array [
                   className="euiSpacer euiSpacer--s"
                 />
                 <div
-                  className="euiCard euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
+                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
                   onClick={[Function]}
                 >
                   <div
@@ -1001,7 +1016,7 @@ Array [
                 type="button"
               >
                 <span
-                  className="euiButtonEmpty__content"
+                  className="euiButtonContent euiButtonEmpty__content"
                 >
                   <span
                     className="euiButtonEmpty__text"
@@ -1021,7 +1036,7 @@ Array [
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <span
                     className="euiButton__text"
@@ -1090,6 +1105,11 @@ Array [
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiModal canvasCustomElementModal"
@@ -1297,7 +1317,7 @@ Array [
                   className="euiSpacer euiSpacer--s"
                 />
                 <div
-                  className="euiCard euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
+                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
                   onClick={[Function]}
                 >
                   <div
@@ -1350,7 +1370,7 @@ Array [
                 type="button"
               >
                 <span
-                  className="euiButtonEmpty__content"
+                  className="euiButtonContent euiButtonEmpty__content"
                 >
                   <span
                     className="euiButtonEmpty__text"
@@ -1370,7 +1390,7 @@ Array [
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <span
                     className="euiButton__text"

x-pack/plugins/canvas/public/components/element_card/__stories__/__snapshots__/element_card.stories.storyshot

@@ -9,7 +9,7 @@ exports[`Storyshots components/Elements/ElementCard with click handler 1`] = `
   }
 >
   <div
-    className="euiCard euiCard--leftAligned euiCard--isClickable euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
+    className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
     onClick={[Function]}
   >
     <div
@@ -61,7 +61,7 @@ exports[`Storyshots components/Elements/ElementCard with image 1`] = `
   }
 >
   <div
-    className="euiCard euiCard--leftAligned canvasElementCard"
+    className="euiCard euiCard--paddingMedium euiCard--leftAligned canvasElementCard"
     onClick={[Function]}
   >
     <div
@@ -110,7 +110,7 @@ exports[`Storyshots components/Elements/ElementCard with tags 1`] = `
   }
 >
   <div
-    className="euiCard euiCard--leftAligned euiCard--isClickable euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
+    className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
     onClick={[Function]}
   >
     <div
@@ -277,7 +277,7 @@ exports[`Storyshots components/Elements/ElementCard with title and description 1
   }
 >
   <div
-    className="euiCard euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
+    className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--hasIcon canvasElementCard canvasElementCard--hasIcon"
     onClick={[Function]}
   >
     <div

x-pack/plugins/canvas/public/components/keyboard_shortcuts_doc/__stories__/__snapshots__/keyboard_shortcuts_doc.stories.storyshot

@@ -41,6 +41,11 @@ exports[`Storyshots components/KeyboardShortcutsDoc default 1`] = `
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiFlyout euiFlyout--small"

x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/element_grid.stories.storyshot

@@ -15,7 +15,7 @@ exports[`Storyshots components/SavedElementsModal/ElementGrid default 1`] = `
       className="euiFlexItem canvasElementCard__wrapper"
     >
       <div
-        className="euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
+        className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
         onClick={[Function]}
       >
         <div
@@ -121,7 +121,7 @@ exports[`Storyshots components/SavedElementsModal/ElementGrid default 1`] = `
       className="euiFlexItem canvasElementCard__wrapper"
     >
       <div
-        className="euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
+        className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
         onClick={[Function]}
       >
         <div
@@ -227,7 +227,7 @@ exports[`Storyshots components/SavedElementsModal/ElementGrid default 1`] = `
       className="euiFlexItem canvasElementCard__wrapper"
     >
       <div
-        className="euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
+        className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
         onClick={[Function]}
       >
         <div

x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot

@@ -36,6 +36,11 @@ Array [
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiModal canvasModal--fixedSize"
@@ -158,7 +163,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <span
                 className="euiButton__text"
@@ -225,6 +230,11 @@ Array [
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiModal canvasModal--fixedSize"
@@ -311,7 +321,7 @@ Array [
                 className="euiFlexItem canvasElementCard__wrapper"
               >
                 <div
-                  className="euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
+                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
                   onClick={[Function]}
                 >
                   <div
@@ -417,7 +427,7 @@ Array [
                 className="euiFlexItem canvasElementCard__wrapper"
               >
                 <div
-                  className="euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
+                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
                   onClick={[Function]}
                 >
                   <div
@@ -523,7 +533,7 @@ Array [
                 className="euiFlexItem canvasElementCard__wrapper"
               >
                 <div
-                  className="euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
+                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
                   onClick={[Function]}
                 >
                   <div
@@ -638,7 +648,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <span
                 className="euiButton__text"
@@ -705,6 +715,11 @@ Array [
     data-focus-lock-disabled={false}
     onBlur={[Function]}
     onFocus={[Function]}
+    onMouseDown={[Function]}
+    onScrollCapture={[Function]}
+    onTouchMoveCapture={[Function]}
+    onTouchStart={[Function]}
+    onWheelCapture={[Function]}
   >
     <div
       className="euiModal canvasModal--fixedSize"
@@ -806,7 +821,7 @@ Array [
                 className="euiFlexItem canvasElementCard__wrapper"
               >
                 <div
-                  className="euiCard euiCard--leftAligned euiCard--isClickable canvasElementCard"
+                  className="euiCard euiCard--paddingMedium euiCard--leftAligned euiCard--isClickable canvasElementCard"
                   onClick={[Function]}
                 >
                   <div
@@ -921,7 +936,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <span
                 className="euiButton__text"

x-pack/plugins/canvas/public/components/text_style_picker/__stories__/__snapshots__/text_style_picker.stories.storyshot

@@ -281,11 +281,10 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorBold"
                     size="m"
                   />
@@ -315,11 +314,10 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorItalic"
                     size="m"
                   />
@@ -349,11 +347,10 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorUnderline"
                     size="m"
                   />
@@ -395,11 +392,10 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorAlignLeft"
                     size="m"
                   />
@@ -429,11 +425,10 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorAlignCenter"
                     size="m"
                   />
@@ -463,11 +458,10 @@ exports[`Storyshots components/TextStylePicker default 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorAlignRight"
                     size="m"
                   />
@@ -768,11 +762,10 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorBold"
                     size="m"
                   />
@@ -802,11 +795,10 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorItalic"
                     size="m"
                   />
@@ -836,11 +828,10 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorUnderline"
                     size="m"
                   />
@@ -882,11 +873,10 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorAlignLeft"
                     size="m"
                   />
@@ -916,11 +906,10 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorAlignCenter"
                     size="m"
                   />
@@ -950,11 +939,10 @@ exports[`Storyshots components/TextStylePicker interactive 1`] = `
                 type="button"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <div
-                    aria-hidden="true"
-                    className="euiButton__icon"
+                    className="euiButtonContent__icon"
                     data-euiicon-type="editorAlignRight"
                     size="m"
                   />

x-pack/plugins/canvas/public/components/toolbar/__stories__/__snapshots__/toolbar.stories.storyshot

@@ -19,11 +19,10 @@ exports[`Storyshots components/Toolbar element selected 1`] = `
           type="button"
         >
           <span
-            className="euiButtonEmpty__content"
+            className="euiButtonContent euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
-              className="euiButtonEmpty__icon"
+              className="euiButtonContent__icon"
               data-euiicon-type="grid"
               size="m"
             />
@@ -65,7 +64,7 @@ exports[`Storyshots components/Toolbar element selected 1`] = `
           type="button"
         >
           <span
-            className="euiButtonEmpty__content"
+            className="euiButtonContent euiButtonEmpty__content"
           >
             <span
               className="euiButtonEmpty__text"
@@ -106,11 +105,10 @@ exports[`Storyshots components/Toolbar element selected 1`] = `
           type="button"
         >
           <span
-            className="euiButtonEmpty__content"
+            className="euiButtonContent euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
-              className="euiButtonEmpty__icon"
+              className="euiButtonContent__icon"
               data-euiicon-type="editorCodeBlock"
               size="m"
             />
@@ -146,11 +144,10 @@ exports[`Storyshots components/Toolbar no element selected 1`] = `
           type="button"
         >
           <span
-            className="euiButtonEmpty__content"
+            className="euiButtonContent euiButtonEmpty__content"
           >
             <div
-              aria-hidden="true"
-              className="euiButtonEmpty__icon"
+              className="euiButtonContent__icon"
               data-euiicon-type="grid"
               size="m"
             />
@@ -192,7 +189,7 @@ exports[`Storyshots components/Toolbar no element selected 1`] = `
           type="button"
         >
           <span
-            className="euiButtonEmpty__content"
+            className="euiButtonContent euiButtonEmpty__content"
           >
             <span
               className="euiButtonEmpty__text"

x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/delete_var.stories.storyshot

@@ -67,11 +67,10 @@ Array [
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <div
-                aria-hidden="true"
-                className="euiButton__icon"
+                className="euiButtonContent__icon"
                 data-euiicon-type="trash"
                 size="m"
               />
@@ -92,7 +91,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButtonEmpty__content"
+              className="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 className="euiButtonEmpty__text"

x-pack/plugins/canvas/public/components/var_config/__stories__/__snapshots__/edit_var.stories.storyshot

@@ -253,7 +253,7 @@ Array [
                   type="button"
                 >
                   <span
-                    className="euiButton__content"
+                    className="euiButtonContent euiButton__content"
                   >
                     <span
                       className="euiButton__text"
@@ -282,7 +282,7 @@ Array [
                   type="button"
                 >
                   <span
-                    className="euiButton__content"
+                    className="euiButtonContent euiButton__content"
                   >
                     <span
                       className="euiButton__text"
@@ -312,11 +312,10 @@ Array [
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <div
-                aria-hidden="true"
-                className="euiButton__icon"
+                className="euiButtonContent__icon"
                 data-euiicon-type="save"
                 size="m"
               />
@@ -337,7 +336,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButtonEmpty__content"
+              className="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 className="euiButtonEmpty__text"
@@ -614,11 +613,10 @@ Array [
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <div
-                aria-hidden="true"
-                className="euiButton__icon"
+                className="euiButtonContent__icon"
                 data-euiicon-type="save"
                 size="m"
               />
@@ -639,7 +637,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButtonEmpty__content"
+              className="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 className="euiButtonEmpty__text"
@@ -916,11 +914,10 @@ Array [
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <div
-                aria-hidden="true"
-                className="euiButton__icon"
+                className="euiButtonContent__icon"
                 data-euiicon-type="save"
                 size="m"
               />
@@ -941,7 +938,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButtonEmpty__content"
+              className="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 className="euiButtonEmpty__text"
@@ -1188,17 +1185,16 @@ Array [
           className="euiFlexItem euiFlexItem--flexGrowZero"
         >
           <button
-            className="euiButton euiButton--secondary euiButton--small euiButton--fill"
+            className="euiButton euiButton--secondary euiButton--small euiButton--fill euiButton-isDisabled"
             disabled={true}
             onClick={[Function]}
             type="button"
           >
             <span
-              className="euiButton__content"
+              className="euiButtonContent euiButton__content"
             >
               <div
-                aria-hidden="true"
-                className="euiButton__icon"
+                className="euiButtonContent__icon"
                 data-euiicon-type="save"
                 size="m"
               />
@@ -1219,7 +1215,7 @@ Array [
             type="button"
           >
             <span
-              className="euiButtonEmpty__content"
+              className="euiButtonContent euiButtonEmpty__content"
             >
               <span
                 className="euiButtonEmpty__text"

x-pack/plugins/canvas/public/components/workpad_header/edit_menu/__stories__/__snapshots__/edit_menu.stories.storyshot

@@ -21,7 +21,7 @@ exports[`Storyshots components/WorkpadHeader/EditMenu 2 elements selected 1`] =
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"
@@ -55,7 +55,7 @@ exports[`Storyshots components/WorkpadHeader/EditMenu 3+ elements selected 1`] =
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"
@@ -89,7 +89,7 @@ exports[`Storyshots components/WorkpadHeader/EditMenu clipboard data exists 1`]
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"
@@ -123,7 +123,7 @@ exports[`Storyshots components/WorkpadHeader/EditMenu default 1`] = `
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"
@@ -157,7 +157,7 @@ exports[`Storyshots components/WorkpadHeader/EditMenu single element selected 1`
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"
@@ -191,7 +191,7 @@ exports[`Storyshots components/WorkpadHeader/EditMenu single grouped element sel
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"

x-pack/plugins/canvas/public/components/workpad_header/element_menu/__stories__/__snapshots__/element_menu.stories.storyshot

@@ -21,11 +21,10 @@ exports[`Storyshots components/WorkpadHeader/ElementMenu default 1`] = `
       type="button"
     >
       <span
-        className="euiButton__content"
+        className="euiButtonContent euiButton__content"
       >
         <div
-          aria-hidden="true"
-          className="euiButton__icon"
+          className="euiButtonContent__icon"
           data-euiicon-type="plusInCircle"
           size="m"
         />

x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/pdf_panel.stories.storyshot

@@ -28,7 +28,7 @@ exports[`Storyshots components/WorkpadHeader/ShareMenu/PDFPanel default 1`] = `
       type="button"
     >
       <span
-        className="euiButton__content"
+        className="euiButtonContent euiButton__content"
       >
         <span
           className="euiButton__text"
@@ -68,11 +68,10 @@ exports[`Storyshots components/WorkpadHeader/ShareMenu/PDFPanel default 1`] = `
         type="button"
       >
         <span
-          className="euiButton__content"
+          className="euiButtonContent euiButton__content"
         >
           <div
-            aria-hidden="true"
-            className="euiButton__icon"
+            className="euiButtonContent__icon"
             data-euiicon-type="copy"
             size="m"
           />

x-pack/plugins/canvas/public/components/workpad_header/share_menu/__stories__/__snapshots__/share_menu.stories.storyshot

@@ -21,7 +21,7 @@ exports[`Storyshots components/WorkpadHeader/ShareMenu default 1`] = `
         type="button"
       >
         <span
-          className="euiButtonEmpty__content"
+          className="euiButtonContent euiButtonEmpty__content"
         >
           <span
             className="euiButtonEmpty__text"

x-pack/plugins/canvas/public/components/workpad_header/view_menu/__stories__/__snapshots__/view_menu.stories.storyshot

@@ -20,7 +20,7 @@ exports[`Storyshots components/WorkpadHeader/ViewMenu edit mode 1`] = `
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"
@@ -53,7 +53,7 @@ exports[`Storyshots components/WorkpadHeader/ViewMenu read only mode 1`] = `
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"
@@ -86,7 +86,7 @@ exports[`Storyshots components/WorkpadHeader/ViewMenu with autoplay enabled 1`]
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"
@@ -119,7 +119,7 @@ exports[`Storyshots components/WorkpadHeader/ViewMenu with refresh enabled 1`] =
       type="button"
     >
       <span
-        className="euiButtonEmpty__content"
+        className="euiButtonContent euiButtonEmpty__content"
       >
         <span
           className="euiButtonEmpty__text"

x-pack/plugins/canvas/public/components/workpad_templates/examples/__snapshots__/workpad_templates.stories.storyshot

@@ -63,16 +63,15 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
             className="euiPopover__anchor"
           >
             <button
-              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--iconRight euiFilterButton euiFilterButton--hasIcon"
+              className="euiButtonEmpty euiButtonEmpty--text euiFilterButton euiFilterButton--hasIcon"
               onClick={[Function]}
               type="button"
             >
               <span
-                className="euiButtonEmpty__content"
+                className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
               >
                 <div
-                  aria-hidden="true"
-                  className="euiButtonEmpty__icon"
+                  className="euiButtonContent__icon"
                   data-euiicon-type="arrowDown"
                   size="m"
                 />
@@ -128,16 +127,15 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
                   className="euiPopover__anchor"
                 >
                   <button
-                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--iconRight euiButtonEmpty--flushRight"
+                    className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiButtonEmpty--flushRight"
                     onClick={[Function]}
                     type="button"
                   >
                     <span
-                      className="euiButtonEmpty__content"
+                      className="euiButtonContent euiButtonContent--iconRight euiButtonEmpty__content"
                     >
                       <div
-                        aria-hidden="true"
-                        className="euiButtonEmpty__icon"
+                        className="euiButtonContent__icon"
                         data-euiicon-type="arrowDown"
                         size="m"
                       />
@@ -281,7 +279,7 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
                   type="button"
                 >
                   <span
-                    className="euiButtonEmpty__content"
+                    className="euiButtonContent euiButtonEmpty__content"
                   >
                     <span
                       className="euiButtonEmpty__text"
@@ -402,7 +400,7 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
                   type="button"
                 >
                   <span
-                    className="euiButtonEmpty__content"
+                    className="euiButtonContent euiButtonEmpty__content"
                   >
                     <span
                       className="euiButtonEmpty__text"
@@ -537,14 +535,14 @@ exports[`Storyshots components/WorkpadTemplates default 1`] = `
             <button
               aria-current={true}
               aria-label="Page 1 of 1"
-              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
+              className="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall euiButtonEmpty-isDisabled euiPaginationButton euiPaginationButton-isActive euiPaginationButton--hideOnMobile"
               data-test-subj="pagination-button-0"
               disabled={true}
               onClick={[Function]}
               type="button"
             >
               <span
-                className="euiButtonEmpty__content"
+                className="euiButtonContent euiButtonEmpty__content"
               >
                 <span
                   className="euiButtonEmpty__text"

x-pack/plugins/canvas/shareable_runtime/api/__tests__/__snapshots__/shareable.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with default propertie
 </style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
 `;
 
 exports[`Canvas Shareable Workpad API Placed successfully with height specified 1`] = `"<div kbn-canvas-shareable=\\"canvas\\" kbn-canvas-height=\\"350\\" kbn-canvas-url=\\"workpad.json\\"></div>"`;
@@ -21,7 +21,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with height specified
 </style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
 `;
 
 exports[`Canvas Shareable Workpad API Placed successfully with page specified 1`] = `"<div kbn-canvas-shareable=\\"canvas\\" kbn-canvas-page=\\"0\\" kbn-canvas-url=\\"workpad.json\\"></div>"`;
@@ -33,7 +33,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with page specified 2`
 </style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
 `;
 
 exports[`Canvas Shareable Workpad API Placed successfully with width and height specified 1`] = `"<div kbn-canvas-shareable=\\"canvas\\" kbn-canvas-width=\\"350\\" kbn-canvas-height=\\"350\\" kbn-canvas-url=\\"workpad.json\\"></div>"`;
@@ -45,7 +45,7 @@ exports[`Canvas Shareable Workpad API Placed successfully with width and height
 </style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
 `;
 
 exports[`Canvas Shareable Workpad API Placed successfully with width specified 1`] = `"<div kbn-canvas-shareable=\\"canvas\\" kbn-canvas-width=\\"400\\" kbn-canvas-url=\\"workpad.json\\"></div>"`;
@@ -57,5 +57,5 @@ exports[`Canvas Shareable Workpad API Placed successfully with width specified 2
 </style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div></div>"
 `;

x-pack/plugins/canvas/shareable_runtime/components/__stories__/__snapshots__/canvas.stories.storyshot

@@ -1398,7 +1398,7 @@ exports[`Storyshots shareables/Canvas component 1`] = `
                     type="button"
                   >
                     <span
-                      className="euiButtonEmpty__content"
+                      className="euiButtonContent euiButtonEmpty__content"
                     >
                       <span
                         className="euiButtonEmpty__text"
@@ -2880,7 +2880,7 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
                     type="button"
                   >
                     <span
-                      className="euiButtonEmpty__content"
+                      className="euiButtonContent euiButtonEmpty__content"
                     >
                       <span
                         className="euiButtonEmpty__text"
@@ -3178,7 +3178,7 @@ exports[`Storyshots shareables/Canvas contextual: hello 1`] = `
                     type="button"
                   >
                     <span
-                      className="euiButtonEmpty__content"
+                      className="euiButtonContent euiButtonEmpty__content"
                     >
                       <span
                         className="euiButtonEmpty__text"

x-pack/plugins/canvas/shareable_runtime/components/__tests__/__snapshots__/app.test.tsx.snap

@@ -7,5 +7,5 @@ exports[`<App /> App renders properly 1`] = `
 </style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div><div class=\\"root\\" style=\\"height: 48px;\\"><div class=\\"root\\"><div class=\\"slideContainer\\"><div class=\\"root\\" style=\\"height: 100px; width: 150px;\\"><div class=\\"preview\\" style=\\"height: 720px; width: 1080px; transform: scale3d(0.1388888888888889, 0.1388888888888889, 1);\\"><div id=\\"page-7186b301-f8a7-4c65-8b89-38d68d31cfc4\\" class=\\"root\\" style=\\"height: 720px; width: 1080px; background: rgb(119, 119, 119);\\"><div class=\\"canvasPositionable canvasInteractable\\" style=\\"width: 1082px; height: 205.37748344370857px; margin-left: -541px; margin-top: -102.68874172185429px; position: absolute; transform: matrix3d(1,0,0,0,0,1,0,0,0,0,1,0,540,367,1,1);\\"><div class=\\"root\\"><div class=\\"container s2042575598\\" style=\\"overflow: hidden;\\"><style type=\\"text/css\\">.s2042575598 .canvasRenderEl h1 {
  font-size: 150px; text-align: center; color: #d3d3d3;
 }
-</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div>"
+</style><div class=\\"content\\"><div class=\\"renderContainer\\"><div data-renderer=\\"markdown\\" class=\\"render\\"><div>markdown mock</div></div></div></div></div></div></div></div></div></div></div></div><div class=\\"bar\\" style=\\"bottom: 0px;\\"><div class=\\"euiFlexGroup euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem title\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"flex-shrink: 0;\\"><a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co\\" rel=\\"\\" title=\\"Powered by Elastic.co\\"><div data-euiicon-type=\\"logoElastic\\"></div></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\" style=\\"min-width: 0; cursor: default;\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\"><div class=\\"eui-textTruncate\\">My Canvas Workpad</div></div></div></div></div></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive\\"><div class=\\"euiFlexGroup euiFlexGroup--alignItemsCenter euiFlexGroup--directionRow euiFlexGroup--responsive\\" style=\\"margin: 0px 12px;\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><div data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--ghost euiButtonEmpty--small\\" type=\\"button\\" data-test-subj=\\"pageControlsCurrentPage\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\"><div class=\\"euiText euiText--small\\"><div class=\\"euiTextColor euiTextColor--ghost\\">Page 1</div></div></span></span></button></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button disabled=\\"\\" class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><div data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight euiPopover--withTitle\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost\\" type=\\"button\\" aria-label=\\"Settings\\"><div data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\"></div></button></div></div></div></div></div></div></div></div></div></div>"
 `;

x-pack/plugins/canvas/shareable_runtime/components/footer/__stories__/__snapshots__/footer.stories.storyshot

@@ -1351,7 +1351,7 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
                   type="button"
                 >
                   <span
-                    className="euiButtonEmpty__content"
+                    className="euiButtonContent euiButtonEmpty__content"
                   >
                     <span
                       className="euiButtonEmpty__text"
@@ -1603,7 +1603,7 @@ exports[`Storyshots shareables/Footer contextual: hello 1`] = `
                   type="button"
                 >
                   <span
-                    className="euiButtonEmpty__content"
+                    className="euiButtonContent euiButtonEmpty__content"
                   >
                     <span
                       className="euiButtonEmpty__text"

x-pack/plugins/canvas/shareable_runtime/components/footer/__stories__/__snapshots__/page_controls.stories.storyshot

@@ -46,7 +46,7 @@ exports[`Storyshots shareables/Footer/PageControls component 1`] = `
         type="button"
       >
         <span
-          className="euiButtonEmpty__content"
+          className="euiButtonContent euiButtonEmpty__content"
         >
           <span
             className="euiButtonEmpty__text"
@@ -140,7 +140,7 @@ exports[`Storyshots shareables/Footer/PageControls contextual: austin 1`] = `
         type="button"
       >
         <span
-          className="euiButtonEmpty__content"
+          className="euiButtonContent euiButtonEmpty__content"
         >
           <span
             className="euiButtonEmpty__text"
@@ -234,7 +234,7 @@ exports[`Storyshots shareables/Footer/PageControls contextual: hello 1`] = `
         type="button"
       >
         <span
-          className="euiButtonEmpty__content"
+          className="euiButtonContent euiButtonEmpty__content"
         >
           <span
             className="euiButtonEmpty__text"

x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__stories__/__snapshots__/autoplay_settings.stories.storyshot

@@ -145,7 +145,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: off,
                 type="submit"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <span
                     className="euiButton__text"
@@ -308,7 +308,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: on, 5
                 type="submit"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <span
                     className="euiButton__text"
@@ -471,7 +471,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings contextual 1`] =
                 type="submit"
               >
                 <span
-                  className="euiButton__content"
+                  className="euiButtonContent euiButton__content"
                 >
                   <span
                     className="euiButton__text"

x-pack/plugins/canvas/shareable_runtime/components/footer/settings/__tests__/__snapshots__/settings.test.tsx.snap

@@ -338,7 +338,7 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
                                 type="submit"
                               >
                                 <span
-                                  class="euiButton__content"
+                                  class="euiButtonContent euiButton__content"
                                 >
                                   <span
                                     class="euiButton__text"

x-pack/plugins/index_lifecycle_management/__jest__/components/__snapshots__/policy_table.test.js.snap

@@ -97,11 +97,10 @@ exports[`policy table should show empty state when there are not any policies 1`
           type="button"
         >
           <span
-            class="euiButton__content"
+            class="euiButtonContent euiButton__content"
           >
             <div
-              aria-hidden="true"
-              class="euiButton__icon"
+              class="euiButtonContent__icon"
               data-euiicon-type="plusInCircle"
             />
             <span

x-pack/plugins/lens/public/indexpattern_datasource/layerpanel.test.tsx

@@ -9,11 +9,16 @@ import { IndexPatternPrivateState } from './types';
 import { IndexPatternLayerPanelProps, LayerPanel } from './layerpanel';
 import { shallowWithIntl as shallow } from 'test_utils/enzyme_helpers';
 import { ShallowWrapper } from 'enzyme';
-import { EuiSelectable, EuiSelectableList } from '@elastic/eui';
+import { EuiSelectable } from '@elastic/eui';
 import { ChangeIndexPattern } from './change_indexpattern';
 
 jest.mock('./state_helpers');
 
+interface IndexPatternPickerOption {
+  label: string;
+  checked?: 'on' | 'off';
+}
+
 const initialState: IndexPatternPrivateState = {
   indexPatternRefs: [
     { id: '1', title: 'my-fake-index-pattern' },
@@ -187,9 +192,9 @@ describe('Layer Data Panel', () => {
   }
 
   function selectIndexPatternPickerOption(instance: ShallowWrapper, selectedLabel: string) {
-    const options: Array<{ label: string; checked?: 'on' | 'off' }> = getIndexPatternPickerOptions(
+    const options: IndexPatternPickerOption[] = getIndexPatternPickerOptions(
       instance
-    ).map((option) =>
+    ).map((option: IndexPatternPickerOption) =>
       option.label === selectedLabel
         ? { ...option, checked: 'on' }
         : { ...option, checked: undefined }
@@ -198,17 +203,17 @@ describe('Layer Data Panel', () => {
   }
 
   function getIndexPatternPickerOptions(instance: ShallowWrapper) {
-    return getIndexPatternPickerList(instance).dive().find(EuiSelectableList).prop('options');
+    return getIndexPatternPickerList(instance).prop('options');
   }
 
   it('should list all index patterns', () => {
     const instance = shallow(<LayerPanel {...defaultProps} />);
 
-    expect(getIndexPatternPickerOptions(instance)!.map((option) => option.label)).toEqual([
-      'my-fake-index-pattern',
-      'my-fake-restricted-pattern',
-      'my-compatible-pattern',
-    ]);
+    expect(
+      getIndexPatternPickerOptions(instance)!.map(
+        (option: IndexPatternPickerOption) => option.label
+      )
+    ).toEqual(['my-fake-index-pattern', 'my-fake-restricted-pattern', 'my-compatible-pattern']);
   });
 
   it('should switch data panel to target index pattern', () => {

x-pack/plugins/license_management/__jest__/__snapshots__/add_license.test.js.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AddLicense component when license is active should display correct verbiage 1`] = `"<div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Update your license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p>If you already have a new license, upload it now.</p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"/upload_license\\" rel=\\"noreferrer\\" data-test-subj=\\"updateLicenseButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Update license</span></span></a></div></div>"`;
+exports[`AddLicense component when license is active should display correct verbiage 1`] = `"<div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Update your license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p>If you already have a new license, upload it now.</p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"/upload_license\\" rel=\\"noreferrer\\" data-test-subj=\\"updateLicenseButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Update license</span></span></a></div></div>"`;
 
-exports[`AddLicense component when license is expired should display with correct verbiage 1`] = `"<div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Update your license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p>If you already have a new license, upload it now.</p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"/upload_license\\" rel=\\"noreferrer\\" data-test-subj=\\"updateLicenseButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Update license</span></span></a></div></div>"`;
+exports[`AddLicense component when license is expired should display with correct verbiage 1`] = `"<div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Update your license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p>If you already have a new license, upload it now.</p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"/upload_license\\" rel=\\"noreferrer\\" data-test-subj=\\"updateLicenseButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Update license</span></span></a></div></div>"`;

x-pack/plugins/license_management/__jest__/__snapshots__/request_trial_extension.test.js.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RequestTrialExtension component should display when enterprise license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
+exports[`RequestTrialExtension component should display when enterprise license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
 
-exports[`RequestTrialExtension component should display when license is active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
+exports[`RequestTrialExtension component should display when license is active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
 
-exports[`RequestTrialExtension component should display when license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
+exports[`RequestTrialExtension component should display when license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
 
-exports[`RequestTrialExtension component should display when platinum license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;
+exports[`RequestTrialExtension component should display when platinum license is not active and trial has been used 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Extend your trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>If you’d like to continue using machine learning, advanced security, and our other awesome <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>, request an extension now.</span></p></div></div><div class=\\"euiCard__footer\\"><a class=\\"euiButton euiButton--primary\\" href=\\"https://www.elastic.co/trialextension\\" rel=\\"noopener\\" target=\\"_blank\\" data-test-subj=\\"extendTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Extend trial</span></span></a></div></div></div>"`;

x-pack/plugins/license_management/__jest__/__snapshots__/revert_to_basic.test.js.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`RevertToBasic component should display when license is about to expire 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Revert to Basic license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>You’ll revert to our free features and lose access to machine learning, advanced security, and other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"revertToBasicButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Revert to Basic</span></span></button></div></div></div>"`;
+exports[`RevertToBasic component should display when license is about to expire 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Revert to Basic license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>You’ll revert to our free features and lose access to machine learning, advanced security, and other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"revertToBasicButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Revert to Basic</span></span></button></div></div></div>"`;
 
-exports[`RevertToBasic component should display when license is expired 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Revert to Basic license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>You’ll revert to our free features and lose access to machine learning, advanced security, and other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"revertToBasicButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Revert to Basic</span></span></button></div></div></div>"`;
+exports[`RevertToBasic component should display when license is expired 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Revert to Basic license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>You’ll revert to our free features and lose access to machine learning, advanced security, and other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"revertToBasicButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Revert to Basic</span></span></button></div></div></div>"`;
 
-exports[`RevertToBasic component should display when trial is active 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Revert to Basic license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>You’ll revert to our free features and lose access to machine learning, advanced security, and other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"revertToBasicButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Revert to Basic</span></span></button></div></div></div>"`;
+exports[`RevertToBasic component should display when trial is active 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Revert to Basic license</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>You’ll revert to our free features and lose access to machine learning, advanced security, and other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a>.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"revertToBasicButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Revert to Basic</span></span></button></div></div></div>"`;

x-pack/plugins/license_management/__jest__/__snapshots__/start_trial.test.js.snap

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`StartTrial component when trial is allowed display for basic license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
+exports[`StartTrial component when trial is allowed display for basic license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
 
-exports[`StartTrial component when trial is allowed should display for expired enterprise license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
+exports[`StartTrial component when trial is allowed should display for expired enterprise license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
 
-exports[`StartTrial component when trial is allowed should display for expired platinum license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
+exports[`StartTrial component when trial is allowed should display for expired platinum license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
 
-exports[`StartTrial component when trial is allowed should display for gold license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;
+exports[`StartTrial component when trial is allowed should display for gold license 1`] = `"<div class=\\"euiFlexItem\\"><div class=\\"euiCard euiCard--paddingMedium euiCard--centerAligned\\"><div class=\\"euiCard__content\\"><span class=\\"euiTitle euiTitle--small euiCard__title\\" id=\\"generated-idTitle\\">Start a 30-day trial</span><div class=\\"euiText euiText--small euiCard__description\\" id=\\"generated-idDescription\\"><p><span>Experience what machine learning, advanced security, and all our other <a class=\\"euiLink euiLink--primary\\" href=\\"https://www.elastic.co/subscriptions\\" target=\\"_blank\\" rel=\\"noopener\\">subscription features</a> have to offer.</span></p></div></div><div class=\\"euiCard__footer\\"><button class=\\"euiButton euiButton--primary\\" type=\\"button\\" data-test-subj=\\"startTrialButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Start trial</span></span></button></div></div></div>"`;

x-pack/plugins/logstash/public/application/components/pipeline_list/pipelines_table.test.js

@@ -45,7 +45,7 @@ describe('PipelinesTable component', () => {
   it('calls clone when cloned button clicked', () => {
     props.pipelines = [{ id: 'testPipeline', isCentrallyManaged: true }];
     const wrapper = mountWithIntl(<PipelinesTable.WrappedComponent {...props} />);
-    wrapper.find('[iconType="copy"]').simulate('click');
+    wrapper.find('[iconType="copy"]').first().simulate('click');
     expect(clonePipeline).toHaveBeenCalled();
   });
 

x-pack/plugins/logstash/public/application/components/upgrade_failure/__snapshots__/upgrade_failure.test.js.snap

@@ -265,21 +265,38 @@ exports[`UpgradeFailure component passes expected text for new pipeline 1`] = `
                           fill={true}
                           onClick={[MockFunction]}
                         >
-                          <button
-                            className="euiButton euiButton--primary euiButton--fill"
+                          <EuiButtonDisplay
+                            element="button"
+                            fill={true}
                             onClick={[MockFunction]}
                             type="button"
                           >
-                            <span
-                              className="euiButton__content"
+                            <button
+                              className="euiButton euiButton--primary euiButton--fill"
+                              onClick={[MockFunction]}
+                              type="button"
                             >
-                              <span
-                                className="euiButton__text"
+                              <EuiButtonContent
+                                className="euiButton__content"
+                                iconSide="left"
+                                textProps={
+                                  Object {
+                                    "className": "euiButton__text",
+                                  }
+                                }
                               >
-                                Try again
-                              </span>
-                            </span>
-                          </button>
+                                <span
+                                  className="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    className="euiButton__text"
+                                  >
+                                    Try again
+                                  </span>
+                                </span>
+                              </EuiButtonContent>
+                            </button>
+                          </EuiButtonDisplay>
                         </EuiButton>
                       </div>
                     </EuiFlexItem>
@@ -298,21 +315,31 @@ exports[`UpgradeFailure component passes expected text for new pipeline 1`] = `
                             onClick={[MockFunction]}
                             type="button"
                           >
-                            <span
+                            <EuiButtonContent
                               className="euiButtonEmpty__content"
+                              iconSide="left"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
                             >
                               <span
-                                className="euiButtonEmpty__text"
+                                className="euiButtonContent euiButtonEmpty__content"
                               >
-                                <FormattedMessage
-                                  defaultMessage="Go back"
-                                  id="xpack.logstash.upgradeFailureActions.goBackButtonLabel"
-                                  values={Object {}}
+                                <span
+                                  className="euiButtonEmpty__text"
                                 >
-                                  Go back
-                                </FormattedMessage>
+                                  <FormattedMessage
+                                    defaultMessage="Go back"
+                                    id="xpack.logstash.upgradeFailureActions.goBackButtonLabel"
+                                    values={Object {}}
+                                  >
+                                    Go back
+                                  </FormattedMessage>
+                                </span>
                               </span>
-                            </span>
+                            </EuiButtonContent>
                           </button>
                         </EuiButtonEmpty>
                       </div>
@@ -594,21 +621,38 @@ exports[`UpgradeFailure component passes expected text for not manual upgrade 1`
                           fill={true}
                           onClick={[MockFunction]}
                         >
-                          <button
-                            className="euiButton euiButton--primary euiButton--fill"
+                          <EuiButtonDisplay
+                            element="button"
+                            fill={true}
                             onClick={[MockFunction]}
                             type="button"
                           >
-                            <span
-                              className="euiButton__content"
+                            <button
+                              className="euiButton euiButton--primary euiButton--fill"
+                              onClick={[MockFunction]}
+                              type="button"
                             >
-                              <span
-                                className="euiButton__text"
+                              <EuiButtonContent
+                                className="euiButton__content"
+                                iconSide="left"
+                                textProps={
+                                  Object {
+                                    "className": "euiButton__text",
+                                  }
+                                }
                               >
-                                Upgrade
-                              </span>
-                            </span>
-                          </button>
+                                <span
+                                  className="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    className="euiButton__text"
+                                  >
+                                    Upgrade
+                                  </span>
+                                </span>
+                              </EuiButtonContent>
+                            </button>
+                          </EuiButtonDisplay>
                         </EuiButton>
                       </div>
                     </EuiFlexItem>
@@ -627,21 +671,31 @@ exports[`UpgradeFailure component passes expected text for not manual upgrade 1`
                             onClick={[MockFunction]}
                             type="button"
                           >
-                            <span
+                            <EuiButtonContent
                               className="euiButtonEmpty__content"
+                              iconSide="left"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
                             >
                               <span
-                                className="euiButtonEmpty__text"
+                                className="euiButtonContent euiButtonEmpty__content"
                               >
-                                <FormattedMessage
-                                  defaultMessage="Go back"
-                                  id="xpack.logstash.upgradeFailureActions.goBackButtonLabel"
-                                  values={Object {}}
+                                <span
+                                  className="euiButtonEmpty__text"
                                 >
-                                  Go back
-                                </FormattedMessage>
+                                  <FormattedMessage
+                                    defaultMessage="Go back"
+                                    id="xpack.logstash.upgradeFailureActions.goBackButtonLabel"
+                                    values={Object {}}
+                                  >
+                                    Go back
+                                  </FormattedMessage>
+                                </span>
                               </span>
-                            </span>
+                            </EuiButtonContent>
                           </button>
                         </EuiButtonEmpty>
                       </div>
@@ -923,21 +977,38 @@ exports[`UpgradeFailure component passes expected text for not new pipeline 1`]
                           fill={true}
                           onClick={[MockFunction]}
                         >
-                          <button
-                            className="euiButton euiButton--primary euiButton--fill"
+                          <EuiButtonDisplay
+                            element="button"
+                            fill={true}
                             onClick={[MockFunction]}
                             type="button"
                           >
-                            <span
-                              className="euiButton__content"
+                            <button
+                              className="euiButton euiButton--primary euiButton--fill"
+                              onClick={[MockFunction]}
+                              type="button"
                             >
-                              <span
-                                className="euiButton__text"
+                              <EuiButtonContent
+                                className="euiButton__content"
+                                iconSide="left"
+                                textProps={
+                                  Object {
+                                    "className": "euiButton__text",
+                                  }
+                                }
                               >
-                                Try again
-                              </span>
-                            </span>
-                          </button>
+                                <span
+                                  className="euiButtonContent euiButton__content"
+                                >
+                                  <span
+                                    className="euiButton__text"
+                                  >
+                                    Try again
+                                  </span>
+                                </span>
+                              </EuiButtonContent>
+                            </button>
+                          </EuiButtonDisplay>
                         </EuiButton>
                       </div>
                     </EuiFlexItem>
@@ -956,21 +1027,31 @@ exports[`UpgradeFailure component passes expected text for not new pipeline 1`]
                             onClick={[MockFunction]}
                             type="button"
                           >
-                            <span
+                            <EuiButtonContent
                               className="euiButtonEmpty__content"
+                              iconSide="left"
+                              textProps={
+                                Object {
+                                  "className": "euiButtonEmpty__text",
+                                }
+                              }
                             >
                               <span
-                                className="euiButtonEmpty__text"
+                                className="euiButtonContent euiButtonEmpty__content"
                               >
-                                <FormattedMessage
-                                  defaultMessage="Go back"
-                                  id="xpack.logstash.upgradeFailureActions.goBackButtonLabel"
-                                  values={Object {}}
+                                <span
+                                  className="euiButtonEmpty__text"
                                 >
-                                  Go back
-                                </FormattedMessage>
+                                  <FormattedMessage
+                                    defaultMessage="Go back"
+                                    id="xpack.logstash.upgradeFailureActions.goBackButtonLabel"
+                                    values={Object {}}
+                                  >
+                                    Go back
+                                  </FormattedMessage>
+                                </span>
                               </span>
-                            </span>
+                            </EuiButtonContent>
                           </button>
                         </EuiButtonEmpty>
                       </div>

x-pack/plugins/ml/public/application/timeseriesexplorer/components/entity_control/entity_control.tsx

@@ -16,7 +16,6 @@ import {
   EuiFormRow,
   EuiToolTip,
 } from '@elastic/eui';
-import { EuiSelectableOption } from '@elastic/eui/src/components/selectable/selectable_option';
 
 export interface Entity {
   fieldName: string;
@@ -113,7 +112,7 @@ export class EntityControl extends Component<EntityControlProps, EntityControlSt
     this.props.onSearchChange(this.props.entity, searchValue);
   };
 
-  renderOption = (option: EuiSelectableOption) => {
+  renderOption = (option: EuiComboBoxOptionOption) => {
     const { label } = option;
     return label === EMPTY_FIELD_VALUE_LABEL ? <i>{label}</i> : label;
   };

x-pack/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap

@@ -52,7 +52,7 @@ exports[`NoData should show a default message if reason is unknown 1`] = `
             type="button"
           >
             <span
-              class="euiButton__content"
+              class="euiButtonContent euiButton__content"
             >
               <span
                 class="euiButton__text"
@@ -72,7 +72,7 @@ exports[`NoData should show a default message if reason is unknown 1`] = `
         type="button"
       >
         <span
-          class="euiButtonEmpty__content"
+          class="euiButtonContent euiButtonEmpty__content"
         >
           <span
             class="euiButtonEmpty__text"
@@ -142,7 +142,7 @@ exports[`NoData should show text next to the spinner while checking a setting 1`
             type="button"
           >
             <span
-              class="euiButton__content"
+              class="euiButtonContent euiButton__content"
             >
               <span
                 class="euiButton__text"
@@ -162,7 +162,7 @@ exports[`NoData should show text next to the spinner while checking a setting 1`
         type="button"
       >
         <span
-          class="euiButtonEmpty__content"
+          class="euiButtonContent euiButtonEmpty__content"
         >
           <span
             class="euiButtonEmpty__text"

x-pack/plugins/monitoring/public/components/no_data/explanations/collection_enabled/__tests__/__snapshots__/collection_enabled.test.js.snap

@@ -247,28 +247,46 @@ exports[`ExplainCollectionEnabled should explain about xpack.monitoring.collecti
             onClick={[Function]}
             type="button"
           >
-            <button
-              className="euiButton euiButton--primary euiButton--fill"
+            <EuiButtonDisplay
               data-test-subj="enableCollectionEnabled"
+              element="button"
+              fill={true}
               onClick={[Function]}
               type="button"
             >
-              <span
-                className="euiButton__content"
+              <button
+                className="euiButton euiButton--primary euiButton--fill"
+                data-test-subj="enableCollectionEnabled"
+                onClick={[Function]}
+                type="button"
               >
-                <span
-                  className="euiButton__text"
+                <EuiButtonContent
+                  className="euiButton__content"
+                  iconSide="left"
+                  textProps={
+                    Object {
+                      "className": "euiButton__text",
+                    }
+                  }
                 >
-                  <FormattedMessage
-                    defaultMessage="Turn on monitoring"
-                    id="xpack.monitoring.noData.explanations.collectionEnabled.turnOnMonitoringButtonLabel"
-                    values={Object {}}
+                  <span
+                    className="euiButtonContent euiButton__content"
                   >
-                    Turn on monitoring
-                  </FormattedMessage>
-                </span>
-              </span>
-            </button>
+                    <span
+                      className="euiButton__text"
+                    >
+                      <FormattedMessage
+                        defaultMessage="Turn on monitoring"
+                        id="xpack.monitoring.noData.explanations.collectionEnabled.turnOnMonitoringButtonLabel"
+                        values={Object {}}
+                      >
+                        Turn on monitoring
+                      </FormattedMessage>
+                    </span>
+                  </span>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonDisplay>
           </EuiButton>
         </div>
       </EuiFlexItem>

x-pack/plugins/monitoring/public/components/no_data/explanations/collection_interval/__tests__/__snapshots__/collection_interval.test.js.snap

@@ -430,37 +430,59 @@ exports[`ExplainCollectionInterval collection interval setting updates should sh
             onClick={[Function]}
             type="button"
           >
-            <button
-              className="euiButton euiButton--primary euiButton--fill"
+            <EuiButtonDisplay
               data-test-subj="enableCollectionInterval"
               disabled={true}
+              element="button"
+              fill={true}
+              isDisabled={true}
+              isLoading={true}
               onClick={[Function]}
               type="button"
             >
-              <span
-                className="euiButton__content"
+              <button
+                className="euiButton euiButton--primary euiButton--fill euiButton-isDisabled"
+                data-test-subj="enableCollectionInterval"
+                disabled={true}
+                onClick={[Function]}
+                type="button"
               >
-                <EuiLoadingSpinner
-                  className="euiButton__spinner"
-                  size="m"
+                <EuiButtonContent
+                  className="euiButton__content"
+                  iconSide="left"
+                  isLoading={true}
+                  textProps={
+                    Object {
+                      "className": "euiButton__text",
+                    }
+                  }
                 >
                   <span
-                    className="euiLoadingSpinner euiLoadingSpinner--medium euiButton__spinner"
-                  />
-                </EuiLoadingSpinner>
-                <span
-                  className="euiButton__text"
-                >
-                  <FormattedMessage
-                    defaultMessage="Turn on monitoring"
-                    id="xpack.monitoring.noData.explanations.collectionInterval.turnOnMonitoringButtonLabel"
-                    values={Object {}}
+                    className="euiButtonContent euiButton__content"
                   >
-                    Turn on monitoring
-                  </FormattedMessage>
-                </span>
-              </span>
-            </button>
+                    <EuiLoadingSpinner
+                      className="euiButtonContent__spinner"
+                      size="m"
+                    >
+                      <span
+                        className="euiLoadingSpinner euiLoadingSpinner--medium euiButtonContent__spinner"
+                      />
+                    </EuiLoadingSpinner>
+                    <span
+                      className="euiButton__text"
+                    >
+                      <FormattedMessage
+                        defaultMessage="Turn on monitoring"
+                        id="xpack.monitoring.noData.explanations.collectionInterval.turnOnMonitoringButtonLabel"
+                        values={Object {}}
+                      >
+                        Turn on monitoring
+                      </FormattedMessage>
+                    </span>
+                  </span>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonDisplay>
           </EuiButton>
         </div>
       </EuiFlexItem>
@@ -728,28 +750,48 @@ exports[`ExplainCollectionInterval should explain about xpack.monitoring.collect
             onClick={[Function]}
             type="button"
           >
-            <button
-              className="euiButton euiButton--primary euiButton--fill"
+            <EuiButtonDisplay
               data-test-subj="enableCollectionInterval"
+              element="button"
+              fill={true}
+              isLoading={false}
               onClick={[Function]}
               type="button"
             >
-              <span
-                className="euiButton__content"
+              <button
+                className="euiButton euiButton--primary euiButton--fill"
+                data-test-subj="enableCollectionInterval"
+                onClick={[Function]}
+                type="button"
               >
-                <span
-                  className="euiButton__text"
+                <EuiButtonContent
+                  className="euiButton__content"
+                  iconSide="left"
+                  isLoading={false}
+                  textProps={
+                    Object {
+                      "className": "euiButton__text",
+                    }
+                  }
                 >
-                  <FormattedMessage
-                    defaultMessage="Turn on monitoring"
-                    id="xpack.monitoring.noData.explanations.collectionInterval.turnOnMonitoringButtonLabel"
-                    values={Object {}}
+                  <span
+                    className="euiButtonContent euiButton__content"
                   >
-                    Turn on monitoring
-                  </FormattedMessage>
-                </span>
-              </span>
-            </button>
+                    <span
+                      className="euiButton__text"
+                    >
+                      <FormattedMessage
+                        defaultMessage="Turn on monitoring"
+                        id="xpack.monitoring.noData.explanations.collectionInterval.turnOnMonitoringButtonLabel"
+                        values={Object {}}
+                      >
+                        Turn on monitoring
+                      </FormattedMessage>
+                    </span>
+                  </span>
+                </EuiButtonContent>
+              </button>
+            </EuiButtonDisplay>
           </EuiButton>
         </div>
       </EuiFlexItem>

x-pack/plugins/monitoring/public/components/no_data/reasons/__tests__/__snapshots__/reason_found.test.js.snap

@@ -61,7 +61,7 @@ Array [
         type="button"
       >
         <span
-          class="euiButton__content"
+          class="euiButtonContent euiButton__content"
         >
           <span
             class="euiButton__text"

x-pack/plugins/monitoring/public/components/summary_status/__snapshots__/summary_status.test.js.snap

@@ -38,11 +38,6 @@ exports[`Summary Status Component should allow label to be optional 1`] = `
         />
          Yellow
         <p />
-        <p
-          class="euiScreenReaderOnly"
-        >
-          Status [object Object]
-        </p>
       </div>
     </div>
     <div
@@ -217,11 +212,6 @@ exports[`Summary Status Component should render metrics in a summary bar 1`] = `
         />
          Green
         <p />
-        <p
-          class="euiScreenReaderOnly"
-        >
-          Status [object Object]
-        </p>
       </div>
     </div>
     <div

x-pack/plugins/remote_clusters/public/application/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap

@@ -1268,43 +1268,65 @@ exports[`RemoteClusterForm proxy mode renders correct connection settings when u
                     iconType="check"
                     onClick={[Function]}
                   >
-                    <button
+                    <EuiButtonDisplay
                       aria-describedby="staticGenerator_removeClustersErrorTitle staticGenerator_removeClustersErrorList"
-                      className="euiButton euiButton--secondary euiButton--fill"
+                      color="secondary"
                       data-test-subj="remoteClusterFormSaveButton"
                       disabled={false}
+                      element="button"
+                      fill={true}
+                      iconType="check"
+                      isDisabled={false}
                       onClick={[Function]}
                       type="button"
                     >
-                      <span
-                        className="euiButton__content"
+                      <button
+                        aria-describedby="staticGenerator_removeClustersErrorTitle staticGenerator_removeClustersErrorList"
+                        className="euiButton euiButton--secondary euiButton--fill"
+                        data-test-subj="remoteClusterFormSaveButton"
+                        disabled={false}
+                        onClick={[Function]}
+                        type="button"
                       >
-                        <EuiIcon
-                          aria-hidden="true"
-                          className="euiButton__icon"
-                          size="m"
-                          type="check"
+                        <EuiButtonContent
+                          className="euiButton__content"
+                          iconSide="left"
+                          iconType="check"
+                          textProps={
+                            Object {
+                              "className": "euiButton__text",
+                            }
+                          }
                         >
-                          <div
-                            aria-hidden="true"
-                            className="euiButton__icon"
-                            data-euiicon-type="check"
-                            size="m"
-                          />
-                        </EuiIcon>
-                        <span
-                          className="euiButton__text"
-                        >
-                          <FormattedMessage
-                            defaultMessage="Save"
-                            id="xpack.remoteClusters.remoteClusterForm.saveButtonLabel"
-                            values={Object {}}
+                          <span
+                            className="euiButtonContent euiButton__content"
                           >
-                            Save
-                          </FormattedMessage>
-                        </span>
-                      </span>
-                    </button>
+                            <EuiIcon
+                              className="euiButtonContent__icon"
+                              size="m"
+                              type="check"
+                            >
+                              <div
+                                className="euiButtonContent__icon"
+                                data-euiicon-type="check"
+                                size="m"
+                              />
+                            </EuiIcon>
+                            <span
+                              className="euiButton__text"
+                            >
+                              <FormattedMessage
+                                defaultMessage="Save"
+                                id="xpack.remoteClusters.remoteClusterForm.saveButtonLabel"
+                                values={Object {}}
+                              >
+                                Save
+                              </FormattedMessage>
+                            </span>
+                          </span>
+                        </EuiButtonContent>
+                      </button>
+                    </EuiButtonDisplay>
                   </EuiButton>
                 </div>
               </EuiFlexItem>
@@ -1326,21 +1348,31 @@ exports[`RemoteClusterForm proxy mode renders correct connection settings when u
               onClick={[Function]}
               type="button"
             >
-              <span
+              <EuiButtonContent
                 className="euiButtonEmpty__content"
+                iconSide="left"
+                textProps={
+                  Object {
+                    "className": "euiButtonEmpty__text",
+                  }
+                }
               >
                 <span
-                  className="euiButtonEmpty__text"
+                  className="euiButtonContent euiButtonEmpty__content"
                 >
-                  <FormattedMessage
-                    defaultMessage="Show request"
-                    id="xpack.remoteClusters.remoteClusterForm.showRequestButtonLabel"
-                    values={Object {}}
+                  <span
+                    className="euiButtonEmpty__text"
                   >
-                    Show request
-                  </FormattedMessage>
+                    <FormattedMessage
+                      defaultMessage="Show request"
+                      id="xpack.remoteClusters.remoteClusterForm.showRequestButtonLabel"
+                      values={Object {}}
+                    >
+                      Show request
+                    </FormattedMessage>
+                  </span>
                 </span>
-              </span>
+              </EuiButtonContent>
             </button>
           </EuiButtonEmpty>
         </div>
@@ -1743,11 +1775,10 @@ Array [
             type="button"
           >
             <span
-              class="euiButton__content"
+              class="euiButtonContent euiButton__content"
             >
               <div
-                aria-hidden="true"
-                class="euiButton__icon"
+                class="euiButtonContent__icon"
                 data-euiicon-type="check"
               />
               <span
@@ -1768,7 +1799,7 @@ Array [
         type="button"
       >
         <span
-          class="euiButtonEmpty__content"
+          class="euiButtonContent euiButtonEmpty__content"
         >
           <span
             class="euiButtonEmpty__text"

x-pack/plugins/rollup/public/crud_app/sections/job_create/navigation/navigation.js

@@ -66,7 +66,7 @@ export const Navigation = ({
         iconType="arrowRight"
         iconSide="right"
         onClick={goToNextStep}
-        isDisabled={!canGoToNextStep}
+        disabled={!canGoToNextStep}
         fill
         data-test-subj="rollupJobNextButton"
       >