From 1e6fb80be2c8dfd111a5e4bf346ed2213404445e Mon Sep 17 00:00:00 2001
From: Jen Huang <its.jenetic@gmail.com>
Date: Tue, 14 Aug 2018 08:42:24 -0700
Subject: [PATCH] Upgrade to EUI 3.4.0 (#21870)

* Upgrade to EUI 3.4.0
* Update snapshots
---
 package.json                                  |  2 +-
 .../__snapshots__/list_control.test.js.snap   |  1 +
 .../__snapshots__/add_panel.test.js.snap      |  1 +
 .../saved_objects_installer.test.js.snap      | 87 +++++++++++--------
 .../__snapshots__/flyout.test.js.snap         |  2 +
 .../__snapshots__/relationships.test.js.snap  |  5 ++
 .../label_template_flyout.test.js.snap        |  1 +
 .../url_template_flyout.test.js.snap          |  1 +
 .../__snapshots__/help_flyout.test.js.snap    |  1 +
 x-pack/package.json                           |  2 +-
 .../__test__/__snapshots__/List.test.js.snap  | 14 +++
 .../__test__/__snapshots__/List.test.js.snap  | 20 +++++
 .../rule_editor_flyout.test.js.snap           |  4 +
 .../__snapshots__/detail_drawer.test.js.snap  |  5 ++
 .../__snapshots__/no_data.test.js.snap        |  8 +-
 .../__snapshots__/page_loading.test.js.snap   |  4 +-
 x-pack/yarn.lock                              | 11 ++-
 yarn.lock                                     | 11 ++-
 18 files changed, 131 insertions(+), 49 deletions(-)

diff --git a/package.json b/package.json
index 90a38927a401..acea26b357c6 100644
--- a/package.json
+++ b/package.json
@@ -60,7 +60,7 @@
     "url": "https://github.com/elastic/kibana.git"
   },
   "dependencies": {
-    "@elastic/eui": "3.2.1",
+    "@elastic/eui": "3.4.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/numeral": "2.3.2",
     "@elastic/ui-ace": "0.2.3",
diff --git a/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/list_control.test.js.snap b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/list_control.test.js.snap
index 3f18713939a0..f7998d17f9a6 100644
--- a/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/list_control.test.js.snap
+++ b/src/core_plugins/input_control_vis/public/components/vis/__snapshots__/list_control.test.js.snap
@@ -25,6 +25,7 @@ exports[`renders ListControl 1`] = `
 >
   <EuiComboBox
     data-test-subj="listControlSelect0"
+    fullWidth={false}
     isClearable={true}
     isLoading={false}
     onChange={[Function]}
diff --git a/src/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/add_panel.test.js.snap b/src/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/add_panel.test.js.snap
index a6a9db7abec6..6ad4e1771bd1 100644
--- a/src/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/add_panel.test.js.snap
+++ b/src/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/add_panel.test.js.snap
@@ -6,6 +6,7 @@ exports[`render 1`] = `
   closeButtonAriaLabel="Closes this dialog"
   data-test-subj="dashboardAddPanel"
   hideCloseButton={false}
+  maxWidth={false}
   onClose={[Function]}
   ownFocus={true}
   size="s"
diff --git a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
index 11f4b043679a..802135f11e80 100644
--- a/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
+++ b/src/core_plugins/kibana/public/home/components/tutorial/__snapshots__/saved_objects_installer.test.js.snap
@@ -92,12 +92,20 @@ exports[`bulkCreate should display error message when bulkCreate request fails 1
             <span
               className="euiScreenReaderOnly"
             >
-              Step
+              Incomplete
+               Step 
             </span>
           </EuiScreenReaderOnly>
-          <div
-            className="euiStep__circle euiStep__circle--incomplete"
-          />
+          <EuiStepNumber
+            className="euiStep__circle"
+            isHollow={true}
+            number={1}
+            status="incomplete"
+          >
+            <div
+              className="euiStepNumber euiStepNumber--incomplete euiStepNumber-isHollow euiStep__circle"
+            />
+          </EuiStepNumber>
           <EuiTitle
             className="euiStep__title"
             size="s"
@@ -308,51 +316,60 @@ exports[`bulkCreate should display success message when bulkCreate is successful
             <span
               className="euiScreenReaderOnly"
             >
-              Step
+               Step 
             </span>
           </EuiScreenReaderOnly>
-          <div
-            className="euiStep__circle euiStep__circle--complete"
+          <EuiStepNumber
+            className="euiStep__circle"
+            isHollow={false}
+            number={1}
+            status="complete"
           >
-            <EuiIcon
-              className="euiStep__circleIcon"
-              color="ghost"
-              size="m"
-              type="check"
+            <div
+              className="euiStepNumber euiStepNumber--complete euiStep__circle"
             >
-              <check
-                className="euiIcon euiIcon--medium euiIcon--ghost euiStep__circleIcon"
-                focusable="false"
-                height="16"
-                style={null}
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
+              <EuiIcon
+                className="euiStepNumber__icon"
+                size="m"
+                title="complete"
+                type="check"
               >
-                <svg
-                  className="euiIcon euiIcon--medium euiIcon--ghost euiStep__circleIcon"
+                <check
+                  className="euiIcon euiIcon--medium euiStepNumber__icon"
                   focusable="false"
                   height="16"
-                  style={null}
+                  style={
+                    Object {
+                      "fill": undefined,
+                    }
+                  }
+                  title="complete"
                   viewBox="0 0 16 16"
                   width="16"
                   xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
                 >
-                  <defs>
+                  <svg
+                    className="euiIcon euiIcon--medium euiStepNumber__icon"
+                    focusable="false"
+                    height="16"
+                    style={
+                      Object {
+                        "fill": undefined,
+                      }
+                    }
+                    title="complete"
+                    viewBox="0 0 16 16"
+                    width="16"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
                     <path
                       d="M6.5 12a.502.502 0 0 1-.354-.146l-4-4a.502.502 0 0 1 .708-.708L6.5 10.793l6.646-6.647a.502.502 0 0 1 .708.708l-7 7A.502.502 0 0 1 6.5 12"
-                      id="check-a"
                     />
-                  </defs>
-                  <use
-                    xlinkHref="#check-a"
-                  />
-                </svg>
-              </check>
-            </EuiIcon>
-          </div>
+                  </svg>
+                </check>
+              </EuiIcon>
+            </div>
+          </EuiStepNumber>
           <EuiTitle
             className="euiStep__title"
             size="s"
diff --git a/src/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/__tests__/__snapshots__/flyout.test.js.snap b/src/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/__tests__/__snapshots__/flyout.test.js.snap
index d7b59820ea9d..5d9e407c053b 100644
--- a/src/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/__tests__/__snapshots__/flyout.test.js.snap
+++ b/src/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/__tests__/__snapshots__/flyout.test.js.snap
@@ -4,6 +4,7 @@ exports[`Flyout conflicts should allow conflict resolution 1`] = `
 <EuiFlyout
   closeButtonAriaLabel="Closes this dialog"
   hideCloseButton={false}
+  maxWidth={false}
   onClose={[MockFunction]}
   ownFocus={false}
   size="m"
@@ -164,6 +165,7 @@ exports[`Flyout should render import step 1`] = `
 <EuiFlyout
   closeButtonAriaLabel="Closes this dialog"
   hideCloseButton={false}
+  maxWidth={false}
   onClose={[MockFunction]}
   ownFocus={false}
   size="m"
diff --git a/src/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/__tests__/__snapshots__/relationships.test.js.snap b/src/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/__tests__/__snapshots__/relationships.test.js.snap
index 1d5107b4fdfb..a027f233b25a 100644
--- a/src/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/__tests__/__snapshots__/relationships.test.js.snap
+++ b/src/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/relationships/__tests__/__snapshots__/relationships.test.js.snap
@@ -4,6 +4,7 @@ exports[`Relationships should render dashboards normally 1`] = `
 <EuiFlyout
   closeButtonAriaLabel="Closes this dialog"
   hideCloseButton={false}
+  maxWidth={false}
   onClose={[MockFunction]}
   ownFocus={false}
   size="m"
@@ -108,6 +109,7 @@ exports[`Relationships should render errors 1`] = `
 <EuiFlyout
   closeButtonAriaLabel="Closes this dialog"
   hideCloseButton={false}
+  maxWidth={false}
   onClose={[MockFunction]}
   ownFocus={false}
   size="m"
@@ -150,6 +152,7 @@ exports[`Relationships should render index patterns normally 1`] = `
 <EuiFlyout
   closeButtonAriaLabel="Closes this dialog"
   hideCloseButton={false}
+  maxWidth={false}
   onClose={[MockFunction]}
   ownFocus={false}
   size="m"
@@ -310,6 +313,7 @@ exports[`Relationships should render searches normally 1`] = `
 <EuiFlyout
   closeButtonAriaLabel="Closes this dialog"
   hideCloseButton={false}
+  maxWidth={false}
   onClose={[MockFunction]}
   ownFocus={false}
   size="m"
@@ -468,6 +472,7 @@ exports[`Relationships should render visualizations normally 1`] = `
 <EuiFlyout
   closeButtonAriaLabel="Closes this dialog"
   hideCloseButton={false}
+  maxWidth={false}
   onClose={[MockFunction]}
   ownFocus={false}
   size="m"
diff --git a/src/ui/public/field_editor/components/field_format_editor/editors/url/__snapshots__/label_template_flyout.test.js.snap b/src/ui/public/field_editor/components/field_format_editor/editors/url/__snapshots__/label_template_flyout.test.js.snap
index 791f7b9a40f1..2a4c0b1eac04 100644
--- a/src/ui/public/field_editor/components/field_format_editor/editors/url/__snapshots__/label_template_flyout.test.js.snap
+++ b/src/ui/public/field_editor/components/field_format_editor/editors/url/__snapshots__/label_template_flyout.test.js.snap
@@ -6,6 +6,7 @@ exports[`LabelTemplateFlyout should render normally 1`] = `
 <EuiFlyout
   closeButtonAriaLabel="Closes this dialog"
   hideCloseButton={false}
+  maxWidth={false}
   onClose={[Function]}
   ownFocus={false}
   size="m"
diff --git a/src/ui/public/field_editor/components/field_format_editor/editors/url/__snapshots__/url_template_flyout.test.js.snap b/src/ui/public/field_editor/components/field_format_editor/editors/url/__snapshots__/url_template_flyout.test.js.snap
index e8ce349b544b..f340e6f2bfbe 100644
--- a/src/ui/public/field_editor/components/field_format_editor/editors/url/__snapshots__/url_template_flyout.test.js.snap
+++ b/src/ui/public/field_editor/components/field_format_editor/editors/url/__snapshots__/url_template_flyout.test.js.snap
@@ -6,6 +6,7 @@ exports[`UrlTemplateFlyout should render normally 1`] = `
 <EuiFlyout
   closeButtonAriaLabel="Closes this dialog"
   hideCloseButton={false}
+  maxWidth={false}
   onClose={[Function]}
   ownFocus={false}
   size="m"
diff --git a/src/ui/public/field_editor/components/scripting_help/__snapshots__/help_flyout.test.js.snap b/src/ui/public/field_editor/components/scripting_help/__snapshots__/help_flyout.test.js.snap
index 95db3176501f..3e7298b2f083 100644
--- a/src/ui/public/field_editor/components/scripting_help/__snapshots__/help_flyout.test.js.snap
+++ b/src/ui/public/field_editor/components/scripting_help/__snapshots__/help_flyout.test.js.snap
@@ -5,6 +5,7 @@ exports[`ScriptingHelpFlyout should render normally 1`] = `
   closeButtonAriaLabel="Closes this dialog"
   data-test-subj="scriptedFieldsHelpFlyout"
   hideCloseButton={false}
+  maxWidth={false}
   onClose={[Function]}
   ownFocus={false}
   size="m"
diff --git a/x-pack/package.json b/x-pack/package.json
index cbfe3ce94fa2..1b5195a7714b 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -79,7 +79,7 @@
     "yargs": "4.7.1"
   },
   "dependencies": {
-    "@elastic/eui": "3.2.1",
+    "@elastic/eui": "3.4.0",
     "@elastic/node-crypto": "0.1.2",
     "@elastic/node-phantom-simple": "2.2.4",
     "@elastic/numeral": "2.3.2",
diff --git a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.js.snap b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.js.snap
index 9756071da79a..56a2847ca482 100644
--- a/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.js.snap
+++ b/x-pack/plugins/apm/public/components/app/ErrorGroupOverview/List/__test__/__snapshots__/List.test.js.snap
@@ -70,6 +70,7 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
         <tr>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_groupId_0"
             scope="col"
             width="96px"
           >
@@ -85,6 +86,7 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
           </th>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_message_1"
             scope="col"
             width="50%"
           >
@@ -100,6 +102,7 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
           </th>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_handled_2"
             scope="col"
           >
             <div
@@ -112,11 +115,13 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
           </th>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_occurrenceCount_3"
             scope="col"
           >
             <button
               aria-label="Sort Occurrences ascending"
               className="euiTableHeaderButton"
+              data-test-subj="tableHeaderSortButton"
               onClick={[Function]}
               type="button"
             >
@@ -133,11 +138,13 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
           </th>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_latestOccurrenceAt_4"
             scope="col"
           >
             <button
               aria-label="Sort Latest occurrence ascending"
               className="euiTableHeaderButton euiTableHeaderButton-isSorted"
+              data-test-subj="tableHeaderSortButton"
               onClick={[Function]}
               type="button"
             >
@@ -367,6 +374,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
         <tr>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_groupId_0"
             scope="col"
             width="96px"
           >
@@ -382,6 +390,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </th>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_message_1"
             scope="col"
             width="50%"
           >
@@ -397,6 +406,7 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </th>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_handled_2"
             scope="col"
           >
             <div
@@ -409,11 +419,13 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </th>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_occurrenceCount_3"
             scope="col"
           >
             <button
               aria-label="Sort Occurrences ascending"
               className="euiTableHeaderButton"
+              data-test-subj="tableHeaderSortButton"
               onClick={[Function]}
               type="button"
             >
@@ -430,11 +442,13 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </th>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_latestOccurrenceAt_4"
             scope="col"
           >
             <button
               aria-label="Sort Latest occurrence ascending"
               className="euiTableHeaderButton euiTableHeaderButton-isSorted"
+              data-test-subj="tableHeaderSortButton"
               onClick={[Function]}
               type="button"
             >
diff --git a/x-pack/plugins/apm/public/components/app/ServiceOverview/List/__test__/__snapshots__/List.test.js.snap b/x-pack/plugins/apm/public/components/app/ServiceOverview/List/__test__/__snapshots__/List.test.js.snap
index fe0a5b2b21cb..f8a651623919 100644
--- a/x-pack/plugins/apm/public/components/app/ServiceOverview/List/__test__/__snapshots__/List.test.js.snap
+++ b/x-pack/plugins/apm/public/components/app/ServiceOverview/List/__test__/__snapshots__/List.test.js.snap
@@ -70,12 +70,14 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
         <tr>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_serviceName_0"
             scope="col"
             width="50%"
           >
             <button
               aria-label="Sort Name descending"
               className="euiTableHeaderButton euiTableHeaderButton-isSorted"
+              data-test-subj="tableHeaderSortButton"
               onClick={[Function]}
               type="button"
             >
@@ -117,11 +119,13 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
           </th>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_agentName_1"
             scope="col"
           >
             <button
               aria-label="Sort Agent ascending"
               className="euiTableHeaderButton"
+              data-test-subj="tableHeaderSortButton"
               onClick={[Function]}
               type="button"
             >
@@ -138,11 +142,13 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
           </th>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_avgResponseTime_2"
             scope="col"
           >
             <button
               aria-label="Sort Avg. response time ascending"
               className="euiTableHeaderButton"
+              data-test-subj="tableHeaderSortButton"
               onClick={[Function]}
               type="button"
             >
@@ -159,11 +165,13 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
           </th>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_transactionsPerMinute_3"
             scope="col"
           >
             <button
               aria-label="Sort Trans. per minute ascending"
               className="euiTableHeaderButton"
+              data-test-subj="tableHeaderSortButton"
               onClick={[Function]}
               type="button"
             >
@@ -180,11 +188,13 @@ exports[`ErrorGroupOverview -> List should render empty state 1`] = `
           </th>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_errorsPerMinute_4"
             scope="col"
           >
             <button
               aria-label="Sort Errors per minute ascending"
               className="euiTableHeaderButton"
+              data-test-subj="tableHeaderSortButton"
               onClick={[Function]}
               type="button"
             >
@@ -372,12 +382,14 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
         <tr>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_serviceName_0"
             scope="col"
             width="50%"
           >
             <button
               aria-label="Sort Name descending"
               className="euiTableHeaderButton euiTableHeaderButton-isSorted"
+              data-test-subj="tableHeaderSortButton"
               onClick={[Function]}
               type="button"
             >
@@ -419,11 +431,13 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </th>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_agentName_1"
             scope="col"
           >
             <button
               aria-label="Sort Agent ascending"
               className="euiTableHeaderButton"
+              data-test-subj="tableHeaderSortButton"
               onClick={[Function]}
               type="button"
             >
@@ -440,11 +454,13 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </th>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_avgResponseTime_2"
             scope="col"
           >
             <button
               aria-label="Sort Avg. response time ascending"
               className="euiTableHeaderButton"
+              data-test-subj="tableHeaderSortButton"
               onClick={[Function]}
               type="button"
             >
@@ -461,11 +477,13 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </th>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_transactionsPerMinute_3"
             scope="col"
           >
             <button
               aria-label="Sort Trans. per minute ascending"
               className="euiTableHeaderButton"
+              data-test-subj="tableHeaderSortButton"
               onClick={[Function]}
               type="button"
             >
@@ -482,11 +500,13 @@ exports[`ErrorGroupOverview -> List should render with data 1`] = `
           </th>
           <th
             className="euiTableHeaderCell"
+            data-test-subj="tableHeaderCell_errorsPerMinute_4"
             scope="col"
           >
             <button
               aria-label="Sort Errors per minute ascending"
               className="euiTableHeaderButton"
+              data-test-subj="tableHeaderSortButton"
               onClick={[Function]}
               type="button"
             >
diff --git a/x-pack/plugins/ml/public/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap b/x-pack/plugins/ml/public/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap
index 63dd75af73c8..5b05a0eb0fb1 100644
--- a/x-pack/plugins/ml/public/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap
+++ b/x-pack/plugins/ml/public/components/rule_editor/__snapshots__/rule_editor_flyout.test.js.snap
@@ -11,6 +11,7 @@ exports[`RuleEditorFlyout renders the flyout after adding a condition to a rule
     className="ml-rule-editor-flyout"
     closeButtonAriaLabel="Closes this dialog"
     hideCloseButton={false}
+    maxWidth={false}
     onClose={[Function]}
     ownFocus={false}
     size="m"
@@ -230,6 +231,7 @@ exports[`RuleEditorFlyout renders the flyout after setting the rule to edit 1`]
     className="ml-rule-editor-flyout"
     closeButtonAriaLabel="Closes this dialog"
     hideCloseButton={false}
+    maxWidth={false}
     onClose={[Function]}
     ownFocus={false}
     size="m"
@@ -463,6 +465,7 @@ exports[`RuleEditorFlyout renders the flyout for creating a rule with conditions
     className="ml-rule-editor-flyout"
     closeButtonAriaLabel="Closes this dialog"
     hideCloseButton={false}
+    maxWidth={false}
     onClose={[Function]}
     ownFocus={false}
     size="m"
@@ -674,6 +677,7 @@ exports[`RuleEditorFlyout renders the select action component for a detector wit
     className="ml-rule-editor-flyout"
     closeButtonAriaLabel="Closes this dialog"
     hideCloseButton={false}
+    maxWidth={false}
     onClose={[Function]}
     ownFocus={false}
     size="m"
diff --git a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/detail_drawer.test.js.snap b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/detail_drawer.test.js.snap
index 79ef140a11d6..b704a6dbed56 100644
--- a/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/detail_drawer.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/logstash/pipeline_viewer/views/__test__/__snapshots__/detail_drawer.test.js.snap
@@ -4,6 +4,7 @@ exports[`DetailDrawer component If vertices shows basic info and no stats for if
 <EuiFlyout
   closeButtonAriaLabel="Closes this dialog"
   hideCloseButton={false}
+  maxWidth={false}
   onClose={[MockFunction]}
   ownFocus={false}
   size="s"
@@ -72,6 +73,7 @@ exports[`DetailDrawer component Plugin vertices Plugin does not have explicit ID
 <EuiFlyout
   closeButtonAriaLabel="Closes this dialog"
   hideCloseButton={false}
+  maxWidth={false}
   onClose={[MockFunction]}
   ownFocus={false}
   size="s"
@@ -362,6 +364,7 @@ exports[`DetailDrawer component Plugin vertices Plugin has explicit ID shows bas
 <EuiFlyout
   closeButtonAriaLabel="Closes this dialog"
   hideCloseButton={false}
+  maxWidth={false}
   onClose={[MockFunction]}
   ownFocus={false}
   size="s"
@@ -648,6 +651,7 @@ exports[`DetailDrawer component Queue vertices shows basic info and no stats for
 <EuiFlyout
   closeButtonAriaLabel="Closes this dialog"
   hideCloseButton={false}
+  maxWidth={false}
   onClose={[MockFunction]}
   ownFocus={false}
   size="s"
@@ -706,6 +710,7 @@ exports[`DetailDrawer component shows vertex title 1`] = `
 <EuiFlyout
   closeButtonAriaLabel="Closes this dialog"
   hideCloseButton={false}
+  maxWidth={false}
   onClose={[MockFunction]}
   ownFocus={false}
   size="s"
diff --git a/x-pack/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap b/x-pack/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap
index ad764d8b451d..0b0b10149e53 100644
--- a/x-pack/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/no_data/__tests__/__snapshots__/no_data.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`NoData should show a default message if reason is unknown 1`] = `
 <div
-  class="euiPage euiPage--widthIsNotRestricted"
+  class="euiPage"
 >
   <div
-    class="euiPageBody euiPage--restrictWidth-custom"
+    class="euiPageBody euiPageBody--restrictWidth-custom"
     style="max-width:600px"
   >
     <div
@@ -83,10 +83,10 @@ exports[`NoData should show a default message if reason is unknown 1`] = `
 
 exports[`NoData should show text next to the spinner while checking a setting 1`] = `
 <div
-  class="euiPage euiPage--widthIsNotRestricted"
+  class="euiPage"
 >
   <div
-    class="euiPageBody euiPage--restrictWidth-custom"
+    class="euiPageBody euiPageBody--restrictWidth-custom"
     style="max-width:600px"
   >
     <div
diff --git a/x-pack/plugins/monitoring/public/components/page_loading/__tests__/__snapshots__/page_loading.test.js.snap b/x-pack/plugins/monitoring/public/components/page_loading/__tests__/__snapshots__/page_loading.test.js.snap
index 3f6051ac64d4..d26d822f2334 100644
--- a/x-pack/plugins/monitoring/public/components/page_loading/__tests__/__snapshots__/page_loading.test.js.snap
+++ b/x-pack/plugins/monitoring/public/components/page_loading/__tests__/__snapshots__/page_loading.test.js.snap
@@ -2,10 +2,10 @@
 
 exports[`PageLoading should show a simple page loading component 1`] = `
 <div
-  class="euiPage euiPage--widthIsNotRestricted"
+  class="euiPage"
 >
   <div
-    class="euiPageBody euiPage--widthIsNotRestricted"
+    class="euiPageBody"
   >
     <div
       class="euiPanel euiPanel--paddingLarge euiPageContent noData__content euiPageContent--verticalCenter euiPageContent--horizontalCenter"
diff --git a/x-pack/yarn.lock b/x-pack/yarn.lock
index d9af2f61c0a4..26f9180e17de 100644
--- a/x-pack/yarn.lock
+++ b/x-pack/yarn.lock
@@ -10,9 +10,9 @@
     esutils "^2.0.2"
     js-tokens "^3.0.0"
 
-"@elastic/eui@3.2.1":
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-3.2.1.tgz#43bed65a6751d8d99d59570f7e04292d2f276e5a"
+"@elastic/eui@3.4.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-3.4.0.tgz#8eb661b56fc84a27682e008ef9d6913d1b519c07"
   dependencies:
     classnames "^2.2.5"
     core-js "^2.5.1"
@@ -29,6 +29,7 @@
     react-input-autosize "^2.2.1"
     react-virtualized "^9.18.5"
     react-vis "1.10.2"
+    resize-observer-polyfill "^1.5.0"
     tabbable "^1.1.0"
     uuid "^3.1.0"
 
@@ -6702,6 +6703,10 @@ reselect@3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/reselect/-/reselect-3.0.1.tgz#efdaa98ea7451324d092b2b2163a6a1d7a9a2147"
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"
diff --git a/yarn.lock b/yarn.lock
index f08e41d15f75..6018a86d1522 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -81,9 +81,9 @@
   version "0.0.0"
   uid ""
 
-"@elastic/eui@3.2.1":
-  version "3.2.1"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-3.2.1.tgz#43bed65a6751d8d99d59570f7e04292d2f276e5a"
+"@elastic/eui@3.4.0":
+  version "3.4.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-3.4.0.tgz#8eb661b56fc84a27682e008ef9d6913d1b519c07"
   dependencies:
     classnames "^2.2.5"
     core-js "^2.5.1"
@@ -100,6 +100,7 @@
     react-input-autosize "^2.2.1"
     react-virtualized "^9.18.5"
     react-vis "1.10.2"
+    resize-observer-polyfill "^1.5.0"
     tabbable "^1.1.0"
     uuid "^3.1.0"
 
@@ -11654,6 +11655,10 @@ resize-observer-polyfill@1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.2.1.tgz#55a4ff3e4f212a76470835fb7590dbb62a3e6542"
 
+resize-observer-polyfill@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/resize-observer-polyfill/-/resize-observer-polyfill-1.5.0.tgz#660ff1d9712a2382baa2cad450a4716209f9ca69"
+
 resolve-cwd@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/resolve-cwd/-/resolve-cwd-2.0.0.tgz#00a9f7387556e27038eae232caa372a6a59b665a"