Upgrade EUI to 11.3.2 (#38262)

* eui 11.3.1

* EuiSuperSelect TS updates

* EuiColorPicker updates

* EuiBadge updates

* a11y updates

* i18n service updates

* remove unused translations

* move valueOfSelected logic to private method

* update EuiColorPicker class name

* Updated canvas storyshots

* i18n fixes; maps color selection position

* i18n snapshot updates

* update canvas storyshots

* snapshot updates

* 11.3.2

* maps colorpicker

* space avatar colorpicker

package.json

@@ -104,7 +104,7 @@
     "@babel/register": "7.4.4",
     "@elastic/charts": "^4.2.6",
     "@elastic/datemath": "5.0.2",
-    "@elastic/eui": "11.0.1",
+    "@elastic/eui": "11.3.2",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "2.3.3",

src/core/public/i18n/i18n_service.tsx

@@ -65,6 +65,18 @@ export class I18nService {
             'Screen reader announcement that functionality is available in the page document',
         }
       ),
+      'euiCardSelect.select': i18n.translate('core.euiCardSelect.select', {
+        defaultMessage: 'Select',
+        description: 'Displayed button text when a card option can be selected.',
+      }),
+      'euiCardSelect.selected': i18n.translate('core.euiCardSelect.selected', {
+        defaultMessage: 'Unavailable',
+        description: 'Displayed button text when a card option is selected.',
+      }),
+      'euiCardSelect.unavailable': i18n.translate('core.euiCardSelect.unavailable', {
+        defaultMessage: 'Selected',
+        description: 'Displayed button text when a card option is unavailable.',
+      }),
       'euiCodeBlock.copyButton': i18n.translate('core.euiCodeBlock.copyButton', {
         defaultMessage: 'Copy',
         description: 'ARIA label for a button that copies source code text to the clipboard',
@@ -89,15 +101,22 @@ export class I18nService {
             'ARIA label and tooltip content describing a button that expands an actions menu',
         }
       ),
-      'euiColorPicker.colorSelectionLabel': ({ colorValue }: EuiValues) =>
-        i18n.translate('core.euiColorPicker.colorSelectionLabel', {
-          defaultMessage: 'Color selection is {colorValue}',
-          values: { colorValue },
+      'euiColorPicker.screenReaderAnnouncement': i18n.translate(
+        'core.euiColorPicker.screenReaderAnnouncement',
+        {
+          defaultMessage:
+            'A popup with a range of selectable colors opened. Tab forward to cycle through colors choices or press escape to close this popup.',
+          description:
+            'Message when the color picker popover is opened. Describes the interaction with the elements in the popover.',
+        }
+      ),
+      'euiColorPicker.swatchAriaLabel': ({ swatch }: EuiValues) =>
+        i18n.translate('core.euiColorPicker.swatchAriaLabel', {
+          defaultMessage: 'Select {swatch} as the color',
+          values: { swatch },
+          description:
+            'Screen reader text to describe the action and hex value of the selectable option',
         }),
-      'euiColorPicker.transparentColor': i18n.translate('core.euiColorPicker.transparentColor', {
-        defaultMessage: 'transparent',
-        description: 'Describes a color that is fully transparent',
-      }),
       'euiComboBoxOptionsList.allOptionsSelected': i18n.translate(
         'core.euiComboBoxOptionsList.allOptionsSelected',
         {
@@ -144,6 +163,11 @@ export class I18nService {
           values: { children },
           description: 'ARIA label, `children` is the human-friendly value of an option',
         }),
+      'euiFilterButton.filterBadge': ({ count, hasActiveFilters }: EuiValues) =>
+        i18n.translate('core.euiFilterButton.filterBadge', {
+          defaultMessage: '${count} ${filterCountLabel} filters',
+          values: { count, filterCountLabel: hasActiveFilters ? 'active' : 'available' },
+        }),
       'euiForm.addressFormErrors': i18n.translate('core.euiForm.addressFormErrors', {
         defaultMessage: 'Please address the errors in your form.',
       }),
@@ -168,6 +192,9 @@ export class I18nService {
           defaultMessage: 'Open navigation menu',
         }
       ),
+      'euiHue.label': i18n.translate('core.euiHue.label', {
+        defaultMessage: 'Select the HSV color mode "hue" value',
+      }),
       'euiModal.closeModal': i18n.translate('core.euiModal.closeModal', {
         defaultMessage: 'Closes this modal window',
       }),
@@ -193,6 +220,16 @@ export class I18nService {
           defaultMessage: 'You are in a popup. To exit this popup, hit Escape.',
         }
       ),
+      'euiSaturation.roleDescription': i18n.translate('core.euiSaturation.roleDescription', {
+        defaultMessage: 'HSV color mode saturation and value selection',
+      }),
+      'euiSaturation.screenReaderAnnouncement': i18n.translate(
+        'core.euiSaturation.screenReaderAnnouncement',
+        {
+          defaultMessage:
+            'Use the arrow keys to navigate the square color gradient. The coordinates resulting from each key press will be used to calculate HSV color mode "saturation" and "value" numbers, in the range of 0 to 1. Left and right decrease and increase (respectively) the "saturation" value. Up and down decrease and increase (respectively) the "value" value.',
+        }
+      ),
       'euiSelectable.loadingOptions': i18n.translate('core.euiSelectable.loadingOptions', {
         defaultMessage: 'Loading options',
         description: 'Placeholder message while data is asynchronously loaded',
@@ -207,6 +244,9 @@ export class I18nService {
           values={{ searchValue }}
         />
       ),
+      'euiStat.loadingText': () => (
+        <FormattedMessage id="core.euiStat.loadingText" defaultMessage="Statistic is loading" />
+      ),
       'euiStep.completeStep': i18n.translate('core.euiStep.completeStep', {
         defaultMessage: 'Step',
         description:
@@ -260,6 +300,12 @@ export class I18nService {
         defaultMessage: 'Rows per page',
         description: 'Displayed in a button that toggles a table pagination menu',
       }),
+      'euiTablePagination.rowsPerPageOption': ({ rowsPerPage }: EuiValues) =>
+        i18n.translate('core.euiTablePagination.rowsPerPageOption', {
+          defaultMessage: '{rowsPerPage} rows',
+          description: 'Displayed in a button that toggles the number of visible rows',
+          values: { rowsPerPage },
+        }),
       'euiTableSortMobile.sorting': i18n.translate('core.euiTableSortMobile.sorting', {
         defaultMessage: 'Sorting',
         description: 'Displayed in a button that toggles a table sorting menu',

src/legacy/core_plugins/metrics/public/components/_color_picker.scss

@@ -12,7 +12,7 @@
 .tvbColorPicker__swatch {
   // SASSTODO: Replace with EUI component
   // sass-lint:disable-block placeholder-in-extend
-  @extend .euiColorPicker__swatch;
+  @extend .euiColorPickerSwatch;
 }
 
 .tvbColorPicker__swatch-empty {

test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json

@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "11.0.1",
+    "@elastic/eui": "11.3.2",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   }

test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json

@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "11.0.1",
+    "@elastic/eui": "11.3.2",
     "react": "^16.8.0"
   }
 }

test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json

@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "11.0.1",
+    "@elastic/eui": "11.3.2",
     "react": "^16.8.0"
   },
   "scripts": {

test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json

@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "11.0.1",
+    "@elastic/eui": "11.3.2",
     "react": "^16.8.0"
   },
   "scripts": {

test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json

@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "11.0.1",
+    "@elastic/eui": "11.3.2",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   }

x-pack/package.json

@@ -169,7 +169,7 @@
     "@babel/register": "7.4.4",
     "@babel/runtime": "7.4.5",
     "@elastic/datemath": "5.0.2",
-    "@elastic/eui": "11.0.1",
+    "@elastic/eui": "11.3.2",
     "@elastic/javascript-typescript-langserver": "^0.1.28",
     "@elastic/lsp-extension": "^0.1.1",
     "@elastic/node-crypto": "^1.0.0",

x-pack/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/MachineLearningFlyout/TransactionSelect.tsx

@@ -8,7 +8,6 @@ import {
   EuiFlexGroup,
   EuiFlexItem,
   EuiFormRow,
-  // @ts-ignore
   EuiSuperSelect,
   EuiText
 } from '@elastic/eui';