Upgrade EUI to v37.3.1 (#109926)

* Upgrade EUI to v37.3.1

* Update i18n token mappings

* Skip i18n_eui_mapping defString checks for functions

* Update snapshots

* Update failing Security tests with extra nodes

* Remove hook cleanup now that elastic/eui#5068 is merged

* [i18n PR feedback] Prefer specific token skipping over all functions skipping

* Revert "Remove hook cleanup now that elastic/eui#5068 is merged"

This reverts commit e40ebfa929.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

package.json

@@ -100,7 +100,7 @@
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.19",
     "@elastic/ems-client": "7.15.0",
-    "@elastic/eui": "37.3.0",
+    "@elastic/eui": "37.3.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "^9.0.1-kibana3",
     "@elastic/maki": "6.3.0",

src/core/public/i18n/__snapshots__/i18n_service.test.tsx.snap

@@ -57,7 +57,7 @@ exports[`#start() returns \`Context\` component 1`] = `
           "euiColumnSelector.searchcolumns": "Search columns",
           "euiColumnSelector.selectAll": "Show all",
           "euiColumnSorting.button": "Sort fields",
-          "euiColumnSorting.buttonActive": "fields sorted",
+          "euiColumnSorting.buttonActive": [Function],
           "euiColumnSorting.clearAll": "Clear sorting",
           "euiColumnSorting.emptySorting": "Currently no fields are sorted",
           "euiColumnSorting.pickFields": "Pick fields to sort by",
@@ -104,9 +104,11 @@ exports[`#start() returns \`Context\` component 1`] = `
           "euiFieldPassword.maskPassword": "Mask password",
           "euiFieldPassword.showPassword": "Show password as plain text. Note: this will visually expose your password on the screen.",
           "euiFilePicker.clearSelectedFiles": "Clear selected files",
-          "euiFilePicker.filesSelected": "files selected",
+          "euiFilePicker.filesSelected": [Function],
+          "euiFilePicker.promptText": "Select or drag and drop a file",
           "euiFilePicker.removeSelected": "Remove",
-          "euiFilterButton.filterBadge": [Function],
+          "euiFilterButton.filterBadgeActiveAriaLabel": [Function],
+          "euiFilterButton.filterBadgeAvailableAriaLabel": [Function],
           "euiFlyout.closeAriaLabel": "Close this dialog",
           "euiForm.addressFormErrors": "Please address the highlighted errors.",
           "euiFormControlLayoutClearButton.label": "Clear input",

src/core/public/i18n/i18n_eui_mapping.test.ts

@@ -74,6 +74,11 @@ describe('@elastic/eui i18n tokens', () => {
       });
 
       test('defaultMessage is in sync with defString', () => {
+        // Certain complex tokens (e.g. ones that have a function as a defaultMessage)
+        // need custom i18n handling, and can't be checked for basic defString equality
+        const tokensToSkip = ['euiColumnSorting.buttonActive'];
+        if (tokensToSkip.includes(token)) return;
+
         // Clean up typical errors from the `@elastic/eui` extraction token tool
         const normalizedDefString = defString
           // Quoted words should use double-quotes

src/core/public/i18n/i18n_eui_mapping.tsx

@@ -272,9 +272,11 @@ export const getEuiContextMapping = (): EuiTokensObject => {
     'euiColumnSorting.button': i18n.translate('core.euiColumnSorting.button', {
       defaultMessage: 'Sort fields',
     }),
-    'euiColumnSorting.buttonActive': i18n.translate('core.euiColumnSorting.buttonActive', {
-      defaultMessage: 'fields sorted',
-    }),
+    'euiColumnSorting.buttonActive': ({ numberOfSortedFields }: EuiValues) =>
+      i18n.translate('core.euiColumnSorting.buttonActive', {
+        defaultMessage: '{numberOfSortedFields, plural, one {# field} other {# fields}} sorted',
+        values: { numberOfSortedFields },
+      }),
     'euiColumnSortingDraggable.activeSortLabel': ({ display }: EuiValues) =>
       i18n.translate('core.euiColumnSortingDraggable.activeSortLabel', {
         defaultMessage: '{display} is sorting this data grid',
@@ -514,16 +516,26 @@ export const getEuiContextMapping = (): EuiTokensObject => {
     'euiFilePicker.clearSelectedFiles': i18n.translate('core.euiFilePicker.clearSelectedFiles', {
       defaultMessage: 'Clear selected files',
     }),
-    'euiFilePicker.filesSelected': i18n.translate('core.euiFilePicker.filesSelected', {
-      defaultMessage: 'files selected',
+    'euiFilePicker.filesSelected': ({ fileCount }: EuiValues) =>
+      i18n.translate('core.euiFilePicker.filesSelected', {
+        defaultMessage: '{fileCount} files selected',
+        values: { fileCount },
+      }),
+    'euiFilePicker.promptText': i18n.translate('core.euiFilePicker.promptText', {
+      defaultMessage: 'Select or drag and drop a file',
     }),
     'euiFilePicker.removeSelected': i18n.translate('core.euiFilePicker.removeSelected', {
       defaultMessage: 'Remove',
     }),
-    'euiFilterButton.filterBadge': ({ count, hasActiveFilters }: EuiValues) =>
-      i18n.translate('core.euiFilterButton.filterBadge', {
-        defaultMessage: '{count} {hasActiveFilters} filters',
-        values: { count, hasActiveFilters: hasActiveFilters ? 'active' : 'available' },
+    'euiFilterButton.filterBadgeActiveAriaLabel': ({ count }: EuiValues) =>
+      i18n.translate('core.euiFilterButton.filterBadgeActiveAriaLabel', {
+        defaultMessage: '{count} active filters',
+        values: { count },
+      }),
+    'euiFilterButton.filterBadgeAvailableAriaLabel': ({ count }: EuiValues) =>
+      i18n.translate('core.euiFilterButton.filterBadgeAvailableAriaLabel', {
+        defaultMessage: '{count} available filters',
+        values: { count },
       }),
     'euiFlyout.closeAriaLabel': i18n.translate('core.euiFlyout.closeAriaLabel', {
       defaultMessage: 'Close this dialog',

src/dev/license_checker/config.ts

@@ -75,7 +75,7 @@ export const LICENSE_OVERRIDES = {
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   'node-sql-parser@3.6.1': ['(GPL-2.0 OR MIT)'], // GPL-2.0* https://github.com/taozhi8833998/node-sql-parser
   '@elastic/ems-client@7.15.0': ['Elastic License 2.0'],
-  '@elastic/eui@37.3.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@37.3.1': ['SSPL-1.0 OR Elastic License 2.0'],
 
   // TODO can be removed if the https://github.com/jindw/xmldom/issues/239 is released
   'xmldom@0.1.27': ['MIT'],

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

@@ -1326,7 +1326,12 @@ exports[`Field for image setting should render as read only if saving is disable
       disabled={true}
       display="large"
       fullWidth={true}
-      initialPromptText="Select or drag and drop a file"
+      initialPromptText={
+        <EuiI18n
+          default="Select or drag and drop a file"
+          token="euiFilePicker.promptText"
+        />
+      }
       onChange={[Function]}
     />
   </EuiFormRow>
@@ -1472,7 +1477,12 @@ exports[`Field for image setting should render custom setting icon if it is cust
       disabled={false}
       display="large"
       fullWidth={true}
-      initialPromptText="Select or drag and drop a file"
+      initialPromptText={
+        <EuiI18n
+          default="Select or drag and drop a file"
+          token="euiFilePicker.promptText"
+        />
+      }
       onChange={[Function]}
     />
   </EuiFormRow>
@@ -1526,7 +1536,12 @@ exports[`Field for image setting should render default value if there is no user
       disabled={false}
       display="large"
       fullWidth={true}
-      initialPromptText="Select or drag and drop a file"
+      initialPromptText={
+        <EuiI18n
+          default="Select or drag and drop a file"
+          token="euiFilePicker.promptText"
+        />
+      }
       onChange={[Function]}
     />
   </EuiFormRow>
@@ -1597,7 +1612,12 @@ exports[`Field for image setting should render unsaved value if there are unsave
       disabled={false}
       display="large"
       fullWidth={true}
-      initialPromptText="Select or drag and drop a file"
+      initialPromptText={
+        <EuiI18n
+          default="Select or drag and drop a file"
+          token="euiFilePicker.promptText"
+        />
+      }
       onChange={[Function]}
     />
     <EuiScreenReaderOnly>

src/plugins/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap

@@ -1403,7 +1403,7 @@ exports[`Inspector Data View component should render single table without select
                                   >
                                     <button
                                       aria-label="Previous page"
-                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                                       data-test-subj="pagination-button-previous"
                                       disabled={true}
                                       onClick={[Function]}
@@ -1431,9 +1431,13 @@ exports[`Inspector Data View component should render single table without select
                               <ul
                                 className="euiPagination__list"
                               >
-                                <PaginationButton
+                                <PaginationButtonWrapper
+                                  activePage={0}
+                                  ariaControls="__table_generated-id"
                                   key="0"
+                                  pageCount={1}
                                   pageIndex={0}
+                                  safeClick={[Function]}
                                 >
                                   <li
                                     className="euiPagination__item"
@@ -1513,7 +1517,7 @@ exports[`Inspector Data View component should render single table without select
                                       </EuiI18n>
                                     </EuiPaginationButton>
                                   </li>
-                                </PaginationButton>
+                                </PaginationButtonWrapper>
                               </ul>
                               <EuiI18n
                                 default="Next page, {page}"
@@ -1538,7 +1542,7 @@ exports[`Inspector Data View component should render single table without select
                                   >
                                     <button
                                       aria-label="Next page"
-                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                                       data-test-subj="pagination-button-next"
                                       disabled={true}
                                       onClick={[Function]}
@@ -2965,7 +2969,7 @@ exports[`Inspector Data View component should support multiple datatables 1`] =
                                   >
                                     <button
                                       aria-label="Previous page"
-                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                                       data-test-subj="pagination-button-previous"
                                       disabled={true}
                                       onClick={[Function]}
@@ -2993,9 +2997,13 @@ exports[`Inspector Data View component should support multiple datatables 1`] =
                               <ul
                                 className="euiPagination__list"
                               >
-                                <PaginationButton
+                                <PaginationButtonWrapper
+                                  activePage={0}
+                                  ariaControls="__table_generated-id"
                                   key="0"
+                                  pageCount={1}
                                   pageIndex={0}
+                                  safeClick={[Function]}
                                 >
                                   <li
                                     className="euiPagination__item"
@@ -3075,7 +3083,7 @@ exports[`Inspector Data View component should support multiple datatables 1`] =
                                       </EuiI18n>
                                     </EuiPaginationButton>
                                   </li>
-                                </PaginationButton>
+                                </PaginationButtonWrapper>
                               </ul>
                               <EuiI18n
                                 default="Next page, {page}"
@@ -3100,7 +3108,7 @@ exports[`Inspector Data View component should support multiple datatables 1`] =
                                   >
                                     <button
                                       aria-label="Next page"
-                                      className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                                      className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                                       data-test-subj="pagination-button-next"
                                       disabled={true}
                                       onClick={[Function]}

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

@@ -1287,7 +1287,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
         >
           <button
             aria-label="Previous page"
-            className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+            className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
             data-test-subj="pagination-button-previous"
             disabled={true}
             onClick={[Function]}
@@ -1331,7 +1331,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </ul>
           <button
             aria-label="Next page"
-            className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+            className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
             data-test-subj="pagination-button-next"
             disabled={true}
             onClick={[Function]}

x-pack/plugins/canvas/public/components/home/my_workpads/__snapshots__/workpad_table.stories.storyshot

@@ -906,7 +906,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
             >
               <button
                 aria-label="Previous page"
-                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                 data-test-subj="pagination-button-previous"
                 disabled={true}
                 onClick={[Function]}
@@ -950,7 +950,7 @@ exports[`Storyshots Home/Components/Workpad Table Workpad Table 1`] = `
               </ul>
               <button
                 aria-label="Next page"
-                className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                 data-test-subj="pagination-button-next"
                 disabled={true}
                 onClick={[Function]}

x-pack/plugins/canvas/shareable_runtime/api/__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\\"><span data-euiicon-type=\\"logoElastic\\"></span></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 euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></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 euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></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\\"><span data-euiicon-type=\\"logoElastic\\"></span></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-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></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-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></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\\"><span data-euiicon-type=\\"logoElastic\\"></span></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 euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></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 euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></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\\"><span data-euiicon-type=\\"logoElastic\\"></span></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-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></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-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></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\\"><span data-euiicon-type=\\"logoElastic\\"></span></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 euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></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 euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></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\\"><span data-euiicon-type=\\"logoElastic\\"></span></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-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></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-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></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\\"><span data-euiicon-type=\\"logoElastic\\"></span></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 euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></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 euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></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\\"><span data-euiicon-type=\\"logoElastic\\"></span></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-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></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-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></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\\"><span data-euiicon-type=\\"logoElastic\\"></span></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 euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></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 euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></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\\"><span data-euiicon-type=\\"logoElastic\\"></span></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-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsPrevPage\\" aria-label=\\"Previous Page\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></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-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" data-test-subj=\\"pageControlsNextPage\\" aria-label=\\"Next Page\\"><span data-euiicon-type=\\"arrowRight\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div><div class=\\"euiFlexGroup euiFlexGroup--alignItemsFlexEnd euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><div class=\\"euiPopover euiPopover--anchorUpRight\\" id=\\"settings\\"><div class=\\"euiPopover__anchor\\"><button class=\\"euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall\\" type=\\"button\\" aria-label=\\"Settings\\"><span data-euiicon-type=\\"gear\\" class=\\"euiButtonIcon__icon\\" aria-hidden=\\"true\\" color=\\"inherit\\"></span></button></div></div></div></div></div></div></div></div></div></div></div>"
 `;

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

@@ -1375,7 +1375,7 @@ exports[`Storyshots shareables/Canvas component 1`] = `
                 >
                   <button
                     aria-label="Previous Page"
-                    className="euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
+                    className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
                     data-test-subj="pageControlsPrevPage"
                     disabled={true}
                     onClick={[Function]}
@@ -2859,7 +2859,7 @@ exports[`Storyshots shareables/Canvas contextual: austin 1`] = `
                 >
                   <button
                     aria-label="Previous Page"
-                    className="euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
+                    className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
                     data-test-subj="pageControlsPrevPage"
                     disabled={true}
                     onClick={[Function]}
@@ -3159,7 +3159,7 @@ exports[`Storyshots shareables/Canvas contextual: hello 1`] = `
                 >
                   <button
                     aria-label="Previous Page"
-                    className="euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
+                    className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
                     data-test-subj="pageControlsPrevPage"
                     disabled={true}
                     onClick={[Function]}
@@ -3210,7 +3210,7 @@ exports[`Storyshots shareables/Canvas contextual: hello 1`] = `
                 >
                   <button
                     aria-label="Next Page"
-                    className="euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
+                    className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
                     data-test-subj="pageControlsNextPage"
                     disabled={true}
                     onClick={[Function]}

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

@@ -1328,7 +1328,7 @@ exports[`Storyshots shareables/Footer contextual: austin 1`] = `
               >
                 <button
                   aria-label="Previous Page"
-                  className="euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
+                  className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
                   data-test-subj="pageControlsPrevPage"
                   disabled={true}
                   onClick={[Function]}
@@ -1582,7 +1582,7 @@ exports[`Storyshots shareables/Footer contextual: hello 1`] = `
               >
                 <button
                   aria-label="Previous Page"
-                  className="euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
+                  className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
                   data-test-subj="pageControlsPrevPage"
                   disabled={true}
                   onClick={[Function]}
@@ -1633,7 +1633,7 @@ exports[`Storyshots shareables/Footer contextual: hello 1`] = `
               >
                 <button
                   aria-label="Next Page"
-                  className="euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
+                  className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
                   data-test-subj="pageControlsNextPage"
                   disabled={true}
                   onClick={[Function]}

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

@@ -22,7 +22,7 @@ exports[`Storyshots shareables/Footer/PageControls component 1`] = `
     >
       <button
         aria-label="Previous Page"
-        className="euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
+        className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
         data-test-subj="pageControlsPrevPage"
         disabled={true}
         onClick={[Function]}
@@ -120,7 +120,7 @@ exports[`Storyshots shareables/Footer/PageControls contextual: austin 1`] = `
     >
       <button
         aria-label="Previous Page"
-        className="euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
+        className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
         data-test-subj="pageControlsPrevPage"
         disabled={true}
         onClick={[Function]}
@@ -218,7 +218,7 @@ exports[`Storyshots shareables/Footer/PageControls contextual: hello 1`] = `
     >
       <button
         aria-label="Previous Page"
-        className="euiButtonIcon euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
+        className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--ghost euiButtonIcon--empty euiButtonIcon--xSmall"
         data-test-subj="pageControlsPrevPage"
         disabled={true}
         onClick={[Function]}

x-pack/plugins/license_management/__jest__/__snapshots__/upload_license.test.tsx.snap

@@ -718,18 +718,8 @@ exports[`UploadLicense should display a modal when license requires acknowledgem
                         onChange={[Function]}
                       >
                         <EuiI18n
-                          defaults={
-                            Array [
-                              "Clear selected files",
-                              "files selected",
-                            ]
-                          }
-                          tokens={
-                            Array [
-                              "euiFilePicker.clearSelectedFiles",
-                              "euiFilePicker.filesSelected",
-                            ]
-                          }
+                          default="Clear selected files"
+                          token="euiFilePicker.clearSelectedFiles"
                         >
                           <div
                             className="euiFilePicker euiFilePicker--large euiFilePicker--fullWidth"
@@ -1440,18 +1430,8 @@ exports[`UploadLicense should display an error when ES says license is expired 1
                         onChange={[Function]}
                       >
                         <EuiI18n
-                          defaults={
-                            Array [
-                              "Clear selected files",
-                              "files selected",
-                            ]
-                          }
-                          tokens={
-                            Array [
-                              "euiFilePicker.clearSelectedFiles",
-                              "euiFilePicker.filesSelected",
-                            ]
-                          }
+                          default="Clear selected files"
+                          token="euiFilePicker.clearSelectedFiles"
                         >
                           <div
                             className="euiFilePicker euiFilePicker--large euiFilePicker--fullWidth"
@@ -2162,18 +2142,8 @@ exports[`UploadLicense should display an error when ES says license is invalid 1
                         onChange={[Function]}
                       >
                         <EuiI18n
-                          defaults={
-                            Array [
-                              "Clear selected files",
-                              "files selected",
-                            ]
-                          }
-                          tokens={
-                            Array [
-                              "euiFilePicker.clearSelectedFiles",
-                              "euiFilePicker.filesSelected",
-                            ]
-                          }
+                          default="Clear selected files"
+                          token="euiFilePicker.clearSelectedFiles"
                         >
                           <div
                             className="euiFilePicker euiFilePicker--large euiFilePicker--fullWidth"
@@ -2884,18 +2854,8 @@ exports[`UploadLicense should display an error when submitting invalid JSON 1`]
                         onChange={[Function]}
                       >
                         <EuiI18n
-                          defaults={
-                            Array [
-                              "Clear selected files",
-                              "files selected",
-                            ]
-                          }
-                          tokens={
-                            Array [
-                              "euiFilePicker.clearSelectedFiles",
-                              "euiFilePicker.filesSelected",
-                            ]
-                          }
+                          default="Clear selected files"
+                          token="euiFilePicker.clearSelectedFiles"
                         >
                           <div
                             className="euiFilePicker euiFilePicker--large euiFilePicker--fullWidth"
@@ -3606,18 +3566,8 @@ exports[`UploadLicense should display error when ES returns error 1`] = `
                         onChange={[Function]}
                       >
                         <EuiI18n
-                          defaults={
-                            Array [
-                              "Clear selected files",
-                              "files selected",
-                            ]
-                          }
-                          tokens={
-                            Array [
-                              "euiFilePicker.clearSelectedFiles",
-                              "euiFilePicker.filesSelected",
-                            ]
-                          }
+                          default="Clear selected files"
+                          token="euiFilePicker.clearSelectedFiles"
                         >
                           <div
                             className="euiFilePicker euiFilePicker--large euiFilePicker--fullWidth"

x-pack/plugins/reporting/public/management/__snapshots__/report_listing.test.tsx.snap

@@ -9876,7 +9876,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
                         >
                           <button
                             aria-label="Previous page"
-                            className="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                            className="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                             data-test-subj="pagination-button-previous"
                             disabled={true}
                             onClick={[Function]}
@@ -9904,9 +9904,13 @@ exports[`ReportListing Report job listing with some items 1`] = `
                     <ul
                       className="euiPagination__list"
                     >
-                      <PaginationButton
+                      <PaginationButtonWrapper
+                        activePage={0}
+                        ariaControls="generated-id"
                         key="0"
+                        pageCount={2}
                         pageIndex={0}
+                        safeClick={[Function]}
                       >
                         <li
                           className="euiPagination__item"
@@ -9986,10 +9990,14 @@ exports[`ReportListing Report job listing with some items 1`] = `
                             </EuiI18n>
                           </EuiPaginationButton>
                         </li>
-                      </PaginationButton>
-                      <PaginationButton
+                      </PaginationButtonWrapper>
+                      <PaginationButtonWrapper
+                        activePage={0}
+                        ariaControls="generated-id"
                         key="1"
+                        pageCount={2}
                         pageIndex={1}
+                        safeClick={[Function]}
                       >
                         <li
                           className="euiPagination__item"
@@ -10067,7 +10075,7 @@ exports[`ReportListing Report job listing with some items 1`] = `
                             </EuiI18n>
                           </EuiPaginationButton>
                         </li>
-                      </PaginationButton>
+                      </PaginationButtonWrapper>
                     </ul>
                     <EuiI18n
                       default="Next page, {page}"

x-pack/plugins/security_solution/cypress/tasks/alerts.ts

@@ -80,7 +80,7 @@ export const viewThreatDetails = () => {
 export const setEnrichmentDates = (from?: string, to?: string) => {
   cy.get(ENRICHMENT_QUERY_RANGE_PICKER).within(() => {
     if (from) {
-      cy.get(ENRICHMENT_QUERY_START_INPUT).type(`{selectall}${from}{enter}`);
+      cy.get(ENRICHMENT_QUERY_START_INPUT).first().type(`{selectall}${from}{enter}`);
     }
     if (to) {
       cy.get(ENRICHMENT_QUERY_END_INPUT).type(`{selectall}${to}{enter}`);

x-pack/plugins/security_solution/public/common/components/event_details/cti_details/enrichment_range_picker.test.tsx

@@ -40,6 +40,7 @@ describe('EnrichmentRangePicker', () => {
 
     wrapper
       .find('input.start-picker')
+      .first()
       .simulate('change', { target: { value: '08/10/2019 06:29 PM' } });
     wrapper.find('[data-test-subj="enrichment-button"]').hostNodes().simulate('click');
 

x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/__snapshots__/index.test.tsx.snap

@@ -205,7 +205,7 @@ exports[`TrustedAppsGrid renders correctly when failed loading data for the seco
             >
               <button
                 aria-label="Previous page"
-                class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                 data-test-subj="pagination-button-previous"
                 disabled=""
                 type="button"
@@ -3432,7 +3432,7 @@ exports[`TrustedAppsGrid renders correctly when loaded data 1`] = `
             >
               <button
                 aria-label="Previous page"
-                class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                 data-test-subj="pagination-button-previous"
                 disabled=""
                 type="button"
@@ -6702,7 +6702,7 @@ exports[`TrustedAppsGrid renders correctly when loading data for the second time
             >
               <button
                 aria-label="Previous page"
-                class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+                class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
                 data-test-subj="pagination-button-previous"
                 disabled=""
                 type="button"

x-pack/plugins/translations/translations/ja-JP.json

@@ -291,7 +291,6 @@
     "core.euiColumnSelector.searchcolumns": "列を検索",
     "core.euiColumnSelector.selectAll": "すべて表示",
     "core.euiColumnSorting.button": "フィールドの並べ替え",
-    "core.euiColumnSorting.buttonActive": "並べ替えられたフィールド",
     "core.euiColumnSorting.clearAll": "並び替えを消去",
     "core.euiColumnSorting.emptySorting": "現在並び替えられているフィールドはありません",
     "core.euiColumnSorting.pickFields": "並び替え基準でフィールドの選択",
@@ -325,7 +324,6 @@
     "core.euiFieldPassword.maskPassword": "パスワードをマスク",
     "core.euiFieldPassword.showPassword": "プレーンテキストとしてパスワードを表示します。注記：パスワードは画面上に見えるように表示されます。",
     "core.euiFilePicker.clearSelectedFiles": "選択したファイルを消去",
-    "core.euiFilePicker.filesSelected": "選択されたファイル",
     "core.euiFlyout.closeAriaLabel": "このダイアログを閉じる",
     "core.euiForm.addressFormErrors": "ハイライトされたエラーを修正してください。",
     "core.euiFormControlLayoutClearButton.label": "インプットを消去",

x-pack/plugins/translations/translations/zh-CN.json

@@ -294,7 +294,6 @@
     "core.euiColumnSelector.searchcolumns": "搜索列",
     "core.euiColumnSelector.selectAll": "全部显示",
     "core.euiColumnSorting.button": "排序字段",
-    "core.euiColumnSorting.buttonActive": "个字段已排序",
     "core.euiColumnSorting.clearAll": "清除排序",
     "core.euiColumnSorting.emptySorting": "当前未排序任何字段",
     "core.euiColumnSorting.pickFields": "选取排序依据的字段",
@@ -328,7 +327,6 @@
     "core.euiFieldPassword.maskPassword": "屏蔽密码",
     "core.euiFieldPassword.showPassword": "将密码显示为纯文本。注意：这会将您的密码暴露在屏幕上。",
     "core.euiFilePicker.clearSelectedFiles": "清除选定的文件",
-    "core.euiFilePicker.filesSelected": "个文件已选择",
     "core.euiFlyout.closeAriaLabel": "关闭此对话框",
     "core.euiForm.addressFormErrors": "请解决突出显示的错误。",
     "core.euiFormControlLayoutClearButton.label": "清除输入",

x-pack/plugins/uptime/public/components/monitor/status_details/availability_reporting/__snapshots__/location_status_tags.test.tsx.snap

@@ -975,7 +975,7 @@ exports[`LocationStatusTags component renders when there are many location 1`] =
           >
             <button
               aria-label="Previous page"
-              class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
+              class="euiButtonIcon euiButtonIcon-isDisabled euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall"
               data-test-subj="pagination-button-previous"
               disabled=""
               type="button"

yarn.lock

@@ -1487,10 +1487,10 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@37.3.0":
-  version "37.3.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-37.3.0.tgz#98e19f7fd610df2198de453c6078032057012249"
-  integrity sha512-CxWPS8GL+0GN/fUnQ8PRb9t6Iep1UNpBGOfbbx/jyoGmVtoMLXp4RRNCd10iCZR0oXMD8gmtdul5OJwRYLkD7g==
+"@elastic/eui@37.3.1":
+  version "37.3.1"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-37.3.1.tgz#077066c3fb614d6d95b16af7185a3e940e84c38d"
+  integrity sha512-65yUfDnfVWwDJyUX7S/yNiYBwLL6hvARProoHPzSdp3hTWLgMKyhXFVdwqMgjTeyXt/69Haiza+fAzzW174w/w==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"