Upgrade EUI to v55.0.1 (#130593)

* eui to v55.0.0

* remove jest polyfill

* i18n tokens

* hasFocus prop

* eui to v55.0.1

* removed obsolete mixin arg

* i18n snapshots

* hasFocus snapshots

* formRow snapshots

* euiAvatar snapshots

* euiContextMenu snapshot

* update focus

* hasFocus snapshots

* [Security] wait for popover panel focus before checking for field input focus

- possible race condition failure where cypress is clicking the input too quickly and the popover is stealing focus back onto the panel

* Fix ML focus issue in Filter settings

* Fix jest tests

* [ML] Fix stale / loading EuiContextMenuPanel item

* Fix ML watched props for EuiContextMenuPanel

Co-authored-by: Constance Chen <constance.chen@elastic.co>
Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Quynh Nguyen <quynh.nguyen@elastic.co>

package.json

@@ -108,7 +108,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.2.0-canary.2",
     "@elastic/ems-client": "8.3.0",
-    "@elastic/eui": "54.0.0",
+    "@elastic/eui": "55.0.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

packages/kbn-test/src/jest/setup/polyfills.jsdom.js

@@ -14,7 +14,3 @@ require('whatwg-fetch');
 if (!global.URL.hasOwnProperty('createObjectURL')) {
   Object.defineProperty(global.URL, 'createObjectURL', { value: () => '' });
 }
-
-// Will be replaced with a better solution in EUI
-// https://github.com/elastic/eui/issues/3713
-global._isJest = true;

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

@@ -141,6 +141,8 @@ exports[`#start() returns \`Context\` component 1`] = `
           "euiImage.openImage": [Function],
           "euiLink.external.ariaLabel": "External link",
           "euiLink.newTarget.screenReaderOnlyText": "(opens in a new tab or window)",
+          "euiMark.highlightEnd": "highlight end",
+          "euiMark.highlightStart": "highlight start",
           "euiMarkdownEditorFooter.closeButton": "Close",
           "euiMarkdownEditorFooter.errorsTitle": "Errors",
           "euiMarkdownEditorFooter.mdSyntaxLink": "GitHub flavored markdown",

src/core/public/i18n/i18n_eui_mapping.tsx

@@ -618,6 +618,12 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         defaultMessage: '(opens in a new tab or window)',
       }
     ),
+    'euiMark.highlightStart': i18n.translate('core.euiMark.highlightStart', {
+      defaultMessage: 'highlight start',
+    }),
+    'euiMark.highlightEnd': i18n.translate('core.euiMark.highlightEnd', {
+      defaultMessage: 'highlight end',
+    }),
     'euiMarkdownEditorFooter.closeButton': i18n.translate(
       'core.euiMarkdownEditorFooter.closeButton',
       {

src/dev/license_checker/config.ts

@@ -77,6 +77,6 @@ export const LICENSE_OVERRIDES = {
   'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/ems-client@8.3.0': ['Elastic License 2.0'],
-  '@elastic/eui@54.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@55.0.1': ['SSPL-1.0 OR Elastic License 2.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
 };

src/plugins/data_view_editor/public/components/preview_panel/indices_list/__snapshots__/indices_list.test.tsx.snap

@@ -65,7 +65,6 @@ exports[`IndicesList should change pages 1`] = `
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
-          hasFocus={true}
           items={
             Array [
               <EuiContextMenuItem
@@ -158,7 +157,6 @@ exports[`IndicesList should change per page 1`] = `
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
-          hasFocus={true}
           items={
             Array [
               <EuiContextMenuItem
@@ -273,7 +271,6 @@ exports[`IndicesList should highlight the query in the matches 1`] = `
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
-          hasFocus={true}
           items={
             Array [
               <EuiContextMenuItem
@@ -374,7 +371,6 @@ exports[`IndicesList should render normally 1`] = `
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
-          hasFocus={true}
           items={
             Array [
               <EuiContextMenuItem
@@ -539,7 +535,6 @@ exports[`IndicesList updating props should render all new indices 1`] = `
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
-          hasFocus={true}
           items={
             Array [
               <EuiContextMenuItem

src/plugins/data_view_field_editor/public/components/field_format_editor/editors/url/__snapshots__/url.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`UrlFormatEditor should render normally 1`] = `
 <div>
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--hasLabel"
     id="generated-id-row"
   >
     <div
@@ -67,7 +67,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
     </div>
   </div>
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--hasLabel"
     id="generated-id-row"
   >
     <div
@@ -129,7 +129,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
     </div>
   </div>
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--hasLabel"
     id="generated-id-row"
   >
     <div
@@ -194,7 +194,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
     </div>
   </div>
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--hasLabel"
     id="generated-id-row"
   >
     <div
@@ -259,7 +259,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
     </div>
   </div>
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--hasLabel"
     id="generated-id-row"
   >
     <div

src/plugins/es_ui_shared/public/components/cron_editor/__snapshots__/cron_editor.test.tsx.snap

@@ -23,7 +23,7 @@ exports[`CronEditor is rendered with a DAY frequency 1`] = `
     labelType="label"
   >
     <div
-      className="euiFormRow euiFormRow--fullWidth"
+      className="euiFormRow euiFormRow--fullWidth euiFormRow--hasLabel"
       id="generated-id-row"
     >
       <div
@@ -571,7 +571,7 @@ exports[`CronEditor is rendered with a DAY frequency 1`] = `
       labelType="label"
     >
       <div
-        className="euiFormRow euiFormRow--fullWidth"
+        className="euiFormRow euiFormRow--fullWidth euiFormRow--hasLabel"
         data-test-subj="cronFrequencyConfiguration"
         id="generated-id-row"
       >
@@ -1663,7 +1663,7 @@ exports[`CronEditor is rendered with a HOUR frequency 1`] = `
     labelType="label"
   >
     <div
-      className="euiFormRow euiFormRow--fullWidth"
+      className="euiFormRow euiFormRow--fullWidth euiFormRow--hasLabel"
       id="generated-id-row"
     >
       <div
@@ -2110,7 +2110,7 @@ exports[`CronEditor is rendered with a HOUR frequency 1`] = `
       labelType="label"
     >
       <div
-        className="euiFormRow euiFormRow--fullWidth"
+        className="euiFormRow euiFormRow--fullWidth euiFormRow--hasLabel"
         data-test-subj="cronFrequencyConfiguration"
         id="generated-id-row"
       >
@@ -2860,7 +2860,7 @@ exports[`CronEditor is rendered with a MINUTE frequency 1`] = `
     labelType="label"
   >
     <div
-      className="euiFormRow euiFormRow--fullWidth"
+      className="euiFormRow euiFormRow--fullWidth euiFormRow--hasLabel"
       id="generated-id-row"
     >
       <div
@@ -3068,7 +3068,7 @@ exports[`CronEditor is rendered with a MONTH frequency 1`] = `
     labelType="label"
   >
     <div
-      className="euiFormRow euiFormRow--fullWidth"
+      className="euiFormRow euiFormRow--fullWidth euiFormRow--hasLabel"
       id="generated-id-row"
     >
       <div
@@ -3745,7 +3745,7 @@ exports[`CronEditor is rendered with a MONTH frequency 1`] = `
       labelType="label"
     >
       <div
-        className="euiFormRow euiFormRow--fullWidth"
+        className="euiFormRow euiFormRow--fullWidth euiFormRow--hasLabel"
         data-test-subj="cronFrequencyConfiguration"
         id="generated-id-row"
       >
@@ -4195,7 +4195,7 @@ exports[`CronEditor is rendered with a MONTH frequency 1`] = `
       labelType="label"
     >
       <div
-        className="euiFormRow euiFormRow--fullWidth"
+        className="euiFormRow euiFormRow--fullWidth euiFormRow--hasLabel"
         data-test-subj="cronFrequencyConfiguration"
         id="generated-id-row"
       >
@@ -5287,7 +5287,7 @@ exports[`CronEditor is rendered with a WEEK frequency 1`] = `
     labelType="label"
   >
     <div
-      className="euiFormRow euiFormRow--fullWidth"
+      className="euiFormRow euiFormRow--fullWidth euiFormRow--hasLabel"
       id="generated-id-row"
     >
       <div
@@ -5868,7 +5868,7 @@ exports[`CronEditor is rendered with a WEEK frequency 1`] = `
       labelType="label"
     >
       <div
-        className="euiFormRow euiFormRow--fullWidth"
+        className="euiFormRow euiFormRow--fullWidth euiFormRow--hasLabel"
         data-test-subj="cronFrequencyConfiguration"
         id="generated-id-row"
       >
@@ -6078,7 +6078,7 @@ exports[`CronEditor is rendered with a WEEK frequency 1`] = `
       labelType="label"
     >
       <div
-        className="euiFormRow euiFormRow--fullWidth"
+        className="euiFormRow euiFormRow--fullWidth euiFormRow--hasLabel"
         data-test-subj="cronFrequencyConfiguration"
         id="generated-id-row"
       >
@@ -7170,7 +7170,7 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
     labelType="label"
   >
     <div
-      className="euiFormRow euiFormRow--fullWidth"
+      className="euiFormRow euiFormRow--fullWidth euiFormRow--hasLabel"
       id="generated-id-row"
     >
       <div
@@ -7900,7 +7900,7 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
       labelType="label"
     >
       <div
-        className="euiFormRow euiFormRow--fullWidth"
+        className="euiFormRow euiFormRow--fullWidth euiFormRow--hasLabel"
         data-test-subj="cronFrequencyConfiguration"
         id="generated-id-row"
       >
@@ -8160,7 +8160,7 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
       labelType="label"
     >
       <div
-        className="euiFormRow euiFormRow--fullWidth"
+        className="euiFormRow euiFormRow--fullWidth euiFormRow--hasLabel"
         data-test-subj="cronFrequencyConfiguration"
         id="generated-id-row"
       >
@@ -8610,7 +8610,7 @@ exports[`CronEditor is rendered with a YEAR frequency 1`] = `
       labelType="label"
     >
       <div
-        className="euiFormRow euiFormRow--fullWidth"
+        className="euiFormRow euiFormRow--fullWidth euiFormRow--hasLabel"
         data-test-subj="cronFrequencyConfiguration"
         id="generated-id-row"
       >

src/plugins/unified_search/public/typeahead/_suggestion.scss

@@ -18,7 +18,7 @@ $kbnTypeaheadTypes: (
 }
 
 .kbnTypeahead__popover--bottom {
-  @include euiBottomShadow($adjustBorders: true);
+  @include euiBottomShadow;
   border-bottom-left-radius: $euiBorderRadius;
   border-bottom-right-radius: $euiBorderRadius;
 }

x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/__stories__/__snapshots__/extended_template.stories.storyshot

@@ -11,7 +11,7 @@ exports[`Storyshots arguments/AxisConfig extended 1`] = `
   }
 >
   <div
-    className="euiFormRow euiFormRow--compressed euiFormRow--horizontal"
+    className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed euiFormRow--horizontal"
     id="generated-id-row"
   >
     <div
@@ -91,7 +91,7 @@ exports[`Storyshots arguments/AxisConfig/components extended 1`] = `
   }
 >
   <div
-    className="euiFormRow euiFormRow--compressed euiFormRow--horizontal"
+    className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed euiFormRow--horizontal"
     id="generated-id-row"
   >
     <div

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

@@ -58,7 +58,7 @@ exports[`Storyshots components/Elements/CustomElementModal with description 1`]
               className="euiFlexItem euiFlexItem--flexGrow2 canvasCustomElementForm"
             >
               <div
-                className="euiFormRow euiFormRow--compressed"
+                className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
                 id="generated-id-row"
               >
                 <div
@@ -104,7 +104,7 @@ exports[`Storyshots components/Elements/CustomElementModal with description 1`]
                 </div>
               </div>
               <div
-                className="euiFormRow"
+                className="euiFormRow euiFormRow--hasLabel"
                 id="generated-id-row"
               >
                 <div
@@ -141,7 +141,7 @@ exports[`Storyshots components/Elements/CustomElementModal with description 1`]
                 </div>
               </div>
               <div
-                className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
+                className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed canvasCustomElementForm__thumbnail"
                 id="generated-id-row"
               >
                 <div
@@ -375,7 +375,7 @@ exports[`Storyshots components/Elements/CustomElementModal with image 1`] = `
               className="euiFlexItem euiFlexItem--flexGrow2 canvasCustomElementForm"
             >
               <div
-                className="euiFormRow euiFormRow--compressed"
+                className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
                 id="generated-id-row"
               >
                 <div
@@ -421,7 +421,7 @@ exports[`Storyshots components/Elements/CustomElementModal with image 1`] = `
                 </div>
               </div>
               <div
-                className="euiFormRow"
+                className="euiFormRow euiFormRow--hasLabel"
                 id="generated-id-row"
               >
                 <div
@@ -458,7 +458,7 @@ exports[`Storyshots components/Elements/CustomElementModal with image 1`] = `
                 </div>
               </div>
               <div
-                className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
+                className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed canvasCustomElementForm__thumbnail"
                 id="generated-id-row"
               >
                 <div
@@ -687,7 +687,7 @@ exports[`Storyshots components/Elements/CustomElementModal with name 1`] = `
               className="euiFlexItem euiFlexItem--flexGrow2 canvasCustomElementForm"
             >
               <div
-                className="euiFormRow euiFormRow--compressed"
+                className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
                 id="generated-id-row"
               >
                 <div
@@ -733,7 +733,7 @@ exports[`Storyshots components/Elements/CustomElementModal with name 1`] = `
                 </div>
               </div>
               <div
-                className="euiFormRow"
+                className="euiFormRow euiFormRow--hasLabel"
                 id="generated-id-row"
               >
                 <div
@@ -770,7 +770,7 @@ exports[`Storyshots components/Elements/CustomElementModal with name 1`] = `
                 </div>
               </div>
               <div
-                className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
+                className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed canvasCustomElementForm__thumbnail"
                 id="generated-id-row"
               >
                 <div
@@ -996,7 +996,7 @@ exports[`Storyshots components/Elements/CustomElementModal with title 1`] = `
               className="euiFlexItem euiFlexItem--flexGrow2 canvasCustomElementForm"
             >
               <div
-                className="euiFormRow euiFormRow--compressed"
+                className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
                 id="generated-id-row"
               >
                 <div
@@ -1042,7 +1042,7 @@ exports[`Storyshots components/Elements/CustomElementModal with title 1`] = `
                 </div>
               </div>
               <div
-                className="euiFormRow"
+                className="euiFormRow euiFormRow--hasLabel"
                 id="generated-id-row"
               >
                 <div
@@ -1079,7 +1079,7 @@ exports[`Storyshots components/Elements/CustomElementModal with title 1`] = `
                 </div>
               </div>
               <div
-                className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
+                className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed canvasCustomElementForm__thumbnail"
                 id="generated-id-row"
               >
                 <div

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

@@ -67,7 +67,7 @@ Array [
       className="euiForm"
     >
       <div
-        className="euiFormRow euiFormRow--compressed"
+        className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
         id="generated-id-row"
       >
         <div
@@ -99,7 +99,7 @@ Array [
         </div>
       </div>
       <div
-        className="euiFormRow euiFormRow--compressed"
+        className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
         id="generated-id-row"
       >
         <div
@@ -139,7 +139,7 @@ Array [
         </div>
       </div>
       <div
-        className="euiFormRow euiFormRow--compressed"
+        className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
         id="generated-id-row"
       >
         <div
@@ -364,7 +364,7 @@ Array [
       className="euiForm"
     >
       <div
-        className="euiFormRow euiFormRow--compressed"
+        className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
         id="generated-id-row"
       >
         <div
@@ -396,7 +396,7 @@ Array [
         </div>
       </div>
       <div
-        className="euiFormRow euiFormRow--compressed"
+        className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
         id="generated-id-row"
       >
         <div
@@ -436,7 +436,7 @@ Array [
         </div>
       </div>
       <div
-        className="euiFormRow euiFormRow--compressed"
+        className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
         id="generated-id-row"
       >
         <div
@@ -602,7 +602,7 @@ Array [
       className="euiForm"
     >
       <div
-        className="euiFormRow euiFormRow--compressed"
+        className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
         id="generated-id-row"
       >
         <div
@@ -634,7 +634,7 @@ Array [
         </div>
       </div>
       <div
-        className="euiFormRow euiFormRow--compressed"
+        className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
         id="generated-id-row"
       >
         <div
@@ -674,7 +674,7 @@ Array [
         </div>
       </div>
       <div
-        className="euiFormRow euiFormRow--compressed"
+        className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
         id="generated-id-row"
       >
         <div
@@ -813,7 +813,7 @@ Array [
       className="euiForm"
     >
       <div
-        className="euiFormRow euiFormRow--compressed"
+        className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
         id="generated-id-row"
       >
         <div
@@ -845,7 +845,7 @@ Array [
         </div>
       </div>
       <div
-        className="euiFormRow euiFormRow--compressed"
+        className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
         id="generated-id-row"
       >
         <div
@@ -885,7 +885,7 @@ Array [
         </div>
       </div>
       <div
-        className="euiFormRow euiFormRow--compressed"
+        className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
         id="generated-id-row"
       >
         <div

x-pack/plugins/canvas/public/expression_types/arg_types/container_style/__stories__/__snapshots__/extended_template.stories.storyshot

@@ -30,7 +30,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
         className="euiFlexItem euiFlexItem--flexGrow2"
       >
         <div
-          className="euiFormRow euiFormRow--compressed"
+          className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
           id="generated-id-row"
         >
           <div
@@ -71,7 +71,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
         className="euiFlexItem euiFlexItem--flexGrow3"
       >
         <div
-          className="euiFormRow euiFormRow--compressed"
+          className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
           id="generated-id-row"
         >
           <div
@@ -159,7 +159,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
         className="euiFlexItem euiFlexItem--flexGrow3"
       >
         <div
-          className="euiFormRow euiFormRow--compressed"
+          className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
           id="generated-id-row"
         >
           <div
@@ -245,7 +245,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
         className="euiFlexItem euiFlexItem--flexGrow2"
       >
         <div
-          className="euiFormRow euiFormRow--compressed"
+          className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
           id="generated-id-row"
         >
           <div
@@ -286,7 +286,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
         className="euiFlexItem euiFlexItem--flexGrow3"
       >
         <div
-          className="euiFormRow euiFormRow--compressed"
+          className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
           id="generated-id-row"
         >
           <div
@@ -322,7 +322,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
         className="euiFlexItem euiFlexItem--flexGrow2"
       >
         <div
-          className="euiFormRow euiFormRow--compressed"
+          className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
           id="generated-id-row"
         >
           <div
@@ -363,7 +363,7 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
         className="euiFlexItem euiFlexItem--flexGrow1"
       >
         <div
-          className="euiFormRow euiFormRow--compressed"
+          className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
           id="generated-id-row"
           style={
             Object {
@@ -448,7 +448,7 @@ exports[`Storyshots arguments/ContainerStyle/components appearance form 1`] = `
       className="euiFlexItem euiFlexItem--flexGrow2"
     >
       <div
-        className="euiFormRow euiFormRow--compressed"
+        className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
         id="generated-id-row"
       >
         <div
@@ -489,7 +489,7 @@ exports[`Storyshots arguments/ContainerStyle/components appearance form 1`] = `
       className="euiFlexItem euiFlexItem--flexGrow3"
     >
       <div
-        className="euiFormRow euiFormRow--compressed"
+        className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
         id="generated-id-row"
       >
         <div
@@ -577,7 +577,7 @@ exports[`Storyshots arguments/ContainerStyle/components appearance form 1`] = `
       className="euiFlexItem euiFlexItem--flexGrow3"
     >
       <div
-        className="euiFormRow euiFormRow--compressed"
+        className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
         id="generated-id-row"
       >
         <div
@@ -662,7 +662,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
       className="euiFlexItem euiFlexItem--flexGrow2"
     >
       <div
-        className="euiFormRow euiFormRow--compressed"
+        className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
         id="generated-id-row"
       >
         <div
@@ -703,7 +703,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
       className="euiFlexItem euiFlexItem--flexGrow3"
     >
       <div
-        className="euiFormRow euiFormRow--compressed"
+        className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
         id="generated-id-row"
       >
         <div
@@ -739,7 +739,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
       className="euiFlexItem euiFlexItem--flexGrow2"
     >
       <div
-        className="euiFormRow euiFormRow--compressed"
+        className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
         id="generated-id-row"
       >
         <div
@@ -780,7 +780,7 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
       className="euiFlexItem euiFlexItem--flexGrow1"
     >
       <div
-        className="euiFormRow euiFormRow--compressed"
+        className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
         id="generated-id-row"
         style={
           Object {
@@ -876,7 +876,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
         className="euiFlexItem euiFlexItem--flexGrow2"
       >
         <div
-          className="euiFormRow euiFormRow--compressed"
+          className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
           id="generated-id-row"
         >
           <div
@@ -917,7 +917,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
         className="euiFlexItem euiFlexItem--flexGrow3"
       >
         <div
-          className="euiFormRow euiFormRow--compressed"
+          className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
           id="generated-id-row"
         >
           <div
@@ -1005,7 +1005,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
         className="euiFlexItem euiFlexItem--flexGrow3"
       >
         <div
-          className="euiFormRow euiFormRow--compressed"
+          className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
           id="generated-id-row"
         >
           <div
@@ -1091,7 +1091,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
         className="euiFlexItem euiFlexItem--flexGrow2"
       >
         <div
-          className="euiFormRow euiFormRow--compressed"
+          className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
           id="generated-id-row"
         >
           <div
@@ -1132,7 +1132,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
         className="euiFlexItem euiFlexItem--flexGrow3"
       >
         <div
-          className="euiFormRow euiFormRow--compressed"
+          className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
           id="generated-id-row"
         >
           <div
@@ -1168,7 +1168,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
         className="euiFlexItem euiFlexItem--flexGrow2"
       >
         <div
-          className="euiFormRow euiFormRow--compressed"
+          className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
           id="generated-id-row"
         >
           <div
@@ -1209,7 +1209,7 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
         className="euiFlexItem euiFlexItem--flexGrow1"
       >
         <div
-          className="euiFormRow euiFormRow--compressed"
+          className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
           id="generated-id-row"
           style={
             Object {

x-pack/plugins/canvas/public/expression_types/arg_types/series_style/__stories__/__snapshots__/extended_template.stories.storyshot

@@ -12,7 +12,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
 >
   <div>
     <div
-      className="euiFormRow euiFormRow--compressed euiFormRow--horizontal"
+      className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed euiFormRow--horizontal"
       id="generated-id-row"
     >
       <div
@@ -93,7 +93,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
         className="euiFlexItem"
       >
         <div
-          className="euiFormRow euiFormRow--compressed"
+          className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
           id="generated-id-row"
         >
           <div
@@ -181,7 +181,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
         className="euiFlexItem"
       >
         <div
-          className="euiFormRow euiFormRow--compressed"
+          className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
           id="generated-id-row"
         >
           <div
@@ -269,7 +269,7 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
         className="euiFlexItem"
       >
         <div
-          className="euiFormRow euiFormRow--compressed"
+          className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
           id="generated-id-row"
         >
           <div

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

@@ -43,54 +43,52 @@ exports[`<Settings /> can navigate Autoplay Settings 1`] = `
               </span>
             </div>
             <div>
-              <div>
-                <button
-                  class="euiContextMenuItem"
-                  type="button"
+              <button
+                class="euiContextMenuItem"
+                type="button"
+              >
+                <span
+                  class="euiContextMenu__itemLayout"
                 >
                   <span
-                    class="euiContextMenu__itemLayout"
+                    class="euiContextMenu__icon"
+                    color="inherit"
+                    data-euiicon-type="play"
+                  />
+                  <span
+                    class="euiContextMenuItem__text"
                   >
-                    <span
-                      class="euiContextMenu__icon"
-                      color="inherit"
-                      data-euiicon-type="play"
-                    />
-                    <span
-                      class="euiContextMenuItem__text"
-                    >
-                      Auto Play
-                    </span>
-                    <span
-                      class="euiContextMenu__arrow"
-                      data-euiicon-type="arrowRight"
-                    />
+                    Auto Play
                   </span>
-                </button>
-                <button
-                  class="euiContextMenuItem"
-                  type="button"
+                  <span
+                    class="euiContextMenu__arrow"
+                    data-euiicon-type="arrowRight"
+                  />
+                </span>
+              </button>
+              <button
+                class="euiContextMenuItem"
+                type="button"
+              >
+                <span
+                  class="euiContextMenu__itemLayout"
                 >
                   <span
-                    class="euiContextMenu__itemLayout"
+                    class="euiContextMenu__icon"
+                    color="inherit"
+                    data-euiicon-type="boxesHorizontal"
+                  />
+                  <span
+                    class="euiContextMenuItem__text"
                   >
-                    <span
-                      class="euiContextMenu__icon"
-                      color="inherit"
-                      data-euiicon-type="boxesHorizontal"
-                    />
-                    <span
-                      class="euiContextMenuItem__text"
-                    >
-                      Toolbar
-                    </span>
-                    <span
-                      class="euiContextMenu__arrow"
-                      data-euiicon-type="arrowRight"
-                    />
+                    Toolbar
                   </span>
-                </button>
-              </div>
+                  <span
+                    class="euiContextMenu__arrow"
+                    data-euiicon-type="arrowRight"
+                  />
+                </span>
+              </button>
             </div>
           </div>
         </div>
@@ -143,54 +141,52 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
               </span>
             </div>
             <div>
-              <div>
-                <button
-                  class="euiContextMenuItem"
-                  type="button"
+              <button
+                class="euiContextMenuItem"
+                type="button"
+              >
+                <span
+                  class="euiContextMenu__itemLayout"
                 >
                   <span
-                    class="euiContextMenu__itemLayout"
+                    class="euiContextMenu__icon"
+                    color="inherit"
+                    data-euiicon-type="play"
+                  />
+                  <span
+                    class="euiContextMenuItem__text"
                   >
-                    <span
-                      class="euiContextMenu__icon"
-                      color="inherit"
-                      data-euiicon-type="play"
-                    />
-                    <span
-                      class="euiContextMenuItem__text"
-                    >
-                      Auto Play
-                    </span>
-                    <span
-                      class="euiContextMenu__arrow"
-                      data-euiicon-type="arrowRight"
-                    />
+                    Auto Play
                   </span>
-                </button>
-                <button
-                  class="euiContextMenuItem"
-                  type="button"
+                  <span
+                    class="euiContextMenu__arrow"
+                    data-euiicon-type="arrowRight"
+                  />
+                </span>
+              </button>
+              <button
+                class="euiContextMenuItem"
+                type="button"
+              >
+                <span
+                  class="euiContextMenu__itemLayout"
                 >
                   <span
-                    class="euiContextMenu__itemLayout"
+                    class="euiContextMenu__icon"
+                    color="inherit"
+                    data-euiicon-type="boxesHorizontal"
+                  />
+                  <span
+                    class="euiContextMenuItem__text"
                   >
-                    <span
-                      class="euiContextMenu__icon"
-                      color="inherit"
-                      data-euiicon-type="boxesHorizontal"
-                    />
-                    <span
-                      class="euiContextMenuItem__text"
-                    >
-                      Toolbar
-                    </span>
-                    <span
-                      class="euiContextMenu__arrow"
-                      data-euiicon-type="arrowRight"
-                    />
+                    Toolbar
                   </span>
-                </button>
-              </div>
+                  <span
+                    class="euiContextMenu__arrow"
+                    data-euiicon-type="arrowRight"
+                  />
+                </span>
+              </button>
             </div>
           </div>
           <div
@@ -217,134 +213,132 @@ exports[`<Settings /> can navigate Autoplay Settings 2`] = `
               </span>
             </button>
             <div>
-              <div>
+              <div
+                style="padding: 16px;"
+              >
                 <div
-                  style="padding: 16px;"
+                  class="euiSwitch"
                 >
-                  <div
-                    class="euiSwitch"
+                  <button
+                    aria-checked="false"
+                    aria-labelledby="generated-id"
+                    class="euiSwitch__button"
+                    id="cycle"
+                    name="cycle"
+                    role="switch"
+                    type="button"
                   >
-                    <button
-                      aria-checked="false"
-                      aria-labelledby="generated-id"
-                      class="euiSwitch__button"
-                      id="cycle"
-                      name="cycle"
-                      role="switch"
-                      type="button"
+                    <span
+                      class="euiSwitch__body"
                     >
                       <span
-                        class="euiSwitch__body"
+                        class="euiSwitch__thumb"
+                      />
+                      <span
+                        class="euiSwitch__track"
                       >
                         <span
-                          class="euiSwitch__thumb"
+                          class="euiSwitch__icon"
+                          data-euiicon-type="cross"
                         />
                         <span
-                          class="euiSwitch__track"
-                        >
-                          <span
-                            class="euiSwitch__icon"
-                            data-euiicon-type="cross"
-                          />
-                          <span
-                            class="euiSwitch__icon euiSwitch__icon--checked"
-                            data-euiicon-type="check"
-                          />
-                        </span>
+                          class="euiSwitch__icon euiSwitch__icon--checked"
+                          data-euiicon-type="check"
+                        />
                       </span>
-                    </button>
-                    <span
-                      class="euiSwitch__label"
-                      id="generated-id"
-                    >
-                      Cycle Slides
                     </span>
-                  </div>
-                  <hr
-                    class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
-                  />
-                  <form>
+                  </button>
+                  <span
+                    class="euiSwitch__label"
+                    id="generated-id"
+                  >
+                    Cycle Slides
+                  </span>
+                </div>
+                <hr
+                  class="euiHorizontalRule euiHorizontalRule--full euiHorizontalRule--marginMedium"
+                />
+                <form>
+                  <div
+                    class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                  >
                     <div
-                      class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
+                      class="euiFlexItem"
                     >
                       <div
-                        class="euiFlexItem"
+                        class="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
+                        id="generated-id-row"
                       >
                         <div
-                          class="euiFormRow euiFormRow--compressed"
-                          id="generated-id-row"
+                          class="euiFormRow__labelWrapper"
                         >
-                          <div
-                            class="euiFormRow__labelWrapper"
+                          <label
+                            class="euiFormLabel euiFormRow__label"
+                            for="generated-id"
+                            id="generated-id-label"
                           >
-                            <label
-                              class="euiFormLabel euiFormRow__label"
-                              for="generated-id"
-                              id="generated-id-label"
-                            >
-                              Set a custom interval
-                            </label>
-                          </div>
-                          <div
-                            class="euiFormRow__fieldWrapper"
-                          >
-                            <div
-                              class="euiFormControlLayout euiFormControlLayout--compressed"
-                            >
-                              <div
-                                class="euiFormControlLayout__childrenWrapper"
-                              >
-                                <input
-                                  aria-describedby="generated-id-help-0"
-                                  aria-invalid="false"
-                                  class="euiFieldText euiFieldText--compressed"
-                                  id="generated-id"
-                                  type="text"
-                                  value="5s"
-                                />
-                              </div>
-                            </div>
-                            <div
-                              class="euiFormHelpText euiFormRow__text"
-                              id="generated-id-help-0"
-                            >
-                              Use shorthand notation, like 30s, 10m, or 1h
-                            </div>
-                          </div>
+                            Set a custom interval
+                          </label>
                         </div>
-                      </div>
-                      <div
-                        class="euiFlexItem euiFlexItem--flexGrowZero"
-                      >
                         <div
-                          class="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
-                          id="generated-id-row"
+                          class="euiFormRow__fieldWrapper"
                         >
                           <div
-                            class="euiFormRow__fieldWrapper"
+                            class="euiFormControlLayout euiFormControlLayout--compressed"
                           >
-                            <button
-                              class="euiButton euiButton--primary euiButton--small"
-                              id="generated-id"
-                              style="min-width: auto;"
-                              type="submit"
+                            <div
+                              class="euiFormControlLayout__childrenWrapper"
                             >
-                              <span
-                                class="euiButtonContent euiButton__content"
-                              >
-                                <span
-                                  class="euiButton__text"
-                                >
-                                  Set
-                                </span>
-                              </span>
-                            </button>
+                              <input
+                                aria-describedby="generated-id-help-0"
+                                aria-invalid="false"
+                                class="euiFieldText euiFieldText--compressed"
+                                id="generated-id"
+                                type="text"
+                                value="5s"
+                              />
+                            </div>
+                          </div>
+                          <div
+                            class="euiFormHelpText euiFormRow__text"
+                            id="generated-id-help-0"
+                          >
+                            Use shorthand notation, like 30s, 10m, or 1h
                           </div>
                         </div>
                       </div>
                     </div>
-                  </form>
-                </div>
+                    <div
+                      class="euiFlexItem euiFlexItem--flexGrowZero"
+                    >
+                      <div
+                        class="euiFormRow euiFormRow--hasEmptyLabelSpace euiFormRow--compressed"
+                        id="generated-id-row"
+                      >
+                        <div
+                          class="euiFormRow__fieldWrapper"
+                        >
+                          <button
+                            class="euiButton euiButton--primary euiButton--small"
+                            id="generated-id"
+                            style="min-width: auto;"
+                            type="submit"
+                          >
+                            <span
+                              class="euiButtonContent euiButton__content"
+                            >
+                              <span
+                                class="euiButton__text"
+                              >
+                                Set
+                              </span>
+                            </span>
+                          </button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </form>
               </div>
             </div>
           </div>
@@ -398,54 +392,52 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 1`] =
               </span>
             </div>
             <div>
-              <div>
-                <button
-                  class="euiContextMenuItem"
-                  type="button"
+              <button
+                class="euiContextMenuItem"
+                type="button"
+              >
+                <span
+                  class="euiContextMenu__itemLayout"
                 >
                   <span
-                    class="euiContextMenu__itemLayout"
+                    class="euiContextMenu__icon"
+                    color="inherit"
+                    data-euiicon-type="play"
+                  />
+                  <span
+                    class="euiContextMenuItem__text"
                   >
-                    <span
-                      class="euiContextMenu__icon"
-                      color="inherit"
-                      data-euiicon-type="play"
-                    />
-                    <span
-                      class="euiContextMenuItem__text"
-                    >
-                      Auto Play
-                    </span>
-                    <span
-                      class="euiContextMenu__arrow"
-                      data-euiicon-type="arrowRight"
-                    />
+                    Auto Play
                   </span>
-                </button>
-                <button
-                  class="euiContextMenuItem"
-                  type="button"
+                  <span
+                    class="euiContextMenu__arrow"
+                    data-euiicon-type="arrowRight"
+                  />
+                </span>
+              </button>
+              <button
+                class="euiContextMenuItem"
+                type="button"
+              >
+                <span
+                  class="euiContextMenu__itemLayout"
                 >
                   <span
-                    class="euiContextMenu__itemLayout"
+                    class="euiContextMenu__icon"
+                    color="inherit"
+                    data-euiicon-type="boxesHorizontal"
+                  />
+                  <span
+                    class="euiContextMenuItem__text"
                   >
-                    <span
-                      class="euiContextMenu__icon"
-                      color="inherit"
-                      data-euiicon-type="boxesHorizontal"
-                    />
-                    <span
-                      class="euiContextMenuItem__text"
-                    >
-                      Toolbar
-                    </span>
-                    <span
-                      class="euiContextMenu__arrow"
-                      data-euiicon-type="arrowRight"
-                    />
+                    Toolbar
                   </span>
-                </button>
-              </div>
+                  <span
+                    class="euiContextMenu__arrow"
+                    data-euiicon-type="arrowRight"
+                  />
+                </span>
+              </button>
             </div>
           </div>
         </div>
@@ -498,54 +490,52 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
               </span>
             </div>
             <div>
-              <div>
-                <button
-                  class="euiContextMenuItem"
-                  type="button"
+              <button
+                class="euiContextMenuItem"
+                type="button"
+              >
+                <span
+                  class="euiContextMenu__itemLayout"
                 >
                   <span
-                    class="euiContextMenu__itemLayout"
+                    class="euiContextMenu__icon"
+                    color="inherit"
+                    data-euiicon-type="play"
+                  />
+                  <span
+                    class="euiContextMenuItem__text"
                   >
-                    <span
-                      class="euiContextMenu__icon"
-                      color="inherit"
-                      data-euiicon-type="play"
-                    />
-                    <span
-                      class="euiContextMenuItem__text"
-                    >
-                      Auto Play
-                    </span>
-                    <span
-                      class="euiContextMenu__arrow"
-                      data-euiicon-type="arrowRight"
-                    />
+                    Auto Play
                   </span>
-                </button>
-                <button
-                  class="euiContextMenuItem"
-                  type="button"
+                  <span
+                    class="euiContextMenu__arrow"
+                    data-euiicon-type="arrowRight"
+                  />
+                </span>
+              </button>
+              <button
+                class="euiContextMenuItem"
+                type="button"
+              >
+                <span
+                  class="euiContextMenu__itemLayout"
                 >
                   <span
-                    class="euiContextMenu__itemLayout"
+                    class="euiContextMenu__icon"
+                    color="inherit"
+                    data-euiicon-type="boxesHorizontal"
+                  />
+                  <span
+                    class="euiContextMenuItem__text"
                   >
-                    <span
-                      class="euiContextMenu__icon"
-                      color="inherit"
-                      data-euiicon-type="boxesHorizontal"
-                    />
-                    <span
-                      class="euiContextMenuItem__text"
-                    >
-                      Toolbar
-                    </span>
-                    <span
-                      class="euiContextMenu__arrow"
-                      data-euiicon-type="arrowRight"
-                    />
+                    Toolbar
                   </span>
-                </button>
-              </div>
+                  <span
+                    class="euiContextMenu__arrow"
+                    data-euiicon-type="arrowRight"
+                  />
+                </span>
+              </button>
             </div>
           </div>
           <div
@@ -572,64 +562,62 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
               </span>
             </button>
             <div>
-              <div>
+              <div
+                style="padding: 16px;"
+              >
                 <div
-                  style="padding: 16px;"
+                  class="euiFormRow"
+                  id="generated-id-row"
                 >
                   <div
-                    class="euiFormRow"
-                    id="generated-id-row"
+                    class="euiFormRow__fieldWrapper"
                   >
                     <div
-                      class="euiFormRow__fieldWrapper"
+                      class="euiSwitch"
                     >
-                      <div
-                        class="euiSwitch"
+                      <button
+                        aria-checked="false"
+                        aria-describedby="generated-id-help-0"
+                        aria-labelledby="generated-id"
+                        class="euiSwitch__button"
+                        data-test-subj="hideToolbarSwitch"
+                        id="generated-id"
+                        name="toolbarHide"
+                        role="switch"
+                        type="button"
                       >
-                        <button
-                          aria-checked="false"
-                          aria-describedby="generated-id-help-0"
-                          aria-labelledby="generated-id"
-                          class="euiSwitch__button"
-                          data-test-subj="hideToolbarSwitch"
-                          id="generated-id"
-                          name="toolbarHide"
-                          role="switch"
-                          type="button"
+                        <span
+                          class="euiSwitch__body"
                         >
                           <span
-                            class="euiSwitch__body"
+                            class="euiSwitch__thumb"
+                          />
+                          <span
+                            class="euiSwitch__track"
                           >
                             <span
-                              class="euiSwitch__thumb"
+                              class="euiSwitch__icon"
+                              data-euiicon-type="cross"
                             />
                             <span
-                              class="euiSwitch__track"
-                            >
-                              <span
-                                class="euiSwitch__icon"
-                                data-euiicon-type="cross"
-                              />
-                              <span
-                                class="euiSwitch__icon euiSwitch__icon--checked"
-                                data-euiicon-type="check"
-                              />
-                            </span>
+                              class="euiSwitch__icon euiSwitch__icon--checked"
+                              data-euiicon-type="check"
+                            />
                           </span>
-                        </button>
-                        <span
-                          class="euiSwitch__label"
-                          id="generated-id"
-                        >
-                          Hide Toolbar
                         </span>
-                      </div>
-                      <div
-                        class="euiFormHelpText euiFormRow__text"
-                        id="generated-id-help-0"
+                      </button>
+                      <span
+                        class="euiSwitch__label"
+                        id="generated-id"
                       >
-                        Hide the toolbar when the mouse is not within the Canvas?
-                      </div>
+                        Hide Toolbar
+                      </span>
+                    </div>
+                    <div
+                      class="euiFormHelpText euiFormRow__text"
+                      id="generated-id-help-0"
+                    >
+                      Hide the toolbar when the mouse is not within the Canvas?
                     </div>
                   </div>
                 </div>
@@ -643,4 +631,4 @@ exports[`<Settings /> can navigate Toolbar Settings, closes when activated 2`] =
 </div>
 `;
 
-exports[`<Settings /> can navigate Toolbar Settings, closes when activated 3`] = `"<div><div data-eui=\\"EuiFocusTrap\\"><div class=\\"euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--top\\" tabindex=\\"0\\" aria-live=\\"off\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-describedby=\\"generated-id\\" style=\\"top: -16px; left: -22px; z-index: 2000;\\"><div class=\\"euiPopover__panelArrow euiPopover__panelArrow--top\\" style=\\"left: 10px; top: 0px;\\"></div><p id=\\"generated-id\\" class=\\"euiScreenReaderOnly\\">You are in a dialog. To close this dialog, hit escape.</p><div><div class=\\"euiContextMenu\\" style=\\"height: 0px;\\"><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutLeft\\" tabindex=\\"-1\\"><div class=\\"euiContextMenuPanelTitle\\"><span class=\\"euiContextMenu__itemLayout\\">Settings</span></div><div><div><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"play\\" class=\\"euiContextMenu__icon\\" color=\\"inherit\\"></span><span class=\\"euiContextMenuItem__text\\">Auto Play</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"boxesHorizontal\\" class=\\"euiContextMenu__icon\\" color=\\"inherit\\"></span><span class=\\"euiContextMenuItem__text\\">Toolbar</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button></div></div></div><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInLeft\\" tabindex=\\"-1\\"><button class=\\"euiContextMenuPanelTitle\\" type=\\"button\\" data-test-subj=\\"contextMenuPanelTitleButton\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenu__text\\">Toolbar</span></span></button><div><div><div style=\\"padding: 16px;\\"><div class=\\"euiFormRow\\" id=\\"generated-id-row\\"><div class=\\"euiFormRow__fieldWrapper\\"><div class=\\"euiSwitch\\"><button id=\\"generated-id\\" aria-checked=\\"true\\" class=\\"euiSwitch__button\\" role=\\"switch\\" type=\\"button\\" aria-labelledby=\\"generated-id\\" data-test-subj=\\"hideToolbarSwitch\\" name=\\"toolbarHide\\" aria-describedby=\\"generated-id-help-0\\"><span class=\\"euiSwitch__body\\"><span class=\\"euiSwitch__thumb\\"></span><span class=\\"euiSwitch__track\\"><span data-euiicon-type=\\"cross\\" class=\\"euiSwitch__icon\\"></span><span data-euiicon-type=\\"check\\" class=\\"euiSwitch__icon euiSwitch__icon--checked\\"></span></span></span></button><span class=\\"euiSwitch__label\\" id=\\"generated-id\\">Hide Toolbar</span></div><div class=\\"euiFormHelpText euiFormRow__text\\" id=\\"generated-id-help-0\\">Hide the toolbar when the mouse is not within the Canvas?</div></div></div></div></div></div></div></div></div></div></div></div>"`;
+exports[`<Settings /> can navigate Toolbar Settings, closes when activated 3`] = `"<div><div data-eui=\\"EuiFocusTrap\\"><div class=\\"euiPanel euiPanel--borderRadiusMedium euiPanel--plain euiPanel--noShadow euiPopover__panel euiPopover__panel--top\\" tabindex=\\"0\\" aria-live=\\"off\\" role=\\"dialog\\" aria-modal=\\"true\\" aria-describedby=\\"generated-id\\" style=\\"top: -16px; left: -22px; z-index: 2000;\\"><div class=\\"euiPopover__panelArrow euiPopover__panelArrow--top\\" style=\\"left: 10px; top: 0px;\\"></div><p id=\\"generated-id\\" class=\\"euiScreenReaderOnly\\">You are in a dialog. To close this dialog, hit escape.</p><div><div class=\\"euiContextMenu\\" style=\\"height: 0px;\\"><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txOutLeft\\" tabindex=\\"-1\\"><div class=\\"euiContextMenuPanelTitle\\"><span class=\\"euiContextMenu__itemLayout\\">Settings</span></div><div><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"play\\" class=\\"euiContextMenu__icon\\" color=\\"inherit\\"></span><span class=\\"euiContextMenuItem__text\\">Auto Play</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button><button class=\\"euiContextMenuItem\\" type=\\"button\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"boxesHorizontal\\" class=\\"euiContextMenu__icon\\" color=\\"inherit\\"></span><span class=\\"euiContextMenuItem__text\\">Toolbar</span><span data-euiicon-type=\\"arrowRight\\" class=\\"euiContextMenu__arrow\\"></span></span></button></div></div><div class=\\"euiContextMenuPanel euiContextMenu__panel euiContextMenuPanel-txInLeft\\" tabindex=\\"-1\\"><button class=\\"euiContextMenuPanelTitle\\" type=\\"button\\" data-test-subj=\\"contextMenuPanelTitleButton\\"><span class=\\"euiContextMenu__itemLayout\\"><span data-euiicon-type=\\"arrowLeft\\" class=\\"euiContextMenu__icon\\"></span><span class=\\"euiContextMenu__text\\">Toolbar</span></span></button><div><div style=\\"padding: 16px;\\"><div class=\\"euiFormRow\\" id=\\"generated-id-row\\"><div class=\\"euiFormRow__fieldWrapper\\"><div class=\\"euiSwitch\\"><button id=\\"generated-id\\" aria-checked=\\"true\\" class=\\"euiSwitch__button\\" role=\\"switch\\" type=\\"button\\" aria-labelledby=\\"generated-id\\" data-test-subj=\\"hideToolbarSwitch\\" name=\\"toolbarHide\\" aria-describedby=\\"generated-id-help-0\\"><span class=\\"euiSwitch__body\\"><span class=\\"euiSwitch__thumb\\"></span><span class=\\"euiSwitch__track\\"><span data-euiicon-type=\\"cross\\" class=\\"euiSwitch__icon\\"></span><span data-euiicon-type=\\"check\\" class=\\"euiSwitch__icon euiSwitch__icon--checked\\"></span></span></span></button><span class=\\"euiSwitch__label\\" id=\\"generated-id\\">Hide Toolbar</span></div><div class=\\"euiFormHelpText euiFormRow__text\\" id=\\"generated-id-help-0\\">Hide the toolbar when the mouse is not within the Canvas?</div></div></div></div></div></div></div></div></div></div></div>"`;

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

@@ -82,7 +82,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: off,
           className="euiFlexItem"
         >
           <div
-            className="euiFormRow euiFormRow--compressed"
+            className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
             id="generated-id-row"
           >
             <div
@@ -251,7 +251,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings component: on, 5
           className="euiFlexItem"
         >
           <div
-            className="euiFormRow euiFormRow--compressed"
+            className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
             id="generated-id-row"
           >
             <div
@@ -420,7 +420,7 @@ exports[`Storyshots shareables/Footer/Settings/AutoplaySettings contextual 1`] =
           className="euiFlexItem"
         >
           <div
-            className="euiFormRow euiFormRow--compressed"
+            className="euiFormRow euiFormRow--hasLabel euiFormRow--compressed"
             id="generated-id-row"
           >
             <div

x-pack/plugins/ml/public/application/components/anomalies_table/links_menu.tsx

@@ -639,8 +639,8 @@ export const LinksMenuUI = (props: LinksMenuProps) => {
 
   return (
     <EuiContextMenuPanel
-      hasFocus={discoverUrlError !== undefined || !!openInDiscoverUrl}
       items={contextMenuItems}
+      watchedItemProps={['disabled', 'href']} // Ensures the 'View in Discover' link rerenders when loading completes
       data-test-subj="mlAnomaliesListRowActionsMenu"
     />
   );

x-pack/plugins/ml/public/application/settings/filter_lists/components/add_item_popover/__snapshots__/add_item_popover.test.js.snap

@@ -25,6 +25,7 @@ exports[`AddItemPopover calls addItems with multiple items on clicking Add butto
     display="inlineBlock"
     hasArrow={true}
     id="add_item_popover"
+    initialFocus="#filter_list_add_item_input_row"
     isOpen={false}
     ownFocus={true}
     panelClassName="ml-add-filter-item-popover"
@@ -37,6 +38,7 @@ exports[`AddItemPopover calls addItems with multiple items on clicking Add butto
         fullWidth={false}
         hasChildLabel={true}
         hasEmptyLabelSpace={false}
+        id="filter_list_add_item_input_row"
         label={
           <FormattedMessage
             defaultMessage="Items"
@@ -113,6 +115,7 @@ exports[`AddItemPopover opens the popover onButtonClick 1`] = `
     display="inlineBlock"
     hasArrow={true}
     id="add_item_popover"
+    initialFocus="#filter_list_add_item_input_row"
     isOpen={true}
     ownFocus={true}
     panelClassName="ml-add-filter-item-popover"
@@ -125,6 +128,7 @@ exports[`AddItemPopover opens the popover onButtonClick 1`] = `
         fullWidth={false}
         hasChildLabel={true}
         hasEmptyLabelSpace={false}
+        id="filter_list_add_item_input_row"
         label={
           <FormattedMessage
             defaultMessage="Items"
@@ -201,6 +205,7 @@ exports[`AddItemPopover renders the popover 1`] = `
     display="inlineBlock"
     hasArrow={true}
     id="add_item_popover"
+    initialFocus="#filter_list_add_item_input_row"
     isOpen={false}
     ownFocus={true}
     panelClassName="ml-add-filter-item-popover"
@@ -213,6 +218,7 @@ exports[`AddItemPopover renders the popover 1`] = `
         fullWidth={false}
         hasChildLabel={true}
         hasEmptyLabelSpace={false}
+        id="filter_list_add_item_input_row"
         label={
           <FormattedMessage
             defaultMessage="Items"

x-pack/plugins/ml/public/application/settings/filter_lists/components/add_item_popover/add_item_popover.js

@@ -103,9 +103,11 @@ export class AddItemPopover extends Component {
           button={button}
           isOpen={this.state.isPopoverOpen}
           closePopover={this.closePopover}
+          initialFocus="#filter_list_add_item_input_row"
         >
           <EuiForm>
             <EuiFormRow
+              id="filter_list_add_item_input_row"
               label={
                 <FormattedMessage
                   id="xpack.ml.settings.filterLists.addItemPopover.itemsLabel"

x-pack/plugins/ml/public/application/settings/filter_lists/components/edit_description_popover/__snapshots__/edit_description_popover.test.js.snap

@@ -19,6 +19,7 @@ exports[`FilterListUsagePopover opens the popover onButtonClick 1`] = `
     display="inlineBlock"
     hasArrow={true}
     id="filter_list_description_popover"
+    initialFocus="#filter_list_edit_description_row"
     isOpen={true}
     ownFocus={true}
     panelPaddingSize="m"
@@ -37,6 +38,7 @@ exports[`FilterListUsagePopover opens the popover onButtonClick 1`] = `
           fullWidth={false}
           hasChildLabel={true}
           hasEmptyLabelSpace={false}
+          id="filter_list_edit_description_row"
           label={
             <FormattedMessage
               defaultMessage="Filter list description"
@@ -78,6 +80,7 @@ exports[`FilterListUsagePopover renders the popover with a description 1`] = `
     display="inlineBlock"
     hasArrow={true}
     id="filter_list_description_popover"
+    initialFocus="#filter_list_edit_description_row"
     isOpen={false}
     ownFocus={true}
     panelPaddingSize="m"
@@ -96,6 +99,7 @@ exports[`FilterListUsagePopover renders the popover with a description 1`] = `
           fullWidth={false}
           hasChildLabel={true}
           hasEmptyLabelSpace={false}
+          id="filter_list_edit_description_row"
           label={
             <FormattedMessage
               defaultMessage="Filter list description"
@@ -137,6 +141,7 @@ exports[`FilterListUsagePopover renders the popover with no description 1`] = `
     display="inlineBlock"
     hasArrow={true}
     id="filter_list_description_popover"
+    initialFocus="#filter_list_edit_description_row"
     isOpen={false}
     ownFocus={true}
     panelPaddingSize="m"
@@ -155,6 +160,7 @@ exports[`FilterListUsagePopover renders the popover with no description 1`] = `
           fullWidth={false}
           hasChildLabel={true}
           hasEmptyLabelSpace={false}
+          id="filter_list_edit_description_row"
           label={
             <FormattedMessage
               defaultMessage="Filter list description"

x-pack/plugins/ml/public/application/settings/filter_lists/components/edit_description_popover/edit_description_popover.js

@@ -88,10 +88,12 @@ export class EditDescriptionPopover extends Component {
           button={button}
           isOpen={isPopoverOpen}
           closePopover={this.closePopover}
+          initialFocus="#filter_list_edit_description_row"
         >
           <div style={{ width: '300px' }}>
             <EuiForm>
               <EuiFormRow
+                id="filter_list_edit_description_row"
                 label={
                   <FormattedMessage
                     id="xpack.ml.settings.filterLists.editDescriptionPopover.filterListDescriptionAriaLabel"

x-pack/plugins/security/public/management/roles/edit_role/spaces_popover_list/spaces_popover_list.tsx

@@ -136,7 +136,6 @@ export class SpacesPopoverList extends Component<Props, State> {
         key={`spcMenuList`}
         data-search-term={searchTerm}
         className="spcMenu__spacesList"
-        hasFocus={this.state.allowSpacesListFocus}
         initialFocusedItemIndex={this.state.allowSpacesListFocus ? 0 : undefined}
         items={items}
       />

x-pack/plugins/security/public/nav_control/nav_control_service.test.ts

@@ -85,7 +85,7 @@ describe('SecurityNavControlService', () => {
                   >
                     <div
                       aria-label="some-user"
-                      class="euiAvatar euiAvatar--s euiAvatar--user css-1e7wq2y-euiAvatar-s-user"
+                      class="euiAvatar euiAvatar--s euiAvatar--user css-1qejh7o-euiAvatar-s-user"
                       data-test-subj="userMenuAvatar"
                       role="img"
                       style="background-color: rgb(255, 126, 98); color: rgb(0, 0, 0);"

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

@@ -177,6 +177,8 @@ export const addFilter = (filter: TimelineFilter): Cypress.Chainable<JQuery<HTML
 export const addDataProvider = (filter: TimelineFilter): Cypress.Chainable<JQuery<HTMLElement>> => {
   cy.get(TIMELINE_ADD_FIELD_BUTTON).click();
   cy.get(LOADING_INDICATOR).should('not.exist');
+  cy.focused().should('have.class', 'euiPopover__panel');
+  cy.get(TIMELINE_DATA_PROVIDER_FIELD).click();
   cy.get(TIMELINE_DATA_PROVIDER_FIELD)
     .find(TIMELINE_DATA_PROVIDER_FIELD_INPUT)
     .should('have.focus'); // make sure the focus is ready before start typing

x-pack/plugins/security_solution/public/common/components/paginated_table/__snapshots__/index.test.tsx.snap

@@ -118,7 +118,6 @@ exports[`Paginated Table Component rendering it renders the default load more ta
         >
           <EuiContextMenuPanel
             data-test-subj="loadingMorePickSizeRow"
-            hasFocus={true}
             items={
               Array [
                 <EuiContextMenuItem

x-pack/plugins/security_solution/public/detections/components/rules/rule_actions_overflow/__snapshots__/index.test.tsx.snap

@@ -32,7 +32,6 @@ exports[`RuleActionsOverflow snapshots renders correctly against snapshot 1`] =
   >
     <EuiContextMenuPanel
       data-test-subj="rules-details-menu-panel"
-      hasFocus={true}
       items={
         Array [
           <EuiContextMenuItem

x-pack/plugins/security_solution/public/management/components/context_menu_with_router_support/context_menu_with_router_support.tsx

@@ -153,11 +153,7 @@ export const ContextMenuWithRouterSupport = memo<ContextMenuWithRouterSupportPro
         closePopover={handleCloseMenu}
       >
         {title ? <EuiPopoverTitle paddingSize="m">{title}</EuiPopoverTitle> : null}
-        <EuiContextMenuPanel
-          hasFocus={false}
-          {...additionalContextMenuPanelProps}
-          items={menuItems}
-        />
+        <EuiContextMenuPanel {...additionalContextMenuPanelProps} items={menuItems} />
       </EuiPopover>
     );
   }

x-pack/plugins/spaces/public/copy_saved_objects_to_space/components/resolve_all_conflicts.test.tsx

@@ -109,7 +109,6 @@ describe('ResolveAllConflicts', () => {
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
-          hasFocus={true}
           items={
             Array [
               <EuiContextMenuItem

x-pack/plugins/spaces/public/nav_control/components/spaces_menu.tsx

@@ -121,7 +121,6 @@ class SpacesMenuUI extends Component<Props, State> {
         key={`spcMenuList`}
         data-search-term={searchTerm}
         className="spcMenu__spacesList"
-        hasFocus={this.state.allowSpacesListFocus}
         initialFocusedItemIndex={this.state.allowSpacesListFocus ? 0 : undefined}
         items={items}
       />

x-pack/plugins/synthetics/public/components/overview/alerts/monitor_status_alert/add_filter_btn.test.tsx

@@ -40,7 +40,6 @@ describe('AddFilterButton component', () => {
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
-          hasFocus={true}
           items={
             Array [
               <EuiContextMenuItem
@@ -107,7 +106,6 @@ describe('AddFilterButton component', () => {
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
-          hasFocus={true}
           items={
             Array [
               <EuiContextMenuItem
@@ -161,7 +159,6 @@ describe('AddFilterButton component', () => {
         panelPaddingSize="none"
       >
         <EuiContextMenuPanel
-          hasFocus={true}
           items={Array []}
         />
       </EuiPopover>

yarn.lock

@@ -1527,10 +1527,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@54.0.0":
-  version "54.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-54.0.0.tgz#373a50f0ebbecfbe39b86f1d87f3ba1c6f942a81"
-  integrity sha512-0qm4SoGYup0Cyb+k50heIdJ9pTIYQwA2knNWZ+UE92SzPUzAwSmhrwkiqzTqGCgB6/Kd2Ck4gzFjI+ct1njkmg==
+"@elastic/eui@55.0.1":
+  version "55.0.1"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-55.0.1.tgz#d10978aa01b3e44f54dbfa148bc31af58d64b251"
+  integrity sha512-k6ES2Sp8bZlYGRFYIoBS2EQ3C9BmEgC4p/A4ViHWNKpb0qriS37A28/QyIR2cPXwiesRq6rt7L+LQSLJlXmGzA==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"
@@ -1564,7 +1564,7 @@
     remark-emoji "^2.1.0"
     remark-parse "^8.0.3"
     remark-rehype "^8.0.0"
-    tabbable "^3.0.0"
+    tabbable "^5.2.1"
     text-diff "^1.0.1"
     unified "^9.2.0"
     unist-util-visit "^2.0.3"
@@ -27479,10 +27479,10 @@ tabbable@1.1.3:
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-1.1.3.tgz#0e4ee376f3631e42d7977a074dbd2b3827843081"
   integrity sha512-nOWwx35/JuDI4ONuF0ZTo6lYvI0fY0tZCH1ErzY2EXfu4az50ZyiUX8X073FLiZtmWUVlkRnuXsehjJgCw9tYg==
 
-tabbable@^3.0.0:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-3.1.2.tgz#f2d16cccd01f400e38635c7181adfe0ad965a4a2"
-  integrity sha512-wjB6puVXTYO0BSFtCmWQubA/KIn7Xvajw0x0l6eJUudMG/EAiJvIUnyNX6xO4NpGrJ16lbD0eUseB9WxW0vlpQ==
+tabbable@^5.2.1:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.2.1.tgz#e3fda7367ddbb172dcda9f871c0fdb36d1c4cd9c"
+  integrity sha512-40pEZ2mhjaZzK0BnI+QGNjJO8UYx9pP5v7BGe17SORTO0OEuuaAwQTkAp8whcZvqon44wKFOikD+Al11K3JICQ==
 
 table@^6.0.3, table@^6.0.9:
   version "6.7.1"