From 74b3d84bb6fce3425fbe1f13c6b90d3e1dcc09fb Mon Sep 17 00:00:00 2001
From: Caroline Horn <549577+cchaos@users.noreply.github.com>
Date: Mon, 16 Sep 2019 13:59:39 -0400
Subject: [PATCH] Update EUI to 14.0.0 (#45475)

---
 package.json                                  |    2 +-
 .../language_switcher.test.tsx.snap           |    8 +-
 .../query_bar_input.test.tsx.snap             |   42 +-
 .../components/language_switcher.tsx          |    8 +-
 .../saved_query_management_component.tsx      |    1 +
 .../__snapshots__/controls_tab.test.js.snap   |    2 +
 .../list_control_editor.test.js.snap          |   32 +-
 .../__snapshots__/options_tab.test.js.snap    |    3 +
 .../range_control_editor.test.js.snap         |    6 +-
 .../components/editor/control_editor.js       |   49 +-
 .../components/editor/list_control_editor.js  |  129 +-
 .../components/editor/range_control_editor.js |   39 +-
 .../vis/__snapshots__/form_row.test.js.snap   |    4 +
 .../public/components/vis/form_row.js         |    8 +-
 .../public/components/common/number_input.tsx |    1 +
 .../public/components/common/range.tsx        |    1 +
 .../public/components/common/select.tsx       |    1 +
 .../public/components/common/text_input.tsx   |    1 +
 .../components/common/truncate_labels.tsx     |    1 +
 .../options/point_series/threshold_panel.tsx  |    1 +
 .../__snapshots__/save_modal.test.js.snap     |    2 +
 .../core_plugins/kibana/public/index.scss     |    6 +
 .../__snapshots__/header.test.js.snap         |    2 +
 .../__snapshots__/time_field.test.js.snap     |    3 +
 .../__snapshots__/objects_table.test.js.snap  |    4 +
 .../__snapshots__/flyout.test.js.snap         |    2 +
 .../__jest__/__snapshots__/table.test.js.snap |    4 +
 .../components/objects_table/objects_table.js |    1 +
 .../field/__snapshots__/field.test.js.snap    |   40 +
 .../public/components/aggs/calculation.js     |    8 +-
 .../public/components/aggs/cumulative_sum.js  |   17 +-
 .../public/components/aggs/derivative.js      |   14 +-
 .../public/components/aggs/filter_ratio.js    |   19 +-
 .../public/components/aggs/math.js            |   18 +-
 .../public/components/aggs/moving_average.js  |   19 +-
 .../public/components/aggs/percentile.js      |    8 +-
 .../aggs/percentile_rank/percentile_rank.js   |    8 +-
 .../public/components/aggs/positive_only.js   |   17 +-
 .../public/components/aggs/serial_diff.js     |   22 +-
 .../public/components/aggs/series_agg.js      |   14 +-
 .../public/components/aggs/static.js          |   12 +-
 .../public/components/aggs/std_agg.js         |   19 +-
 .../public/components/aggs/std_deviation.js   |   23 +-
 .../public/components/aggs/std_sibling.js     |   22 +-
 .../public/components/aggs/top_hit.js         |   34 +-
 .../public/components/annotations_editor.js   |    4 +-
 .../public/components/panel_config/gauge.js   |   21 +-
 .../components/panel_config/markdown.js       |   25 +-
 .../public/components/panel_config/metric.js  |    2 +-
 .../public/components/panel_config/table.js   |    2 +-
 .../components/panel_config/timeseries.js     |   20 +-
 .../public/components/panel_config/top_n.js   |   19 +-
 .../splits/__snapshots__/terms.test.js.snap   |    7 +
 .../__snapshots__/field_editor.test.js.snap   |    3 +
 .../bytes/__snapshots__/bytes.test.js.snap    |    1 +
 .../date/__snapshots__/date.test.js.snap      |    1 +
 .../__snapshots__/date_nanos.test.js.snap     |    1 +
 .../__snapshots__/duration.test.js.snap       |    5 +
 .../number/__snapshots__/number.test.js.snap  |    1 +
 .../__snapshots__/percent.test.js.snap        |    1 +
 .../__snapshots__/static_lookup.test.js.snap  |    2 +
 .../string/__snapshots__/string.test.js.snap  |    1 +
 .../__snapshots__/truncate.test.js.snap       |    1 +
 .../url/__snapshots__/url.test.js.snap        |    9 +
 .../__snapshots__/samples.test.js.snap        |    1 +
 .../ui/public/field_editor/field_editor.js    |    1 +
 .../url_panel_content.test.js.snap            |   14 +
 .../share/components/url_panel_content.tsx    |    3 +
 .../vis/editors/default/_agg_params.scss      |    1 +
 .../__snapshots__/agg_params.test.tsx.snap    |    1 +
 .../editors/default/components/agg_select.tsx |    1 +
 .../controls/__snapshots__/size.test.tsx.snap |    3 +-
 .../__snapshots__/top_aggregate.test.tsx.snap |    3 +-
 .../vis/editors/default/controls/field.tsx    |    1 +
 .../vis/editors/default/controls/filter.tsx   |   56 +-
 .../vis/editors/default/controls/filters.tsx  |    1 +
 .../editors/default/controls/metric_agg.tsx   |    1 +
 .../default/controls/number_interval.tsx      |    1 +
 .../vis/editors/default/controls/order.tsx    |    1 +
 .../vis/editors/default/controls/order_by.tsx |    1 +
 .../editors/default/controls/precision.tsx    |    1 +
 .../default/controls/radius_ratio_option.tsx  |    2 +-
 .../vis/editors/default/controls/raw_json.tsx |    1 +
 .../vis/editors/default/controls/size.tsx     |    1 +
 .../vis/editors/default/controls/string.tsx   |    1 +
 .../editors/default/controls/sub_metric.tsx   |    3 +-
 .../vis/editors/default/controls/switch.tsx   |    7 +-
 .../default/controls/time_interval.tsx        |    1 +
 .../default/controls/top_aggregate.tsx        |    1 +
 .../saved_object_save_modal.test.tsx.snap     |    2 +
 .../plugins/kbn_tp_run_pipeline/package.json  |    2 +-
 .../kbn_tp_custom_visualizations/package.json |    2 +-
 .../kbn_tp_embeddable_explorer/package.json   |    2 +-
 .../kbn_tp_sample_panel_action/package.json   |    2 +-
 .../kbn_tp_visualize_embedding/package.json   |    2 +-
 .../ServiceIntegrations/WatcherFlyout.tsx     |    7 +
 .../AddSettings/AddSettingFlyoutBody.tsx      |    2 +
 .../shared/EnvironmentFilter/index.tsx        |   12 +-
 .../components/tag/config_view/index.tsx      |    2 +
 .../extended_template.examples.storyshot      |  160 +-
 .../uis/datasources/timelion.js               |    2 +
 .../components/arg_form/advanced_failure.js   |   10 +-
 .../custom_element_modal.examples.storyshot   |  584 ++++---
 .../expression_input.examples.storyshot       |   28 +-
 .../file_upload.examples.storyshot            |    4 +-
 .../components/page_config/page_config.js     |    4 +-
 .../workpad_config/workpad_config.js          |    2 +
 .../control_settings/custom_interval.js       |    7 +-
 .../workpad_loader/workpad_loader.js          |    1 +
 .../extended_template.examples.storyshot      | 1514 +++++++++--------
 .../extended_template.examples.storyshot      |  453 ++---
 .../series_style/extended_template.tsx        |   77 +-
 .../public/components/graph_save_modal.tsx    |    1 +
 .../components/grok_debugger/grok_debugger.js |    3 +-
 .../components/add_lifecycle_confirm_modal.js |   61 +-
 .../components/warm_phase/warm_phase.js       |   74 +-
 .../metrics_explorer/chart_options.tsx        |    2 +
 .../components/waffle/custom_field_panel.tsx  |    1 +
 .../components/waffle/legend_controls.tsx     |    2 +
 .../flex_item_setting.test.js.snap            |    2 +
 .../pipeline_editor.test.js.snap              |   28 +
 .../pipeline_editor/pipeline_editor.js        |    1 +
 .../geometry_filter_form.test.js.snap         |   18 +-
 .../tooltip_selector.test.js.snap             |    1 +
 .../public/components/geometry_filter_form.js |    2 +
 .../set_view_control/set_view_control.js      |    1 +
 .../_attribution_control.scss                 |    2 +-
 .../heatmap_style_editor.test.js.snap         |    1 +
 .../vector_style_symbol_editor.test.js.snap   |    2 +
 .../components/vector/vector_style_editor.js  |   51 +-
 .../__snapshots__/popover_form.test.tsx.snap  |    2 +
 .../__snapshots__/popover_form.test.tsx.snap  |    3 +
 .../components/group_by_list/popover_form.tsx |   24 +-
 .../step_define/step_define_form.tsx          |    1 +
 .../create_analytics_advanced_editor.tsx      |    3 +-
 .../__snapshots__/overrides.test.js.snap      |    4 +
 .../components/import_settings/advanced.js    |    2 +
 .../components/import_settings/simple.js      |    3 +
 .../__snapshots__/editor.test.js.snap         |   28 +
 .../__snapshots__/list.test.js.snap           |   15 +
 .../__snapshots__/calendar_form.test.js.snap  |    5 +
 .../edit/new_event_modal/new_event_modal.js   |    3 +
 .../add_item_popover.test.js.snap             |    3 +
 .../edit_description_popover.test.js.snap     |    3 +
 .../edit/__snapshots__/header.test.js.snap    |    2 +
 .../remote_cluster_form.test.js.snap          |  432 ++---
 .../job_create/steps/step_logistics.js        |    2 +
 .../basic_login_form.test.tsx.snap            |    2 +
 .../elasticsearch_privileges.test.tsx.snap    |    2 +
 .../index_privilege_form.test.tsx.snap        |    3 +
 .../simple_privilege_section.test.tsx.snap    |    1 +
 .../privilege_space_form.test.tsx.snap        |    2 +
 .../policy_form/steps/step_logistics.tsx      |    2 +
 .../confirm_delete_modal.test.tsx.snap        |    2 +
 .../components/confirm_delete_modal.tsx       |   22 +-
 .../customize_space_avatar.test.tsx.snap      |   67 +-
 .../space_identifier.test.tsx.snap            |    1 +
 .../customize_space_avatar.tsx                |   61 +-
 .../__snapshots__/ping_list.test.tsx.snap     |    2 +
 x-pack/package.json                           |    2 +-
 yarn.lock                                     |    8 +-
 161 files changed, 2810 insertions(+), 1947 deletions(-)

diff --git a/package.json b/package.json
index 1f9629eff8a624..7a5c80c0d58ca2 100644
--- a/package.json
+++ b/package.json
@@ -105,7 +105,7 @@
     "@babel/register": "^7.5.5",
     "@elastic/charts": "^11.1.1",
     "@elastic/datemath": "5.0.2",
-    "@elastic/eui": "13.8.1",
+    "@elastic/eui": "14.0.0",
     "@elastic/filesaver": "1.1.2",
     "@elastic/good": "8.1.1-kibana2",
     "@elastic/numeral": "2.3.3",
diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/language_switcher.test.tsx.snap b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/language_switcher.test.tsx.snap
index e46ec946e97f62..a898d5b3c78d13 100644
--- a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/language_switcher.test.tsx.snap
+++ b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/language_switcher.test.tsx.snap
@@ -2,9 +2,11 @@
 
 exports[`LanguageSwitcher should toggle off if language is lucene 1`] = `
 <EuiPopover
+  anchorClassName="euiFormControlLayout__append"
   anchorPosition="downRight"
   button={
     <EuiButtonEmpty
+      className="euiFormControlLayout__append"
       onClick={[Function]}
       size="xs"
     >
@@ -15,7 +17,6 @@ exports[`LanguageSwitcher should toggle off if language is lucene 1`] = `
       />
     </EuiButtonEmpty>
   }
-  className="eui-displayBlock"
   closePopover={[Function]}
   display="inlineBlock"
   hasArrow={true}
@@ -69,6 +70,7 @@ exports[`LanguageSwitcher should toggle off if language is lucene 1`] = `
     <EuiForm>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         label={
@@ -102,9 +104,11 @@ exports[`LanguageSwitcher should toggle off if language is lucene 1`] = `
 
 exports[`LanguageSwitcher should toggle on if language is kuery 1`] = `
 <EuiPopover
+  anchorClassName="euiFormControlLayout__append"
   anchorPosition="downRight"
   button={
     <EuiButtonEmpty
+      className="euiFormControlLayout__append"
       onClick={[Function]}
       size="xs"
     >
@@ -115,7 +119,6 @@ exports[`LanguageSwitcher should toggle on if language is kuery 1`] = `
       />
     </EuiButtonEmpty>
   }
-  className="eui-displayBlock"
   closePopover={[Function]}
   display="inlineBlock"
   hasArrow={true}
@@ -169,6 +172,7 @@ exports[`LanguageSwitcher should toggle on if language is kuery 1`] = `
     <EuiForm>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         label={
diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap
index 8714e1ccfb3390..8a0347875d7787 100644
--- a/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap
+++ b/src/legacy/core_plugins/data/public/query/query_bar/components/__snapshots__/query_bar_input.test.tsx.snap
@@ -306,9 +306,7 @@ exports[`QueryBarInput Should disable autoFocus on EuiFieldText when disableAuto
                 <div
                   className="euiFormControlLayout__childrenWrapper"
                 >
-                  <EuiValidatableControl
-                    className="undefined euiFormControlLayout__child--noStyle"
-                  >
+                  <EuiValidatableControl>
                     <input
                       aria-activedescendant=""
                       aria-autocomplete="list"
@@ -362,9 +360,11 @@ exports[`QueryBarInput Should disable autoFocus on EuiFieldText when disableAuto
                   onSelectLanguage={[Function]}
                 >
                   <EuiPopover
+                    anchorClassName="euiFormControlLayout__append"
                     anchorPosition="downRight"
                     button={
                       <EuiButtonEmpty
+                        className="euiFormControlLayout__append"
                         onClick={[Function]}
                         size="xs"
                       >
@@ -375,7 +375,6 @@ exports[`QueryBarInput Should disable autoFocus on EuiFieldText when disableAuto
                         />
                       </EuiButtonEmpty>
                     }
-                    className="eui-displayBlock"
                     closePopover={[Function]}
                     display="inlineBlock"
                     hasArrow={true}
@@ -390,7 +389,7 @@ exports[`QueryBarInput Should disable autoFocus on EuiFieldText when disableAuto
                       onOutsideClick={[Function]}
                     >
                       <div
-                        className="euiPopover euiPopover--anchorDownRight euiPopover--withTitle eui-displayBlock"
+                        className="euiPopover euiPopover--anchorDownRight euiPopover--withTitle"
                         id="popover"
                         onKeyDown={[Function]}
                         onMouseDown={[Function]}
@@ -399,14 +398,15 @@ exports[`QueryBarInput Should disable autoFocus on EuiFieldText when disableAuto
                         onTouchStart={[Function]}
                       >
                         <div
-                          className="euiPopover__anchor"
+                          className="euiPopover__anchor euiFormControlLayout__append"
                         >
                           <EuiButtonEmpty
+                            className="euiFormControlLayout__append"
                             onClick={[Function]}
                             size="xs"
                           >
                             <button
-                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__append"
                               onClick={[Function]}
                               type="button"
                             >
@@ -755,9 +755,7 @@ exports[`QueryBarInput Should pass the query language to the language switcher 1
                 <div
                   className="euiFormControlLayout__childrenWrapper"
                 >
-                  <EuiValidatableControl
-                    className="undefined euiFormControlLayout__child--noStyle"
-                  >
+                  <EuiValidatableControl>
                     <input
                       aria-activedescendant=""
                       aria-autocomplete="list"
@@ -811,9 +809,11 @@ exports[`QueryBarInput Should pass the query language to the language switcher 1
                   onSelectLanguage={[Function]}
                 >
                   <EuiPopover
+                    anchorClassName="euiFormControlLayout__append"
                     anchorPosition="downRight"
                     button={
                       <EuiButtonEmpty
+                        className="euiFormControlLayout__append"
                         onClick={[Function]}
                         size="xs"
                       >
@@ -824,7 +824,6 @@ exports[`QueryBarInput Should pass the query language to the language switcher 1
                         />
                       </EuiButtonEmpty>
                     }
-                    className="eui-displayBlock"
                     closePopover={[Function]}
                     display="inlineBlock"
                     hasArrow={true}
@@ -839,7 +838,7 @@ exports[`QueryBarInput Should pass the query language to the language switcher 1
                       onOutsideClick={[Function]}
                     >
                       <div
-                        className="euiPopover euiPopover--anchorDownRight euiPopover--withTitle eui-displayBlock"
+                        className="euiPopover euiPopover--anchorDownRight euiPopover--withTitle"
                         id="popover"
                         onKeyDown={[Function]}
                         onMouseDown={[Function]}
@@ -848,14 +847,15 @@ exports[`QueryBarInput Should pass the query language to the language switcher 1
                         onTouchStart={[Function]}
                       >
                         <div
-                          className="euiPopover__anchor"
+                          className="euiPopover__anchor euiFormControlLayout__append"
                         >
                           <EuiButtonEmpty
+                            className="euiFormControlLayout__append"
                             onClick={[Function]}
                             size="xs"
                           >
                             <button
-                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__append"
                               onClick={[Function]}
                               type="button"
                             >
@@ -1204,9 +1204,7 @@ exports[`QueryBarInput Should render the given query 1`] = `
                 <div
                   className="euiFormControlLayout__childrenWrapper"
                 >
-                  <EuiValidatableControl
-                    className="undefined euiFormControlLayout__child--noStyle"
-                  >
+                  <EuiValidatableControl>
                     <input
                       aria-activedescendant=""
                       aria-autocomplete="list"
@@ -1260,9 +1258,11 @@ exports[`QueryBarInput Should render the given query 1`] = `
                   onSelectLanguage={[Function]}
                 >
                   <EuiPopover
+                    anchorClassName="euiFormControlLayout__append"
                     anchorPosition="downRight"
                     button={
                       <EuiButtonEmpty
+                        className="euiFormControlLayout__append"
                         onClick={[Function]}
                         size="xs"
                       >
@@ -1273,7 +1273,6 @@ exports[`QueryBarInput Should render the given query 1`] = `
                         />
                       </EuiButtonEmpty>
                     }
-                    className="eui-displayBlock"
                     closePopover={[Function]}
                     display="inlineBlock"
                     hasArrow={true}
@@ -1288,7 +1287,7 @@ exports[`QueryBarInput Should render the given query 1`] = `
                       onOutsideClick={[Function]}
                     >
                       <div
-                        className="euiPopover euiPopover--anchorDownRight euiPopover--withTitle eui-displayBlock"
+                        className="euiPopover euiPopover--anchorDownRight euiPopover--withTitle"
                         id="popover"
                         onKeyDown={[Function]}
                         onMouseDown={[Function]}
@@ -1297,14 +1296,15 @@ exports[`QueryBarInput Should render the given query 1`] = `
                         onTouchStart={[Function]}
                       >
                         <div
-                          className="euiPopover__anchor"
+                          className="euiPopover__anchor euiFormControlLayout__append"
                         >
                           <EuiButtonEmpty
+                            className="euiFormControlLayout__append"
                             onClick={[Function]}
                             size="xs"
                           >
                             <button
-                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall"
+                              className="euiButtonEmpty euiButtonEmpty--primary euiButtonEmpty--xSmall euiFormControlLayout__append"
                               onClick={[Function]}
                               type="button"
                             >
diff --git a/src/legacy/core_plugins/data/public/query/query_bar/components/language_switcher.tsx b/src/legacy/core_plugins/data/public/query/query_bar/components/language_switcher.tsx
index 8806b5b6489621..a5b72b7749f14a 100644
--- a/src/legacy/core_plugins/data/public/query/query_bar/components/language_switcher.tsx
+++ b/src/legacy/core_plugins/data/public/query/query_bar/components/language_switcher.tsx
@@ -65,7 +65,11 @@ export class QueryLanguageSwitcher extends Component<Props, State> {
     );
 
     const button = (
-      <EuiButtonEmpty size="xs" onClick={this.togglePopover}>
+      <EuiButtonEmpty
+        size="xs"
+        onClick={this.togglePopover}
+        className="euiFormControlLayout__append"
+      >
         {this.props.language === 'lucene' ? luceneLabel : kqlLabel}
       </EuiButtonEmpty>
     );
@@ -73,7 +77,7 @@ export class QueryLanguageSwitcher extends Component<Props, State> {
     return (
       <EuiPopover
         id="popover"
-        className="eui-displayBlock"
+        anchorClassName="euiFormControlLayout__append"
         ownFocus
         anchorPosition={this.props.anchorPosition || 'downRight'}
         button={button}
diff --git a/src/legacy/core_plugins/data/public/search/search_bar/components/saved_query_management/saved_query_management_component.tsx b/src/legacy/core_plugins/data/public/search/search_bar/components/saved_query_management/saved_query_management_component.tsx
index a4db28dbb1bed3..273d40a12246c7 100644
--- a/src/legacy/core_plugins/data/public/search/search_bar/components/saved_query_management/saved_query_management_component.tsx
+++ b/src/legacy/core_plugins/data/public/search/search_bar/components/saved_query_management/saved_query_management_component.tsx
@@ -164,6 +164,7 @@ export const SavedQueryManagementComponent: FunctionComponent<Props> = ({
     <Fragment>
       <EuiPopover
         id="savedQueryPopover"
+        anchorClassName="euiFormControlLayout__prepend"
         button={savedQueryPopoverButton}
         isOpen={isOpen}
         closePopover={() => {
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
index bf48d6959ff9ee..7d0bfbc8ba7579 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/controls_tab.test.js.snap
@@ -78,6 +78,7 @@ exports[`renders ControlsTab 1`] = `
       <EuiFlexItem>
         <EuiFormRow
           describedByIds={Array []}
+          display="row"
           fullWidth={false}
           hasEmptyLabelSpace={false}
           id="selectControlType"
@@ -112,6 +113,7 @@ exports[`renders ControlsTab 1`] = `
       >
         <EuiFormRow
           describedByIds={Array []}
+          display="row"
           fullWidth={false}
           hasEmptyLabelSpace={false}
           id="addControl"
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap
index db9c6f27c44575..27a298cc30feab 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/list_control_editor.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders dynamic options should display disabled dynamic options with tooltip for non-string fields 1`] = `
-<div>
+<Fragment>
   <InjectIntl(IndexPatternSelectFormRowUi)
     controlIndex={0}
     indexPatternId="mockIndexPattern"
@@ -17,6 +17,7 @@ exports[`renders dynamic options should display disabled dynamic options with to
   />
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     helpText={
@@ -45,6 +46,7 @@ exports[`renders dynamic options should display disabled dynamic options with to
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     helpText={
@@ -74,6 +76,7 @@ exports[`renders dynamic options should display disabled dynamic options with to
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     helpText={
@@ -104,11 +107,11 @@ exports[`renders dynamic options should display disabled dynamic options with to
       value={5}
     />
   </EuiFormRow>
-</div>
+</Fragment>
 `;
 
 exports[`renders dynamic options should display dynamic options for string fields 1`] = `
-<div>
+<Fragment>
   <InjectIntl(IndexPatternSelectFormRowUi)
     controlIndex={0}
     indexPatternId="mockIndexPattern"
@@ -124,6 +127,7 @@ exports[`renders dynamic options should display dynamic options for string field
   />
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     helpText={
@@ -152,6 +156,7 @@ exports[`renders dynamic options should display dynamic options for string field
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     helpText={
@@ -179,11 +184,11 @@ exports[`renders dynamic options should display dynamic options for string field
       onChange={[Function]}
     />
   </EuiFormRow>
-</div>
+</Fragment>
 `;
 
 exports[`renders dynamic options should display size field when dynamic options is disabled 1`] = `
-<div>
+<Fragment>
   <InjectIntl(IndexPatternSelectFormRowUi)
     controlIndex={0}
     indexPatternId="mockIndexPattern"
@@ -199,6 +204,7 @@ exports[`renders dynamic options should display size field when dynamic options
   />
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     helpText={
@@ -227,6 +233,7 @@ exports[`renders dynamic options should display size field when dynamic options
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     helpText={
@@ -256,6 +263,7 @@ exports[`renders dynamic options should display size field when dynamic options
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     helpText={
@@ -286,11 +294,11 @@ exports[`renders dynamic options should display size field when dynamic options
       value={5}
     />
   </EuiFormRow>
-</div>
+</Fragment>
 `;
 
 exports[`renders should display chaining input when parents are provided 1`] = `
-<div>
+<Fragment>
   <InjectIntl(IndexPatternSelectFormRowUi)
     controlIndex={0}
     indexPatternId="indexPattern1"
@@ -306,6 +314,7 @@ exports[`renders should display chaining input when parents are provided 1`] = `
   />
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     helpText={
@@ -352,6 +361,7 @@ exports[`renders should display chaining input when parents are provided 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     helpText={
@@ -380,6 +390,7 @@ exports[`renders should display chaining input when parents are provided 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     helpText={
@@ -409,6 +420,7 @@ exports[`renders should display chaining input when parents are provided 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     helpText={
@@ -439,11 +451,11 @@ exports[`renders should display chaining input when parents are provided 1`] = `
       value={10}
     />
   </EuiFormRow>
-</div>
+</Fragment>
 `;
 
 exports[`renders should not display any options until field is selected 1`] = `
-<div>
+<Fragment>
   <InjectIntl(IndexPatternSelectFormRowUi)
     controlIndex={0}
     indexPatternId="mockIndexPattern"
@@ -457,5 +469,5 @@ exports[`renders should not display any options until field is selected 1`] = `
     indexPatternId="mockIndexPattern"
     onChange={[Function]}
   />
-</div>
+</Fragment>
 `;
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/options_tab.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/options_tab.test.js.snap
index f78607e9cfa0a3..9420b2f05e6355 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/options_tab.test.js.snap
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/options_tab.test.js.snap
@@ -4,6 +4,7 @@ exports[`OptionsTab should renders OptionsTab 1`] = `
 <EuiForm>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     id="updateFiltersOnChange"
@@ -24,6 +25,7 @@ exports[`OptionsTab should renders OptionsTab 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     id="useTimeFilter"
@@ -44,6 +46,7 @@ exports[`OptionsTab should renders OptionsTab 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     id="pinFilters"
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/range_control_editor.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/range_control_editor.test.js.snap
index 2df5162032ce61..0f9f32b4490032 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/range_control_editor.test.js.snap
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/__snapshots__/range_control_editor.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders RangeControlEditor 1`] = `
-<div>
+<Fragment>
   <InjectIntl(IndexPatternSelectFormRowUi)
     controlIndex={0}
     indexPatternId="indexPattern1"
@@ -17,6 +17,7 @@ exports[`renders RangeControlEditor 1`] = `
   />
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     id="stepSize-0"
@@ -40,6 +41,7 @@ exports[`renders RangeControlEditor 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     id="decimalPlaces-0"
@@ -62,5 +64,5 @@ exports[`renders RangeControlEditor 1`] = `
       value={0}
     />
   </EuiFormRow>
-</div>
+</Fragment>
 `;
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/control_editor.js b/src/legacy/core_plugins/input_control_vis/public/components/editor/control_editor.js
index 12003624f0b3cd..cc31b8d238dbe3 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/control_editor.js
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/control_editor.js
@@ -35,30 +35,29 @@ import {
 } from '@elastic/eui';
 
 class ControlEditorUi extends Component {
-
-  changeLabel = (evt) => {
+  changeLabel = evt => {
     this.props.handleLabelChange(this.props.controlIndex, evt);
-  }
+  };
 
   removeControl = () => {
     this.props.handleRemoveControl(this.props.controlIndex);
-  }
+  };
 
   moveUpControl = () => {
     this.props.moveControl(this.props.controlIndex, -1);
-  }
+  };
 
   moveDownControl = () => {
     this.props.moveControl(this.props.controlIndex, 1);
-  }
+  };
 
-  changeIndexPattern = (evt) => {
+  changeIndexPattern = evt => {
     this.props.handleIndexPatternChange(this.props.controlIndex, evt);
-  }
+  };
 
-  changeFieldName = (evt) => {
+  changeFieldName = evt => {
     this.props.handleFieldNameChange(this.props.controlIndex, evt);
-  }
+  };
 
   renderEditor() {
     let controlEditor = null;
@@ -99,12 +98,14 @@ class ControlEditorUi extends Component {
       <EuiForm>
         <EuiFormRow
           id={labelId}
-          label={<FormattedMessage id="inputControl.editor.controlEditor.controlLabel" defaultMessage="Control Label"/>}
+          label={
+            <FormattedMessage
+              id="inputControl.editor.controlEditor.controlLabel"
+              defaultMessage="Control Label"
+            />
+          }
         >
-          <EuiFieldText
-            value={this.props.controlParams.label}
-            onChange={this.changeLabel}
-          />
+          <EuiFieldText value={this.props.controlParams.label} onChange={this.changeLabel} />
         </EuiFormRow>
 
         {controlEditor}
@@ -118,7 +119,7 @@ class ControlEditorUi extends Component {
         <EuiButtonIcon
           aria-label={this.props.intl.formatMessage({
             id: 'inputControl.editor.controlEditor.moveControlUpAriaLabel',
-            defaultMessage: 'Move control up'
+            defaultMessage: 'Move control up',
           })}
           color="primary"
           onClick={this.moveUpControl}
@@ -128,7 +129,7 @@ class ControlEditorUi extends Component {
         <EuiButtonIcon
           aria-label={this.props.intl.formatMessage({
             id: 'inputControl.editor.controlEditor.moveControlDownAriaLabel',
-            defaultMessage: 'Move control down'
+            defaultMessage: 'Move control down',
           })}
           color="primary"
           onClick={this.moveDownControl}
@@ -138,7 +139,7 @@ class ControlEditorUi extends Component {
         <EuiButtonIcon
           aria-label={this.props.intl.formatMessage({
             id: 'inputControl.editor.controlEditor.removeControlAriaLabel',
-            defaultMessage: 'Remove control'
+            defaultMessage: 'Remove control',
           })}
           color="danger"
           onClick={this.removeControl}
@@ -152,7 +153,6 @@ class ControlEditorUi extends Component {
   render() {
     return (
       <EuiPanel grow={false} className="icvControlEditor__panel">
-
         <EuiAccordion
           id="controlEditorAccordion"
           buttonContent={getTitle(this.props.controlParams, this.props.controlIndex)}
@@ -162,7 +162,6 @@ class ControlEditorUi extends Component {
           <EuiSpacer size="s" />
           {this.renderEditor()}
         </EuiAccordion>
-
       </EuiPanel>
     );
   }
@@ -179,10 +178,12 @@ ControlEditorUi.propTypes = {
   getIndexPattern: PropTypes.func.isRequired,
   handleCheckboxOptionChange: PropTypes.func.isRequired,
   handleNumberOptionChange: PropTypes.func.isRequired,
-  parentCandidates: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
-  })).isRequired,
+  parentCandidates: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired,
+    })
+  ).isRequired,
   handleParentChange: PropTypes.func.isRequired,
 };
 
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.js b/src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.js
index 560987cbd9c411..2ee225475b0fe0 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.js
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/list_control_editor.js
@@ -18,17 +18,12 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { Component }  from 'react';
+import React, { Component, Fragment } from 'react';
 import { IndexPatternSelectFormRow } from './index_pattern_select_form_row';
 import { FieldSelect } from './field_select';
 import { FormattedMessage } from '@kbn/i18n/react';
 
-import {
-  EuiFormRow,
-  EuiFieldNumber,
-  EuiSwitch,
-  EuiSelect,
-} from '@elastic/eui';
+import { EuiFormRow, EuiFieldNumber, EuiSwitch, EuiSelect } from '@elastic/eui';
 
 function filterField(field) {
   return field.aggregatable && ['number', 'boolean', 'date', 'ip', 'string'].includes(field.type);
@@ -60,13 +55,13 @@ export class ListControlEditor extends Component {
     }
 
     return null;
-  }
+  };
 
   componentDidUpdate = () => {
     if (this.state.isLoadingFieldType) {
       this.loadIsStringField();
     }
-  }
+  };
 
   loadIsStringField = async () => {
     if (!this.props.controlParams.indexPattern || !this.props.controlParams.fieldName) {
@@ -86,7 +81,7 @@ export class ListControlEditor extends Component {
       return;
     }
 
-    const field = indexPattern.fields.find((field) => {
+    const field = indexPattern.fields.find(field => {
       return field.name === this.props.controlParams.fieldName;
     });
     if (!field) {
@@ -94,9 +89,9 @@ export class ListControlEditor extends Component {
     }
     this.setState({
       isLoadingFieldType: false,
-      isStringField: field.type === 'string'
+      isStringField: field.type === 'string',
     });
-  }
+  };
 
   renderOptions = () => {
     if (this.state.isLoadingFieldType || !this.props.controlParams.fieldName) {
@@ -105,24 +100,28 @@ export class ListControlEditor extends Component {
 
     const options = [];
     if (this.props.parentCandidates && this.props.parentCandidates.length > 0) {
-      const parentCandidatesOptions = [
-        { value: '', text: '' },
-        ...this.props.parentCandidates,
-      ];
+      const parentCandidatesOptions = [{ value: '', text: '' }, ...this.props.parentCandidates];
       options.push(
         <EuiFormRow
           id={`parentSelect-${this.props.controlIndex}`}
-          label={<FormattedMessage id="inputControl.editor.listControl.parentLabel" defaultMessage="Parent control" />}
-          helpText={<FormattedMessage
-            id="inputControl.editor.listControl.parentDescription"
-            defaultMessage="Options are based on the value of parent control. Disabled if parent is not set."
-          />}
+          label={
+            <FormattedMessage
+              id="inputControl.editor.listControl.parentLabel"
+              defaultMessage="Parent control"
+            />
+          }
+          helpText={
+            <FormattedMessage
+              id="inputControl.editor.listControl.parentDescription"
+              defaultMessage="Options are based on the value of parent control. Disabled if parent is not set."
+            />
+          }
           key="parentSelect"
         >
           <EuiSelect
             options={parentCandidatesOptions}
             value={this.props.controlParams.parent}
-            onChange={(evt) => {
+            onChange={evt => {
               this.props.handleParentChange(this.props.controlIndex, evt);
             }}
           />
@@ -134,15 +133,22 @@ export class ListControlEditor extends Component {
       <EuiFormRow
         id={`multiselect-${this.props.controlIndex}`}
         key="multiselect"
-        helpText={<FormattedMessage
-          id="inputControl.editor.listControl.multiselectDescription"
-          defaultMessage="Allow multiple selection"
-        />}
+        helpText={
+          <FormattedMessage
+            id="inputControl.editor.listControl.multiselectDescription"
+            defaultMessage="Allow multiple selection"
+          />
+        }
       >
         <EuiSwitch
-          label={<FormattedMessage id="inputControl.editor.listControl.multiselectLabel" defaultMessage="Multiselect" />}
+          label={
+            <FormattedMessage
+              id="inputControl.editor.listControl.multiselectLabel"
+              defaultMessage="Multiselect"
+            />
+          }
           checked={this.props.controlParams.options.multiselect}
-          onChange={(evt) => {
+          onChange={evt => {
             this.props.handleCheckboxOptionChange(this.props.controlIndex, 'multiselect', evt);
           }}
           data-test-subj="listControlMultiselectInput"
@@ -150,18 +156,17 @@ export class ListControlEditor extends Component {
       </EuiFormRow>
     );
 
-    const dynamicOptionsHelpText = this.state.isStringField
-      ? (
-        <FormattedMessage
-          id="inputControl.editor.listControl.dynamicOptions.updateDescription"
-          defaultMessage="Update options in response to user input"
-        />
-      ) : (
-        <FormattedMessage
-          id="inputControl.editor.listControl.dynamicOptions.stringFieldDescription"
-          defaultMessage="Only available for &quot;string&quot; fields"
-        />
-      );
+    const dynamicOptionsHelpText = this.state.isStringField ? (
+      <FormattedMessage
+        id="inputControl.editor.listControl.dynamicOptions.updateDescription"
+        defaultMessage="Update options in response to user input"
+      />
+    ) : (
+      <FormattedMessage
+        id="inputControl.editor.listControl.dynamicOptions.stringFieldDescription"
+        defaultMessage='Only available for "string" fields'
+      />
+    );
     options.push(
       <EuiFormRow
         id={`dynamicOptions-${this.props.controlIndex}`}
@@ -169,9 +174,14 @@ export class ListControlEditor extends Component {
         helpText={dynamicOptionsHelpText}
       >
         <EuiSwitch
-          label={<FormattedMessage id="inputControl.editor.listControl.dynamicOptionsLabel" defaultMessage="Dynamic Options" />}
+          label={
+            <FormattedMessage
+              id="inputControl.editor.listControl.dynamicOptionsLabel"
+              defaultMessage="Dynamic Options"
+            />
+          }
           checked={this.props.controlParams.options.dynamicOptions}
-          onChange={(evt) => {
+          onChange={evt => {
             this.props.handleCheckboxOptionChange(this.props.controlIndex, 'dynamicOptions', evt);
           }}
           disabled={this.state.isStringField ? false : true}
@@ -185,14 +195,24 @@ export class ListControlEditor extends Component {
       options.push(
         <EuiFormRow
           id={`size-${this.props.controlIndex}`}
-          label={<FormattedMessage id="inputControl.editor.listControl.sizeLabel" defaultMessage="Size" />}
+          label={
+            <FormattedMessage
+              id="inputControl.editor.listControl.sizeLabel"
+              defaultMessage="Size"
+            />
+          }
           key="size"
-          helpText={<FormattedMessage id="inputControl.editor.listControl.sizeDescription" defaultMessage="Number of options" />}
+          helpText={
+            <FormattedMessage
+              id="inputControl.editor.listControl.sizeDescription"
+              defaultMessage="Number of options"
+            />
+          }
         >
           <EuiFieldNumber
             min={1}
             value={this.props.controlParams.options.size}
-            onChange={(evt) => {
+            onChange={evt => {
               this.props.handleNumberOptionChange(this.props.controlIndex, 'size', evt);
             }}
             data-test-subj="listControlSizeInput"
@@ -202,12 +222,11 @@ export class ListControlEditor extends Component {
     }
 
     return options;
-  }
+  };
 
   render() {
     return (
-      <div>
-
+      <Fragment>
         <IndexPatternSelectFormRow
           indexPatternId={this.props.controlParams.indexPattern}
           onChange={this.props.handleIndexPatternChange}
@@ -224,8 +243,7 @@ export class ListControlEditor extends Component {
         />
 
         {this.renderOptions()}
-
-      </div>
+      </Fragment>
     );
   }
 }
@@ -238,10 +256,11 @@ ListControlEditor.propTypes = {
   handleIndexPatternChange: PropTypes.func.isRequired,
   handleCheckboxOptionChange: PropTypes.func.isRequired,
   handleNumberOptionChange: PropTypes.func.isRequired,
-  parentCandidates: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired,
-  })).isRequired,
+  parentCandidates: PropTypes.arrayOf(
+    PropTypes.shape({
+      value: PropTypes.string.isRequired,
+      text: PropTypes.string.isRequired,
+    })
+  ).isRequired,
   handleParentChange: PropTypes.func.isRequired,
 };
-
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/editor/range_control_editor.js b/src/legacy/core_plugins/input_control_vis/public/components/editor/range_control_editor.js
index ba4e43d4a3ed8a..6e1754b28647f5 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/editor/range_control_editor.js
+++ b/src/legacy/core_plugins/input_control_vis/public/components/editor/range_control_editor.js
@@ -18,14 +18,11 @@
  */
 
 import PropTypes from 'prop-types';
-import React from 'react';
+import React, { Fragment } from 'react';
 import { IndexPatternSelectFormRow } from './index_pattern_select_form_row';
 import { FieldSelect } from './field_select';
 
-import {
-  EuiFormRow,
-  EuiFieldNumber,
-} from '@elastic/eui';
+import { EuiFormRow, EuiFieldNumber } from '@elastic/eui';
 
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -36,15 +33,14 @@ function filterField(field) {
 export function RangeControlEditor(props) {
   const stepSizeId = `stepSize-${props.controlIndex}`;
   const decimalPlacesId = `decimalPlaces-${props.controlIndex}`;
-  const handleDecimalPlacesChange = (evt) => {
+  const handleDecimalPlacesChange = evt => {
     props.handleNumberOptionChange(props.controlIndex, 'decimalPlaces', evt);
   };
-  const handleStepChange = (evt) => {
+  const handleStepChange = evt => {
     props.handleNumberOptionChange(props.controlIndex, 'step', evt);
   };
   return (
-    <div>
-
+    <Fragment>
       <IndexPatternSelectFormRow
         indexPatternId={props.controlParams.indexPattern}
         onChange={props.handleIndexPatternChange}
@@ -62,10 +58,12 @@ export function RangeControlEditor(props) {
 
       <EuiFormRow
         id={stepSizeId}
-        label={<FormattedMessage
-          id="inputControl.editor.rangeControl.stepSizeLabel"
-          defaultMessage="Step Size"
-        />}
+        label={
+          <FormattedMessage
+            id="inputControl.editor.rangeControl.stepSizeLabel"
+            defaultMessage="Step Size"
+          />
+        }
       >
         <EuiFieldNumber
           value={props.controlParams.options.step}
@@ -76,10 +74,12 @@ export function RangeControlEditor(props) {
 
       <EuiFormRow
         id={decimalPlacesId}
-        label={<FormattedMessage
-          id="inputControl.editor.rangeControl.decimalPlacesLabel"
-          defaultMessage="Decimal Places"
-        />}
+        label={
+          <FormattedMessage
+            id="inputControl.editor.rangeControl.decimalPlacesLabel"
+            defaultMessage="Decimal Places"
+          />
+        }
       >
         <EuiFieldNumber
           min={0}
@@ -88,8 +88,7 @@ export function RangeControlEditor(props) {
           data-test-subj={`rangeControlDecimalPlacesInput${props.controlIndex}`}
         />
       </EuiFormRow>
-
-    </div>
+    </Fragment>
   );
 }
 
@@ -99,5 +98,5 @@ RangeControlEditor.propTypes = {
   controlParams: PropTypes.object.isRequired,
   handleFieldNameChange: PropTypes.func.isRequired,
   handleIndexPatternChange: PropTypes.func.isRequired,
-  handleNumberOptionChange: PropTypes.func.isRequired
+  handleNumberOptionChange: PropTypes.func.isRequired,
 };
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/form_row.test.js.snap b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/form_row.test.js.snap
index 7ff5ad453fc245..a95715d9955f93 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/form_row.test.js.snap
+++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/__snapshots__/form_row.test.js.snap
@@ -4,6 +4,7 @@ exports[`renders control with warning 1`] = `
 <EuiFormRow
   data-test-subj="inputControl0"
   describedByIds={Array []}
+  display="row"
   fullWidth={false}
   hasEmptyLabelSpace={false}
   id="controlId"
@@ -33,6 +34,7 @@ exports[`renders disabled control with tooltip 1`] = `
 <EuiFormRow
   data-test-subj="inputControl0"
   describedByIds={Array []}
+  display="row"
   fullWidth={false}
   hasEmptyLabelSpace={false}
   id="controlId"
@@ -40,6 +42,7 @@ exports[`renders disabled control with tooltip 1`] = `
   labelType="label"
 >
   <EuiToolTip
+    anchorClassName="eui-displayBlock"
     content="I am disabled for testing purposes"
     delay="regular"
     placement="top"
@@ -56,6 +59,7 @@ exports[`renders enabled control 1`] = `
 <EuiFormRow
   data-test-subj="inputControl0"
   describedByIds={Array []}
+  display="row"
   fullWidth={false}
   hasEmptyLabelSpace={false}
   id="controlId"
diff --git a/src/legacy/core_plugins/input_control_vis/public/components/vis/form_row.js b/src/legacy/core_plugins/input_control_vis/public/components/vis/form_row.js
index 0d092054ce3961..fdd4fcb6e26ae5 100644
--- a/src/legacy/core_plugins/input_control_vis/public/components/vis/form_row.js
+++ b/src/legacy/core_plugins/input_control_vis/public/components/vis/form_row.js
@@ -26,7 +26,7 @@ export function FormRow(props) {
   let control = props.children;
   if (props.disableMsg) {
     control = (
-      <EuiToolTip placement="top" content={props.disableMsg}>
+      <EuiToolTip placement="top" content={props.disableMsg} anchorClassName="eui-displayBlock">
         {control}
       </EuiToolTip>
     );
@@ -44,11 +44,7 @@ export function FormRow(props) {
   );
 
   return (
-    <EuiFormRow
-      label={label}
-      id={props.id}
-      data-test-subj={'inputControl' + props.controlIndex}
-    >
+    <EuiFormRow label={label} id={props.id} data-test-subj={'inputControl' + props.controlIndex}>
       {control}
     </EuiFormRow>
   );
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/number_input.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/number_input.tsx
index 9a7a39bc8f559d..7322cfb69b20b7 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/number_input.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/number_input.tsx
@@ -52,6 +52,7 @@ function NumberInputOption<ParamName extends string>({
       <EuiFieldNumber
         data-test-subj={dataTestSubj}
         disabled={disabled}
+        compressed
         fullWidth
         isInvalid={isInvalid}
         step={step}
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/range.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/range.tsx
index 5aca8abf0b2d1d..3ee05345524e63 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/range.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/range.tsx
@@ -64,6 +64,7 @@ function RangeOption<ParamName extends string>({
   return (
     <EuiFormRow label={label} fullWidth={true} isInvalid={!isValidState} error={error} compressed>
       <EuiRange
+        compressed
         fullWidth
         showValue
         max={max}
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/select.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/select.tsx
index 2c82d5fc271878..79e9e6529267c1 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/select.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/select.tsx
@@ -55,6 +55,7 @@ function SelectOption<ParamName extends string, ValidParamValues extends string
       labelAppend={labelAppend}
     >
       <EuiSelect
+        compressed
         disabled={disabled}
         options={[emptyValue, ...options]}
         value={value === undefined ? emptyValue.value : value}
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/text_input.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/text_input.tsx
index d7b63891d3947e..0ab004102bdb81 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/text_input.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/text_input.tsx
@@ -42,6 +42,7 @@ function TextInputOption<ParamName extends string>({
   return (
     <EuiFormRow helpText={helpText} label={label} fullWidth compressed>
       <EuiFieldText
+        compressed
         fullWidth
         data-test-subj={dataTestSubj}
         disabled={disabled}
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/truncate_labels.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/truncate_labels.tsx
index 465339f129f857..1854a84151d66f 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/truncate_labels.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/common/truncate_labels.tsx
@@ -44,6 +44,7 @@ function TruncateLabelsOption({ disabled, value, setValue }: TruncateLabelsOptio
         value={value === null ? '' : value}
         onChange={onChange}
         fullWidth
+        compressed
       />
     </EuiFormRow>
   );
diff --git a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/threshold_panel.tsx b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/threshold_panel.tsx
index 331b81dc653212..a8674b77dc9857 100644
--- a/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/threshold_panel.tsx
+++ b/src/legacy/core_plugins/kbn_vislib_vis_types/public/components/options/point_series/threshold_panel.tsx
@@ -112,6 +112,7 @@ function ThresholdPanel({ stateParams, setValue, vis }: VisOptionsProps<BasicVis
             compressed
           >
             <EuiColorPicker
+              compressed
               color={stateParams.thresholdLine.color}
               fullWidth
               onChange={setThresholdLineColor}
diff --git a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/save_modal.test.js.snap b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/save_modal.test.js.snap
index fb2a6bbc027059..258ef9cb7d70d6 100644
--- a/src/legacy/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/save_modal.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/dashboard/top_nav/__snapshots__/save_modal.test.js.snap
@@ -9,6 +9,7 @@ exports[`renders DashboardSaveModal 1`] = `
     <React.Fragment>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         label={
@@ -30,6 +31,7 @@ exports[`renders DashboardSaveModal 1`] = `
       </EuiFormRow>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         helpText={
diff --git a/src/legacy/core_plugins/kibana/public/index.scss b/src/legacy/core_plugins/kibana/public/index.scss
index c8a66f6c3913be..02a0dcd5a7c11a 100644
--- a/src/legacy/core_plugins/kibana/public/index.scss
+++ b/src/legacy/core_plugins/kibana/public/index.scss
@@ -1,5 +1,11 @@
 @import 'src/legacy/ui/public/styles/styling_constants';
 
+// Temporary shim to help with EuiFormRow spacing
+// Will move to EUI
+.euiFormRow + .euiButton {
+  margin-top: $euiSize;
+}
+
 // Public UI styles
 @import 'src/legacy/ui/public/index';
 
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/header/__jest__/__snapshots__/header.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/header/__jest__/__snapshots__/header.test.js.snap
index f44fa3bdba8bda..f803f4a10cbb85 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/header/__jest__/__snapshots__/header.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_index_pattern/components/header/__jest__/__snapshots__/header.test.js.snap
@@ -28,6 +28,7 @@ exports[`Header should mark the input as invalid 1`] = `
       >
         <EuiFormRow
           describedByIds={Array []}
+          display="row"
           error={
             Array [
               "Input is invalid",
@@ -137,6 +138,7 @@ exports[`Header should render normally 1`] = `
       >
         <EuiFormRow
           describedByIds={Array []}
+          display="row"
           error={Array []}
           fullWidth={false}
           hasEmptyLabelSpace={false}
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/time_field/__jest__/__snapshots__/time_field.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/time_field/__jest__/__snapshots__/time_field.test.js.snap
index 2e5d07a45df4f8..0ec74db5a0152f 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/time_field/__jest__/__snapshots__/time_field.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/create_index_pattern_wizard/components/step_time_field/components/time_field/__jest__/__snapshots__/time_field.test.js.snap
@@ -4,6 +4,7 @@ exports[`TimeField should render a loading state 1`] = `
 <EuiForm>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     helpText={
@@ -77,6 +78,7 @@ exports[`TimeField should render a selected time field 1`] = `
 <EuiForm>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     helpText={
@@ -161,6 +163,7 @@ exports[`TimeField should render normally 1`] = `
 <EuiForm>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     helpText={
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/__jest__/__snapshots__/objects_table.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/__jest__/__snapshots__/objects_table.test.js.snap
index 0dc3ef2f44ea8d..4f54203a2c6619 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/__jest__/__snapshots__/objects_table.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/__jest__/__snapshots__/objects_table.test.js.snap
@@ -97,6 +97,7 @@ exports[`ObjectsTable export should allow the user to choose when exporting all
   <EuiModalBody>
     <EuiFormRow
       describedByIds={Array []}
+      display="row"
       fullWidth={false}
       hasEmptyLabelSpace={false}
       label={
@@ -140,6 +141,9 @@ exports[`ObjectsTable export should allow the user to choose when exporting all
         }
       />
     </EuiFormRow>
+    <EuiSpacer
+      size="m"
+    />
     <EuiSwitch
       checked={true}
       label={
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/__jest__/__snapshots__/flyout.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/__jest__/__snapshots__/flyout.test.js.snap
index 7fb517451aa168..c5952ff2c534f3 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/__jest__/__snapshots__/flyout.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/flyout/__jest__/__snapshots__/flyout.test.js.snap
@@ -597,6 +597,7 @@ exports[`Flyout should render import step 1`] = `
     <EuiForm>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         label={
@@ -623,6 +624,7 @@ exports[`Flyout should render import step 1`] = `
       </EuiFormRow>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         labelType="label"
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/table/__jest__/__snapshots__/table.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/table/__jest__/__snapshots__/table.test.js.snap
index acc431d54949ff..a648e93a6af116 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/table/__jest__/__snapshots__/table.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/components/table/__jest__/__snapshots__/table.test.js.snap
@@ -65,6 +65,7 @@ exports[`Table prevents saved objects from being deleted 1`] = `
         >
           <EuiFormRow
             describedByIds={Array []}
+            display="row"
             fullWidth={false}
             hasEmptyLabelSpace={false}
             label={
@@ -91,6 +92,7 @@ exports[`Table prevents saved objects from being deleted 1`] = `
           </EuiFormRow>
           <EuiFormRow
             describedByIds={Array []}
+            display="row"
             fullWidth={false}
             hasEmptyLabelSpace={false}
             labelType="label"
@@ -268,6 +270,7 @@ exports[`Table should render normally 1`] = `
         >
           <EuiFormRow
             describedByIds={Array []}
+            display="row"
             fullWidth={false}
             hasEmptyLabelSpace={false}
             label={
@@ -294,6 +297,7 @@ exports[`Table should render normally 1`] = `
           </EuiFormRow>
           <EuiFormRow
             describedByIds={Array []}
+            display="row"
             fullWidth={false}
             hasEmptyLabelSpace={false}
             labelType="label"
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/objects_table.js b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/objects_table.js
index 263b23859c8a5a..326c577ebe220b 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/objects_table.js
+++ b/src/legacy/core_plugins/kibana/public/management/sections/objects/components/objects_table/objects_table.js
@@ -613,6 +613,7 @@ class ObjectsTableUI extends Component {
                 }}
               />
             </EuiFormRow>
+            <EuiSpacer size="m" />
             <EuiSwitch
               name="includeReferencesDeep"
               label={(
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/__snapshots__/field.test.js.snap b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/__snapshots__/field.test.js.snap
index e7f66a14cc827f..8339ff292b57d8 100644
--- a/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/__snapshots__/field.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/management/sections/settings/components/field/__snapshots__/field.test.js.snap
@@ -38,6 +38,7 @@ exports[`Field for array setting should render as read only if saving is disable
             "array:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -126,6 +127,7 @@ exports[`Field for array setting should render as read only with help text if ov
             "array:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -213,6 +215,7 @@ exports[`Field for array setting should render custom setting icon if it is cust
             "array:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -279,6 +282,7 @@ exports[`Field for array setting should render default value if there is no user
             "array:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -367,6 +371,7 @@ exports[`Field for array setting should render user value if there is user value
             "array:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -452,6 +457,7 @@ exports[`Field for boolean setting should render as read only if saving is disab
             "boolean:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -544,6 +550,7 @@ exports[`Field for boolean setting should render as read only with help text if
             "boolean:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -635,6 +642,7 @@ exports[`Field for boolean setting should render custom setting icon if it is cu
             "boolean:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -705,6 +713,7 @@ exports[`Field for boolean setting should render default value if there is no us
             "boolean:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -797,6 +806,7 @@ exports[`Field for boolean setting should render user value if there is user val
             "boolean:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -886,6 +896,7 @@ exports[`Field for image setting should render as read only if saving is disable
             "image:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -973,6 +984,7 @@ exports[`Field for image setting should render as read only with help text if ov
             "image:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -1057,6 +1069,7 @@ exports[`Field for image setting should render custom setting icon if it is cust
             "image:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -1122,6 +1135,7 @@ exports[`Field for image setting should render default value if there is no user
             "image:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -1209,6 +1223,7 @@ exports[`Field for image setting should render user value if there is user value
             "image:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -1332,6 +1347,7 @@ exports[`Field for json setting should render as read only if saving is disabled
             "json:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -1441,6 +1457,7 @@ exports[`Field for json setting should render as read only with help text if ove
             "json:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -1545,6 +1562,7 @@ exports[`Field for json setting should render custom setting icon if it is custo
             "json:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -1654,6 +1672,7 @@ exports[`Field for json setting should render default value if there is no user
             "json:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -1782,6 +1801,7 @@ exports[`Field for json setting should render user value if there is user value
             "json:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -1884,6 +1904,7 @@ exports[`Field for markdown setting should render as read only if saving is disa
             "markdown:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -1989,6 +2010,7 @@ exports[`Field for markdown setting should render as read only with help text if
             "markdown:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -2093,6 +2115,7 @@ exports[`Field for markdown setting should render custom setting icon if it is c
             "markdown:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -2176,6 +2199,7 @@ exports[`Field for markdown setting should render default value if there is no u
             "markdown:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -2281,6 +2305,7 @@ exports[`Field for markdown setting should render user value if there is user va
             "markdown:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -2383,6 +2408,7 @@ exports[`Field for number setting should render as read only if saving is disabl
             "number:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -2471,6 +2497,7 @@ exports[`Field for number setting should render as read only with help text if o
             "number:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -2558,6 +2585,7 @@ exports[`Field for number setting should render custom setting icon if it is cus
             "number:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -2624,6 +2652,7 @@ exports[`Field for number setting should render default value if there is no use
             "number:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -2712,6 +2741,7 @@ exports[`Field for number setting should render user value if there is user valu
             "number:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -2797,6 +2827,7 @@ exports[`Field for select setting should render as read only if saving is disabl
             "select:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -2902,6 +2933,7 @@ exports[`Field for select setting should render as read only with help text if o
             "select:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -3006,6 +3038,7 @@ exports[`Field for select setting should render custom setting icon if it is cus
             "select:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -3089,6 +3122,7 @@ exports[`Field for select setting should render default value if there is no use
             "select:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -3194,6 +3228,7 @@ exports[`Field for select setting should render user value if there is user valu
             "select:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -3296,6 +3331,7 @@ exports[`Field for string setting should render as read only if saving is disabl
             "string:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -3384,6 +3420,7 @@ exports[`Field for string setting should render as read only with help text if o
             "string:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -3471,6 +3508,7 @@ exports[`Field for string setting should render custom setting icon if it is cus
             "string:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -3537,6 +3575,7 @@ exports[`Field for string setting should render default value if there is no use
             "string:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -3625,6 +3664,7 @@ exports[`Field for string setting should render user value if there is user valu
             "string:test:setting-aria",
           ]
         }
+        display="row"
         error={null}
         fullWidth={false}
         hasEmptyLabelSpace={false}
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/calculation.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/calculation.js
index bf9b12358094d9..2eefeb35c26ff8 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/calculation.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/calculation.js
@@ -38,6 +38,7 @@ import {
   EuiTextArea,
   EuiFormRow,
   EuiCode,
+  EuiSpacer,
 } from '@elastic/eui';
 
 export class CalculationAgg extends Component {
@@ -80,6 +81,7 @@ export class CalculationAgg extends Component {
                 defaultMessage="Aggregation"
               />
             </EuiFormLabel>
+            <EuiSpacer size="xs" />
             <AggSelect
               id={htmlId('aggregation')}
               panelType={this.props.panel.type}
@@ -91,8 +93,12 @@ export class CalculationAgg extends Component {
 
           <EuiFlexItem>
             <EuiFormLabel htmlFor={htmlId('variables')}>
-              <FormattedMessage id="visTypeTimeseries.calculation.variablesLabel" defaultMessage="Variables" />
+              <FormattedMessage
+                id="visTypeTimeseries.calculation.variablesLabel"
+                defaultMessage="Variables"
+              />
             </EuiFormLabel>
+            <EuiSpacer size="xs" />
             <CalculationVars
               id={htmlId('variables')}
               metrics={siblings}
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/cumulative_sum.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/cumulative_sum.js
index 83023ba27d5681..11b3e303e7e00a 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/cumulative_sum.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/cumulative_sum.js
@@ -25,7 +25,14 @@ import { MetricSelect } from './metric_select';
 import { createChangeHandler } from '../lib/create_change_handler';
 import { createSelectHandler } from '../lib/create_select_handler';
 import { FormattedMessage } from '@kbn/i18n/react';
-import { htmlIdGenerator, EuiFlexGroup, EuiFlexItem, EuiFormLabel, EuiFormRow } from '@elastic/eui';
+import {
+  htmlIdGenerator,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormLabel,
+  EuiFormRow,
+  EuiSpacer,
+} from '@elastic/eui';
 
 export function CumulativeSumAgg(props) {
   const { model, siblings } = props;
@@ -49,6 +56,7 @@ export function CumulativeSumAgg(props) {
               defaultMessage="Aggregation"
             />
           </EuiFormLabel>
+          <EuiSpacer size="xs" />
           <AggSelect
             id={htmlId('aggregation')}
             panelType={props.panel.type}
@@ -60,7 +68,12 @@ export function CumulativeSumAgg(props) {
         <EuiFlexItem>
           <EuiFormRow
             id={htmlId('metric')}
-            label={<FormattedMessage id="visTypeTimeseries.cumulativeSum.metricLabel" defaultMessage="Metric" />}
+            label={
+              <FormattedMessage
+                id="visTypeTimeseries.cumulativeSum.metricLabel"
+                defaultMessage="Metric"
+              />
+            }
           >
             <MetricSelect
               onChange={handleSelectChange('field')}
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/derivative.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/derivative.js
index 53528c61954ce1..f9800bac21886a 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/derivative.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/derivative.js
@@ -32,6 +32,7 @@ import {
   EuiFormLabel,
   EuiFieldText,
   EuiFormRow,
+  EuiSpacer,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -59,8 +60,12 @@ export const DerivativeAgg = props => {
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
           <EuiFormLabel htmlFor={htmlId('aggregation')}>
-            <FormattedMessage id="visTypeTimeseries.derivative.aggregationLabel" defaultMessage="Aggregation" />
+            <FormattedMessage
+              id="visTypeTimeseries.derivative.aggregationLabel"
+              defaultMessage="Aggregation"
+            />
           </EuiFormLabel>
+          <EuiSpacer size="xs" />
           <AggSelect
             id={htmlId('aggregation')}
             panelType={props.panel.type}
@@ -73,7 +78,12 @@ export const DerivativeAgg = props => {
         <EuiFlexItem>
           <EuiFormRow
             id={htmlId('metric')}
-            label={<FormattedMessage id="visTypeTimeseries.derivative.metricLabel" defaultMessage="Metric" />}
+            label={
+              <FormattedMessage
+                id="visTypeTimeseries.derivative.metricLabel"
+                defaultMessage="Metric"
+              />
+            }
             fullWidth
           >
             <MetricSelect
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/filter_ratio.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/filter_ratio.js
index 364536cfba6aca..5525b31cd2cd57 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/filter_ratio.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/filter_ratio.js
@@ -70,8 +70,12 @@ export const FilterRatioAgg = props => {
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
           <EuiFormLabel htmlFor={htmlId('aggregation')}>
-            <FormattedMessage id="visTypeTimeseries.filterRatio.aggregationLabel" defaultMessage="Aggregation" />
+            <FormattedMessage
+              id="visTypeTimeseries.filterRatio.aggregationLabel"
+              defaultMessage="Aggregation"
+            />
           </EuiFormLabel>
+          <EuiSpacer size="xs" />
           <AggSelect
             id={htmlId('aggregation')}
             panelType={props.panel.type}
@@ -85,7 +89,10 @@ export const FilterRatioAgg = props => {
           <EuiFormRow
             id={htmlId('numerator')}
             label={
-              <FormattedMessage id="visTypeTimeseries.filterRatio.numeratorLabel" defaultMessage="Numerator" />
+              <FormattedMessage
+                id="visTypeTimeseries.filterRatio.numeratorLabel"
+                defaultMessage="Numerator"
+              />
             }
           >
             <EuiFieldText onChange={handleTextChange('numerator')} value={model.numerator} />
@@ -117,6 +124,7 @@ export const FilterRatioAgg = props => {
               defaultMessage="Metric Aggregation"
             />
           </EuiFormLabel>
+          <EuiSpacer size="xs" />
           <AggSelect
             id={htmlId('metric')}
             siblings={props.siblings}
@@ -130,7 +138,12 @@ export const FilterRatioAgg = props => {
           <EuiFlexItem>
             <EuiFormRow
               id={htmlId('aggField')}
-              label={<FormattedMessage id="visTypeTimeseries.filterRatio.fieldLabel" defaultMessage="Field" />}
+              label={
+                <FormattedMessage
+                  id="visTypeTimeseries.filterRatio.fieldLabel"
+                  defaultMessage="Field"
+                />
+              }
             >
               <FieldSelect
                 fields={fields}
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/math.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/math.js
index 874e02a14bcfbd..a73460798ebd81 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/math.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/math.js
@@ -37,6 +37,7 @@ import {
   EuiLink,
   EuiFormRow,
   EuiCode,
+  EuiSpacer,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -74,8 +75,12 @@ export class MathAgg extends Component {
         <EuiFlexGroup direction="column" gutterSize="l">
           <EuiFlexItem>
             <EuiFormLabel htmlFor={htmlId('aggregation')}>
-              <FormattedMessage id="visTypeTimeseries.math.aggregationLabel" defaultMessage="Aggregation" />
+              <FormattedMessage
+                id="visTypeTimeseries.math.aggregationLabel"
+                defaultMessage="Aggregation"
+              />
             </EuiFormLabel>
+            <EuiSpacer size="xs" />
             <AggSelect
               id={htmlId('aggregation')}
               siblings={this.props.siblings}
@@ -86,8 +91,12 @@ export class MathAgg extends Component {
 
           <EuiFlexItem>
             <EuiFormLabel htmlFor={htmlId('variables')}>
-              <FormattedMessage id="visTypeTimeseries.math.variablesLabel" defaultMessage="Variables" />
+              <FormattedMessage
+                id="visTypeTimeseries.math.variablesLabel"
+                defaultMessage="Variables"
+              />
             </EuiFormLabel>
+            <EuiSpacer size="xs" />
             <CalculationVars
               id={htmlId('variables')}
               metrics={siblings}
@@ -102,7 +111,10 @@ export class MathAgg extends Component {
             <EuiFormRow
               id="mathExpressionInput"
               label={
-                <FormattedMessage id="visTypeTimeseries.math.expressionLabel" defaultMessage="Expression" />
+                <FormattedMessage
+                  id="visTypeTimeseries.math.expressionLabel"
+                  defaultMessage="Expression"
+                />
               }
               fullWidth
               helpText={
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/moving_average.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/moving_average.js
index 4ed7335699a3b0..3b9d0ab2826826 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/moving_average.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/moving_average.js
@@ -69,9 +69,12 @@ export const MovingAverageAgg = props => {
       value: MODEL_TYPES.WEIGHTED_LINEAR,
     },
     {
-      label: i18n.translate('visTypeTimeseries.movingAverage.modelOptions.exponentiallyWeightedLabel', {
-        defaultMessage: 'Exponentially Weighted',
-      }),
+      label: i18n.translate(
+        'visTypeTimeseries.movingAverage.modelOptions.exponentiallyWeightedLabel',
+        {
+          defaultMessage: 'Exponentially Weighted',
+        }
+      ),
       value: MODEL_TYPES.WEIGHTED_EXPONENTIAL,
     },
     {
@@ -129,6 +132,7 @@ export const MovingAverageAgg = props => {
               defaultMessage: 'Aggregation',
             })}
           </EuiFormLabel>
+          <EuiSpacer size="xs" />
           <AggSelect
             id={htmlId('aggregation')}
             panelType={props.panel.type}
@@ -166,9 +170,12 @@ export const MovingAverageAgg = props => {
           >
             <EuiComboBox
               isClearable={false}
-              placeholder={i18n.translate('visTypeTimeseries.movingAverage.model.selectPlaceholder', {
-                defaultMessage: 'Select',
-              })}
+              placeholder={i18n.translate(
+                'visTypeTimeseries.movingAverage.model.selectPlaceholder',
+                {
+                  defaultMessage: 'Select',
+                }
+              )}
               options={modelOptions}
               selectedOptions={selectedModelOption ? [selectedModelOption] : []}
               onChange={handleSelectChange('model_type')}
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/percentile.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/percentile.js
index e66c26c28ca29c..3aad5ca3a07f91 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/percentile.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/percentile.js
@@ -78,6 +78,7 @@ export class PercentileAgg extends Component {
                 defaultMessage="Aggregation"
               />
             </EuiFormLabel>
+            <EuiSpacer size="xs" />
             <AggSelect
               id={htmlId('aggregation')}
               panelType={this.props.panel.type}
@@ -89,7 +90,12 @@ export class PercentileAgg extends Component {
           <EuiFlexItem>
             <EuiFormRow
               id={htmlId('field')}
-              label={<FormattedMessage id="visTypeTimeseries.percentile.fieldLabel" defaultMessage="Field" />}
+              label={
+                <FormattedMessage
+                  id="visTypeTimeseries.percentile.fieldLabel"
+                  defaultMessage="Field"
+                />
+              }
             >
               <FieldSelect
                 fields={fields}
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/percentile_rank/percentile_rank.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/percentile_rank/percentile_rank.js
index bc5facaeded2c4..e190d91a2497a4 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/percentile_rank/percentile_rank.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/percentile_rank/percentile_rank.js
@@ -77,6 +77,7 @@ export const PercentileRankAgg = props => {
               defaultMessage="Aggregation"
             />
           </EuiFormLabel>
+          <EuiSpacer size="xs" />
           <AggSelect
             id={htmlId('aggregation')}
             panelType={props.panel.type}
@@ -88,7 +89,12 @@ export const PercentileRankAgg = props => {
         <EuiFlexItem>
           <EuiFormRow
             id={htmlId('field')}
-            label={<FormattedMessage id="visTypeTimeseries.percentileRank.fieldLabel" defaultMessage="Field" />}
+            label={
+              <FormattedMessage
+                id="visTypeTimeseries.percentileRank.fieldLabel"
+                defaultMessage="Field"
+              />
+            }
           >
             <FieldSelect
               fields={fields}
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/positive_only.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/positive_only.js
index 2343741dac9f33..2ddbedc92e536c 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/positive_only.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/positive_only.js
@@ -24,7 +24,14 @@ import { MetricSelect } from './metric_select';
 import { AggRow } from './agg_row';
 import { createChangeHandler } from '../lib/create_change_handler';
 import { createSelectHandler } from '../lib/create_select_handler';
-import { htmlIdGenerator, EuiFlexGroup, EuiFlexItem, EuiFormLabel, EuiFormRow } from '@elastic/eui';
+import {
+  htmlIdGenerator,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormLabel,
+  EuiFormRow,
+  EuiSpacer,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export const PositiveOnlyAgg = props => {
@@ -54,6 +61,7 @@ export const PositiveOnlyAgg = props => {
               defaultMessage="Aggregation"
             />
           </EuiFormLabel>
+          <EuiSpacer size="xs" />
           <AggSelect
             id={htmlId('aggregation')}
             panelType={props.panel.type}
@@ -65,7 +73,12 @@ export const PositiveOnlyAgg = props => {
         <EuiFlexItem>
           <EuiFormRow
             id={htmlId('metric')}
-            label={<FormattedMessage id="visTypeTimeseries.positiveOnly.metricLabel" defaultMessage="Metric" />}
+            label={
+              <FormattedMessage
+                id="visTypeTimeseries.positiveOnly.metricLabel"
+                defaultMessage="Metric"
+              />
+            }
           >
             <MetricSelect
               onChange={handleSelectChange('field')}
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/serial_diff.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/serial_diff.js
index 93d7479c908498..8caa12d91a45bf 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/serial_diff.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/serial_diff.js
@@ -25,7 +25,14 @@ import { AggRow } from './agg_row';
 import { createChangeHandler } from '../lib/create_change_handler';
 import { createSelectHandler } from '../lib/create_select_handler';
 import { createNumberHandler } from '../lib/create_number_handler';
-import { htmlIdGenerator, EuiFlexGroup, EuiFlexItem, EuiFormLabel, EuiFormRow } from '@elastic/eui';
+import {
+  htmlIdGenerator,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormLabel,
+  EuiFormRow,
+  EuiSpacer,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
 export const SerialDiffAgg = props => {
@@ -51,8 +58,12 @@ export const SerialDiffAgg = props => {
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
           <EuiFormLabel htmlFor={htmlId('aggregation')}>
-            <FormattedMessage id="visTypeTimeseries.serialDiff.aggregationLabel" defaultMessage="Aggregation" />
+            <FormattedMessage
+              id="visTypeTimeseries.serialDiff.aggregationLabel"
+              defaultMessage="Aggregation"
+            />
           </EuiFormLabel>
+          <EuiSpacer size="xs" />
           <AggSelect
             id={htmlId('aggregation')}
             panelType={props.panel.type}
@@ -64,7 +75,12 @@ export const SerialDiffAgg = props => {
         <EuiFlexItem>
           <EuiFormRow
             id={htmlId('metric')}
-            label={<FormattedMessage id="visTypeTimeseries.serialDiff.metricLabel" defaultMessage="Metric" />}
+            label={
+              <FormattedMessage
+                id="visTypeTimeseries.serialDiff.metricLabel"
+                defaultMessage="Metric"
+              />
+            }
           >
             <MetricSelect
               onChange={handleSelectChange('field')}
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/series_agg.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/series_agg.js
index d09014c7db38c2..9e045ca1cc49cd 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/series_agg.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/series_agg.js
@@ -31,6 +31,7 @@ import {
   EuiComboBox,
   EuiTitle,
   EuiFormRow,
+  EuiSpacer,
 } from '@elastic/eui';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 
@@ -145,8 +146,12 @@ function SeriesAggUi(props) {
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
           <EuiFormLabel htmlFor={htmlId('aggregation')}>
-            <FormattedMessage id="visTypeTimeseries.seriesAgg.aggregationLabel" defaultMessage="Aggregation" />
+            <FormattedMessage
+              id="visTypeTimeseries.seriesAgg.aggregationLabel"
+              defaultMessage="Aggregation"
+            />
           </EuiFormLabel>
+          <EuiSpacer size="xs" />
           <AggSelect
             id={htmlId('aggregation')}
             panelType={panel.type}
@@ -158,7 +163,12 @@ function SeriesAggUi(props) {
         <EuiFlexItem>
           <EuiFormRow
             id={htmlId('function')}
-            label={<FormattedMessage id="visTypeTimeseries.seriesAgg.functionLabel" defaultMessage="Function" />}
+            label={
+              <FormattedMessage
+                id="visTypeTimeseries.seriesAgg.functionLabel"
+                defaultMessage="Function"
+              />
+            }
           >
             <EuiComboBox
               options={functionOptions}
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/static.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/static.js
index de83a118a5fdd6..1cb829ec8e1f55 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/static.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/static.js
@@ -31,6 +31,7 @@ import {
   EuiFormLabel,
   EuiFieldNumber,
   EuiFormRow,
+  EuiSpacer,
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 
@@ -61,8 +62,12 @@ export const Static = props => {
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
           <EuiFormLabel htmlFor={htmlId('aggregation')}>
-            <FormattedMessage id="visTypeTimeseries.static.aggregationLabel" defaultMessage="Aggregation" />
+            <FormattedMessage
+              id="visTypeTimeseries.static.aggregationLabel"
+              defaultMessage="Aggregation"
+            />
           </EuiFormLabel>
+          <EuiSpacer size="xs" />
           <AggSelect
             id={htmlId('aggregation')}
             panelType={props.panel.type}
@@ -75,7 +80,10 @@ export const Static = props => {
           <EuiFormRow
             id={htmlId('staticValue')}
             label={
-              <FormattedMessage id="visTypeTimeseries.static.staticValuesLabel" defaultMessage="Static Value" />
+              <FormattedMessage
+                id="visTypeTimeseries.static.staticValuesLabel"
+                defaultMessage="Static Value"
+              />
             }
           >
             <EuiFieldNumber
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/std_agg.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/std_agg.js
index 6f637f261d0c3d..8982983e61aea9 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/std_agg.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/std_agg.js
@@ -24,7 +24,14 @@ import { FieldSelect } from './field_select';
 import { AggRow } from './agg_row';
 import { createChangeHandler } from '../lib/create_change_handler';
 import { createSelectHandler } from '../lib/create_select_handler';
-import { htmlIdGenerator, EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiFormLabel } from '@elastic/eui';
+import {
+  htmlIdGenerator,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiFormRow,
+  EuiFormLabel,
+  EuiSpacer,
+} from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { ES_TYPES } from '../../../common/es_types';
 import { METRIC_TYPES } from '../../../common/metric_types';
@@ -51,8 +58,12 @@ export function StandardAgg(props) {
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
           <EuiFormLabel htmlFor={htmlId('aggregation')}>
-            <FormattedMessage id="visTypeTimeseries.stdAgg.aggregationLabel" defaultMessage="Aggregation" />
+            <FormattedMessage
+              id="visTypeTimeseries.stdAgg.aggregationLabel"
+              defaultMessage="Aggregation"
+            />
           </EuiFormLabel>
+          <EuiSpacer size="xs" />
           <AggSelect
             id={htmlId('aggregation')}
             panelType={props.panel.type}
@@ -68,7 +79,9 @@ export function StandardAgg(props) {
           <EuiFlexItem>
             <EuiFormRow
               id={htmlId('field')}
-              label={<FormattedMessage id="visTypeTimeseries.stdAgg.fieldLabel" defaultMessage="Field" />}
+              label={
+                <FormattedMessage id="visTypeTimeseries.stdAgg.fieldLabel" defaultMessage="Field" />
+              }
               fullWidth
             >
               <FieldSelect
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/std_deviation.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/std_deviation.js
index 70d3477d9076d0..266eaea750312d 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/std_deviation.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/std_deviation.js
@@ -33,6 +33,7 @@ import {
   EuiComboBox,
   EuiFieldText,
   EuiFormRow,
+  EuiSpacer,
 } from '@elastic/eui';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 import { ES_TYPES } from '../../../common/es_types';
@@ -106,6 +107,7 @@ const StandardDeviationAggUi = props => {
               defaultMessage="Aggregation"
             />
           </EuiFormLabel>
+          <EuiSpacer size="xs" />
           <AggSelect
             id={htmlId('aggregation')}
             panelType={props.panel.type}
@@ -117,7 +119,12 @@ const StandardDeviationAggUi = props => {
         <EuiFlexItem>
           <EuiFormRow
             id={htmlId('field')}
-            label={<FormattedMessage id="visTypeTimeseries.stdDeviation.fieldLabel" defaultMessage="Field" />}
+            label={
+              <FormattedMessage
+                id="visTypeTimeseries.stdDeviation.fieldLabel"
+                defaultMessage="Field"
+              />
+            }
           >
             <FieldSelect
               fields={fields}
@@ -132,7 +139,12 @@ const StandardDeviationAggUi = props => {
         <EuiFlexItem grow={false}>
           <EuiFormRow
             id={htmlId('sigma')}
-            label={<FormattedMessage id="visTypeTimeseries.stdDeviation.sigmaLabel" defaultMessage="Sigma" />}
+            label={
+              <FormattedMessage
+                id="visTypeTimeseries.stdDeviation.sigmaLabel"
+                defaultMessage="Sigma"
+              />
+            }
           >
             <EuiFieldText value={model.sigma} onChange={handleTextChange('sigma')} />
           </EuiFormRow>
@@ -140,7 +152,12 @@ const StandardDeviationAggUi = props => {
         <EuiFlexItem>
           <EuiFormRow
             id={htmlId('mode')}
-            label={<FormattedMessage id="visTypeTimeseries.stdDeviation.modeLabel" defaultMessage="Mode" />}
+            label={
+              <FormattedMessage
+                id="visTypeTimeseries.stdDeviation.modeLabel"
+                defaultMessage="Mode"
+              />
+            }
           >
             <EuiComboBox
               options={modeOptions}
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/std_sibling.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/std_sibling.js
index 85ff1363539299..50b8840ab71019 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/std_sibling.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/std_sibling.js
@@ -33,6 +33,7 @@ import {
   EuiComboBox,
   EuiFormLabel,
   EuiFormRow,
+  EuiSpacer,
 } from '@elastic/eui';
 import { injectI18n, FormattedMessage } from '@kbn/i18n/react';
 
@@ -52,7 +53,9 @@ const StandardSiblingAggUi = props => {
       <EuiFlexItem grow={false}>
         <EuiFormRow
           id={htmlId('sigma')}
-          label={<FormattedMessage id="visTypeTimeseries.stdSibling.sigmaLabel" defaultMessage="Sigma" />}
+          label={
+            <FormattedMessage id="visTypeTimeseries.stdSibling.sigmaLabel" defaultMessage="Sigma" />
+          }
         >
           <EuiFieldText value={model.sigma} onChange={handleTextChange('sigma')} />
         </EuiFormRow>
@@ -97,7 +100,9 @@ const StandardSiblingAggUi = props => {
       <EuiFlexItem>
         <EuiFormRow
           id={htmlId('mode')}
-          label={<FormattedMessage id="visTypeTimeseries.stdSibling.modeLabel" defaultMessage="Mode" />}
+          label={
+            <FormattedMessage id="visTypeTimeseries.stdSibling.modeLabel" defaultMessage="Mode" />
+          }
         >
           <EuiComboBox
             options={modeOptions}
@@ -122,8 +127,12 @@ const StandardSiblingAggUi = props => {
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
           <EuiFormLabel htmlFor={htmlId('aggregation')}>
-            <FormattedMessage id="visTypeTimeseries.stdSibling.aggregationLabel" defaultMessage="Aggregation" />
+            <FormattedMessage
+              id="visTypeTimeseries.stdSibling.aggregationLabel"
+              defaultMessage="Aggregation"
+            />
           </EuiFormLabel>
+          <EuiSpacer size="xs" />
           <AggSelect
             id={htmlId('aggregation')}
             panelType={props.panel.type}
@@ -136,7 +145,12 @@ const StandardSiblingAggUi = props => {
         <EuiFlexItem>
           <EuiFormRow
             id={htmlId('metric')}
-            label={<FormattedMessage id="visTypeTimeseries.stdSibling.metricLabel" defaultMessage="Metric" />}
+            label={
+              <FormattedMessage
+                id="visTypeTimeseries.stdSibling.metricLabel"
+                defaultMessage="Metric"
+              />
+            }
           >
             <MetricSelect
               onChange={handleSelectChange('field')}
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/top_hit.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/top_hit.js
index 7ec1054927a63e..4622d2c9386c60 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/top_hit.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/aggs/top_hit.js
@@ -153,8 +153,12 @@ const TopHitAggUi = props => {
       <EuiFlexGroup gutterSize="s">
         <EuiFlexItem>
           <EuiFormLabel htmlFor={htmlId('aggregation')}>
-            <FormattedMessage id="visTypeTimeseries.topHit.aggregationLabel" defaultMessage="Aggregation" />
+            <FormattedMessage
+              id="visTypeTimeseries.topHit.aggregationLabel"
+              defaultMessage="Aggregation"
+            />
           </EuiFormLabel>
+          <EuiSpacer size="xs" />
           <AggSelect
             id={htmlId('aggregation')}
             panelType={props.panel.type}
@@ -166,7 +170,9 @@ const TopHitAggUi = props => {
         <EuiFlexItem>
           <EuiFormRow
             id={htmlId('field')}
-            label={<FormattedMessage id="visTypeTimeseries.topHit.fieldLabel" defaultMessage="Field" />}
+            label={
+              <FormattedMessage id="visTypeTimeseries.topHit.fieldLabel" defaultMessage="Field" />
+            }
           >
             <FieldSelect
               fields={fields}
@@ -186,7 +192,9 @@ const TopHitAggUi = props => {
         <EuiFlexItem grow={false}>
           <EuiFormRow
             id={htmlId('size')}
-            label={<FormattedMessage id="visTypeTimeseries.topHit.sizeLabel" defaultMessage="Size" />}
+            label={
+              <FormattedMessage id="visTypeTimeseries.topHit.sizeLabel" defaultMessage="Size" />
+            }
           >
             {/*
               EUITODO: The following input couldn't be converted to EUI because of type mis-match.
@@ -211,9 +219,12 @@ const TopHitAggUi = props => {
           >
             <EuiComboBox
               isClearable={false}
-              placeholder={i18n.translate('visTypeTimeseries.topHit.aggregateWith.selectPlaceholder', {
-                defaultMessage: 'Select...',
-              })}
+              placeholder={i18n.translate(
+                'visTypeTimeseries.topHit.aggregateWith.selectPlaceholder',
+                {
+                  defaultMessage: 'Select...',
+                }
+              )}
               options={aggWithOptions}
               selectedOptions={selectedAggWithOption ? [selectedAggWithOption] : []}
               onChange={handleSelectChange('agg_with')}
@@ -224,7 +235,12 @@ const TopHitAggUi = props => {
         <EuiFlexItem>
           <EuiFormRow
             id={htmlId('order_by')}
-            label={<FormattedMessage id="visTypeTimeseries.topHit.orderByLabel" defaultMessage="Order by" />}
+            label={
+              <FormattedMessage
+                id="visTypeTimeseries.topHit.orderByLabel"
+                defaultMessage="Order by"
+              />
+            }
           >
             <FieldSelect
               restrict={ORDER_DATE_RESTRICT_FIELDS}
@@ -238,7 +254,9 @@ const TopHitAggUi = props => {
         <EuiFlexItem>
           <EuiFormRow
             id={htmlId('order')}
-            label={<FormattedMessage id="visTypeTimeseries.topHit.orderLabel" defaultMessage="Order" />}
+            label={
+              <FormattedMessage id="visTypeTimeseries.topHit.orderLabel" defaultMessage="Order" />
+            }
           >
             <EuiComboBox
               isClearable={false}
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/annotations_editor.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/annotations_editor.js
index 34b6c4966c4dbb..b639d577ce7b91 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/annotations_editor.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/annotations_editor.js
@@ -186,7 +186,7 @@ export class AnnotationsEditor extends Component {
                     defaultMessage="Ignore global filters?"
                   />
                 </EuiFormLabel>
-                <EuiSpacer size="s" />
+                <EuiSpacer size="m" />
                 <YesNo
                   value={model.ignore_global_filters}
                   name="ignore_global_filters"
@@ -200,7 +200,7 @@ export class AnnotationsEditor extends Component {
                     defaultMessage="Ignore panel filters?"
                   />
                 </EuiFormLabel>
-                <EuiSpacer size="s" />
+                <EuiSpacer size="xs" />
                 <YesNo
                   value={model.ignore_panel_filters}
                   name="ignore_panel_filters"
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/gauge.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/gauge.js
index 2b00ef88925631..6da10f6a808165 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/gauge.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/gauge.js
@@ -122,7 +122,10 @@ class GaugePanelConfigUi extends Component {
           <EuiPanel>
             <EuiTitle size="s">
               <span>
-                <FormattedMessage id="visTypeTimeseries.gauge.optionsTab.dataLabel" defaultMessage="Data" />
+                <FormattedMessage
+                  id="visTypeTimeseries.gauge.optionsTab.dataLabel"
+                  defaultMessage="Data"
+                />
               </span>
             </EuiTitle>
             <EuiSpacer size="m" />
@@ -164,7 +167,7 @@ class GaugePanelConfigUi extends Component {
                     defaultMessage="Ignore global filter?"
                   />
                 </EuiFormLabel>
-                <EuiSpacer size="s" />
+                <EuiSpacer size="m" />
                 <YesNo
                   value={model.ignore_global_filter}
                   name="ignore_global_filter"
@@ -179,7 +182,10 @@ class GaugePanelConfigUi extends Component {
           <EuiPanel>
             <EuiTitle size="s">
               <span>
-                <FormattedMessage id="visTypeTimeseries.gauge.optionsTab.styleLabel" defaultMessage="Style" />
+                <FormattedMessage
+                  id="visTypeTimeseries.gauge.optionsTab.styleLabel"
+                  defaultMessage="Style"
+                />
               </span>
             </EuiTitle>
             <EuiSpacer size="m" />
@@ -265,7 +271,7 @@ class GaugePanelConfigUi extends Component {
 
             <EuiFlexGroup responsive={false} wrap={true} alignItems="center">
               <EuiFlexItem grow={false}>
-                <EuiFormLabel style={{ marginBottom: 0 }}>
+                <EuiFormLabel>
                   <FormattedMessage
                     id="visTypeTimeseries.gauge.optionsTab.backgroundColorLabel"
                     defaultMessage="Background color:"
@@ -280,7 +286,7 @@ class GaugePanelConfigUi extends Component {
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiFormLabel style={{ marginBottom: 0 }}>
+                <EuiFormLabel>
                   <FormattedMessage
                     id="visTypeTimeseries.gauge.optionsTab.innerColorLabel"
                     defaultMessage="Inner color:"
@@ -324,7 +330,10 @@ class GaugePanelConfigUi extends Component {
       <div>
         <EuiTabs size="s">
           <EuiTab isSelected={selectedTab === 'data'} onClick={() => this.switchTab('data')}>
-            <FormattedMessage id="visTypeTimeseries.gauge.dataTab.dataButtonLabel" defaultMessage="Data" />
+            <FormattedMessage
+              id="visTypeTimeseries.gauge.dataTab.dataButtonLabel"
+              defaultMessage="Data"
+            />
           </EuiTab>
           <EuiTab isSelected={selectedTab === 'options'} onClick={() => this.switchTab('options')}>
             <FormattedMessage
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/markdown.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/markdown.js
index 56168f334bb256..ed17fceeda5401 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/markdown.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/markdown.js
@@ -131,7 +131,10 @@ class MarkdownPanelConfigUi extends Component {
           <EuiPanel>
             <EuiTitle size="s">
               <span>
-                <FormattedMessage id="visTypeTimeseries.markdown.optionsTab.dataLabel" defaultMessage="Data" />
+                <FormattedMessage
+                  id="visTypeTimeseries.markdown.optionsTab.dataLabel"
+                  defaultMessage="Data"
+                />
               </span>
             </EuiTitle>
             <EuiSpacer size="m" />
@@ -175,7 +178,7 @@ class MarkdownPanelConfigUi extends Component {
                     defaultMessage="Ignore global filter?"
                   />
                 </EuiFormLabel>
-                <EuiSpacer size="s" />
+                <EuiSpacer size="m" />
                 <YesNo
                   value={model.ignore_global_filter}
                   name="ignore_global_filter"
@@ -190,14 +193,17 @@ class MarkdownPanelConfigUi extends Component {
           <EuiPanel>
             <EuiTitle size="s">
               <span>
-                <FormattedMessage id="visTypeTimeseries.markdown.optionsTab.styleLabel" defaultMessage="Style" />
+                <FormattedMessage
+                  id="visTypeTimeseries.markdown.optionsTab.styleLabel"
+                  defaultMessage="Style"
+                />
               </span>
             </EuiTitle>
             <EuiSpacer size="m" />
 
             <EuiFlexGroup responsive={false} wrap={true} alignItems="center">
               <EuiFlexItem grow={false}>
-                <EuiFormLabel style={{ marginBottom: 0 }}>
+                <EuiFormLabel>
                   <FormattedMessage
                     id="visTypeTimeseries.markdown.optionsTab.backgroundColorLabel"
                     defaultMessage="Background color:"
@@ -212,7 +218,7 @@ class MarkdownPanelConfigUi extends Component {
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiFormLabel style={{ marginBottom: 0 }}>
+                <EuiFormLabel>
                   <FormattedMessage
                     id="visTypeTimeseries.markdown.optionsTab.showScrollbarsLabel"
                     defaultMessage="Show scrollbars?"
@@ -228,7 +234,7 @@ class MarkdownPanelConfigUi extends Component {
               </EuiFlexItem>
 
               <EuiFlexItem grow={false}>
-                <EuiFormLabel style={{ marginBottom: 0 }}>
+                <EuiFormLabel>
                   <FormattedMessage
                     id="visTypeTimeseries.markdown.optionsTab.openLinksInNewTab"
                     defaultMessage="Open links in new tab?"
@@ -243,7 +249,7 @@ class MarkdownPanelConfigUi extends Component {
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiFormLabel style={{ marginBottom: 0 }} htmlFor={htmlId('valign')}>
+                <EuiFormLabel htmlFor={htmlId('valign')}>
                   <FormattedMessage
                     id="visTypeTimeseries.markdown.optionsTab.verticalAlignmentLabel"
                     defaultMessage="Vertical alignment:"
@@ -302,7 +308,10 @@ class MarkdownPanelConfigUi extends Component {
             isSelected={selectedTab === 'data'}
             onClick={() => this.switchTab('data')}
           >
-            <FormattedMessage id="visTypeTimeseries.markdown.dataTab.dataButtonLabel" defaultMessage="Data" />
+            <FormattedMessage
+              id="visTypeTimeseries.markdown.dataTab.dataButtonLabel"
+              defaultMessage="Data"
+            />
           </EuiTab>
           <EuiTab
             isSelected={selectedTab === 'options'}
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/metric.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/metric.js
index a9d289959c4bef..705adc07e7314c 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/metric.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/metric.js
@@ -129,7 +129,7 @@ export class MetricPanelConfig extends Component {
                     defaultMessage="Ignore global filter?"
                   />
                 </EuiFormLabel>
-                <EuiSpacer size="s" />
+                <EuiSpacer size="m" />
                 <YesNo
                   value={model.ignore_global_filter}
                   name="ignore_global_filter"
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/table.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/table.js
index 88c1a90aa917ac..029962f189afff 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/table.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/table.js
@@ -249,7 +249,7 @@ export class TablePanelConfig extends Component {
                     defaultMessage="Ignore global filter?"
                   />
                 </EuiFormLabel>
-                <EuiSpacer size="s" />
+                <EuiSpacer size="m" />
                 <YesNo
                   id={htmlId('globalFilterOption')}
                   value={model.ignore_global_filter}
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/timeseries.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/timeseries.js
index 5198cc0db962c0..b534a261984ecc 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/timeseries.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/timeseries.js
@@ -159,7 +159,10 @@ class TimeseriesPanelConfigUi extends Component {
           <EuiPanel>
             <EuiTitle size="s">
               <span>
-                <FormattedMessage id="visTypeTimeseries.timeseries.optionsTab.dataLabel" defaultMessage="Data" />
+                <FormattedMessage
+                  id="visTypeTimeseries.timeseries.optionsTab.dataLabel"
+                  defaultMessage="Data"
+                />
               </span>
             </EuiTitle>
             <EuiSpacer size="m" />
@@ -201,7 +204,7 @@ class TimeseriesPanelConfigUi extends Component {
                     defaultMessage="Ignore global filter?"
                   />
                 </EuiFormLabel>
-                <EuiSpacer size="s" />
+                <EuiSpacer size="m" />
                 <YesNo
                   value={model.ignore_global_filter}
                   name="ignore_global_filter"
@@ -295,7 +298,7 @@ class TimeseriesPanelConfigUi extends Component {
 
             <EuiFlexGroup responsive={false} wrap={true} alignItems="center">
               <EuiFlexItem grow={false}>
-                <EuiFormLabel style={{ marginBottom: 0 }}>
+                <EuiFormLabel>
                   <FormattedMessage
                     id="visTypeTimeseries.timeseries.optionsTab.backgroundColorLabel"
                     defaultMessage="Background color:"
@@ -310,7 +313,7 @@ class TimeseriesPanelConfigUi extends Component {
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiFormLabel style={{ marginBottom: 0 }}>
+                <EuiFormLabel>
                   <FormattedMessage
                     id="visTypeTimeseries.timeseries.optionsTab.showLegendLabel"
                     defaultMessage="Show legend?"
@@ -325,7 +328,7 @@ class TimeseriesPanelConfigUi extends Component {
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiFormLabel style={{ marginBottom: 0 }} htmlFor={htmlId('legendPos')}>
+                <EuiFormLabel htmlFor={htmlId('legendPos')}>
                   <FormattedMessage
                     id="visTypeTimeseries.timeseries.optionsTab.legendPositionLabel"
                     defaultMessage="Legend position"
@@ -343,7 +346,7 @@ class TimeseriesPanelConfigUi extends Component {
                 />
               </EuiFlexItem>
               <EuiFlexItem grow={false}>
-                <EuiFormLabel style={{ marginBottom: 0 }}>
+                <EuiFormLabel>
                   <FormattedMessage
                     id="visTypeTimeseries.timeseries.optionsTab.displayGridLabel"
                     defaultMessage="Display grid"
@@ -362,7 +365,10 @@ class TimeseriesPanelConfigUi extends Component {
       <div>
         <EuiTabs size="s">
           <EuiTab isSelected={selectedTab === 'data'} onClick={() => this.switchTab('data')}>
-            <FormattedMessage id="visTypeTimeseries.timeseries.dataTab.dataButtonLabel" defaultMessage="Data" />
+            <FormattedMessage
+              id="visTypeTimeseries.timeseries.dataTab.dataButtonLabel"
+              defaultMessage="Data"
+            />
           </EuiTab>
           <EuiTab
             isSelected={selectedTab === 'options'}
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/top_n.js b/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/top_n.js
index 05f7bcd1d7e013..8f5619909754e6 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/top_n.js
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/panel_config/top_n.js
@@ -90,7 +90,10 @@ export class TopNPanelConfig extends Component {
           <EuiPanel>
             <EuiTitle size="s">
               <span>
-                <FormattedMessage id="visTypeTimeseries.topN.optionsTab.dataLabel" defaultMessage="Data" />
+                <FormattedMessage
+                  id="visTypeTimeseries.topN.optionsTab.dataLabel"
+                  defaultMessage="Data"
+                />
               </span>
             </EuiTitle>
             <EuiSpacer size="m" />
@@ -159,7 +162,7 @@ export class TopNPanelConfig extends Component {
                     defaultMessage="Ignore global filter?"
                   />
                 </EuiFormLabel>
-                <EuiSpacer size="s" />
+                <EuiSpacer size="m" />
                 <YesNo
                   value={model.ignore_global_filter}
                   name="ignore_global_filter"
@@ -174,14 +177,17 @@ export class TopNPanelConfig extends Component {
           <EuiPanel>
             <EuiTitle size="s">
               <span>
-                <FormattedMessage id="visTypeTimeseries.topN.optionsTab.styleLabel" defaultMessage="Style" />
+                <FormattedMessage
+                  id="visTypeTimeseries.topN.optionsTab.styleLabel"
+                  defaultMessage="Style"
+                />
               </span>
             </EuiTitle>
             <EuiSpacer size="m" />
 
             <EuiFlexGroup responsive={false} wrap={true} alignItems="center">
               <EuiFlexItem grow={false}>
-                <EuiFormLabel style={{ marginBottom: 0 }}>
+                <EuiFormLabel>
                   <FormattedMessage
                     id="visTypeTimeseries.topN.optionsTab.backgroundColorLabel"
                     defaultMessage="Background color:"
@@ -224,7 +230,10 @@ export class TopNPanelConfig extends Component {
       <div>
         <EuiTabs size="s">
           <EuiTab isSelected={selectedTab === 'data'} onClick={() => this.switchTab('data')}>
-            <FormattedMessage id="visTypeTimeseries.topN.dataTab.dataButtonLabel" defaultMessage="Data" />
+            <FormattedMessage
+              id="visTypeTimeseries.topN.dataTab.dataButtonLabel"
+              defaultMessage="Data"
+            />
           </EuiTab>
           <EuiTab isSelected={selectedTab === 'options'} onClick={() => this.switchTab('options')}>
             <FormattedMessage
diff --git a/src/legacy/core_plugins/vis_type_timeseries/public/components/splits/__snapshots__/terms.test.js.snap b/src/legacy/core_plugins/vis_type_timeseries/public/components/splits/__snapshots__/terms.test.js.snap
index c50d8a43da3bc0..7c97e69d20c6aa 100644
--- a/src/legacy/core_plugins/vis_type_timeseries/public/components/splits/__snapshots__/terms.test.js.snap
+++ b/src/legacy/core_plugins/vis_type_timeseries/public/components/splits/__snapshots__/terms.test.js.snap
@@ -6,6 +6,7 @@ exports[`src/legacy/core_plugins/metrics/public/components/splits/terms.test.js
     <EuiFlexItem>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         id="42"
@@ -26,6 +27,7 @@ exports[`src/legacy/core_plugins/metrics/public/components/splits/terms.test.js
     <EuiFlexItem>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         id="42"
@@ -68,6 +70,7 @@ exports[`src/legacy/core_plugins/metrics/public/components/splits/terms.test.js
     <EuiFlexItem>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         id="42"
@@ -91,6 +94,7 @@ exports[`src/legacy/core_plugins/metrics/public/components/splits/terms.test.js
     <EuiFlexItem>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         id="42"
@@ -116,6 +120,7 @@ exports[`src/legacy/core_plugins/metrics/public/components/splits/terms.test.js
     <EuiFlexItem>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         id="42"
@@ -140,6 +145,7 @@ exports[`src/legacy/core_plugins/metrics/public/components/splits/terms.test.js
     <EuiFlexItem>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         id="42"
@@ -175,6 +181,7 @@ exports[`src/legacy/core_plugins/metrics/public/components/splits/terms.test.js
     <EuiFlexItem>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         id="42"
diff --git a/src/legacy/ui/public/field_editor/__snapshots__/field_editor.test.js.snap b/src/legacy/ui/public/field_editor/__snapshots__/field_editor.test.js.snap
index 71d464d423307f..e45a0f093267b0 100644
--- a/src/legacy/ui/public/field_editor/__snapshots__/field_editor.test.js.snap
+++ b/src/legacy/ui/public/field_editor/__snapshots__/field_editor.test.js.snap
@@ -1243,6 +1243,9 @@ exports[`FieldEditor should show multiple type field warning with a table contai
       />
     </eui-form-row>
     <div>
+      <eui-spacer
+        size="m"
+      />
       <eui-call-out
         color="warning"
         iconType="alert"
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/bytes/__snapshots__/bytes.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/bytes/__snapshots__/bytes.test.js.snap
index d786876a501d71..bf5e8045d864cf 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/bytes/__snapshots__/bytes.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/bytes/__snapshots__/bytes.test.js.snap
@@ -4,6 +4,7 @@ exports[`BytesFormatEditor should render normally 1`] = `
 <Fragment>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={null}
     fullWidth={false}
     hasEmptyLabelSpace={false}
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date/__snapshots__/date.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date/__snapshots__/date.test.js.snap
index 69473f06514c13..b039a23ba70d52 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date/__snapshots__/date.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date/__snapshots__/date.test.js.snap
@@ -4,6 +4,7 @@ exports[`DateFormatEditor should render normally 1`] = `
 <Fragment>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={null}
     fullWidth={false}
     hasEmptyLabelSpace={false}
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/__snapshots__/date_nanos.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/__snapshots__/date_nanos.test.js.snap
index fe2f35f502d755..af8392751571dd 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/__snapshots__/date_nanos.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/date_nanos/__snapshots__/date_nanos.test.js.snap
@@ -4,6 +4,7 @@ exports[`DateFormatEditor should render normally 1`] = `
 <Fragment>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={null}
     fullWidth={false}
     hasEmptyLabelSpace={false}
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/duration/__snapshots__/duration.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/duration/__snapshots__/duration.test.js.snap
index fadb2e0aaf25ca..68d276d2028304 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/duration/__snapshots__/duration.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/duration/__snapshots__/duration.test.js.snap
@@ -4,6 +4,7 @@ exports[`DurationFormatEditor should render human readable output normally 1`] =
 <Fragment>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={null}
     fullWidth={false}
     hasEmptyLabelSpace={false}
@@ -36,6 +37,7 @@ exports[`DurationFormatEditor should render human readable output normally 1`] =
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     isInvalid={false}
@@ -118,6 +120,7 @@ exports[`DurationFormatEditor should render non-human readable output normally 1
 <Fragment>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={null}
     fullWidth={false}
     hasEmptyLabelSpace={false}
@@ -150,6 +153,7 @@ exports[`DurationFormatEditor should render non-human readable output normally 1
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     isInvalid={false}
@@ -185,6 +189,7 @@ exports[`DurationFormatEditor should render non-human readable output normally 1
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={null}
     fullWidth={false}
     hasEmptyLabelSpace={false}
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/number/__snapshots__/number.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/number/__snapshots__/number.test.js.snap
index 50550e556b0f45..0fbaa15a232c9d 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/number/__snapshots__/number.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/number/__snapshots__/number.test.js.snap
@@ -4,6 +4,7 @@ exports[`NumberFormatEditor should render normally 1`] = `
 <Fragment>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={null}
     fullWidth={false}
     hasEmptyLabelSpace={false}
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/percent/__snapshots__/percent.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/percent/__snapshots__/percent.test.js.snap
index 4c3043a0938969..95a82a2e529f10 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/percent/__snapshots__/percent.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/percent/__snapshots__/percent.test.js.snap
@@ -4,6 +4,7 @@ exports[`PercentFormatEditor should render normally 1`] = `
 <Fragment>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={null}
     fullWidth={false}
     hasEmptyLabelSpace={false}
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/static_lookup/__snapshots__/static_lookup.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/static_lookup/__snapshots__/static_lookup.test.js.snap
index 2c8db5390884e1..075c81bf1baff6 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/static_lookup/__snapshots__/static_lookup.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/static_lookup/__snapshots__/static_lookup.test.js.snap
@@ -71,6 +71,7 @@ exports[`StaticLookupFormatEditorComponent should render multiple lookup entries
   />
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label={
@@ -162,6 +163,7 @@ exports[`StaticLookupFormatEditorComponent should render normally 1`] = `
   />
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label={
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/string/__snapshots__/string.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/string/__snapshots__/string.test.js.snap
index 5561fbec68b3be..1912ff3ad0dc19 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/string/__snapshots__/string.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/string/__snapshots__/string.test.js.snap
@@ -4,6 +4,7 @@ exports[`StringFormatEditor should render normally 1`] = `
 <Fragment>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={null}
     fullWidth={false}
     hasEmptyLabelSpace={false}
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/truncate/__snapshots__/truncate.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/truncate/__snapshots__/truncate.test.js.snap
index d5912370324fda..4e33a84f4c650b 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/truncate/__snapshots__/truncate.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/truncate/__snapshots__/truncate.test.js.snap
@@ -4,6 +4,7 @@ exports[`TruncateFormatEditor should render normally 1`] = `
 <Fragment>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={null}
     fullWidth={false}
     hasEmptyLabelSpace={false}
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/url/__snapshots__/url.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/url/__snapshots__/url.test.js.snap
index 41b5cadca3bf69..a98e8e1e1b1272 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/editors/url/__snapshots__/url.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/editors/url/__snapshots__/url.test.js.snap
@@ -12,6 +12,7 @@ exports[`UrlFormatEditor should render label template help 1`] = `
   />
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label={
@@ -50,6 +51,7 @@ exports[`UrlFormatEditor should render label template help 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={null}
     fullWidth={false}
     hasEmptyLabelSpace={false}
@@ -87,6 +89,7 @@ exports[`UrlFormatEditor should render label template help 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={null}
     fullWidth={false}
     hasEmptyLabelSpace={false}
@@ -140,6 +143,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
   />
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label={
@@ -178,6 +182,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={null}
     fullWidth={false}
     hasEmptyLabelSpace={false}
@@ -215,6 +220,7 @@ exports[`UrlFormatEditor should render normally 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={null}
     fullWidth={false}
     hasEmptyLabelSpace={false}
@@ -268,6 +274,7 @@ exports[`UrlFormatEditor should render url template help 1`] = `
   />
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label={
@@ -306,6 +313,7 @@ exports[`UrlFormatEditor should render url template help 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={null}
     fullWidth={false}
     hasEmptyLabelSpace={false}
@@ -343,6 +351,7 @@ exports[`UrlFormatEditor should render url template help 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={null}
     fullWidth={false}
     hasEmptyLabelSpace={false}
diff --git a/src/legacy/ui/public/field_editor/components/field_format_editor/samples/__snapshots__/samples.test.js.snap b/src/legacy/ui/public/field_editor/components/field_format_editor/samples/__snapshots__/samples.test.js.snap
index 66a97acc6cf2a7..326312d69f71bf 100644
--- a/src/legacy/ui/public/field_editor/components/field_format_editor/samples/__snapshots__/samples.test.js.snap
+++ b/src/legacy/ui/public/field_editor/components/field_format_editor/samples/__snapshots__/samples.test.js.snap
@@ -3,6 +3,7 @@
 exports[`FormatEditorSamples should render normally 1`] = `
 <EuiFormRow
   describedByIds={Array []}
+  display="row"
   fullWidth={false}
   hasEmptyLabelSpace={false}
   label={
diff --git a/src/legacy/ui/public/field_editor/field_editor.js b/src/legacy/ui/public/field_editor/field_editor.js
index 648325def5e046..d623206051dda1 100644
--- a/src/legacy/ui/public/field_editor/field_editor.js
+++ b/src/legacy/ui/public/field_editor/field_editor.js
@@ -367,6 +367,7 @@ export class FieldEditorComponent extends PureComponent {
 
     return (
       <div>
+        <EuiSpacer size="m" />
         <EuiCallOut
           color="warning"
           iconType="alert"
diff --git a/src/legacy/ui/public/share/components/__snapshots__/url_panel_content.test.js.snap b/src/legacy/ui/public/share/components/__snapshots__/url_panel_content.test.js.snap
index 429761b8744b45..ce86a777ea5219 100644
--- a/src/legacy/ui/public/share/components/__snapshots__/url_panel_content.test.js.snap
+++ b/src/legacy/ui/public/share/components/__snapshots__/url_panel_content.test.js.snap
@@ -7,6 +7,7 @@ exports[`render 1`] = `
 >
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     helpText={
@@ -110,6 +111,7 @@ exports[`render 1`] = `
   <EuiFormRow
     data-test-subj="createShortUrl"
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     labelType="label"
@@ -148,6 +150,9 @@ exports[`render 1`] = `
       </EuiFlexItem>
     </EuiFlexGroup>
   </EuiFormRow>
+  <EuiSpacer
+    size="m"
+  />
   <EuiCopy
     afterMessage="Copied"
     anchorClassName="kbnShareContextMenu__copyAnchor"
@@ -165,6 +170,7 @@ exports[`should enable saved object export option when objectId is provided 1`]
 >
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label={
@@ -257,6 +263,7 @@ exports[`should enable saved object export option when objectId is provided 1`]
   <EuiFormRow
     data-test-subj="createShortUrl"
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     labelType="label"
@@ -295,6 +302,9 @@ exports[`should enable saved object export option when objectId is provided 1`]
       </EuiFlexItem>
     </EuiFlexGroup>
   </EuiFormRow>
+  <EuiSpacer
+    size="m"
+  />
   <EuiCopy
     afterMessage="Copied"
     anchorClassName="kbnShareContextMenu__copyAnchor"
@@ -312,6 +322,7 @@ exports[`should hide short url section when allowShortUrl is false 1`] = `
 >
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label={
@@ -401,6 +412,9 @@ exports[`should hide short url section when allowShortUrl is false 1`] = `
       }
     />
   </EuiFormRow>
+  <EuiSpacer
+    size="m"
+  />
   <EuiCopy
     afterMessage="Copied"
     anchorClassName="kbnShareContextMenu__copyAnchor"
diff --git a/src/legacy/ui/public/share/components/url_panel_content.tsx b/src/legacy/ui/public/share/components/url_panel_content.tsx
index 1f934c52ad1c52..28d51e9826d409 100644
--- a/src/legacy/ui/public/share/components/url_panel_content.tsx
+++ b/src/legacy/ui/public/share/components/url_panel_content.tsx
@@ -23,6 +23,7 @@ import {
   EuiButton,
   EuiCopy,
   EuiFlexGroup,
+  EuiSpacer,
   EuiFlexItem,
   EuiForm,
   EuiFormRow,
@@ -100,6 +101,8 @@ class UrlPanelContentUI extends Component<Props, State> {
 
         {this.renderShortUrlSwitch()}
 
+        <EuiSpacer size="m" />
+
         <EuiCopy
           textToCopy={this.state.url || ''}
           anchorClassName="kbnShareContextMenu__copyAnchor"
diff --git a/src/legacy/ui/public/vis/editors/default/_agg_params.scss b/src/legacy/ui/public/vis/editors/default/_agg_params.scss
index df806727e51d05..29f2f4d0de7268 100644
--- a/src/legacy/ui/public/vis/editors/default/_agg_params.scss
+++ b/src/legacy/ui/public/vis/editors/default/_agg_params.scss
@@ -1,4 +1,5 @@
 .visEditorAggParam--half {
+  margin-top: $euiSize;
   display: inline-block;
   width: calc(50% - #{$euiSizeS / 2});
 }
diff --git a/src/legacy/ui/public/vis/editors/default/components/__snapshots__/agg_params.test.tsx.snap b/src/legacy/ui/public/vis/editors/default/components/__snapshots__/agg_params.test.tsx.snap
index 018fe0b7dbd3c1..a89cf5e97dff87 100644
--- a/src/legacy/ui/public/vis/editors/default/components/__snapshots__/agg_params.test.tsx.snap
+++ b/src/legacy/ui/public/vis/editors/default/components/__snapshots__/agg_params.test.tsx.snap
@@ -48,6 +48,7 @@ exports[`DefaultEditorAggParams component should init with the default set of pa
   />
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     labelType="label"
diff --git a/src/legacy/ui/public/vis/editors/default/components/agg_select.tsx b/src/legacy/ui/public/vis/editors/default/components/agg_select.tsx
index b79f8c67ee08b2..dbda4bc38103ac 100644
--- a/src/legacy/ui/public/vis/editors/default/components/agg_select.tsx
+++ b/src/legacy/ui/public/vis/editors/default/components/agg_select.tsx
@@ -142,6 +142,7 @@ function DefaultEditorAggSelect({
         isClearable={false}
         isInvalid={showValidation ? !isValid : false}
         fullWidth={true}
+        // compressed
       />
     </EuiFormRow>
   );
diff --git a/src/legacy/ui/public/vis/editors/default/controls/__snapshots__/size.test.tsx.snap b/src/legacy/ui/public/vis/editors/default/controls/__snapshots__/size.test.tsx.snap
index 5c6d45e5f0b9be..cbdf2cfd1f7da9 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/__snapshots__/size.test.tsx.snap
+++ b/src/legacy/ui/public/vis/editors/default/controls/__snapshots__/size.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`SizeParamEditor should init with the default set of props 1`] = `
 <EuiFormRow
   compressed={true}
   describedByIds={Array []}
+  display="row"
   fullWidth={true}
   hasEmptyLabelSpace={false}
   isInvalid={false}
@@ -19,7 +20,7 @@ exports[`SizeParamEditor should init with the default set of props 1`] = `
   labelType="label"
 >
   <EuiFieldNumber
-    compressed={false}
+    compressed={true}
     data-test-subj="sizeParamEditor"
     fullWidth={true}
     isInvalid={false}
diff --git a/src/legacy/ui/public/vis/editors/default/controls/__snapshots__/top_aggregate.test.tsx.snap b/src/legacy/ui/public/vis/editors/default/controls/__snapshots__/top_aggregate.test.tsx.snap
index 11b05867706f34..ea4d7e0fe115dc 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/__snapshots__/top_aggregate.test.tsx.snap
+++ b/src/legacy/ui/public/vis/editors/default/controls/__snapshots__/top_aggregate.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`TopAggregateParamEditor should init with the default set of props 1`] =
 <EuiFormRow
   compressed={true}
   describedByIds={Array []}
+  display="row"
   fullWidth={true}
   hasEmptyLabelSpace={false}
   isInvalid={false}
@@ -25,7 +26,7 @@ exports[`TopAggregateParamEditor should init with the default set of props 1`] =
   labelType="label"
 >
   <EuiSelect
-    compressed={false}
+    compressed={true}
     data-test-subj="visDefaultEditorAggregateWith"
     disabled={false}
     fullWidth={true}
diff --git a/src/legacy/ui/public/vis/editors/default/controls/field.tsx b/src/legacy/ui/public/vis/editors/default/controls/field.tsx
index 778ed27259d362..6a4a787ac41d83 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/field.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/field.tsx
@@ -110,6 +110,7 @@ function FieldParamEditor({
       compressed
     >
       <EuiComboBox
+        // compressed
         placeholder={i18n.translate('common.ui.aggTypes.field.selectFieldPlaceholder', {
           defaultMessage: 'Select a field',
         })}
diff --git a/src/legacy/ui/public/vis/editors/default/controls/filter.tsx b/src/legacy/ui/public/vis/editors/default/controls/filter.tsx
index 39211b7f88c856..f81734f5374262 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/filter.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/filter.tsx
@@ -18,14 +18,7 @@
  */
 
 import React, { useState } from 'react';
-import {
-  EuiForm,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButtonIcon,
-  EuiFieldText,
-  EuiFormRow,
-} from '@elastic/eui';
+import { EuiForm, EuiButtonIcon, EuiFieldText, EuiFormRow, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { Query, QueryBarInput } from 'plugins/data';
 import { AggConfig } from '../../..';
@@ -67,30 +60,26 @@ function FilterRow({
   });
 
   const FilterControl = (
-    <EuiFlexGroup gutterSize="s" responsive={false}>
-      <EuiFlexItem>
-        <EuiButtonIcon
-          iconType="tag"
-          aria-label={i18n.translate('common.ui.aggTypes.filters.toggleFilterButtonAriaLabel', {
-            defaultMessage: 'Toggle filter label',
-          })}
-          aria-expanded={showCustomLabel}
-          aria-controls={`visEditorFilterLabel${arrayIndex}`}
-          onClick={() => setShowCustomLabel(!showCustomLabel)}
-        />
-      </EuiFlexItem>
-      <EuiFlexItem>
-        <EuiButtonIcon
-          iconType="trash"
-          color="danger"
-          disabled={disableRemove}
-          aria-label={i18n.translate('common.ui.aggTypes.filters.removeFilterButtonAriaLabel', {
-            defaultMessage: 'Remove this filter',
-          })}
-          onClick={() => onRemoveFilter(id)}
-        />
-      </EuiFlexItem>
-    </EuiFlexGroup>
+    <div>
+      <EuiButtonIcon
+        iconType="tag"
+        aria-label={i18n.translate('common.ui.aggTypes.filters.toggleFilterButtonAriaLabel', {
+          defaultMessage: 'Toggle filter label',
+        })}
+        aria-expanded={showCustomLabel}
+        aria-controls={`visEditorFilterLabel${arrayIndex}`}
+        onClick={() => setShowCustomLabel(!showCustomLabel)}
+      />
+      <EuiButtonIcon
+        iconType="trash"
+        color="danger"
+        disabled={disableRemove}
+        aria-label={i18n.translate('common.ui.aggTypes.filters.removeFilterButtonAriaLabel', {
+          defaultMessage: 'Remove this filter',
+        })}
+        onClick={() => onRemoveFilter(id)}
+      />
+    </div>
   );
 
   return (
@@ -99,7 +88,6 @@ function FilterRow({
         label={`${filterLabel}${customLabel ? ` - ${customLabel}` : ''}`}
         labelAppend={FilterControl}
         fullWidth={true}
-        compressed
       >
         <QueryBarInput
           query={value}
@@ -137,9 +125,11 @@ function FilterRow({
             })}
             onChange={ev => onChangeValue(id, value, ev.target.value)}
             fullWidth={true}
+            compressed
           />
         </EuiFormRow>
       ) : null}
+      <EuiSpacer />
     </EuiForm>
   );
 }
diff --git a/src/legacy/ui/public/vis/editors/default/controls/filters.tsx b/src/legacy/ui/public/vis/editors/default/controls/filters.tsx
index 648658b237d575..8d58c51a42a1b2 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/filters.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/filters.tsx
@@ -86,6 +86,7 @@ function FiltersParamEditor({ agg, value = [], setValue }: AggParamEditorProps<F
 
   return (
     <>
+      <EuiSpacer size="m" />
       {filters.map(({ input, label, id }, arrayIndex) => (
         <FilterRow
           key={id}
diff --git a/src/legacy/ui/public/vis/editors/default/controls/metric_agg.tsx b/src/legacy/ui/public/vis/editors/default/controls/metric_agg.tsx
index 40957f618e5b0e..82cf9af097805e 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/metric_agg.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/metric_agg.tsx
@@ -97,6 +97,7 @@ function MetricAggParamEditor({
         value={value || EMPTY_VALUE}
         onChange={ev => setValue(ev.target.value)}
         fullWidth={true}
+        compressed
         isInvalid={showValidation ? !isValid : false}
         onBlur={setTouched}
         data-test-subj={`visEditorSubAggMetric${agg.id}`}
diff --git a/src/legacy/ui/public/vis/editors/default/controls/number_interval.tsx b/src/legacy/ui/public/vis/editors/default/controls/number_interval.tsx
index c2c685ded8cb35..33f92c337648c8 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/number_interval.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/number_interval.tsx
@@ -84,6 +84,7 @@ function NumberIntervalParamEditor({
         onChange={onChange}
         onBlur={setTouched}
         fullWidth={true}
+        compressed
         placeholder={i18n.translate('common.ui.aggTypes.numberInterval.selectIntervalPlaceholder', {
           defaultMessage: 'Enter an interval',
         })}
diff --git a/src/legacy/ui/public/vis/editors/default/controls/order.tsx b/src/legacy/ui/public/vis/editors/default/controls/order.tsx
index c65d8f793eecd3..ec9be206fe1308 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/order.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/order.tsx
@@ -58,6 +58,7 @@ function OrderParamEditor({
           setValue(aggParam.options.find((opt: OptionedValueProp) => opt.value === ev.target.value))
         }
         fullWidth={true}
+        compressed
         isInvalid={showValidation ? !isValid : false}
         onBlur={setTouched}
       />
diff --git a/src/legacy/ui/public/vis/editors/default/controls/order_by.tsx b/src/legacy/ui/public/vis/editors/default/controls/order_by.tsx
index 4319f2f539f1d6..1b199db6df02eb 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/order_by.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/order_by.tsx
@@ -123,6 +123,7 @@ function OrderByParamEditor({
         value={value}
         onChange={ev => setValue(ev.target.value)}
         fullWidth={true}
+        compressed
         isInvalid={showValidation ? !isValid : false}
         onBlur={setTouched}
         data-test-subj={`visEditorOrderBy${agg.id}`}
diff --git a/src/legacy/ui/public/vis/editors/default/controls/precision.tsx b/src/legacy/ui/public/vis/editors/default/controls/precision.tsx
index 19b63712d72720..88f389cb7c009d 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/precision.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/precision.tsx
@@ -46,6 +46,7 @@ function PrecisionParamEditor({ agg, value, setValue }: AggParamEditorProps<numb
         }
         data-test-subj={`visEditorMapPrecision${agg.id}`}
         showValue
+        compressed
       />
     </EuiFormRow>
   );
diff --git a/src/legacy/ui/public/vis/editors/default/controls/radius_ratio_option.tsx b/src/legacy/ui/public/vis/editors/default/controls/radius_ratio_option.tsx
index f2625c628c3f12..02f6bb404db0c1 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/radius_ratio_option.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/radius_ratio_option.tsx
@@ -50,7 +50,7 @@ function RadiusRatioOptionControl({ editorStateParams, setValue }: AggControlPro
   }, []);
 
   return (
-    <EuiFormRow fullWidth={true} label={label}>
+    <EuiFormRow fullWidth={true} label={label} compressed>
       <EuiRange
         compressed
         fullWidth={true}
diff --git a/src/legacy/ui/public/vis/editors/default/controls/raw_json.tsx b/src/legacy/ui/public/vis/editors/default/controls/raw_json.tsx
index 77829d3c362858..78ef1bf939b7dd 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/raw_json.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/raw_json.tsx
@@ -73,6 +73,7 @@ function RawJsonParamEditor({
         rows={2}
         fullWidth={true}
         onBlur={setTouched}
+        compressed
       />
     </EuiFormRow>
   );
diff --git a/src/legacy/ui/public/vis/editors/default/controls/size.tsx b/src/legacy/ui/public/vis/editors/default/controls/size.tsx
index 99d2e28c2d7405..121e5e9418021b 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/size.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/size.tsx
@@ -60,6 +60,7 @@ function SizeParamEditor({
         value={isUndefined(value) ? '' : value}
         onChange={ev => setValue(ev.target.value === '' ? '' : parseFloat(ev.target.value))}
         fullWidth={true}
+        compressed
         isInvalid={showValidation ? !isValid : false}
         onBlur={setTouched}
         min={1}
diff --git a/src/legacy/ui/public/vis/editors/default/controls/string.tsx b/src/legacy/ui/public/vis/editors/default/controls/string.tsx
index 29bc3edc6fbc65..e48c623e9b9318 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/string.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/string.tsx
@@ -49,6 +49,7 @@ function StringParamEditor({
         data-test-subj={`visEditorStringInput${agg.id}${aggParam.name}`}
         onChange={ev => setValue(ev.target.value)}
         fullWidth={true}
+        compressed
         onBlur={setTouched}
         isInvalid={showValidation ? !isValid : false}
       />
diff --git a/src/legacy/ui/public/vis/editors/default/controls/sub_metric.tsx b/src/legacy/ui/public/vis/editors/default/controls/sub_metric.tsx
index 1bfe2f77172c49..0d4816306d12cb 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/sub_metric.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/sub_metric.tsx
@@ -18,7 +18,7 @@
  */
 
 import React, { useEffect, useState } from 'react';
-import { EuiFormLabel } from '@elastic/eui';
+import { EuiFormLabel, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { AggParamType } from '../../../../agg_types/param_types/agg';
 import { AggConfig } from '../../..';
@@ -65,6 +65,7 @@ function SubMetricParamEditor({
   return (
     <>
       <EuiFormLabel>{aggTitle}</EuiFormLabel>
+      <EuiSpacer size="s" />
       <DefaultEditorAggParams
         agg={agg.params[type]}
         groupName={aggGroup}
diff --git a/src/legacy/ui/public/vis/editors/default/controls/switch.tsx b/src/legacy/ui/public/vis/editors/default/controls/switch.tsx
index 48ac1989223fc5..ebcc875d41f34c 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/switch.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/switch.tsx
@@ -39,7 +39,12 @@ function SwitchParamEditor({
 }: SwitchParamEditorProps) {
   return (
     <div className="visEditorSidebar__aggParamFormRow">
-      <EuiToolTip content={displayToolTip} delay="long" position="right">
+      <EuiToolTip
+        content={displayToolTip}
+        delay="long"
+        position="right"
+        anchorClassName="eui-displayBlock"
+      >
         <EuiSwitch
           label={displayLabel}
           checked={value}
diff --git a/src/legacy/ui/public/vis/editors/default/controls/time_interval.tsx b/src/legacy/ui/public/vis/editors/default/controls/time_interval.tsx
index f34ba4b0de3bd2..769c486d4ca093 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/time_interval.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/time_interval.tsx
@@ -131,6 +131,7 @@ function TimeIntervalParamEditor({
       })}
     >
       <EuiComboBox
+        // compressed
         fullWidth={true}
         data-test-subj="visEditorInterval"
         isInvalid={showValidation ? !isValid : false}
diff --git a/src/legacy/ui/public/vis/editors/default/controls/top_aggregate.tsx b/src/legacy/ui/public/vis/editors/default/controls/top_aggregate.tsx
index 95e44c9a6399bd..45f898805709e0 100644
--- a/src/legacy/ui/public/vis/editors/default/controls/top_aggregate.tsx
+++ b/src/legacy/ui/public/vis/editors/default/controls/top_aggregate.tsx
@@ -123,6 +123,7 @@ export function TopAggregateParamEditor({
         value={value ? value.value : emptyValue.value}
         onChange={handleChange}
         fullWidth={true}
+        compressed
         isInvalid={showValidation ? !isValid : false}
         disabled={disabled}
         onBlur={setTouched}
diff --git a/src/plugins/kibana_react/public/saved_objects/__snapshots__/saved_object_save_modal.test.tsx.snap b/src/plugins/kibana_react/public/saved_objects/__snapshots__/saved_object_save_modal.test.tsx.snap
index 92e3f752cb6336..ad5e4f4c96bd26 100644
--- a/src/plugins/kibana_react/public/saved_objects/__snapshots__/saved_object_save_modal.test.tsx.snap
+++ b/src/plugins/kibana_react/public/saved_objects/__snapshots__/saved_object_save_modal.test.tsx.snap
@@ -28,6 +28,7 @@ exports[`SavedObjectSaveModal should render matching snapshot 1`] = `
         <EuiForm>
           <EuiFormRow
             describedByIds={Array []}
+            display="row"
             fullWidth={true}
             hasEmptyLabelSpace={false}
             label={
@@ -52,6 +53,7 @@ exports[`SavedObjectSaveModal should render matching snapshot 1`] = `
           </EuiFormRow>
           <EuiFormRow
             describedByIds={Array []}
+            display="row"
             fullWidth={true}
             hasEmptyLabelSpace={false}
             label={
diff --git a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
index 146325244067a8..55cdc772671243 100644
--- a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
+++ b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "13.8.1",
+    "@elastic/eui": "14.0.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   }
diff --git a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
index 00ef51a751b276..b872f3dce6d300 100644
--- a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "13.8.1",
+    "@elastic/eui": "14.0.0",
     "react": "^16.8.0"
   }
 }
diff --git a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
index e86e63bf623b7b..90109a70b1e787 100644
--- a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "13.8.1",
+    "@elastic/eui": "14.0.0",
     "react": "^16.8.0"
   },
   "scripts": {
diff --git a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
index 134b5152cdd216..1815075e20e40c 100644
--- a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
@@ -8,7 +8,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "13.8.1",
+    "@elastic/eui": "14.0.0",
     "react": "^16.8.0"
   },
   "scripts": {
diff --git a/test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json b/test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json
index 05338e6d4d882e..b995ddf0292921 100644
--- a/test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_visualize_embedding/package.json
@@ -7,7 +7,7 @@
   },
   "license": "Apache-2.0",
   "dependencies": {
-    "@elastic/eui": "13.8.1",
+    "@elastic/eui": "14.0.0",
     "react": "^16.8.0",
     "react-dom": "^16.8.0"
   }
diff --git a/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/WatcherFlyout.tsx b/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/WatcherFlyout.tsx
index 2342441c626067..7a1257a3f05634 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/WatcherFlyout.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/ServiceDetails/ServiceIntegrations/WatcherFlyout.tsx
@@ -355,6 +355,7 @@ export class WatcherFlyout extends Component<
               onChange={this.onChangeThreshold}
             />
           </EuiFormRow>
+          <EuiSpacer size="m" />
           <h4>
             {i18n.translate(
               'xpack.apm.serviceDetails.enableErrorReportsPanel.triggerScheduleTitle',
@@ -403,6 +404,7 @@ export class WatcherFlyout extends Component<
               disabled={this.state.schedule !== 'daily'}
             />
           </EuiFormRow>
+          <EuiSpacer size="m" />
           <EuiRadio
             id="interval"
             label={i18n.translate(
@@ -428,6 +430,7 @@ export class WatcherFlyout extends Component<
                   compressed
                 >
                   <EuiFieldNumber
+                    compressed
                     icon="clock"
                     min={1}
                     value={this.state.interval.value}
@@ -442,6 +445,7 @@ export class WatcherFlyout extends Component<
                 <EuiSelect
                   value={this.state.interval.unit}
                   onChange={this.onChangeIntervalUnit}
+                  compressed
                   options={[
                     {
                       value: 'm',
@@ -531,12 +535,14 @@ export class WatcherFlyout extends Component<
               }
             >
               <EuiFieldText
+                compressed
                 icon="user"
                 value={this.state.emails}
                 onChange={this.onChangeEmails}
               />
             </EuiFormRow>
           )}
+          <EuiSpacer size="m" />
           <EuiSwitch
             label={i18n.translate(
               'xpack.apm.serviceDetails.enableErrorReportsPanel.sendSlackNotificationLabel',
@@ -582,6 +588,7 @@ export class WatcherFlyout extends Component<
               }
             >
               <EuiFieldText
+                compressed
                 icon="link"
                 value={this.state.slackUrl}
                 onChange={this.onChangeSlackUrl}
diff --git a/x-pack/legacy/plugins/apm/public/components/app/Settings/AddSettings/AddSettingFlyoutBody.tsx b/x-pack/legacy/plugins/apm/public/components/app/Settings/AddSettings/AddSettingFlyoutBody.tsx
index 83ffd44bace2ac..090f3fe0d5f912 100644
--- a/x-pack/legacy/plugins/apm/public/components/app/Settings/AddSettings/AddSettingFlyoutBody.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/app/Settings/AddSettings/AddSettingFlyoutBody.tsx
@@ -166,6 +166,8 @@ export function AddSettingFlyoutBody({
           />
         </EuiFormRow>
 
+        <EuiSpacer />
+
         <EuiTitle size="xs">
           <h3>
             {i18n.translate(
diff --git a/x-pack/legacy/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx b/x-pack/legacy/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx
index d9618a043175fa..212c4e427f1880 100644
--- a/x-pack/legacy/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx
+++ b/x-pack/legacy/plugins/apm/public/components/shared/EnvironmentFilter/index.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiSelect, EuiFormLabel } from '@elastic/eui';
+import { EuiSelect } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 import { useFetcher } from '../../../hooks/useFetcher';
@@ -96,13 +96,9 @@ export const EnvironmentFilter: React.FC = () => {
 
   return (
     <EuiSelect
-      prepend={
-        <EuiFormLabel>
-          {i18n.translate('xpack.apm.filter.environment.label', {
-            defaultMessage: 'environment'
-          })}
-        </EuiFormLabel>
-      }
+      prepend={i18n.translate('xpack.apm.filter.environment.label', {
+        defaultMessage: 'environment'
+      })}
       options={getOptions(environments)}
       value={environment || ENVIRONMENT_ALL}
       onChange={event => {
diff --git a/x-pack/legacy/plugins/beats_management/public/components/tag/config_view/index.tsx b/x-pack/legacy/plugins/beats_management/public/components/tag/config_view/index.tsx
index fe505eb8207d9b..20eb2b9c3fd0d9 100644
--- a/x-pack/legacy/plugins/beats_management/public/components/tag/config_view/index.tsx
+++ b/x-pack/legacy/plugins/beats_management/public/components/tag/config_view/index.tsx
@@ -17,6 +17,7 @@ import {
   EuiFormRow,
   EuiHorizontalRule,
   EuiSelect,
+  EuiSpacer,
   EuiTitle,
 } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
@@ -119,6 +120,7 @@ class ConfigViewUi extends React.Component<ComponentProps, ComponentState> {
               )}
             />
           </EuiFormRow>
+          <EuiSpacer />
           <h3>
             {i18n.translate('xpack.beatsManagement.tagConfig.configurationTypeText', {
               defaultMessage: '{configType} configuration',
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/__examples__/__snapshots__/extended_template.examples.storyshot b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/__examples__/__snapshots__/extended_template.examples.storyshot
index c256ff8e23502e..df617985631646 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/__examples__/__snapshots__/extended_template.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/arguments/axis_config/__examples__/__snapshots__/extended_template.examples.storyshot
@@ -14,57 +14,63 @@ exports[`Storyshots arguments/AxisConfig extended 1`] = `
     className="euiFormRow euiFormRow--compressed"
     id="generated-id-row"
   >
-    <div>
+    <div
+      className="euiFormRow__labelWrapper"
+    >
       <label
-        className="euiFormLabel"
+        className="euiFormLabel euiFormRow__label"
         htmlFor="generated-id"
       >
         Position
       </label>
     </div>
     <div
-      className="euiFormControlLayout euiFormControlLayout--compressed"
+      className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout__childrenWrapper"
+        className="euiFormControlLayout"
       >
-        <select
-          className="euiSelect euiSelect--compressed"
-          id="generated-id"
-          onBlur={[Function]}
-          onChange={[Function]}
-          onFocus={[Function]}
-          onMouseUp={[Function]}
-          value="bottom"
+        <div
+          className="euiFormControlLayout__childrenWrapper"
         >
-          <option
+          <select
+            className="euiSelect"
+            id="generated-id"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onMouseUp={[Function]}
             value="bottom"
           >
-            bottom
-          </option>
-          <option
-            value="top"
-          >
-            top
-          </option>
-        </select>
-        <div
-          className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-        >
-          <span
-            className="euiFormControlLayoutCustomIcon"
+            <option
+              value="bottom"
+            >
+              bottom
+            </option>
+            <option
+              value="top"
+            >
+              top
+            </option>
+          </select>
+          <div
+            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
           >
-            <svg
-              aria-hidden="true"
-              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-              focusable="false"
-              height={16}
-              style={null}
-              viewBox="0 0 16 16"
-              width={16}
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </span>
+            <span
+              className="euiFormControlLayoutCustomIcon"
+            >
+              <svg
+                aria-hidden="true"
+                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                focusable="false"
+                height={16}
+                style={null}
+                viewBox="0 0 16 16"
+                width={16}
+                xmlns="http://www.w3.org/2000/svg"
+              />
+            </span>
+          </div>
         </div>
       </div>
     </div>
@@ -86,57 +92,63 @@ exports[`Storyshots arguments/AxisConfig/components extended 1`] = `
     className="euiFormRow euiFormRow--compressed"
     id="generated-id-row"
   >
-    <div>
+    <div
+      className="euiFormRow__labelWrapper"
+    >
       <label
-        className="euiFormLabel"
+        className="euiFormLabel euiFormRow__label"
         htmlFor="generated-id"
       >
         Position
       </label>
     </div>
     <div
-      className="euiFormControlLayout euiFormControlLayout--compressed"
+      className="euiFormRow__fieldWrapper"
     >
       <div
-        className="euiFormControlLayout__childrenWrapper"
+        className="euiFormControlLayout"
       >
-        <select
-          className="euiSelect euiSelect--compressed"
-          id="generated-id"
-          onBlur={[Function]}
-          onChange={[Function]}
-          onFocus={[Function]}
-          onMouseUp={[Function]}
-          value="left"
+        <div
+          className="euiFormControlLayout__childrenWrapper"
         >
-          <option
+          <select
+            className="euiSelect"
+            id="generated-id"
+            onBlur={[Function]}
+            onChange={[Function]}
+            onFocus={[Function]}
+            onMouseUp={[Function]}
             value="left"
           >
-            left
-          </option>
-          <option
-            value="right"
-          >
-            right
-          </option>
-        </select>
-        <div
-          className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-        >
-          <span
-            className="euiFormControlLayoutCustomIcon"
+            <option
+              value="left"
+            >
+              left
+            </option>
+            <option
+              value="right"
+            >
+              right
+            </option>
+          </select>
+          <div
+            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
           >
-            <svg
-              aria-hidden="true"
-              className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-              focusable="false"
-              height={16}
-              style={null}
-              viewBox="0 0 16 16"
-              width={16}
-              xmlns="http://www.w3.org/2000/svg"
-            />
-          </span>
+            <span
+              className="euiFormControlLayoutCustomIcon"
+            >
+              <svg
+                aria-hidden="true"
+                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                focusable="false"
+                height={16}
+                style={null}
+                viewBox="0 0 16 16"
+                width={16}
+                xmlns="http://www.w3.org/2000/svg"
+              />
+            </span>
+          </div>
         </div>
       </div>
     </div>
diff --git a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js
index 34860e328b5eea..3de5976b81c057 100644
--- a/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js
+++ b/x-pack/legacy/plugins/canvas/canvas_plugin_src/uis/datasources/timelion.js
@@ -81,6 +81,8 @@ const TimelionDatasource = ({ args, updateArgs, defaultIndex }) => {
         <EuiFieldText value={getInterval()} onChange={e => setArg('interval', e.target.value)} />
       </EuiFormRow>
 
+      <EuiSpacer size="m" />
+
       <EuiCallOut color="warning" title="Some tips" size="s">
         <ul>
           <li>
diff --git a/x-pack/legacy/plugins/canvas/public/components/arg_form/advanced_failure.js b/x-pack/legacy/plugins/canvas/public/components/arg_form/advanced_failure.js
index a973bfd65b9ed8..b42d6e0340ef61 100644
--- a/x-pack/legacy/plugins/canvas/public/components/arg_form/advanced_failure.js
+++ b/x-pack/legacy/plugins/canvas/public/components/arg_form/advanced_failure.js
@@ -7,7 +7,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { compose, withProps, withPropsOnChange } from 'recompose';
-import { EuiForm, EuiTextArea, EuiButton, EuiButtonEmpty, EuiFormRow } from '@elastic/eui';
+import {
+  EuiForm,
+  EuiTextArea,
+  EuiButton,
+  EuiButtonEmpty,
+  EuiFormRow,
+  EuiSpacer,
+} from '@elastic/eui';
 import { fromExpression, toExpression } from '@kbn/interpreter/common';
 import { createStatefulPropHoc } from '../../components/enhance/stateful_prop';
 
@@ -49,6 +56,7 @@ export const AdvancedFailureComponent = props => {
           rows={3}
         />
       </EuiFormRow>
+      <EuiSpacer size="s" />
       <div>
         <EuiButton disabled={!valid} onClick={e => valueChange(e)} size="s" type="submit">
           Apply
diff --git a/x-pack/legacy/plugins/canvas/public/components/custom_element_modal/__examples__/__snapshots__/custom_element_modal.examples.storyshot b/x-pack/legacy/plugins/canvas/public/components/custom_element_modal/__examples__/__snapshots__/custom_element_modal.examples.storyshot
index 69924bda523673..126c578d515d65 100644
--- a/x-pack/legacy/plugins/canvas/public/components/custom_element_modal/__examples__/__snapshots__/custom_element_modal.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/components/custom_element_modal/__examples__/__snapshots__/custom_element_modal.examples.storyshot
@@ -95,116 +95,134 @@ Array [
                   className="euiFormRow euiFormRow--compressed"
                   id="generated-id-row"
                 >
-                  <div>
+                  <div
+                    className="euiFormRow__labelWrapper"
+                  >
                     <label
-                      className="euiFormLabel"
+                      className="euiFormLabel euiFormRow__label"
                       htmlFor="generated-id"
                     >
                       Name
                     </label>
                   </div>
                   <div
-                    className="euiFormControlLayout euiFormControlLayout--compressed"
+                    className="euiFormRow__fieldWrapper"
                   >
                     <div
-                      className="euiFormControlLayout__childrenWrapper"
+                      className="euiFormControlLayout"
                     >
-                      <input
-                        aria-describedby="generated-id-help"
-                        className="euiFieldText canvasCustomElementForm__name euiFieldText--compressed"
-                        id="generated-id"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onFocus={[Function]}
-                        required={true}
-                        type="text"
-                        value=""
-                      />
+                      <div
+                        className="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          aria-describedby="generated-id-help"
+                          className="euiFieldText canvasCustomElementForm__name"
+                          id="generated-id"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={true}
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                    <div
+                      className="euiFormHelpText euiFormRow__text"
+                      id="generated-id-help"
+                    >
+                      40 characters remaining
                     </div>
-                  </div>
-                  <div
-                    className="euiFormHelpText euiFormRow__text"
-                    id="generated-id-help"
-                  >
-                    40 characters remaining
                   </div>
                 </div>
                 <div
                   className="euiFormRow"
                   id="generated-id-row"
                 >
-                  <div>
+                  <div
+                    className="euiFormRow__labelWrapper"
+                  >
                     <label
-                      className="euiFormLabel"
+                      className="euiFormLabel euiFormRow__label"
                       htmlFor="generated-id"
                     >
                       Description
                     </label>
                   </div>
-                  <textarea
-                    aria-describedby="generated-id-help"
-                    className="euiTextArea euiTextArea--resizeVertical"
-                    id="generated-id"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    rows={2}
-                    value="best element ever"
-                  />
                   <div
-                    className="euiFormHelpText euiFormRow__text"
-                    id="generated-id-help"
+                    className="euiFormRow__fieldWrapper"
                   >
-                    83 characters remaining
+                    <textarea
+                      aria-describedby="generated-id-help"
+                      className="euiTextArea euiTextArea--resizeVertical"
+                      id="generated-id"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      rows={2}
+                      value="best element ever"
+                    />
+                    <div
+                      className="euiFormHelpText euiFormRow__text"
+                      id="generated-id-help"
+                    >
+                      83 characters remaining
+                    </div>
                   </div>
                 </div>
                 <div
                   className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
                   id="generated-id-row"
                 >
-                  <div>
+                  <div
+                    className="euiFormRow__labelWrapper"
+                  >
                     <label
-                      className="euiFormLabel"
+                      className="euiFormLabel euiFormRow__label"
                       htmlFor="generated-id"
                     >
                       Thumbnail image
                     </label>
                   </div>
                   <div
-                    className="euiFilePicker euiFilePicker--compressed canvasImageUpload"
+                    className="euiFormRow__fieldWrapper"
                   >
                     <div
-                      className="euiFilePicker__wrap"
+                      className="euiFilePicker euiFilePicker--large canvasImageUpload"
                     >
-                      <input
-                        accept="image/*"
-                        className="euiFilePicker__input"
-                        id="generated-id"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onDragLeave={[Function]}
-                        onDragOver={[Function]}
-                        onDrop={[Function]}
-                        onFocus={[Function]}
-                        type="file"
-                      />
                       <div
-                        className="euiFilePicker__prompt"
+                        className="euiFilePicker__wrap"
                       >
-                        <svg
-                          aria-hidden="true"
-                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFilePicker__icon"
-                          focusable="false"
-                          height={16}
-                          style={null}
-                          viewBox="0 0 16 16"
-                          width={16}
-                          xmlns="http://www.w3.org/2000/svg"
+                        <input
+                          accept="image/*"
+                          className="euiFilePicker__input"
+                          id="generated-id"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onDragLeave={[Function]}
+                          onDragOver={[Function]}
+                          onDrop={[Function]}
+                          onFocus={[Function]}
+                          type="file"
                         />
                         <div
-                          className="euiFilePicker__promptText"
+                          className="euiFilePicker__prompt"
                         >
-                          Select or drag and drop an image
+                          <svg
+                            aria-hidden="true"
+                            className="euiIcon euiIcon--large euiIcon-isLoading euiFilePicker__icon"
+                            focusable="false"
+                            height={16}
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                          <div
+                            className="euiFilePicker__promptText"
+                          >
+                            Select or drag and drop an image
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -433,116 +451,134 @@ Array [
                   className="euiFormRow euiFormRow--compressed"
                   id="generated-id-row"
                 >
-                  <div>
+                  <div
+                    className="euiFormRow__labelWrapper"
+                  >
                     <label
-                      className="euiFormLabel"
+                      className="euiFormLabel euiFormRow__label"
                       htmlFor="generated-id"
                     >
                       Name
                     </label>
                   </div>
                   <div
-                    className="euiFormControlLayout euiFormControlLayout--compressed"
+                    className="euiFormRow__fieldWrapper"
                   >
                     <div
-                      className="euiFormControlLayout__childrenWrapper"
+                      className="euiFormControlLayout"
                     >
-                      <input
-                        aria-describedby="generated-id-help"
-                        className="euiFieldText canvasCustomElementForm__name euiFieldText--compressed"
-                        id="generated-id"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onFocus={[Function]}
-                        required={true}
-                        type="text"
-                        value=""
-                      />
+                      <div
+                        className="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          aria-describedby="generated-id-help"
+                          className="euiFieldText canvasCustomElementForm__name"
+                          id="generated-id"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={true}
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                    <div
+                      className="euiFormHelpText euiFormRow__text"
+                      id="generated-id-help"
+                    >
+                      40 characters remaining
                     </div>
-                  </div>
-                  <div
-                    className="euiFormHelpText euiFormRow__text"
-                    id="generated-id-help"
-                  >
-                    40 characters remaining
                   </div>
                 </div>
                 <div
                   className="euiFormRow"
                   id="generated-id-row"
                 >
-                  <div>
+                  <div
+                    className="euiFormRow__labelWrapper"
+                  >
                     <label
-                      className="euiFormLabel"
+                      className="euiFormLabel euiFormRow__label"
                       htmlFor="generated-id"
                     >
                       Description
                     </label>
                   </div>
-                  <textarea
-                    aria-describedby="generated-id-help"
-                    className="euiTextArea euiTextArea--resizeVertical"
-                    id="generated-id"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    rows={2}
-                    value=""
-                  />
                   <div
-                    className="euiFormHelpText euiFormRow__text"
-                    id="generated-id-help"
+                    className="euiFormRow__fieldWrapper"
                   >
-                    100 characters remaining
+                    <textarea
+                      aria-describedby="generated-id-help"
+                      className="euiTextArea euiTextArea--resizeVertical"
+                      id="generated-id"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      rows={2}
+                      value=""
+                    />
+                    <div
+                      className="euiFormHelpText euiFormRow__text"
+                      id="generated-id-help"
+                    >
+                      100 characters remaining
+                    </div>
                   </div>
                 </div>
                 <div
                   className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
                   id="generated-id-row"
                 >
-                  <div>
+                  <div
+                    className="euiFormRow__labelWrapper"
+                  >
                     <label
-                      className="euiFormLabel"
+                      className="euiFormLabel euiFormRow__label"
                       htmlFor="generated-id"
                     >
                       Thumbnail image
                     </label>
                   </div>
                   <div
-                    className="euiFilePicker euiFilePicker--compressed canvasImageUpload"
+                    className="euiFormRow__fieldWrapper"
                   >
                     <div
-                      className="euiFilePicker__wrap"
+                      className="euiFilePicker euiFilePicker--large canvasImageUpload"
                     >
-                      <input
-                        accept="image/*"
-                        className="euiFilePicker__input"
-                        id="generated-id"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onDragLeave={[Function]}
-                        onDragOver={[Function]}
-                        onDrop={[Function]}
-                        onFocus={[Function]}
-                        type="file"
-                      />
                       <div
-                        className="euiFilePicker__prompt"
+                        className="euiFilePicker__wrap"
                       >
-                        <svg
-                          aria-hidden="true"
-                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFilePicker__icon"
-                          focusable="false"
-                          height={16}
-                          style={null}
-                          viewBox="0 0 16 16"
-                          width={16}
-                          xmlns="http://www.w3.org/2000/svg"
+                        <input
+                          accept="image/*"
+                          className="euiFilePicker__input"
+                          id="generated-id"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onDragLeave={[Function]}
+                          onDragOver={[Function]}
+                          onDrop={[Function]}
+                          onFocus={[Function]}
+                          type="file"
                         />
                         <div
-                          className="euiFilePicker__promptText"
+                          className="euiFilePicker__prompt"
                         >
-                          Select or drag and drop an image
+                          <svg
+                            aria-hidden="true"
+                            className="euiIcon euiIcon--large euiIcon-isLoading euiFilePicker__icon"
+                            focusable="false"
+                            height={16}
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                          <div
+                            className="euiFilePicker__promptText"
+                          >
+                            Select or drag and drop an image
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -768,116 +804,134 @@ Array [
                   className="euiFormRow euiFormRow--compressed"
                   id="generated-id-row"
                 >
-                  <div>
+                  <div
+                    className="euiFormRow__labelWrapper"
+                  >
                     <label
-                      className="euiFormLabel"
+                      className="euiFormLabel euiFormRow__label"
                       htmlFor="generated-id"
                     >
                       Name
                     </label>
                   </div>
                   <div
-                    className="euiFormControlLayout euiFormControlLayout--compressed"
+                    className="euiFormRow__fieldWrapper"
                   >
                     <div
-                      className="euiFormControlLayout__childrenWrapper"
+                      className="euiFormControlLayout"
                     >
-                      <input
-                        aria-describedby="generated-id-help"
-                        className="euiFieldText canvasCustomElementForm__name euiFieldText--compressed"
-                        id="generated-id"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onFocus={[Function]}
-                        required={true}
-                        type="text"
-                        value="My Chart"
-                      />
+                      <div
+                        className="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          aria-describedby="generated-id-help"
+                          className="euiFieldText canvasCustomElementForm__name"
+                          id="generated-id"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={true}
+                          type="text"
+                          value="My Chart"
+                        />
+                      </div>
+                    </div>
+                    <div
+                      className="euiFormHelpText euiFormRow__text"
+                      id="generated-id-help"
+                    >
+                      32 characters remaining
                     </div>
-                  </div>
-                  <div
-                    className="euiFormHelpText euiFormRow__text"
-                    id="generated-id-help"
-                  >
-                    32 characters remaining
                   </div>
                 </div>
                 <div
                   className="euiFormRow"
                   id="generated-id-row"
                 >
-                  <div>
+                  <div
+                    className="euiFormRow__labelWrapper"
+                  >
                     <label
-                      className="euiFormLabel"
+                      className="euiFormLabel euiFormRow__label"
                       htmlFor="generated-id"
                     >
                       Description
                     </label>
                   </div>
-                  <textarea
-                    aria-describedby="generated-id-help"
-                    className="euiTextArea euiTextArea--resizeVertical"
-                    id="generated-id"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    rows={2}
-                    value=""
-                  />
                   <div
-                    className="euiFormHelpText euiFormRow__text"
-                    id="generated-id-help"
+                    className="euiFormRow__fieldWrapper"
                   >
-                    100 characters remaining
+                    <textarea
+                      aria-describedby="generated-id-help"
+                      className="euiTextArea euiTextArea--resizeVertical"
+                      id="generated-id"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      rows={2}
+                      value=""
+                    />
+                    <div
+                      className="euiFormHelpText euiFormRow__text"
+                      id="generated-id-help"
+                    >
+                      100 characters remaining
+                    </div>
                   </div>
                 </div>
                 <div
                   className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
                   id="generated-id-row"
                 >
-                  <div>
+                  <div
+                    className="euiFormRow__labelWrapper"
+                  >
                     <label
-                      className="euiFormLabel"
+                      className="euiFormLabel euiFormRow__label"
                       htmlFor="generated-id"
                     >
                       Thumbnail image
                     </label>
                   </div>
                   <div
-                    className="euiFilePicker euiFilePicker--compressed canvasImageUpload"
+                    className="euiFormRow__fieldWrapper"
                   >
                     <div
-                      className="euiFilePicker__wrap"
+                      className="euiFilePicker euiFilePicker--large canvasImageUpload"
                     >
-                      <input
-                        accept="image/*"
-                        className="euiFilePicker__input"
-                        id="generated-id"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onDragLeave={[Function]}
-                        onDragOver={[Function]}
-                        onDrop={[Function]}
-                        onFocus={[Function]}
-                        type="file"
-                      />
                       <div
-                        className="euiFilePicker__prompt"
+                        className="euiFilePicker__wrap"
                       >
-                        <svg
-                          aria-hidden="true"
-                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFilePicker__icon"
-                          focusable="false"
-                          height={16}
-                          style={null}
-                          viewBox="0 0 16 16"
-                          width={16}
-                          xmlns="http://www.w3.org/2000/svg"
+                        <input
+                          accept="image/*"
+                          className="euiFilePicker__input"
+                          id="generated-id"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onDragLeave={[Function]}
+                          onDragOver={[Function]}
+                          onDrop={[Function]}
+                          onFocus={[Function]}
+                          type="file"
                         />
                         <div
-                          className="euiFilePicker__promptText"
+                          className="euiFilePicker__prompt"
                         >
-                          Select or drag and drop an image
+                          <svg
+                            aria-hidden="true"
+                            className="euiIcon euiIcon--large euiIcon-isLoading euiFilePicker__icon"
+                            focusable="false"
+                            height={16}
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                          <div
+                            className="euiFilePicker__promptText"
+                          >
+                            Select or drag and drop an image
+                          </div>
                         </div>
                       </div>
                     </div>
@@ -1105,116 +1159,134 @@ Array [
                   className="euiFormRow euiFormRow--compressed"
                   id="generated-id-row"
                 >
-                  <div>
+                  <div
+                    className="euiFormRow__labelWrapper"
+                  >
                     <label
-                      className="euiFormLabel"
+                      className="euiFormLabel euiFormRow__label"
                       htmlFor="generated-id"
                     >
                       Name
                     </label>
                   </div>
                   <div
-                    className="euiFormControlLayout euiFormControlLayout--compressed"
+                    className="euiFormRow__fieldWrapper"
                   >
                     <div
-                      className="euiFormControlLayout__childrenWrapper"
+                      className="euiFormControlLayout"
                     >
-                      <input
-                        aria-describedby="generated-id-help"
-                        className="euiFieldText canvasCustomElementForm__name euiFieldText--compressed"
-                        id="generated-id"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onFocus={[Function]}
-                        required={true}
-                        type="text"
-                        value=""
-                      />
+                      <div
+                        className="euiFormControlLayout__childrenWrapper"
+                      >
+                        <input
+                          aria-describedby="generated-id-help"
+                          className="euiFieldText canvasCustomElementForm__name"
+                          id="generated-id"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onFocus={[Function]}
+                          required={true}
+                          type="text"
+                          value=""
+                        />
+                      </div>
+                    </div>
+                    <div
+                      className="euiFormHelpText euiFormRow__text"
+                      id="generated-id-help"
+                    >
+                      40 characters remaining
                     </div>
-                  </div>
-                  <div
-                    className="euiFormHelpText euiFormRow__text"
-                    id="generated-id-help"
-                  >
-                    40 characters remaining
                   </div>
                 </div>
                 <div
                   className="euiFormRow"
                   id="generated-id-row"
                 >
-                  <div>
+                  <div
+                    className="euiFormRow__labelWrapper"
+                  >
                     <label
-                      className="euiFormLabel"
+                      className="euiFormLabel euiFormRow__label"
                       htmlFor="generated-id"
                     >
                       Description
                     </label>
                   </div>
-                  <textarea
-                    aria-describedby="generated-id-help"
-                    className="euiTextArea euiTextArea--resizeVertical"
-                    id="generated-id"
-                    onBlur={[Function]}
-                    onChange={[Function]}
-                    onFocus={[Function]}
-                    rows={2}
-                    value=""
-                  />
                   <div
-                    className="euiFormHelpText euiFormRow__text"
-                    id="generated-id-help"
+                    className="euiFormRow__fieldWrapper"
                   >
-                    100 characters remaining
+                    <textarea
+                      aria-describedby="generated-id-help"
+                      className="euiTextArea euiTextArea--resizeVertical"
+                      id="generated-id"
+                      onBlur={[Function]}
+                      onChange={[Function]}
+                      onFocus={[Function]}
+                      rows={2}
+                      value=""
+                    />
+                    <div
+                      className="euiFormHelpText euiFormRow__text"
+                      id="generated-id-help"
+                    >
+                      100 characters remaining
+                    </div>
                   </div>
                 </div>
                 <div
                   className="euiFormRow euiFormRow--compressed canvasCustomElementForm__thumbnail"
                   id="generated-id-row"
                 >
-                  <div>
+                  <div
+                    className="euiFormRow__labelWrapper"
+                  >
                     <label
-                      className="euiFormLabel"
+                      className="euiFormLabel euiFormRow__label"
                       htmlFor="generated-id"
                     >
                       Thumbnail image
                     </label>
                   </div>
                   <div
-                    className="euiFilePicker euiFilePicker--compressed canvasImageUpload"
+                    className="euiFormRow__fieldWrapper"
                   >
                     <div
-                      className="euiFilePicker__wrap"
+                      className="euiFilePicker euiFilePicker--large canvasImageUpload"
                     >
-                      <input
-                        accept="image/*"
-                        className="euiFilePicker__input"
-                        id="generated-id"
-                        onBlur={[Function]}
-                        onChange={[Function]}
-                        onDragLeave={[Function]}
-                        onDragOver={[Function]}
-                        onDrop={[Function]}
-                        onFocus={[Function]}
-                        type="file"
-                      />
                       <div
-                        className="euiFilePicker__prompt"
+                        className="euiFilePicker__wrap"
                       >
-                        <svg
-                          aria-hidden="true"
-                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFilePicker__icon"
-                          focusable="false"
-                          height={16}
-                          style={null}
-                          viewBox="0 0 16 16"
-                          width={16}
-                          xmlns="http://www.w3.org/2000/svg"
+                        <input
+                          accept="image/*"
+                          className="euiFilePicker__input"
+                          id="generated-id"
+                          onBlur={[Function]}
+                          onChange={[Function]}
+                          onDragLeave={[Function]}
+                          onDragOver={[Function]}
+                          onDrop={[Function]}
+                          onFocus={[Function]}
+                          type="file"
                         />
                         <div
-                          className="euiFilePicker__promptText"
+                          className="euiFilePicker__prompt"
                         >
-                          Select or drag and drop an image
+                          <svg
+                            aria-hidden="true"
+                            className="euiIcon euiIcon--large euiIcon-isLoading euiFilePicker__icon"
+                            focusable="false"
+                            height={16}
+                            style={null}
+                            viewBox="0 0 16 16"
+                            width={16}
+                            xmlns="http://www.w3.org/2000/svg"
+                          />
+                          <div
+                            className="euiFilePicker__promptText"
+                          >
+                            Select or drag and drop an image
+                          </div>
                         </div>
                       </div>
                     </div>
diff --git a/x-pack/legacy/plugins/canvas/public/components/expression_input/__examples__/__snapshots__/expression_input.examples.storyshot b/x-pack/legacy/plugins/canvas/public/components/expression_input/__examples__/__snapshots__/expression_input.examples.storyshot
index 53aba29fad22c1..99d5dc3c115be1 100644
--- a/x-pack/legacy/plugins/canvas/public/components/expression_input/__examples__/__snapshots__/expression_input.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/components/expression_input/__examples__/__snapshots__/expression_input.examples.storyshot
@@ -9,21 +9,25 @@ exports[`Storyshots components/ExpressionInput default 1`] = `
     id="generated-id-row"
   >
     <div
-      className="canvasExpressionInput__editor"
-      id="generated-id"
-      onBlur={[Function]}
-      onFocus={[Function]}
+      className="euiFormRow__fieldWrapper"
     >
       <div
-        className="react-monaco-editor-container"
-        style={
-          Object {
-            "height": "100%",
-            "width": "100%",
+        className="canvasExpressionInput__editor"
+        id="generated-id"
+        onBlur={[Function]}
+        onFocus={[Function]}
+      >
+        <div
+          className="react-monaco-editor-container"
+          style={
+            Object {
+              "height": "100%",
+              "width": "100%",
+            }
           }
-        }
-      />
-      <div />
+        />
+        <div />
+      </div>
     </div>
   </div>
 </div>
diff --git a/x-pack/legacy/plugins/canvas/public/components/file_upload/__snapshots__/file_upload.examples.storyshot b/x-pack/legacy/plugins/canvas/public/components/file_upload/__snapshots__/file_upload.examples.storyshot
index 097dad3cf08946..085662eeb65c7f 100644
--- a/x-pack/legacy/plugins/canvas/public/components/file_upload/__snapshots__/file_upload.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/components/file_upload/__snapshots__/file_upload.examples.storyshot
@@ -2,7 +2,7 @@
 
 exports[`Storyshots components/FileUpload default 1`] = `
 <div
-  className="euiFilePicker euiFilePicker--compressed canvasFileUpload"
+  className="euiFilePicker euiFilePicker--large euiFilePicker--compressed canvasFileUpload"
 >
   <div
     className="euiFilePicker__wrap"
@@ -21,7 +21,7 @@ exports[`Storyshots components/FileUpload default 1`] = `
     >
       <svg
         aria-hidden="true"
-        className="euiIcon euiIcon--medium euiIcon-isLoading euiFilePicker__icon"
+        className="euiIcon euiIcon--large euiIcon-isLoading euiFilePicker__icon"
         focusable="false"
         height={16}
         style={null}
diff --git a/x-pack/legacy/plugins/canvas/public/components/page_config/page_config.js b/x-pack/legacy/plugins/canvas/public/components/page_config/page_config.js
index 5b9450dc6fc049..276aad3c2786a4 100644
--- a/x-pack/legacy/plugins/canvas/public/components/page_config/page_config.js
+++ b/x-pack/legacy/plugins/canvas/public/components/page_config/page_config.js
@@ -30,7 +30,7 @@ export const PageConfig = ({
         switching between pages (for example, when moving from the first page to the second
         page, we use the second page's transition) */}
       {pageIndex > 0 ? (
-        <div>
+        <Fragment>
           <EuiFormRow label="Transition" compressed>
             <EuiSelect
               value={transition ? transition.name : ''}
@@ -55,7 +55,7 @@ export const PageConfig = ({
           ) : (
             ''
           )}
-        </div>
+        </Fragment>
       ) : (
         ''
       )}
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_config/workpad_config.js b/x-pack/legacy/plugins/canvas/public/components/workpad_config/workpad_config.js
index 1f3ed924e9ad03..7001d043c5a4e9 100644
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_config/workpad_config.js
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad_config/workpad_config.js
@@ -74,6 +74,8 @@ export class WorkpadConfig extends PureComponent {
           <EuiFieldText value={name} onChange={e => setName(e.target.value)} />
         </EuiFormRow>
 
+        <EuiSpacer size="s" />
+
         <EuiFlexGroup gutterSize="s" alignItems="center">
           <EuiFlexItem>
             <EuiFormRow label="Width" compressed>
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/custom_interval.js b/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/custom_interval.js
index e747f2c145d217..6f4a8dd8925752 100644
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/custom_interval.js
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad_header/control_settings/custom_interval.js
@@ -30,7 +30,12 @@ export const CustomInterval = ({ gutterSize, buttonSize, onSubmit, defaultValue
             helpText="Use shorthand notation, like 30s, 10m, or 1h"
             compressed
           >
-            <EuiFieldText isInvalid={isInvalid} value={customInterval} onChange={handleChange} />
+            <EuiFieldText
+              isInvalid={isInvalid}
+              value={customInterval}
+              onChange={handleChange}
+              compressed
+            />
           </EuiFormRow>
         </EuiFlexItem>
 
diff --git a/x-pack/legacy/plugins/canvas/public/components/workpad_loader/workpad_loader.js b/x-pack/legacy/plugins/canvas/public/components/workpad_loader/workpad_loader.js
index 149f99f1b41f26..25d5ba88cc461b 100644
--- a/x-pack/legacy/plugins/canvas/public/components/workpad_loader/workpad_loader.js
+++ b/x-pack/legacy/plugins/canvas/public/components/workpad_loader/workpad_loader.js
@@ -311,6 +311,7 @@ export class WorkpadLoader extends React.PureComponent {
 
     let uploadButton = (
       <EuiFilePicker
+        display="default"
         compressed
         className="canvasWorkpad__upload--compressed"
         initialPromptText="Import workpad JSON file"
diff --git a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/extended_template.examples.storyshot b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/extended_template.examples.storyshot
index 1bd71e5f4630f4..0ee475f427ac45 100644
--- a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/extended_template.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/container_style/__examples__/__snapshots__/extended_template.examples.storyshot
@@ -33,29 +33,35 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
           className="euiFormRow euiFormRow--compressed"
           id="generated-id-row"
         >
-          <div>
+          <div
+            className="euiFormRow__labelWrapper"
+          >
             <label
-              className="euiFormLabel"
+              className="euiFormLabel euiFormRow__label"
               htmlFor="generated-id"
             >
               Padding
             </label>
           </div>
           <div
-            className="euiFormControlLayout euiFormControlLayout--compressed"
+            className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiFormControlLayout__childrenWrapper"
+              className="euiFormControlLayout"
             >
-              <input
-                className="euiFieldNumber euiFieldNumber--compressed"
-                id="generated-id"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                type="number"
-                value={0}
-              />
+              <div
+                className="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  className="euiFieldNumber"
+                  id="generated-id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  type="number"
+                  value={0}
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -67,77 +73,83 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
           className="euiFormRow euiFormRow--compressed"
           id="generated-id-row"
         >
-          <div>
+          <div
+            className="euiFormRow__labelWrapper"
+          >
             <label
-              className="euiFormLabel"
+              className="euiFormLabel euiFormRow__label"
               htmlFor="generated-id"
             >
               Opacity
             </label>
           </div>
           <div
-            className="euiFormControlLayout euiFormControlLayout--compressed"
+            className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiFormControlLayout__childrenWrapper"
+              className="euiFormControlLayout"
             >
-              <select
-                className="euiSelect euiSelect--compressed"
-                id="generated-id"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                onMouseUp={[Function]}
-                value={1}
+              <div
+                className="euiFormControlLayout__childrenWrapper"
               >
-                <option
+                <select
+                  className="euiSelect"
+                  id="generated-id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  onMouseUp={[Function]}
                   value={1}
                 >
-                  100%
-                </option>
-                <option
-                  value={0.9}
-                >
-                  90%
-                </option>
-                <option
-                  value={0.7}
-                >
-                  70%
-                </option>
-                <option
-                  value={0.5}
-                >
-                  50%
-                </option>
-                <option
-                  value={0.3}
-                >
-                  30%
-                </option>
-                <option
-                  value={0.1}
-                >
-                  10%
-                </option>
-              </select>
-              <div
-                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-              >
-                <span
-                  className="euiFormControlLayoutCustomIcon"
+                  <option
+                    value={1}
+                  >
+                    100%
+                  </option>
+                  <option
+                    value={0.9}
+                  >
+                    90%
+                  </option>
+                  <option
+                    value={0.7}
+                  >
+                    70%
+                  </option>
+                  <option
+                    value={0.5}
+                  >
+                    50%
+                  </option>
+                  <option
+                    value={0.3}
+                  >
+                    30%
+                  </option>
+                  <option
+                    value={0.1}
+                  >
+                    10%
+                  </option>
+                </select>
+                <div
+                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                 >
-                  <svg
-                    aria-hidden="true"
-                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                    focusable="false"
-                    height={16}
-                    style={null}
-                    viewBox="0 0 16 16"
-                    width={16}
-                    xmlns="http://www.w3.org/2000/svg"
-                  />
-                </span>
+                  <span
+                    className="euiFormControlLayoutCustomIcon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                      focusable="false"
+                      height={16}
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -150,57 +162,63 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
           className="euiFormRow euiFormRow--compressed"
           id="generated-id-row"
         >
-          <div>
+          <div
+            className="euiFormRow__labelWrapper"
+          >
             <label
-              className="euiFormLabel"
+              className="euiFormLabel euiFormRow__label"
               htmlFor="generated-id"
             >
               Overflow
             </label>
           </div>
           <div
-            className="euiFormControlLayout euiFormControlLayout--compressed"
+            className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiFormControlLayout__childrenWrapper"
+              className="euiFormControlLayout"
             >
-              <select
-                className="euiSelect euiSelect--compressed"
-                id="generated-id"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                onMouseUp={[Function]}
-                value="visible"
+              <div
+                className="euiFormControlLayout__childrenWrapper"
               >
-                <option
-                  value="hidden"
-                >
-                  Hidden
-                </option>
-                <option
+                <select
+                  className="euiSelect"
+                  id="generated-id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  onMouseUp={[Function]}
                   value="visible"
                 >
-                  Visible
-                </option>
-              </select>
-              <div
-                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-              >
-                <span
-                  className="euiFormControlLayoutCustomIcon"
+                  <option
+                    value="hidden"
+                  >
+                    Hidden
+                  </option>
+                  <option
+                    value="visible"
+                  >
+                    Visible
+                  </option>
+                </select>
+                <div
+                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                 >
-                  <svg
-                    aria-hidden="true"
-                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                    focusable="false"
-                    height={16}
-                    style={null}
-                    viewBox="0 0 16 16"
-                    width={16}
-                    xmlns="http://www.w3.org/2000/svg"
-                  />
-                </span>
+                  <span
+                    className="euiFormControlLayoutCustomIcon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                      focusable="false"
+                      height={16}
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -231,29 +249,35 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
           className="euiFormRow euiFormRow--compressed"
           id="generated-id-row"
         >
-          <div>
+          <div
+            className="euiFormRow__labelWrapper"
+          >
             <label
-              className="euiFormLabel"
+              className="euiFormLabel euiFormRow__label"
               htmlFor="generated-id"
             >
               Thickness
             </label>
           </div>
           <div
-            className="euiFormControlLayout euiFormControlLayout--compressed"
+            className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiFormControlLayout__childrenWrapper"
+              className="euiFormControlLayout"
             >
-              <input
-                className="euiFieldNumber euiFieldNumber--compressed"
-                id="generated-id"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                type="number"
-                value={1}
-              />
+              <div
+                className="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  className="euiFieldNumber"
+                  id="generated-id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  type="number"
+                  value={1}
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -265,89 +289,95 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
           className="euiFormRow euiFormRow--compressed"
           id="generated-id-row"
         >
-          <div>
+          <div
+            className="euiFormRow__labelWrapper"
+          >
             <label
-              className="euiFormLabel"
+              className="euiFormLabel euiFormRow__label"
               htmlFor="generated-id"
             >
               Style
             </label>
           </div>
           <div
-            className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
-            onKeyDown={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
+            className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiPopover__anchor"
+              className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+              onKeyDown={[Function]}
+              onMouseDown={[Function]}
+              onMouseUp={[Function]}
+              onTouchEnd={[Function]}
+              onTouchStart={[Function]}
             >
-              <input
-                id="generated-id"
-                type="hidden"
-                value="solid"
-              />
               <div
-                className="euiFormControlLayout euiFormControlLayout--compressed"
+                className="euiPopover__anchor"
               >
+                <input
+                  id="generated-id"
+                  type="hidden"
+                  value="solid"
+                />
                 <div
-                  className="euiFormControlLayout__childrenWrapper"
+                  className="euiFormControlLayout"
                 >
-                  <span
-                    className="euiScreenReaderOnly"
-                    id="generated-id"
-                  >
-                    Select an option: 
-                    <div
-                      style={
-                        Object {
-                          "border": "4px solid",
-                          "height": 16,
-                        }
-                      }
-                    />
-                    , is selected
-                  </span>
-                  <button
-                    aria-haspopup="true"
-                    aria-labelledby="generated-id generated-id"
-                    aria-selected={true}
-                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    role="option"
-                    type="button"
-                  >
-                    <div
-                      style={
-                        Object {
-                          "border": "4px solid",
-                          "height": 16,
-                        }
-                      }
-                    />
-                  </button>
                   <div
-                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                    className="euiFormControlLayout__childrenWrapper"
                   >
                     <span
-                      className="euiFormControlLayoutCustomIcon"
+                      className="euiScreenReaderOnly"
+                      id="generated-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                        focusable="false"
-                        height={16}
-                        style={null}
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
+                      Select an option: 
+                      <div
+                        style={
+                          Object {
+                            "border": "4px solid",
+                            "height": 16,
+                          }
+                        }
                       />
+                      , is selected
                     </span>
+                    <button
+                      aria-haspopup="true"
+                      aria-labelledby="generated-id generated-id"
+                      aria-selected={true}
+                      className="euiSuperSelectControl"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      role="option"
+                      type="button"
+                    >
+                      <div
+                        style={
+                          Object {
+                            "border": "4px solid",
+                            "height": 16,
+                          }
+                        }
+                      />
+                    </button>
+                    <div
+                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                    >
+                      <span
+                        className="euiFormControlLayoutCustomIcon"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                          focusable="false"
+                          height={16}
+                          style={null}
+                          viewBox="0 0 16 16"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -362,29 +392,35 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
           className="euiFormRow euiFormRow--compressed"
           id="generated-id-row"
         >
-          <div>
+          <div
+            className="euiFormRow__labelWrapper"
+          >
             <label
-              className="euiFormLabel"
+              className="euiFormLabel euiFormRow__label"
               htmlFor="generated-id"
             >
               Radius
             </label>
           </div>
           <div
-            className="euiFormControlLayout euiFormControlLayout--compressed"
+            className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiFormControlLayout__childrenWrapper"
+              className="euiFormControlLayout"
             >
-              <input
-                className="euiFieldNumber euiFieldNumber--compressed"
-                id="generated-id"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                type="number"
-                value={0}
-              />
+              <div
+                className="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  className="euiFieldNumber"
+                  id="generated-id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  type="number"
+                  value={0}
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -401,53 +437,59 @@ exports[`Storyshots arguments/ContainerStyle extended 1`] = `
             }
           }
         >
-          <div>
+          <div
+            className="euiFormRow__labelWrapper"
+          >
             <label
-              className="euiFormLabel"
+              className="euiFormLabel euiFormRow__label"
               htmlFor="generated-id"
             >
               Color
             </label>
           </div>
           <div
-            className="euiPopover euiPopover--anchorUpCenter"
-            container={null}
-            id="color-picker-popover"
-            onKeyDown={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
+            className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiPopover__anchor"
+              className="euiPopover euiPopover--anchorUpCenter"
+              container={null}
+              id="color-picker-popover"
+              onKeyDown={[Function]}
+              onMouseDown={[Function]}
+              onMouseUp={[Function]}
+              onTouchEnd={[Function]}
+              onTouchStart={[Function]}
             >
-              <button
-                className="euiLink euiLink--primary"
-                onClick={[Function]}
-                style={
-                  Object {
-                    "fontSize": 0,
-                  }
-                }
-                type="button"
+              <div
+                className="euiPopover__anchor"
               >
-                <div
-                  className="canvasColorDot"
+                <button
+                  className="euiLink euiLink--primary"
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "fontSize": 0,
+                    }
+                  }
+                  type="button"
                 >
                   <div
-                    className="canvasColorDot__background canvasCheckered"
-                  />
-                  <div
-                    className="canvasColorDot__foreground"
-                    style={
-                      Object {
-                        "background": "#fff",
+                    className="canvasColorDot"
+                  >
+                    <div
+                      className="canvasColorDot__background canvasCheckered"
+                    />
+                    <div
+                      className="canvasColorDot__foreground"
+                      style={
+                        Object {
+                          "background": "#fff",
+                        }
                       }
-                    }
-                  />
-                </div>
-              </button>
+                    />
+                  </div>
+                </button>
+              </div>
             </div>
           </div>
         </div>
@@ -478,29 +520,35 @@ exports[`Storyshots arguments/ContainerStyle/components appearance form 1`] = `
         className="euiFormRow euiFormRow--compressed"
         id="generated-id-row"
       >
-        <div>
+        <div
+          className="euiFormRow__labelWrapper"
+        >
           <label
-            className="euiFormLabel"
+            className="euiFormLabel euiFormRow__label"
             htmlFor="generated-id"
           >
             Padding
           </label>
         </div>
         <div
-          className="euiFormControlLayout euiFormControlLayout--compressed"
+          className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiFormControlLayout__childrenWrapper"
+            className="euiFormControlLayout"
           >
-            <input
-              className="euiFieldNumber euiFieldNumber--compressed"
-              id="generated-id"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              type="number"
-              value={4}
-            />
+            <div
+              className="euiFormControlLayout__childrenWrapper"
+            >
+              <input
+                className="euiFieldNumber"
+                id="generated-id"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                type="number"
+                value={4}
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -512,77 +560,83 @@ exports[`Storyshots arguments/ContainerStyle/components appearance form 1`] = `
         className="euiFormRow euiFormRow--compressed"
         id="generated-id-row"
       >
-        <div>
+        <div
+          className="euiFormRow__labelWrapper"
+        >
           <label
-            className="euiFormLabel"
+            className="euiFormLabel euiFormRow__label"
             htmlFor="generated-id"
           >
             Opacity
           </label>
         </div>
         <div
-          className="euiFormControlLayout euiFormControlLayout--compressed"
+          className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiFormControlLayout__childrenWrapper"
+            className="euiFormControlLayout"
           >
-            <select
-              className="euiSelect euiSelect--compressed"
-              id="generated-id"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              onMouseUp={[Function]}
-              value="1"
-            >
-              <option
-                value={1}
-              >
-                100%
-              </option>
-              <option
-                value={0.9}
-              >
-                90%
-              </option>
-              <option
-                value={0.7}
-              >
-                70%
-              </option>
-              <option
-                value={0.5}
-              >
-                50%
-              </option>
-              <option
-                value={0.3}
-              >
-                30%
-              </option>
-              <option
-                value={0.1}
-              >
-                10%
-              </option>
-            </select>
             <div
-              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+              className="euiFormControlLayout__childrenWrapper"
             >
-              <span
-                className="euiFormControlLayoutCustomIcon"
+              <select
+                className="euiSelect"
+                id="generated-id"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                onMouseUp={[Function]}
+                value="1"
               >
-                <svg
-                  aria-hidden="true"
-                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                  focusable="false"
-                  height={16}
-                  style={null}
-                  viewBox="0 0 16 16"
-                  width={16}
-                  xmlns="http://www.w3.org/2000/svg"
-                />
-              </span>
+                <option
+                  value={1}
+                >
+                  100%
+                </option>
+                <option
+                  value={0.9}
+                >
+                  90%
+                </option>
+                <option
+                  value={0.7}
+                >
+                  70%
+                </option>
+                <option
+                  value={0.5}
+                >
+                  50%
+                </option>
+                <option
+                  value={0.3}
+                >
+                  30%
+                </option>
+                <option
+                  value={0.1}
+                >
+                  10%
+                </option>
+              </select>
+              <div
+                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+              >
+                <span
+                  className="euiFormControlLayoutCustomIcon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                    focusable="false"
+                    height={16}
+                    style={null}
+                    viewBox="0 0 16 16"
+                    width={16}
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -595,57 +649,63 @@ exports[`Storyshots arguments/ContainerStyle/components appearance form 1`] = `
         className="euiFormRow euiFormRow--compressed"
         id="generated-id-row"
       >
-        <div>
+        <div
+          className="euiFormRow__labelWrapper"
+        >
           <label
-            className="euiFormLabel"
+            className="euiFormLabel euiFormRow__label"
             htmlFor="generated-id"
           >
             Overflow
           </label>
         </div>
         <div
-          className="euiFormControlLayout euiFormControlLayout--compressed"
+          className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiFormControlLayout__childrenWrapper"
+            className="euiFormControlLayout"
           >
-            <select
-              className="euiSelect euiSelect--compressed"
-              id="generated-id"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              onMouseUp={[Function]}
-              value="visible"
+            <div
+              className="euiFormControlLayout__childrenWrapper"
             >
-              <option
-                value="hidden"
-              >
-                Hidden
-              </option>
-              <option
+              <select
+                className="euiSelect"
+                id="generated-id"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                onMouseUp={[Function]}
                 value="visible"
               >
-                Visible
-              </option>
-            </select>
-            <div
-              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-            >
-              <span
-                className="euiFormControlLayoutCustomIcon"
+                <option
+                  value="hidden"
+                >
+                  Hidden
+                </option>
+                <option
+                  value="visible"
+                >
+                  Visible
+                </option>
+              </select>
+              <div
+                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
               >
-                <svg
-                  aria-hidden="true"
-                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                  focusable="false"
-                  height={16}
-                  style={null}
-                  viewBox="0 0 16 16"
-                  width={16}
-                  xmlns="http://www.w3.org/2000/svg"
-                />
-              </span>
+                <span
+                  className="euiFormControlLayoutCustomIcon"
+                >
+                  <svg
+                    aria-hidden="true"
+                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                    focusable="false"
+                    height={16}
+                    style={null}
+                    viewBox="0 0 16 16"
+                    width={16}
+                    xmlns="http://www.w3.org/2000/svg"
+                  />
+                </span>
+              </div>
             </div>
           </div>
         </div>
@@ -675,29 +735,35 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
         className="euiFormRow euiFormRow--compressed"
         id="generated-id-row"
       >
-        <div>
+        <div
+          className="euiFormRow__labelWrapper"
+        >
           <label
-            className="euiFormLabel"
+            className="euiFormLabel euiFormRow__label"
             htmlFor="generated-id"
           >
             Thickness
           </label>
         </div>
         <div
-          className="euiFormControlLayout euiFormControlLayout--compressed"
+          className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiFormControlLayout__childrenWrapper"
+            className="euiFormControlLayout"
           >
-            <input
-              className="euiFieldNumber euiFieldNumber--compressed"
-              id="generated-id"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              type="number"
-              value={1}
-            />
+            <div
+              className="euiFormControlLayout__childrenWrapper"
+            >
+              <input
+                className="euiFieldNumber"
+                id="generated-id"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                type="number"
+                value={1}
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -709,93 +775,99 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
         className="euiFormRow euiFormRow--compressed"
         id="generated-id-row"
       >
-        <div>
+        <div
+          className="euiFormRow__labelWrapper"
+        >
           <label
-            className="euiFormLabel"
+            className="euiFormLabel euiFormRow__label"
             htmlFor="generated-id"
           >
             Style
           </label>
         </div>
         <div
-          className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
-          onKeyDown={[Function]}
-          onMouseDown={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchStart={[Function]}
+          className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiPopover__anchor"
+            className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+            onKeyDown={[Function]}
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
           >
-            <input
-              id="generated-id"
-              type="hidden"
-              value="dotted"
-            />
             <div
-              className="euiFormControlLayout euiFormControlLayout--compressed"
+              className="euiPopover__anchor"
             >
+              <input
+                id="generated-id"
+                type="hidden"
+                value="dotted"
+              />
               <div
-                className="euiFormControlLayout__childrenWrapper"
+                className="euiFormControlLayout"
               >
-                <span
-                  className="euiScreenReaderOnly"
-                  id="generated-id"
-                >
-                  Select an option: 
-                  <div
-                    style={
-                      Object {
-                        "border": "4px dotted",
-                        "height": 16,
-                      }
-                    }
-                  />
-                  , is selected
-                </span>
-                <button
-                  aria-haspopup="true"
-                  aria-labelledby="generated-id generated-id"
-                  aria-selected={true}
-                  className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  role="option"
-                  type="button"
-                >
-                  <div
-                    style={
-                      Object {
-                        "border": "4px dotted",
-                        "height": 16,
-                      }
-                    }
-                  />
-                </button>
                 <div
-                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                  className="euiFormControlLayout__childrenWrapper"
                 >
                   <span
-                    className="euiFormControlLayoutCustomIcon"
+                    className="euiScreenReaderOnly"
+                    id="generated-id"
                   >
-                    <svg
-                      aria-hidden="true"
-                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                      focusable="false"
-                      height={16}
-                      style={null}
-                      viewBox="0 0 16 16"
-                      width={16}
-                      xmlns="http://www.w3.org/2000/svg"
-                    />
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
+                    Select an option: 
+                    <div
+                      style={
+                        Object {
+                          "border": "4px dotted",
+                          "height": 16,
+                        }
+                      }
+                    />
+                    , is selected
+                  </span>
+                  <button
+                    aria-haspopup="true"
+                    aria-labelledby="generated-id generated-id"
+                    aria-selected={true}
+                    className="euiSuperSelectControl"
+                    onBlur={[Function]}
+                    onClick={[Function]}
+                    onFocus={[Function]}
+                    onKeyDown={[Function]}
+                    role="option"
+                    type="button"
+                  >
+                    <div
+                      style={
+                        Object {
+                          "border": "4px dotted",
+                          "height": 16,
+                        }
+                      }
+                    />
+                  </button>
+                  <div
+                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                  >
+                    <span
+                      className="euiFormControlLayoutCustomIcon"
+                    >
+                      <svg
+                        aria-hidden="true"
+                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                        focusable="false"
+                        height={16}
+                        style={null}
+                        viewBox="0 0 16 16"
+                        width={16}
+                        xmlns="http://www.w3.org/2000/svg"
+                      />
+                    </span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -806,29 +878,35 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
         className="euiFormRow euiFormRow--compressed"
         id="generated-id-row"
       >
-        <div>
+        <div
+          className="euiFormRow__labelWrapper"
+        >
           <label
-            className="euiFormLabel"
+            className="euiFormLabel euiFormRow__label"
             htmlFor="generated-id"
           >
             Radius
           </label>
         </div>
         <div
-          className="euiFormControlLayout euiFormControlLayout--compressed"
+          className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiFormControlLayout__childrenWrapper"
+            className="euiFormControlLayout"
           >
-            <input
-              className="euiFieldNumber euiFieldNumber--compressed"
-              id="generated-id"
-              onBlur={[Function]}
-              onChange={[Function]}
-              onFocus={[Function]}
-              type="number"
-              value={1}
-            />
+            <div
+              className="euiFormControlLayout__childrenWrapper"
+            >
+              <input
+                className="euiFieldNumber"
+                id="generated-id"
+                onBlur={[Function]}
+                onChange={[Function]}
+                onFocus={[Function]}
+                type="number"
+                value={1}
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -845,53 +923,59 @@ exports[`Storyshots arguments/ContainerStyle/components border form 1`] = `
           }
         }
       >
-        <div>
+        <div
+          className="euiFormRow__labelWrapper"
+        >
           <label
-            className="euiFormLabel"
+            className="euiFormLabel euiFormRow__label"
             htmlFor="generated-id"
           >
             Color
           </label>
         </div>
         <div
-          className="euiPopover euiPopover--anchorUpCenter"
-          container={null}
-          id="color-picker-popover"
-          onKeyDown={[Function]}
-          onMouseDown={[Function]}
-          onMouseUp={[Function]}
-          onTouchEnd={[Function]}
-          onTouchStart={[Function]}
+          className="euiFormRow__fieldWrapper"
         >
           <div
-            className="euiPopover__anchor"
+            className="euiPopover euiPopover--anchorUpCenter"
+            container={null}
+            id="color-picker-popover"
+            onKeyDown={[Function]}
+            onMouseDown={[Function]}
+            onMouseUp={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
           >
-            <button
-              className="euiLink euiLink--primary"
-              onClick={[Function]}
-              style={
-                Object {
-                  "fontSize": 0,
-                }
-              }
-              type="button"
+            <div
+              className="euiPopover__anchor"
             >
-              <div
-                className="canvasColorDot"
+              <button
+                className="euiLink euiLink--primary"
+                onClick={[Function]}
+                style={
+                  Object {
+                    "fontSize": 0,
+                  }
+                }
+                type="button"
               >
                 <div
-                  className="canvasColorDot__background canvasCheckered"
-                />
-                <div
-                  className="canvasColorDot__foreground"
-                  style={
-                    Object {
-                      "background": "#000",
+                  className="canvasColorDot"
+                >
+                  <div
+                    className="canvasColorDot__background canvasCheckered"
+                  />
+                  <div
+                    className="canvasColorDot__foreground"
+                    style={
+                      Object {
+                        "background": "#000",
+                      }
                     }
-                  }
-                />
-              </div>
-            </button>
+                  />
+                </div>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -933,29 +1017,35 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
           className="euiFormRow euiFormRow--compressed"
           id="generated-id-row"
         >
-          <div>
+          <div
+            className="euiFormRow__labelWrapper"
+          >
             <label
-              className="euiFormLabel"
+              className="euiFormLabel euiFormRow__label"
               htmlFor="generated-id"
             >
               Padding
             </label>
           </div>
           <div
-            className="euiFormControlLayout euiFormControlLayout--compressed"
+            className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiFormControlLayout__childrenWrapper"
+              className="euiFormControlLayout"
             >
-              <input
-                className="euiFieldNumber euiFieldNumber--compressed"
-                id="generated-id"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                type="number"
-                value={0}
-              />
+              <div
+                className="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  className="euiFieldNumber"
+                  id="generated-id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  type="number"
+                  value={0}
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -967,77 +1057,83 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
           className="euiFormRow euiFormRow--compressed"
           id="generated-id-row"
         >
-          <div>
+          <div
+            className="euiFormRow__labelWrapper"
+          >
             <label
-              className="euiFormLabel"
+              className="euiFormLabel euiFormRow__label"
               htmlFor="generated-id"
             >
               Opacity
             </label>
           </div>
           <div
-            className="euiFormControlLayout euiFormControlLayout--compressed"
+            className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiFormControlLayout__childrenWrapper"
+              className="euiFormControlLayout"
             >
-              <select
-                className="euiSelect euiSelect--compressed"
-                id="generated-id"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                onMouseUp={[Function]}
-                value={1}
+              <div
+                className="euiFormControlLayout__childrenWrapper"
               >
-                <option
+                <select
+                  className="euiSelect"
+                  id="generated-id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  onMouseUp={[Function]}
                   value={1}
                 >
-                  100%
-                </option>
-                <option
-                  value={0.9}
-                >
-                  90%
-                </option>
-                <option
-                  value={0.7}
-                >
-                  70%
-                </option>
-                <option
-                  value={0.5}
-                >
-                  50%
-                </option>
-                <option
-                  value={0.3}
-                >
-                  30%
-                </option>
-                <option
-                  value={0.1}
-                >
-                  10%
-                </option>
-              </select>
-              <div
-                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-              >
-                <span
-                  className="euiFormControlLayoutCustomIcon"
+                  <option
+                    value={1}
+                  >
+                    100%
+                  </option>
+                  <option
+                    value={0.9}
+                  >
+                    90%
+                  </option>
+                  <option
+                    value={0.7}
+                  >
+                    70%
+                  </option>
+                  <option
+                    value={0.5}
+                  >
+                    50%
+                  </option>
+                  <option
+                    value={0.3}
+                  >
+                    30%
+                  </option>
+                  <option
+                    value={0.1}
+                  >
+                    10%
+                  </option>
+                </select>
+                <div
+                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                 >
-                  <svg
-                    aria-hidden="true"
-                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                    focusable="false"
-                    height={16}
-                    style={null}
-                    viewBox="0 0 16 16"
-                    width={16}
-                    xmlns="http://www.w3.org/2000/svg"
-                  />
-                </span>
+                  <span
+                    className="euiFormControlLayoutCustomIcon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                      focusable="false"
+                      height={16}
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -1050,57 +1146,63 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
           className="euiFormRow euiFormRow--compressed"
           id="generated-id-row"
         >
-          <div>
+          <div
+            className="euiFormRow__labelWrapper"
+          >
             <label
-              className="euiFormLabel"
+              className="euiFormLabel euiFormRow__label"
               htmlFor="generated-id"
             >
               Overflow
             </label>
           </div>
           <div
-            className="euiFormControlLayout euiFormControlLayout--compressed"
+            className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiFormControlLayout__childrenWrapper"
+              className="euiFormControlLayout"
             >
-              <select
-                className="euiSelect euiSelect--compressed"
-                id="generated-id"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                onMouseUp={[Function]}
-                value="visible"
+              <div
+                className="euiFormControlLayout__childrenWrapper"
               >
-                <option
-                  value="hidden"
-                >
-                  Hidden
-                </option>
-                <option
+                <select
+                  className="euiSelect"
+                  id="generated-id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  onMouseUp={[Function]}
                   value="visible"
                 >
-                  Visible
-                </option>
-              </select>
-              <div
-                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-              >
-                <span
-                  className="euiFormControlLayoutCustomIcon"
+                  <option
+                    value="hidden"
+                  >
+                    Hidden
+                  </option>
+                  <option
+                    value="visible"
+                  >
+                    Visible
+                  </option>
+                </select>
+                <div
+                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                 >
-                  <svg
-                    aria-hidden="true"
-                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                    focusable="false"
-                    height={16}
-                    style={null}
-                    viewBox="0 0 16 16"
-                    width={16}
-                    xmlns="http://www.w3.org/2000/svg"
-                  />
-                </span>
+                  <span
+                    className="euiFormControlLayoutCustomIcon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                      focusable="false"
+                      height={16}
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -1131,29 +1233,35 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
           className="euiFormRow euiFormRow--compressed"
           id="generated-id-row"
         >
-          <div>
+          <div
+            className="euiFormRow__labelWrapper"
+          >
             <label
-              className="euiFormLabel"
+              className="euiFormLabel euiFormRow__label"
               htmlFor="generated-id"
             >
               Thickness
             </label>
           </div>
           <div
-            className="euiFormControlLayout euiFormControlLayout--compressed"
+            className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiFormControlLayout__childrenWrapper"
+              className="euiFormControlLayout"
             >
-              <input
-                className="euiFieldNumber euiFieldNumber--compressed"
-                id="generated-id"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                type="number"
-                value={1}
-              />
+              <div
+                className="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  className="euiFieldNumber"
+                  id="generated-id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  type="number"
+                  value={1}
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -1165,89 +1273,95 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
           className="euiFormRow euiFormRow--compressed"
           id="generated-id-row"
         >
-          <div>
+          <div
+            className="euiFormRow__labelWrapper"
+          >
             <label
-              className="euiFormLabel"
+              className="euiFormLabel euiFormRow__label"
               htmlFor="generated-id"
             >
               Style
             </label>
           </div>
           <div
-            className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
-            onKeyDown={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
+            className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiPopover__anchor"
+              className="euiPopover euiPopover--anchorDownCenter euiPopover--displayBlock euiSuperSelect"
+              onKeyDown={[Function]}
+              onMouseDown={[Function]}
+              onMouseUp={[Function]}
+              onTouchEnd={[Function]}
+              onTouchStart={[Function]}
             >
-              <input
-                id="generated-id"
-                type="hidden"
-                value="solid"
-              />
               <div
-                className="euiFormControlLayout euiFormControlLayout--compressed"
+                className="euiPopover__anchor"
               >
+                <input
+                  id="generated-id"
+                  type="hidden"
+                  value="solid"
+                />
                 <div
-                  className="euiFormControlLayout__childrenWrapper"
+                  className="euiFormControlLayout"
                 >
-                  <span
-                    className="euiScreenReaderOnly"
-                    id="generated-id"
-                  >
-                    Select an option: 
-                    <div
-                      style={
-                        Object {
-                          "border": "4px solid",
-                          "height": 16,
-                        }
-                      }
-                    />
-                    , is selected
-                  </span>
-                  <button
-                    aria-haspopup="true"
-                    aria-labelledby="generated-id generated-id"
-                    aria-selected={true}
-                    className="euiSuperSelectControl euiSuperSelectControl--compressed"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onKeyDown={[Function]}
-                    role="option"
-                    type="button"
-                  >
-                    <div
-                      style={
-                        Object {
-                          "border": "4px solid",
-                          "height": 16,
-                        }
-                      }
-                    />
-                  </button>
                   <div
-                    className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                    className="euiFormControlLayout__childrenWrapper"
                   >
                     <span
-                      className="euiFormControlLayoutCustomIcon"
+                      className="euiScreenReaderOnly"
+                      id="generated-id"
                     >
-                      <svg
-                        aria-hidden="true"
-                        className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                        focusable="false"
-                        height={16}
-                        style={null}
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
+                      Select an option: 
+                      <div
+                        style={
+                          Object {
+                            "border": "4px solid",
+                            "height": 16,
+                          }
+                        }
                       />
+                      , is selected
                     </span>
+                    <button
+                      aria-haspopup="true"
+                      aria-labelledby="generated-id generated-id"
+                      aria-selected={true}
+                      className="euiSuperSelectControl"
+                      onBlur={[Function]}
+                      onClick={[Function]}
+                      onFocus={[Function]}
+                      onKeyDown={[Function]}
+                      role="option"
+                      type="button"
+                    >
+                      <div
+                        style={
+                          Object {
+                            "border": "4px solid",
+                            "height": 16,
+                          }
+                        }
+                      />
+                    </button>
+                    <div
+                      className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
+                    >
+                      <span
+                        className="euiFormControlLayoutCustomIcon"
+                      >
+                        <svg
+                          aria-hidden="true"
+                          className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                          focusable="false"
+                          height={16}
+                          style={null}
+                          viewBox="0 0 16 16"
+                          width={16}
+                          xmlns="http://www.w3.org/2000/svg"
+                        />
+                      </span>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -1262,29 +1376,35 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
           className="euiFormRow euiFormRow--compressed"
           id="generated-id-row"
         >
-          <div>
+          <div
+            className="euiFormRow__labelWrapper"
+          >
             <label
-              className="euiFormLabel"
+              className="euiFormLabel euiFormRow__label"
               htmlFor="generated-id"
             >
               Radius
             </label>
           </div>
           <div
-            className="euiFormControlLayout euiFormControlLayout--compressed"
+            className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiFormControlLayout__childrenWrapper"
+              className="euiFormControlLayout"
             >
-              <input
-                className="euiFieldNumber euiFieldNumber--compressed"
-                id="generated-id"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                type="number"
-                value={0}
-              />
+              <div
+                className="euiFormControlLayout__childrenWrapper"
+              >
+                <input
+                  className="euiFieldNumber"
+                  id="generated-id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  type="number"
+                  value={0}
+                />
+              </div>
             </div>
           </div>
         </div>
@@ -1301,53 +1421,59 @@ exports[`Storyshots arguments/ContainerStyle/components extended template 1`] =
             }
           }
         >
-          <div>
+          <div
+            className="euiFormRow__labelWrapper"
+          >
             <label
-              className="euiFormLabel"
+              className="euiFormLabel euiFormRow__label"
               htmlFor="generated-id"
             >
               Color
             </label>
           </div>
           <div
-            className="euiPopover euiPopover--anchorUpCenter"
-            container={null}
-            id="color-picker-popover"
-            onKeyDown={[Function]}
-            onMouseDown={[Function]}
-            onMouseUp={[Function]}
-            onTouchEnd={[Function]}
-            onTouchStart={[Function]}
+            className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiPopover__anchor"
+              className="euiPopover euiPopover--anchorUpCenter"
+              container={null}
+              id="color-picker-popover"
+              onKeyDown={[Function]}
+              onMouseDown={[Function]}
+              onMouseUp={[Function]}
+              onTouchEnd={[Function]}
+              onTouchStart={[Function]}
             >
-              <button
-                className="euiLink euiLink--primary"
-                onClick={[Function]}
-                style={
-                  Object {
-                    "fontSize": 0,
-                  }
-                }
-                type="button"
+              <div
+                className="euiPopover__anchor"
               >
-                <div
-                  className="canvasColorDot"
+                <button
+                  className="euiLink euiLink--primary"
+                  onClick={[Function]}
+                  style={
+                    Object {
+                      "fontSize": 0,
+                    }
+                  }
+                  type="button"
                 >
                   <div
-                    className="canvasColorDot__background canvasCheckered"
-                  />
-                  <div
-                    className="canvasColorDot__foreground"
-                    style={
-                      Object {
-                        "background": "#fff",
+                    className="canvasColorDot"
+                  >
+                    <div
+                      className="canvasColorDot__background canvasCheckered"
+                    />
+                    <div
+                      className="canvasColorDot__foreground"
+                      style={
+                        Object {
+                          "background": "#fff",
+                        }
                       }
-                    }
-                  />
-                </div>
-              </button>
+                    />
+                  </div>
+                </button>
+              </div>
             </div>
           </div>
         </div>
diff --git a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/extended_template.examples.storyshot b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/extended_template.examples.storyshot
index 1486fe7cde14e0..8ec3f75561178c 100644
--- a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/extended_template.examples.storyshot
+++ b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/__examples__/__snapshots__/extended_template.examples.storyshot
@@ -15,66 +15,75 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
       className="euiFormRow euiFormRow--compressed"
       id="generated-id-row"
     >
-      <div>
+      <div
+        className="euiFormRow__labelWrapper"
+      >
         <label
-          className="euiFormLabel"
+          className="euiFormLabel euiFormRow__label"
           htmlFor="generated-id"
         >
           Series Identifier
         </label>
       </div>
       <div
-        className="euiFormControlLayout euiFormControlLayout--compressed"
+        className="euiFormRow__fieldWrapper"
       >
         <div
-          className="euiFormControlLayout__childrenWrapper"
+          className="euiFormControlLayout"
         >
-          <select
-            className="euiSelect euiSelect--compressed"
-            id="generated-id"
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            onMouseUp={[Function]}
-            value=""
+          <div
+            className="euiFormControlLayout__childrenWrapper"
           >
-            <option
+            <select
+              className="euiSelect"
+              id="generated-id"
+              onBlur={[Function]}
+              onChange={[Function]}
+              onFocus={[Function]}
+              onMouseUp={[Function]}
               value=""
             >
-              Select Series
-            </option>
-            <option
-              value="label1"
-            >
-              label1
-            </option>
-            <option
-              value="label2"
-            >
-              label2
-            </option>
-          </select>
-          <div
-            className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-          >
-            <span
-              className="euiFormControlLayoutCustomIcon"
+              <option
+                value=""
+              >
+                Select Series
+              </option>
+              <option
+                value="label1"
+              >
+                label1
+              </option>
+              <option
+                value="label2"
+              >
+                label2
+              </option>
+            </select>
+            <div
+              className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
             >
-              <svg
-                aria-hidden="true"
-                className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                focusable="false"
-                height={16}
-                style={null}
-                viewBox="0 0 16 16"
-                width={16}
-                xmlns="http://www.w3.org/2000/svg"
-              />
-            </span>
+              <span
+                className="euiFormControlLayoutCustomIcon"
+              >
+                <svg
+                  aria-hidden="true"
+                  className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                  focusable="false"
+                  height={16}
+                  style={null}
+                  viewBox="0 0 16 16"
+                  width={16}
+                  xmlns="http://www.w3.org/2000/svg"
+                />
+              </span>
+            </div>
           </div>
         </div>
       </div>
     </div>
+    <div
+      className="euiSpacer euiSpacer--s"
+    />
     <div
       className="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
     >
@@ -85,77 +94,83 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
           className="euiFormRow euiFormRow--compressed"
           id="generated-id-row"
         >
-          <div>
+          <div
+            className="euiFormRow__labelWrapper"
+          >
             <label
-              className="euiFormLabel"
+              className="euiFormLabel euiFormRow__label"
               htmlFor="generated-id"
             >
               Line
             </label>
           </div>
           <div
-            className="euiFormControlLayout euiFormControlLayout--compressed"
+            className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiFormControlLayout__childrenWrapper"
+              className="euiFormControlLayout"
             >
-              <select
-                className="euiSelect euiSelect--compressed"
-                id="generated-id"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                onMouseUp={[Function]}
-                value={0}
+              <div
+                className="euiFormControlLayout__childrenWrapper"
               >
-                <option
+                <select
+                  className="euiSelect"
+                  id="generated-id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  onMouseUp={[Function]}
                   value={0}
                 >
-                  None
-                </option>
-                <option
-                  value={1}
-                >
-                  1
-                </option>
-                <option
-                  value={2}
-                >
-                  2
-                </option>
-                <option
-                  value={3}
-                >
-                  3
-                </option>
-                <option
-                  value={4}
-                >
-                  4
-                </option>
-                <option
-                  value={5}
-                >
-                  5
-                </option>
-              </select>
-              <div
-                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-              >
-                <span
-                  className="euiFormControlLayoutCustomIcon"
+                  <option
+                    value={0}
+                  >
+                    None
+                  </option>
+                  <option
+                    value={1}
+                  >
+                    1
+                  </option>
+                  <option
+                    value={2}
+                  >
+                    2
+                  </option>
+                  <option
+                    value={3}
+                  >
+                    3
+                  </option>
+                  <option
+                    value={4}
+                  >
+                    4
+                  </option>
+                  <option
+                    value={5}
+                  >
+                    5
+                  </option>
+                </select>
+                <div
+                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                 >
-                  <svg
-                    aria-hidden="true"
-                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                    focusable="false"
-                    height={16}
-                    style={null}
-                    viewBox="0 0 16 16"
-                    width={16}
-                    xmlns="http://www.w3.org/2000/svg"
-                  />
-                </span>
+                  <span
+                    className="euiFormControlLayoutCustomIcon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                      focusable="false"
+                      height={16}
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -168,77 +183,83 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
           className="euiFormRow euiFormRow--compressed"
           id="generated-id-row"
         >
-          <div>
+          <div
+            className="euiFormRow__labelWrapper"
+          >
             <label
-              className="euiFormLabel"
+              className="euiFormLabel euiFormRow__label"
               htmlFor="generated-id"
             >
               Bar
             </label>
           </div>
           <div
-            className="euiFormControlLayout euiFormControlLayout--compressed"
+            className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiFormControlLayout__childrenWrapper"
+              className="euiFormControlLayout"
             >
-              <select
-                className="euiSelect euiSelect--compressed"
-                id="generated-id"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                onMouseUp={[Function]}
-                value={0}
+              <div
+                className="euiFormControlLayout__childrenWrapper"
               >
-                <option
+                <select
+                  className="euiSelect"
+                  id="generated-id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  onMouseUp={[Function]}
                   value={0}
                 >
-                  None
-                </option>
-                <option
-                  value={1}
-                >
-                  1
-                </option>
-                <option
-                  value={2}
-                >
-                  2
-                </option>
-                <option
-                  value={3}
-                >
-                  3
-                </option>
-                <option
-                  value={4}
-                >
-                  4
-                </option>
-                <option
-                  value={5}
-                >
-                  5
-                </option>
-              </select>
-              <div
-                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-              >
-                <span
-                  className="euiFormControlLayoutCustomIcon"
+                  <option
+                    value={0}
+                  >
+                    None
+                  </option>
+                  <option
+                    value={1}
+                  >
+                    1
+                  </option>
+                  <option
+                    value={2}
+                  >
+                    2
+                  </option>
+                  <option
+                    value={3}
+                  >
+                    3
+                  </option>
+                  <option
+                    value={4}
+                  >
+                    4
+                  </option>
+                  <option
+                    value={5}
+                  >
+                    5
+                  </option>
+                </select>
+                <div
+                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                 >
-                  <svg
-                    aria-hidden="true"
-                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                    focusable="false"
-                    height={16}
-                    style={null}
-                    viewBox="0 0 16 16"
-                    width={16}
-                    xmlns="http://www.w3.org/2000/svg"
-                  />
-                </span>
+                  <span
+                    className="euiFormControlLayoutCustomIcon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                      focusable="false"
+                      height={16}
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </span>
+                </div>
               </div>
             </div>
           </div>
@@ -251,77 +272,83 @@ exports[`Storyshots arguments/SeriesStyle extended 1`] = `
           className="euiFormRow euiFormRow--compressed"
           id="generated-id-row"
         >
-          <div>
+          <div
+            className="euiFormRow__labelWrapper"
+          >
             <label
-              className="euiFormLabel"
+              className="euiFormLabel euiFormRow__label"
               htmlFor="generated-id"
             >
               Point
             </label>
           </div>
           <div
-            className="euiFormControlLayout euiFormControlLayout--compressed"
+            className="euiFormRow__fieldWrapper"
           >
             <div
-              className="euiFormControlLayout__childrenWrapper"
+              className="euiFormControlLayout"
             >
-              <select
-                className="euiSelect euiSelect--compressed"
-                id="generated-id"
-                onBlur={[Function]}
-                onChange={[Function]}
-                onFocus={[Function]}
-                onMouseUp={[Function]}
-                value={0}
+              <div
+                className="euiFormControlLayout__childrenWrapper"
               >
-                <option
+                <select
+                  className="euiSelect"
+                  id="generated-id"
+                  onBlur={[Function]}
+                  onChange={[Function]}
+                  onFocus={[Function]}
+                  onMouseUp={[Function]}
                   value={0}
                 >
-                  None
-                </option>
-                <option
-                  value={1}
-                >
-                  1
-                </option>
-                <option
-                  value={2}
-                >
-                  2
-                </option>
-                <option
-                  value={3}
-                >
-                  3
-                </option>
-                <option
-                  value={4}
-                >
-                  4
-                </option>
-                <option
-                  value={5}
-                >
-                  5
-                </option>
-              </select>
-              <div
-                className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
-              >
-                <span
-                  className="euiFormControlLayoutCustomIcon"
+                  <option
+                    value={0}
+                  >
+                    None
+                  </option>
+                  <option
+                    value={1}
+                  >
+                    1
+                  </option>
+                  <option
+                    value={2}
+                  >
+                    2
+                  </option>
+                  <option
+                    value={3}
+                  >
+                    3
+                  </option>
+                  <option
+                    value={4}
+                  >
+                    4
+                  </option>
+                  <option
+                    value={5}
+                  >
+                    5
+                  </option>
+                </select>
+                <div
+                  className="euiFormControlLayoutIcons euiFormControlLayoutIcons--right"
                 >
-                  <svg
-                    aria-hidden="true"
-                    className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
-                    focusable="false"
-                    height={16}
-                    style={null}
-                    viewBox="0 0 16 16"
-                    width={16}
-                    xmlns="http://www.w3.org/2000/svg"
-                  />
-                </span>
+                  <span
+                    className="euiFormControlLayoutCustomIcon"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      className="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                      focusable="false"
+                      height={16}
+                      style={null}
+                      viewBox="0 0 16 16"
+                      width={16}
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </span>
+                </div>
               </div>
             </div>
           </div>
diff --git a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/extended_template.tsx b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/extended_template.tsx
index 7b625dadbbf69e..8b629c225a4bda 100644
--- a/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/extended_template.tsx
+++ b/x-pack/legacy/plugins/canvas/public/expression_types/arg_types/series_style/extended_template.tsx
@@ -4,9 +4,9 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { FunctionComponent, ChangeEvent } from 'react';
+import React, { FunctionComponent, ChangeEvent, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSelect } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiFormRow, EuiSelect, EuiSpacer } from '@elastic/eui';
 import immutable from 'object-path-immutable';
 import { get } from 'lodash';
 import { ExpressionAST } from '../../../../types';
@@ -82,41 +82,44 @@ export const ExtendedTemplate: FunctionComponent<Props> = props => {
         </EuiFormRow>
       )}
       {hasPropFields && (
-        <EuiFlexGroup gutterSize="s">
-          {fields.includes('lines') && (
-            <EuiFlexItem>
-              <EuiFormRow label="Line" compressed>
-                <EuiSelect
-                  value={get(chainArgs, 'lines.0', 0)}
-                  options={values}
-                  onChange={ev => handleChange('lines', ev)}
-                />
-              </EuiFormRow>
-            </EuiFlexItem>
-          )}
-          {fields.includes('bars') && (
-            <EuiFlexItem>
-              <EuiFormRow label="Bar" compressed>
-                <EuiSelect
-                  value={get(chainArgs, 'bars.0', 0)}
-                  options={values}
-                  onChange={ev => handleChange('bars', ev)}
-                />
-              </EuiFormRow>
-            </EuiFlexItem>
-          )}
-          {fields.includes('points') && (
-            <EuiFlexItem>
-              <EuiFormRow label="Point" compressed>
-                <EuiSelect
-                  value={get(chainArgs, 'points.0', 0)}
-                  options={values}
-                  onChange={ev => handleChange('points', ev)}
-                />
-              </EuiFormRow>
-            </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
+        <Fragment>
+          <EuiSpacer size="s" />
+          <EuiFlexGroup gutterSize="s">
+            {fields.includes('lines') && (
+              <EuiFlexItem>
+                <EuiFormRow label="Line" compressed>
+                  <EuiSelect
+                    value={get(chainArgs, 'lines.0', 0)}
+                    options={values}
+                    onChange={ev => handleChange('lines', ev)}
+                  />
+                </EuiFormRow>
+              </EuiFlexItem>
+            )}
+            {fields.includes('bars') && (
+              <EuiFlexItem>
+                <EuiFormRow label="Bar" compressed>
+                  <EuiSelect
+                    value={get(chainArgs, 'bars.0', 0)}
+                    options={values}
+                    onChange={ev => handleChange('bars', ev)}
+                  />
+                </EuiFormRow>
+              </EuiFlexItem>
+            )}
+            {fields.includes('points') && (
+              <EuiFlexItem>
+                <EuiFormRow label="Point" compressed>
+                  <EuiSelect
+                    value={get(chainArgs, 'points.0', 0)}
+                    options={values}
+                    onChange={ev => handleChange('points', ev)}
+                  />
+                </EuiFormRow>
+              </EuiFlexItem>
+            )}
+          </EuiFlexGroup>
+        </Fragment>
       )}
     </div>
   );
diff --git a/x-pack/legacy/plugins/graph/public/components/graph_save_modal.tsx b/x-pack/legacy/plugins/graph/public/components/graph_save_modal.tsx
index 654cf473fb03ee..d7949c261210eb 100644
--- a/x-pack/legacy/plugins/graph/public/components/graph_save_modal.tsx
+++ b/x-pack/legacy/plugins/graph/public/components/graph_save_modal.tsx
@@ -90,6 +90,7 @@ export function GraphSaveModal({
           )}
           {savePolicy === 'config' && hasData && (
             <>
+              <EuiSpacer />
               <EuiCallOut data-test-subj="graphNoDataSavedMsg">
                 <p>
                   {i18n.translate('xpack.graph.topNavMenu.save.saveConfigurationOnlyText', {
diff --git a/x-pack/legacy/plugins/grokdebugger/public/sections/grokdebugger/components/grok_debugger/grok_debugger.js b/x-pack/legacy/plugins/grokdebugger/public/sections/grokdebugger/components/grok_debugger/grok_debugger.js
index 2ae8c9684239f0..eaf66b2b1a0442 100644
--- a/x-pack/legacy/plugins/grokdebugger/public/sections/grokdebugger/components/grok_debugger/grok_debugger.js
+++ b/x-pack/legacy/plugins/grokdebugger/public/sections/grokdebugger/components/grok_debugger/grok_debugger.js
@@ -12,7 +12,7 @@ import {
   EuiPageBody,
   EuiPageContent,
   EuiPageContentBody,
-  EuiSpacer
+  EuiSpacer,
 } from '@elastic/eui';
 import { EventInput } from '../event_input';
 import { PatternInput } from '../pattern_input';
@@ -113,6 +113,7 @@ export class GrokDebugger extends React.Component {
                   value={this.state.pattern}
                   onChange={this.onPatternChange}
                 />
+                <EuiSpacer />
                 <CustomPatternsInput
                   value={this.state.customPatterns}
                   onChange={this.onCustomPatternsChange}
diff --git a/x-pack/legacy/plugins/index_lifecycle_management/public/extend_index_management/components/add_lifecycle_confirm_modal.js b/x-pack/legacy/plugins/index_lifecycle_management/public/extend_index_management/components/add_lifecycle_confirm_modal.js
index baedb0f195d3f3..940cdf23579935 100644
--- a/x-pack/legacy/plugins/index_lifecycle_management/public/extend_index_management/components/add_lifecycle_confirm_modal.js
+++ b/x-pack/legacy/plugins/index_lifecycle_management/public/extend_index_management/components/add_lifecycle_confirm_modal.js
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { get } from 'lodash';
 import { i18n } from '@kbn/i18n';
 import {
@@ -18,6 +18,7 @@ import {
   EuiModalBody,
   EuiModalHeader,
   EuiCallOut,
+  EuiSpacer,
   EuiModalHeaderTitle,
 } from '@elastic/eui';
 import { BASE_PATH } from '../../../common/constants';
@@ -38,9 +39,12 @@ export class AddLifecyclePolicyConfirmModal extends Component {
     const { indexName, httpClient, closeModal, reloadIndices } = this.props;
     const { selectedPolicyName, selectedAlias } = this.state;
     if (!selectedPolicyName) {
-      this.setState({ policyError: i18n.translate(
-        'xpack.indexLifecycleMgmt.indexManagementTable.addLifecyclePolicyConfirmModal.noPolicySelectedErrorMessage',
-        { defaultMessage: 'You must select a policy.' }) });
+      this.setState({
+        policyError: i18n.translate(
+          'xpack.indexLifecycleMgmt.indexManagementTable.addLifecyclePolicyConfirmModal.noPolicySelectedErrorMessage',
+          { defaultMessage: 'You must select a policy.' }
+        ),
+      });
       return;
     }
     try {
@@ -87,26 +91,29 @@ export class AddLifecyclePolicyConfirmModal extends Component {
     const { aliases } = index;
     if (aliases === 'none') {
       return (
-        <EuiCallOut
-          style={{ maxWidth: 400 }}
-          title={
+        <Fragment>
+          <EuiSpacer size="m" />
+          <EuiCallOut
+            style={{ maxWidth: 400 }}
+            title={
+              <FormattedMessage
+                id="xpack.indexLifecycleMgmt.indexManagementTable.addLifecyclePolicyConfirmModal.indexHasNoAliasesWarningTitle"
+                defaultMessage="Index has no aliases"
+              />
+            }
+            color="warning"
+          >
             <FormattedMessage
-              id="xpack.indexLifecycleMgmt.indexManagementTable.addLifecyclePolicyConfirmModal.indexHasNoAliasesWarningTitle"
-              defaultMessage="Index has no aliases"
+              id="xpack.indexLifecycleMgmt.indexManagementTable.addLifecyclePolicyConfirmModal.indexHasNoAliasesWarningMessage"
+              defaultMessage="Policy {policyName} is configured for rollover,
+                but index {indexName} does not have an alias, which is required for rollover."
+              values={{
+                policyName: selectedPolicy.name,
+                indexName: index.name,
+              }}
             />
-          }
-          color="warning"
-        >
-          <FormattedMessage
-            id="xpack.indexLifecycleMgmt.indexManagementTable.addLifecyclePolicyConfirmModal.indexHasNoAliasesWarningMessage"
-            defaultMessage="Policy {policyName} is configured for rollover,
-              but index {indexName} does not have an alias, which is required for rollover."
-            values={{
-              policyName: selectedPolicy.name,
-              indexName: index.name,
-            }}
-          />
-        </EuiCallOut>
+          </EuiCallOut>
+        </Fragment>
       );
     }
     const aliasOptions = aliases.map(alias => {
@@ -211,7 +218,7 @@ export class AddLifecyclePolicyConfirmModal extends Component {
     const title = (
       <FormattedMessage
         id="xpack.indexLifecycleMgmt.indexManagementTable.addLifecyclePolicyConfirmModal.modalTitle"
-        defaultMessage="Add lifecycle policy to &quot;{indexName}&quot;"
+        defaultMessage='Add lifecycle policy to "{indexName}"'
         values={{
           indexName,
         }}
@@ -220,13 +227,9 @@ export class AddLifecyclePolicyConfirmModal extends Component {
     if (!policies.length) {
       return (
         <EuiOverlayMask>
-          <EuiModal
-            onClose={closeModal}
-          >
+          <EuiModal onClose={closeModal}>
             <EuiModalHeader>
-              <EuiModalHeaderTitle>
-                {title}
-              </EuiModalHeaderTitle>
+              <EuiModalHeaderTitle>{title}</EuiModalHeaderTitle>
             </EuiModalHeader>
 
             <EuiModalBody>
diff --git a/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/warm_phase/warm_phase.js b/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/warm_phase/warm_phase.js
index a71db0c07113a8..2f88578e128ef2 100644
--- a/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/warm_phase/warm_phase.js
+++ b/x-pack/legacy/plugins/index_lifecycle_management/public/sections/edit_policy/components/warm_phase/warm_phase.js
@@ -55,16 +55,22 @@ export class WarmPhase extends PureComponent {
     } = this.props;
 
     const shrinkLabel = i18n.translate('xpack.indexLifecycleMgmt.warmPhase.shrinkIndexLabel', {
-      defaultMessage: 'Shrink index'
+      defaultMessage: 'Shrink index',
     });
 
-    const moveToWarmPhaseOnRolloverLabel = i18n.translate('xpack.indexLifecycleMgmt.warmPhase.moveToWarmPhaseOnRolloverLabel', {
-      defaultMessage: 'Move to warm phase on rollover'
-    });
+    const moveToWarmPhaseOnRolloverLabel = i18n.translate(
+      'xpack.indexLifecycleMgmt.warmPhase.moveToWarmPhaseOnRolloverLabel',
+      {
+        defaultMessage: 'Move to warm phase on rollover',
+      }
+    );
 
-    const forcemergeLabel = i18n.translate('xpack.indexLifecycleMgmt.warmPhase.forceMergeDataLabel', {
-      defaultMessage: 'Force merge data'
-    });
+    const forcemergeLabel = i18n.translate(
+      'xpack.indexLifecycleMgmt.warmPhase.forceMergeDataLabel',
+      {
+        defaultMessage: 'Force merge data',
+      }
+    );
 
     return (
       <div id="warmPhaseContent" aria-live="polite" role="region" aria-relevant="additions">
@@ -115,9 +121,7 @@ export class WarmPhase extends PureComponent {
             {phaseData[PHASE_ENABLED] ? (
               <Fragment>
                 {hotPhaseRolloverEnabled ? (
-                  <EuiFormRow
-                    id={`${PHASE_WARM}-${WARM_PHASE_ON_ROLLOVER}`}
-                  >
+                  <EuiFormRow id={`${PHASE_WARM}-${WARM_PHASE_ON_ROLLOVER}`}>
                     <EuiSwitch
                       data-test-subj="warmPhaseOnRolloverSwitch"
                       label={moveToWarmPhaseOnRolloverLabel}
@@ -130,14 +134,17 @@ export class WarmPhase extends PureComponent {
                   </EuiFormRow>
                 ) : null}
                 {!phaseData[WARM_PHASE_ON_ROLLOVER] ? (
-                  <MinAgeInput
-                    errors={errors}
-                    phaseData={phaseData}
-                    phase={PHASE_WARM}
-                    isShowingErrors={isShowingErrors}
-                    setPhaseData={setPhaseData}
-                    rolloverEnabled={hotPhaseRolloverEnabled}
-                  />
+                  <Fragment>
+                    <EuiSpacer size="m" />
+                    <MinAgeInput
+                      errors={errors}
+                      phaseData={phaseData}
+                      phase={PHASE_WARM}
+                      isShowingErrors={isShowingErrors}
+                      setPhaseData={setPhaseData}
+                      rolloverEnabled={hotPhaseRolloverEnabled}
+                    />
+                  </Fragment>
                 ) : null}
 
                 <EuiSpacer />
@@ -167,11 +174,12 @@ export class WarmPhase extends PureComponent {
                       errorKey={PHASE_REPLICA_COUNT}
                       isShowingErrors={isShowingErrors}
                       errors={errors}
-                      helpText={
-                        i18n.translate('xpack.indexLifecycleMgmt.warmPhase.replicaCountHelpText', {
-                          defaultMessage: 'By default, the number of replicas remains the same.'
-                        })
-                      }
+                      helpText={i18n.translate(
+                        'xpack.indexLifecycleMgmt.warmPhase.replicaCountHelpText',
+                        {
+                          defaultMessage: 'By default, the number of replicas remains the same.',
+                        }
+                      )}
                     >
                       <EuiFieldNumber
                         id={`${PHASE_WARM}-${PHASE_REPLICA_COUNT}`}
@@ -187,7 +195,7 @@ export class WarmPhase extends PureComponent {
 
                 <EuiSpacer size="m" />
               </Fragment>
-            ) : null }
+            ) : null}
           </Fragment>
         </EuiDescribedFormGroup>
         {phaseData[PHASE_ENABLED] ? (
@@ -233,9 +241,12 @@ export class WarmPhase extends PureComponent {
                         <EuiFlexItem grow={false}>
                           <ErrableFormRow
                             id={`${PHASE_WARM}-${PHASE_PRIMARY_SHARD_COUNT}`}
-                            label={i18n.translate('xpack.indexLifecycleMgmt.warmPhase.numberOfPrimaryShardsLabel', {
-                              defaultMessage: 'Number of primary shards'
-                            })}
+                            label={i18n.translate(
+                              'xpack.indexLifecycleMgmt.warmPhase.numberOfPrimaryShardsLabel',
+                              {
+                                defaultMessage: 'Number of primary shards',
+                              }
+                            )}
                             errorKey={PHASE_PRIMARY_SHARD_COUNT}
                             isShowingErrors={isShowingErrors}
                             errors={errors}
@@ -294,9 +305,12 @@ export class WarmPhase extends PureComponent {
                 {phaseData[PHASE_FORCE_MERGE_ENABLED] ? (
                   <ErrableFormRow
                     id={`${PHASE_WARM}-${PHASE_FORCE_MERGE_SEGMENTS}`}
-                    label={i18n.translate('xpack.indexLifecycleMgmt.warmPhase.numberOfSegmentsLabel', {
-                      defaultMessage: 'Number of segments'
-                    })}
+                    label={i18n.translate(
+                      'xpack.indexLifecycleMgmt.warmPhase.numberOfSegmentsLabel',
+                      {
+                        defaultMessage: 'Number of segments',
+                      }
+                    )}
                     errorKey={PHASE_FORCE_MERGE_SEGMENTS}
                     isShowingErrors={isShowingErrors}
                     errors={errors}
diff --git a/x-pack/legacy/plugins/infra/public/components/metrics_explorer/chart_options.tsx b/x-pack/legacy/plugins/infra/public/components/metrics_explorer/chart_options.tsx
index 29eda841335a56..cec705fea190cb 100644
--- a/x-pack/legacy/plugins/infra/public/components/metrics_explorer/chart_options.tsx
+++ b/x-pack/legacy/plugins/infra/public/components/metrics_explorer/chart_options.tsx
@@ -127,6 +127,7 @@ export const MetricsExplorerChartOptions = ({ chartOptions, onChange }: Props) =
           })}
         >
           <EuiRadioGroup
+            // compressed
             options={typeRadios}
             idSelected={chartOptions.type}
             onChange={handleTypeChange}
@@ -153,6 +154,7 @@ export const MetricsExplorerChartOptions = ({ chartOptions, onChange }: Props) =
           })}
         >
           <EuiRadioGroup
+            // compressed
             options={yAxisRadios}
             idSelected={chartOptions.yAxisMode}
             onChange={handleYAxisChange}
diff --git a/x-pack/legacy/plugins/infra/public/components/waffle/custom_field_panel.tsx b/x-pack/legacy/plugins/infra/public/components/waffle/custom_field_panel.tsx
index 04748095b7b9fc..cb4ffa8c154106 100644
--- a/x-pack/legacy/plugins/infra/public/components/waffle/custom_field_panel.tsx
+++ b/x-pack/legacy/plugins/infra/public/components/waffle/custom_field_panel.tsx
@@ -48,6 +48,7 @@ export const CustomFieldPanel = injectI18n(
               compressed
             >
               <EuiComboBox
+                // compressed
                 placeholder={intl.formatMessage({
                   id: 'xpack.infra.waffle.customGroupByDropdownPlacehoder',
                   defaultMessage: 'Select one',
diff --git a/x-pack/legacy/plugins/infra/public/components/waffle/legend_controls.tsx b/x-pack/legacy/plugins/infra/public/components/waffle/legend_controls.tsx
index 0731ad02f8f18a..fb194c90de6445 100644
--- a/x-pack/legacy/plugins/infra/public/components/waffle/legend_controls.tsx
+++ b/x-pack/legacy/plugins/infra/public/components/waffle/legend_controls.tsx
@@ -14,6 +14,7 @@ import {
   EuiFormRow,
   EuiPopover,
   EuiPopoverTitle,
+  EuiSpacer,
   EuiSwitch,
   EuiText,
 } from '@elastic/eui';
@@ -95,6 +96,7 @@ export const LegendControls = injectI18n(
                 onChange={handleAutoChange}
               />
             </EuiFormRow>
+            <EuiSpacer />
             {(!boundsValidRange && (
               <EuiText color="danger" grow={false} size="s">
                 <p>
diff --git a/x-pack/legacy/plugins/logstash/public/components/pipeline_editor/__snapshots__/flex_item_setting.test.js.snap b/x-pack/legacy/plugins/logstash/public/components/pipeline_editor/__snapshots__/flex_item_setting.test.js.snap
index b0862edc49e02f..c7d3e10aec46c4 100644
--- a/x-pack/legacy/plugins/logstash/public/components/pipeline_editor/__snapshots__/flex_item_setting.test.js.snap
+++ b/x-pack/legacy/plugins/logstash/public/components/pipeline_editor/__snapshots__/flex_item_setting.test.js.snap
@@ -6,6 +6,7 @@ exports[`FlexItemSetting component renders a null label if label/tooltip text no
 >
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={true}
     label={null}
@@ -24,6 +25,7 @@ exports[`FlexItemSetting component renders component and children as expected 1`
 >
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label={
diff --git a/x-pack/legacy/plugins/logstash/public/components/pipeline_editor/__snapshots__/pipeline_editor.test.js.snap b/x-pack/legacy/plugins/logstash/public/components/pipeline_editor/__snapshots__/pipeline_editor.test.js.snap
index 638a55a5f4cee9..b85c9c07c6297d 100644
--- a/x-pack/legacy/plugins/logstash/public/components/pipeline_editor/__snapshots__/pipeline_editor.test.js.snap
+++ b/x-pack/legacy/plugins/logstash/public/components/pipeline_editor/__snapshots__/pipeline_editor.test.js.snap
@@ -35,6 +35,7 @@ exports[`PipelineEditor component includes required error message for falsy pipe
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={true}
         hasEmptyLabelSpace={false}
         label={
@@ -60,6 +61,7 @@ exports[`PipelineEditor component includes required error message for falsy pipe
       </EuiFormRow>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={true}
         hasEmptyLabelSpace={false}
         label={
@@ -83,6 +85,7 @@ exports[`PipelineEditor component includes required error message for falsy pipe
       </EuiFormRow>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={true}
         hasEmptyLabelSpace={false}
         label={
@@ -115,6 +118,7 @@ exports[`PipelineEditor component includes required error message for falsy pipe
       </EuiFormRow>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         label={
@@ -136,6 +140,7 @@ Default value: Number of the host’s CPU cores"
           value={1}
         />
       </EuiFormRow>
+      <EuiSpacer />
       <EuiFlexGroup>
         <FlexItemSetting
           formRowLabelText="Pipeline batch size"
@@ -349,6 +354,7 @@ exports[`PipelineEditor component invalidates form for invalid pipeline id input
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={true}
         hasEmptyLabelSpace={false}
         label={
@@ -374,6 +380,7 @@ exports[`PipelineEditor component invalidates form for invalid pipeline id input
       </EuiFormRow>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={true}
         hasEmptyLabelSpace={false}
         label={
@@ -397,6 +404,7 @@ exports[`PipelineEditor component invalidates form for invalid pipeline id input
       </EuiFormRow>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={true}
         hasEmptyLabelSpace={false}
         label={
@@ -429,6 +437,7 @@ exports[`PipelineEditor component invalidates form for invalid pipeline id input
       </EuiFormRow>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         label={
@@ -450,6 +459,7 @@ Default value: Number of the host’s CPU cores"
           value={1}
         />
       </EuiFormRow>
+      <EuiSpacer />
       <EuiFlexGroup>
         <FlexItemSetting
           formRowLabelText="Pipeline batch size"
@@ -663,6 +673,7 @@ exports[`PipelineEditor component invalidates form for pipeline id with spaces 1
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={true}
         hasEmptyLabelSpace={false}
         label={
@@ -688,6 +699,7 @@ exports[`PipelineEditor component invalidates form for pipeline id with spaces 1
       </EuiFormRow>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={true}
         hasEmptyLabelSpace={false}
         label={
@@ -711,6 +723,7 @@ exports[`PipelineEditor component invalidates form for pipeline id with spaces 1
       </EuiFormRow>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={true}
         hasEmptyLabelSpace={false}
         label={
@@ -743,6 +756,7 @@ exports[`PipelineEditor component invalidates form for pipeline id with spaces 1
       </EuiFormRow>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         label={
@@ -764,6 +778,7 @@ Default value: Number of the host’s CPU cores"
           value={1}
         />
       </EuiFormRow>
+      <EuiSpacer />
       <EuiFlexGroup>
         <FlexItemSetting
           formRowLabelText="Pipeline batch size"
@@ -973,6 +988,7 @@ exports[`PipelineEditor component matches snapshot for clone pipeline 1`] = `
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={true}
         hasEmptyLabelSpace={false}
         label={
@@ -996,6 +1012,7 @@ exports[`PipelineEditor component matches snapshot for clone pipeline 1`] = `
       </EuiFormRow>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={true}
         hasEmptyLabelSpace={false}
         label={
@@ -1028,6 +1045,7 @@ exports[`PipelineEditor component matches snapshot for clone pipeline 1`] = `
       </EuiFormRow>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         label={
@@ -1049,6 +1067,7 @@ Default value: Number of the host’s CPU cores"
           value={1}
         />
       </EuiFormRow>
+      <EuiSpacer />
       <EuiFlexGroup>
         <FlexItemSetting
           formRowLabelText="Pipeline batch size"
@@ -1273,6 +1292,7 @@ exports[`PipelineEditor component matches snapshot for create pipeline 1`] = `
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={true}
         hasEmptyLabelSpace={false}
         label={
@@ -1298,6 +1318,7 @@ exports[`PipelineEditor component matches snapshot for create pipeline 1`] = `
       </EuiFormRow>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={true}
         hasEmptyLabelSpace={false}
         label={
@@ -1321,6 +1342,7 @@ exports[`PipelineEditor component matches snapshot for create pipeline 1`] = `
       </EuiFormRow>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={true}
         hasEmptyLabelSpace={false}
         label={
@@ -1353,6 +1375,7 @@ exports[`PipelineEditor component matches snapshot for create pipeline 1`] = `
       </EuiFormRow>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         label={
@@ -1374,6 +1397,7 @@ Default value: Number of the host’s CPU cores"
           value={1}
         />
       </EuiFormRow>
+      <EuiSpacer />
       <EuiFlexGroup>
         <FlexItemSetting
           formRowLabelText="Pipeline batch size"
@@ -1583,6 +1607,7 @@ exports[`PipelineEditor component matches snapshot for edit pipeline 1`] = `
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={true}
         hasEmptyLabelSpace={false}
         label={
@@ -1606,6 +1631,7 @@ exports[`PipelineEditor component matches snapshot for edit pipeline 1`] = `
       </EuiFormRow>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={true}
         hasEmptyLabelSpace={false}
         label={
@@ -1638,6 +1664,7 @@ exports[`PipelineEditor component matches snapshot for edit pipeline 1`] = `
       </EuiFormRow>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         label={
@@ -1659,6 +1686,7 @@ Default value: Number of the host’s CPU cores"
           value={1}
         />
       </EuiFormRow>
+      <EuiSpacer />
       <EuiFlexGroup>
         <FlexItemSetting
           formRowLabelText="Pipeline batch size"
diff --git a/x-pack/legacy/plugins/logstash/public/components/pipeline_editor/pipeline_editor.js b/x-pack/legacy/plugins/logstash/public/components/pipeline_editor/pipeline_editor.js
index 9620f07c743175..8e1719a87de32a 100644
--- a/x-pack/legacy/plugins/logstash/public/components/pipeline_editor/pipeline_editor.js
+++ b/x-pack/legacy/plugins/logstash/public/components/pipeline_editor/pipeline_editor.js
@@ -348,6 +348,7 @@ class PipelineEditorUi extends React.Component {
                 value={this.state.pipeline.settings['pipeline.workers']}
               />
             </EuiFormRow>
+            <EuiSpacer />
             <EuiFlexGroup>
               <FlexItemSetting
                 formRowLabelText={intl.formatMessage({
diff --git a/x-pack/legacy/plugins/maps/public/components/__snapshots__/geometry_filter_form.test.js.snap b/x-pack/legacy/plugins/maps/public/components/__snapshots__/geometry_filter_form.test.js.snap
index 451d550789e4f7..c07994ce9d0aa4 100644
--- a/x-pack/legacy/plugins/maps/public/components/__snapshots__/geometry_filter_form.test.js.snap
+++ b/x-pack/legacy/plugins/maps/public/components/__snapshots__/geometry_filter_form.test.js.snap
@@ -8,13 +8,14 @@ exports[`should not render relation select when geo field is geo_point 1`] = `
   <EuiFormRow
     compressed={true}
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label="Geometry label"
     labelType="label"
   >
     <EuiFieldText
-      compressed={false}
+      compressed={true}
       fullWidth={false}
       isLoading={false}
       onChange={[Function]}
@@ -25,6 +26,7 @@ exports[`should not render relation select when geo field is geo_point 1`] = `
     className="mapGeometryFilter__geoFieldSuperSelectWrapper"
     compressed={true}
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label="Filtered field"
@@ -77,13 +79,14 @@ exports[`should not show "within" relation when filter geometry is not closed 1`
   <EuiFormRow
     compressed={true}
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label="Geometry label"
     labelType="label"
   >
     <EuiFieldText
-      compressed={false}
+      compressed={true}
       fullWidth={false}
       isLoading={false}
       onChange={[Function]}
@@ -94,6 +97,7 @@ exports[`should not show "within" relation when filter geometry is not closed 1`
     className="mapGeometryFilter__geoFieldSuperSelectWrapper"
     compressed={true}
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label="Filtered field"
@@ -131,13 +135,14 @@ exports[`should not show "within" relation when filter geometry is not closed 1`
   <EuiFormRow
     compressed={true}
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label="Spatial relation"
     labelType="label"
   >
     <EuiSelect
-      compressed={false}
+      compressed={true}
       fullWidth={false}
       hasNoInitialSelection={false}
       isLoading={false}
@@ -175,13 +180,14 @@ exports[`should render relation select when geo field is geo_shape 1`] = `
   <EuiFormRow
     compressed={true}
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label="Geometry label"
     labelType="label"
   >
     <EuiFieldText
-      compressed={false}
+      compressed={true}
       fullWidth={false}
       isLoading={false}
       onChange={[Function]}
@@ -192,6 +198,7 @@ exports[`should render relation select when geo field is geo_shape 1`] = `
     className="mapGeometryFilter__geoFieldSuperSelectWrapper"
     compressed={true}
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label="Filtered field"
@@ -229,13 +236,14 @@ exports[`should render relation select when geo field is geo_shape 1`] = `
   <EuiFormRow
     compressed={true}
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label="Spatial relation"
     labelType="label"
   >
     <EuiSelect
-      compressed={false}
+      compressed={true}
       fullWidth={false}
       hasNoInitialSelection={false}
       isLoading={false}
diff --git a/x-pack/legacy/plugins/maps/public/components/__snapshots__/tooltip_selector.test.js.snap b/x-pack/legacy/plugins/maps/public/components/__snapshots__/tooltip_selector.test.js.snap
index 511c477a82a21f..83ef61ac3dcc2b 100644
--- a/x-pack/legacy/plugins/maps/public/components/__snapshots__/tooltip_selector.test.js.snap
+++ b/x-pack/legacy/plugins/maps/public/components/__snapshots__/tooltip_selector.test.js.snap
@@ -3,6 +3,7 @@
 exports[`TooltipSelector should create eui row component 1`] = `
 <EuiFormRow
   describedByIds={Array []}
+  display="row"
   fullWidth={false}
   hasEmptyLabelSpace={false}
   label="Fields to display in tooltip"
diff --git a/x-pack/legacy/plugins/maps/public/components/geometry_filter_form.js b/x-pack/legacy/plugins/maps/public/components/geometry_filter_form.js
index f0ac8d2748d07b..df24f3126129f2 100644
--- a/x-pack/legacy/plugins/maps/public/components/geometry_filter_form.js
+++ b/x-pack/legacy/plugins/maps/public/components/geometry_filter_form.js
@@ -135,6 +135,7 @@ export class GeometryFilterForm extends Component {
         compressed
       >
         <EuiSelect
+          compressed
           options={options}
           value={this.state.relation}
           onChange={this._onRelationChange}
@@ -170,6 +171,7 @@ export class GeometryFilterForm extends Component {
           compressed
         >
           <EuiFieldText
+            compressed
             value={this.state.geometryLabel}
             onChange={this._onGeometryLabelChange}
           />
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.js b/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.js
index 8cb006913532cf..f3087979bc667e 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.js
+++ b/x-pack/legacy/plugins/maps/public/connected_components/toolbar_overlay/set_view_control/set_view_control.js
@@ -80,6 +80,7 @@ export class SetViewControl extends Component {
           compressed
         >
           <EuiFieldNumber
+            compressed
             value={value}
             onChange={onChange}
             isInvalid={isInvalid}
diff --git a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/attribution_control/_attribution_control.scss b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/attribution_control/_attribution_control.scss
index 892a69f2562380..9ebaee57fba4db 100644
--- a/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/attribution_control/_attribution_control.scss
+++ b/x-pack/legacy/plugins/maps/public/connected_components/widget_overlay/attribution_control/_attribution_control.scss
@@ -1,6 +1,6 @@
 .mapAttributionControl {
   @include mapOverlayIsTextOnly;
-  @include euiTextOverflowWrap;
+  @include euiTextBreakWord;
   pointer-events: all;
   padding-left: $euiSizeM;
 }
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/heatmap/__snapshots__/heatmap_style_editor.test.js.snap b/x-pack/legacy/plugins/maps/public/layers/styles/components/heatmap/__snapshots__/heatmap_style_editor.test.js.snap
index fadfc62d11fd95..fbe52169119d79 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/heatmap/__snapshots__/heatmap_style_editor.test.js.snap
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/heatmap/__snapshots__/heatmap_style_editor.test.js.snap
@@ -3,6 +3,7 @@
 exports[`HeatmapStyleEditor is rendered 1`] = `
 <EuiFormRow
   describedByIds={Array []}
+  display="row"
   fullWidth={false}
   hasEmptyLabelSpace={false}
   label="Color range"
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap
index ebfb5c9e0ff800..2abea4581d9897 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/__snapshots__/vector_style_symbol_editor.test.js.snap
@@ -3,6 +3,7 @@
 exports[`Should render icon select when symbolized as Icon 1`] = `
 <EuiFormRow
   describedByIds={Array []}
+  display="row"
   fullWidth={false}
   hasEmptyLabelSpace={false}
   label="Symbol type"
@@ -65,6 +66,7 @@ exports[`Should render icon select when symbolized as Icon 1`] = `
 exports[`Should render symbol select when symbolized as Circle 1`] = `
 <EuiFormRow
   describedByIds={Array []}
+  display="row"
   fullWidth={false}
   hasEmptyLabelSpace={false}
   label="Symbol type"
diff --git a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_editor.js b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_editor.js
index 4d25953f5610b5..ce44b5861dfd0d 100644
--- a/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_editor.js
+++ b/x-pack/legacy/plugins/maps/public/layers/styles/components/vector/vector_style_editor.js
@@ -15,12 +15,9 @@ import { OrientationEditor } from './orientation/orientation_editor';
 import {
   getDefaultDynamicProperties,
   getDefaultStaticProperties,
-  vectorStyles
+  vectorStyles,
 } from '../../vector_style_defaults';
-import {
-  DEFAULT_FILL_COLORS,
-  DEFAULT_LINE_COLORS
-} from '../../color_utils';
+import { DEFAULT_FILL_COLORS, DEFAULT_LINE_COLORS } from '../../color_utils';
 import { VECTOR_SHAPE_TYPES } from '../../../sources/vector_feature_types';
 import { SYMBOLIZE_AS_ICON } from '../../vector_constants';
 import { i18n } from '@kbn/i18n';
@@ -35,7 +32,7 @@ export class VectorStyleEditor extends Component {
     defaultStaticProperties: getDefaultStaticProperties(),
     supportedFeatures: undefined,
     selectedFeatureType: undefined,
-  }
+  };
 
   componentWillUnmount() {
     this._isMounted = false;
@@ -71,9 +68,11 @@ export class VectorStyleEditor extends Component {
       return;
     }
 
-    if (_.isEqual(supportedFeatures, this.state.supportedFeatures)
-      && isPointsOnly === this.state.isPointsOnly
-      && isLinesOnly === this.state.isLinesOnly) {
+    if (
+      _.isEqual(supportedFeatures, this.state.supportedFeatures) &&
+      isPointsOnly === this.state.isPointsOnly &&
+      isLinesOnly === this.state.isLinesOnly
+    ) {
       return;
     }
 
@@ -84,8 +83,10 @@ export class VectorStyleEditor extends Component {
       selectedFeature = VECTOR_SHAPE_TYPES.LINE;
     }
 
-    if (!_.isEqual(supportedFeatures, this.state.supportedFeatures) ||
-      selectedFeature !== this.state.selectedFeature) {
+    if (
+      !_.isEqual(supportedFeatures, this.state.supportedFeatures) ||
+      selectedFeature !== this.state.selectedFeature
+    ) {
       this.setState({
         supportedFeatures,
         selectedFeature,
@@ -151,7 +152,7 @@ export class VectorStyleEditor extends Component {
 
   _renderPointProperties() {
     let iconOrientation;
-    if (this.props.styleProperties.symbol.options.symbolizeAs === SYMBOLIZE_AS_ICON)  {
+    if (this.props.styleProperties.symbol.options.symbolizeAs === SYMBOLIZE_AS_ICON) {
       iconOrientation = (
         <Fragment>
           <OrientationEditor
@@ -169,13 +170,13 @@ export class VectorStyleEditor extends Component {
 
     return (
       <Fragment>
-
         <VectorStyleSymbolEditor
           styleOptions={this.props.styleProperties.symbol.options}
           handlePropertyChange={this.props.handlePropertyChange}
           symbolOptions={SYMBOL_OPTIONS}
           isDarkMode={chrome.getUiSettingsClient().get('theme:darkMode', false)}
         />
+        <EuiSpacer size="m" />
 
         {this._renderFillColor()}
         <EuiSpacer size="m" />
@@ -189,7 +190,6 @@ export class VectorStyleEditor extends Component {
         {iconOrientation}
 
         {this._renderSymbolSize()}
-
       </Fragment>
     );
   }
@@ -221,13 +221,10 @@ export class VectorStyleEditor extends Component {
 
   _handleSelectedFeatureChange = selectedFeature => {
     this.setState({ selectedFeature });
-  }
+  };
 
   render() {
-    const {
-      supportedFeatures,
-      selectedFeature,
-    } = this.state;
+    const { supportedFeatures, selectedFeature } = this.state;
 
     if (!supportedFeatures) {
       return null;
@@ -248,21 +245,21 @@ export class VectorStyleEditor extends Component {
       {
         id: VECTOR_SHAPE_TYPES.POINT,
         label: i18n.translate('xpack.maps.vectorStyleEditor.pointLabel', {
-          defaultMessage: 'Points'
-        })
+          defaultMessage: 'Points',
+        }),
       },
       {
         id: VECTOR_SHAPE_TYPES.LINE,
         label: i18n.translate('xpack.maps.vectorStyleEditor.lineLabel', {
-          defaultMessage: 'Lines'
-        })
+          defaultMessage: 'Lines',
+        }),
       },
       {
         id: VECTOR_SHAPE_TYPES.POLYGON,
         label: i18n.translate('xpack.maps.vectorStyleEditor.polygonLabel', {
-          defaultMessage: 'Polygons'
-        })
-      }
+          defaultMessage: 'Polygons',
+        }),
+      },
     ];
 
     let styleProperties = this._renderPolygonProperties();
@@ -276,7 +273,7 @@ export class VectorStyleEditor extends Component {
       <Fragment>
         <EuiButtonGroup
           legend={i18n.translate('xpack.maps.vectorStyleEditor.featureTypeButtonGroupLegend', {
-            defaultMessage: 'vector feature button group'
+            defaultMessage: 'vector feature button group',
           })}
           options={featureButtons}
           idSelected={selectedFeature}
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/components/aggregation_list/__snapshots__/popover_form.test.tsx.snap b/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/components/aggregation_list/__snapshots__/popover_form.test.tsx.snap
index e387b0e93d7997..64256067ecdfaf 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/components/aggregation_list/__snapshots__/popover_form.test.tsx.snap
+++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/components/aggregation_list/__snapshots__/popover_form.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`Data Frame: Aggregation <PopoverForm /> Minimal initialization 1`] = `
 >
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={false}
     fullWidth={false}
     hasEmptyLabelSpace={false}
@@ -29,6 +30,7 @@ exports[`Data Frame: Aggregation <PopoverForm /> Minimal initialization 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={true}
     labelType="label"
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/components/group_by_list/__snapshots__/popover_form.test.tsx.snap b/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/components/group_by_list/__snapshots__/popover_form.test.tsx.snap
index c3a0432c4acf25..19e065a88e7c22 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/components/group_by_list/__snapshots__/popover_form.test.tsx.snap
+++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/components/group_by_list/__snapshots__/popover_form.test.tsx.snap
@@ -10,6 +10,7 @@ exports[`Data Frame: Group By <PopoverForm /> Minimal initialization 1`] = `
 >
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={false}
     fullWidth={false}
     hasEmptyLabelSpace={false}
@@ -29,6 +30,7 @@ exports[`Data Frame: Group By <PopoverForm /> Minimal initialization 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={false}
     fullWidth={false}
     hasEmptyLabelSpace={false}
@@ -79,6 +81,7 @@ exports[`Data Frame: Group By <PopoverForm /> Minimal initialization 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={true}
     labelType="label"
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/components/group_by_list/popover_form.tsx b/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/components/group_by_list/popover_form.tsx
index 6687b3eddb60b5..7f2b746f07640c 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/components/group_by_list/popover_form.tsx
+++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/components/group_by_list/popover_form.tsx
@@ -15,6 +15,7 @@ import {
   EuiForm,
   EuiFormRow,
   EuiSelect,
+  EuiSpacer,
 } from '@elastic/eui';
 
 import { dictionaryToArray } from '../../../../../../common/types/common';
@@ -259,16 +260,19 @@ export const PopoverForm: React.SFC<Props> = ({
         </EuiFormRow>
       )}
       {isUnsupportedAgg && (
-        <EuiCodeEditor
-          mode="json"
-          theme="github"
-          width="100%"
-          height="200px"
-          value={JSON.stringify(getEsAggFromGroupByConfig(defaultData), null, 2)}
-          setOptions={{ fontSize: '12px', showLineNumbers: false }}
-          isReadOnly
-          aria-label="Read only code editor"
-        />
+        <Fragment>
+          <EuiSpacer size="m" />
+          <EuiCodeEditor
+            mode="json"
+            theme="github"
+            width="100%"
+            height="200px"
+            value={JSON.stringify(getEsAggFromGroupByConfig(defaultData), null, 2)}
+            setOptions={{ fontSize: '12px', showLineNumbers: false }}
+            isReadOnly
+            aria-label="Read only code editor"
+          />
+        </Fragment>
       )}
       <EuiFormRow hasEmptyLabelSpace>
         <EuiButton isDisabled={!formValid} onClick={() => onChange(getUpdatedItem())}>
diff --git a/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/components/step_define/step_define_form.tsx b/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/components/step_define/step_define_form.tsx
index fea9f425a25823..f0d2f5f86b4521 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/components/step_define/step_define_form.tsx
+++ b/x-pack/legacy/plugins/ml/public/data_frame/pages/data_frame_new_pivot/components/step_define/step_define_form.tsx
@@ -817,6 +817,7 @@ export const StepDefineForm: SFC<Props> = React.memo(({ overrides = {}, onChange
           </EuiFormRow>
           {!valid && (
             <Fragment>
+              <EuiSpacer size="m" />
               <EuiFormHelpText style={{ maxWidth: '320px' }}>
                 {i18n.translate('xpack.ml.dataframe.stepDefineForm.formHelp', {
                   defaultMessage:
diff --git a/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/create_analytics_advanced_editor/create_analytics_advanced_editor.tsx b/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/create_analytics_advanced_editor/create_analytics_advanced_editor.tsx
index 5a8fd24d202295..9c4731698e07af 100644
--- a/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/create_analytics_advanced_editor/create_analytics_advanced_editor.tsx
+++ b/x-pack/legacy/plugins/ml/public/data_frame_analytics/pages/analytics_management/components/create_analytics_advanced_editor/create_analytics_advanced_editor.tsx
@@ -135,6 +135,7 @@ export const CreateAnalyticsAdvancedEditor: FC<CreateAnalyticsFormProps> = ({ ac
               )}
             />
           </EuiFormRow>
+          <EuiSpacer />
           {advancedEditorMessages.map((advancedEditorMessage, i) => (
             <Fragment key={i}>
               <EuiCallOut
@@ -154,7 +155,7 @@ export const CreateAnalyticsAdvancedEditor: FC<CreateAnalyticsFormProps> = ({ ac
                   <p>{advancedEditorMessage.error}</p>
                 ) : null}
               </EuiCallOut>
-              <EuiSpacer size="s" />
+              <EuiSpacer />
             </Fragment>
           ))}
           <EuiFormRow
diff --git a/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/edit_flyout/__snapshots__/overrides.test.js.snap b/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/edit_flyout/__snapshots__/overrides.test.js.snap
index f303a93d33890a..08ed45cbb01093 100644
--- a/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/edit_flyout/__snapshots__/overrides.test.js.snap
+++ b/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/edit_flyout/__snapshots__/overrides.test.js.snap
@@ -4,6 +4,7 @@ exports[`Overrides render overrides 1`] = `
 <EuiForm>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error="Value must be greater than 3 and less than or equal to 1000000"
     fullWidth={false}
     hasEmptyLabelSpace={false}
@@ -27,6 +28,7 @@ exports[`Overrides render overrides 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label={
@@ -72,6 +74,7 @@ exports[`Overrides render overrides 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     helpText={
@@ -323,6 +326,7 @@ exports[`Overrides render overrides 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label={
diff --git a/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/import_settings/advanced.js b/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/import_settings/advanced.js
index a6bde9ececaeff..4488feee5b41d6 100644
--- a/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/import_settings/advanced.js
+++ b/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/import_settings/advanced.js
@@ -67,6 +67,8 @@ function AdvancedSettingsUi({
         />
       </EuiFormRow>
 
+      <EuiSpacer size="m" />
+
       <EuiCheckbox
         id="createIndexPattern"
         label={
diff --git a/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/import_settings/simple.js b/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/import_settings/simple.js
index 427ffeaee36400..2b1f6ea99c14c5 100644
--- a/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/import_settings/simple.js
+++ b/x-pack/legacy/plugins/ml/public/datavisualizer/file_based/components/import_settings/simple.js
@@ -11,6 +11,7 @@ import {
   EuiFieldText,
   EuiFormRow,
   EuiCheckbox,
+  EuiSpacer,
 } from '@elastic/eui';
 
 export const SimpleSettings = injectI18n(function ({
@@ -50,6 +51,8 @@ export const SimpleSettings = injectI18n(function ({
         />
       </EuiFormRow>
 
+      <EuiSpacer size="m" />
+
       <EuiCheckbox
         id="createIndexPattern"
         label={
diff --git a/x-pack/legacy/plugins/ml/public/jobs/components/custom_url_editor/__snapshots__/editor.test.js.snap b/x-pack/legacy/plugins/ml/public/jobs/components/custom_url_editor/__snapshots__/editor.test.js.snap
index 7b0cb2248207d7..650a84107c5a84 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/components/custom_url_editor/__snapshots__/editor.test.js.snap
+++ b/x-pack/legacy/plugins/ml/public/jobs/components/custom_url_editor/__snapshots__/editor.test.js.snap
@@ -23,6 +23,7 @@ exports[`CustomUrlEditor renders the editor for a dashboard type URL with a labe
       className="url-label"
       compressed={true}
       describedByIds={Array []}
+      display="row"
       error={Array []}
       fullWidth={false}
       hasEmptyLabelSpace={false}
@@ -48,6 +49,7 @@ exports[`CustomUrlEditor renders the editor for a dashboard type URL with a labe
     <EuiFormRow
       compressed={true}
       describedByIds={Array []}
+      display="row"
       fullWidth={false}
       hasEmptyLabelSpace={false}
       label={
@@ -84,6 +86,7 @@ exports[`CustomUrlEditor renders the editor for a dashboard type URL with a labe
     <EuiFormRow
       compressed={true}
       describedByIds={Array []}
+      display="row"
       fullWidth={false}
       hasEmptyLabelSpace={false}
       label={
@@ -118,6 +121,7 @@ exports[`CustomUrlEditor renders the editor for a dashboard type URL with a labe
     </EuiFormRow>
     <EuiFormRow
       describedByIds={Array []}
+      display="row"
       fullWidth={false}
       hasEmptyLabelSpace={false}
       label={
@@ -154,6 +158,7 @@ exports[`CustomUrlEditor renders the editor for a dashboard type URL with a labe
           className="url-time-range"
           compressed={true}
           describedByIds={Array []}
+          display="row"
           fullWidth={false}
           hasEmptyLabelSpace={false}
           label={
@@ -215,6 +220,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with an enti
       className="url-label"
       compressed={true}
       describedByIds={Array []}
+      display="row"
       error={Array []}
       fullWidth={false}
       hasEmptyLabelSpace={false}
@@ -240,6 +246,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with an enti
     <EuiFormRow
       compressed={true}
       describedByIds={Array []}
+      display="row"
       fullWidth={false}
       hasEmptyLabelSpace={false}
       label={
@@ -276,6 +283,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with an enti
     <EuiFormRow
       compressed={true}
       describedByIds={Array []}
+      display="row"
       fullWidth={false}
       hasEmptyLabelSpace={false}
       label={
@@ -310,6 +318,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with an enti
     </EuiFormRow>
     <EuiFormRow
       describedByIds={Array []}
+      display="row"
       fullWidth={false}
       hasEmptyLabelSpace={false}
       label={
@@ -352,6 +361,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with an enti
           className="url-time-range"
           compressed={true}
           describedByIds={Array []}
+          display="row"
           fullWidth={false}
           hasEmptyLabelSpace={false}
           label={
@@ -390,6 +400,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with an enti
           className="url-time-range"
           compressed={true}
           describedByIds={Array []}
+          display="row"
           error={
             Array [
               "Invalid interval format",
@@ -445,6 +456,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with valid t
       className="url-label"
       compressed={true}
       describedByIds={Array []}
+      display="row"
       error={Array []}
       fullWidth={false}
       hasEmptyLabelSpace={false}
@@ -470,6 +482,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with valid t
     <EuiFormRow
       compressed={true}
       describedByIds={Array []}
+      display="row"
       fullWidth={false}
       hasEmptyLabelSpace={false}
       label={
@@ -506,6 +519,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with valid t
     <EuiFormRow
       compressed={true}
       describedByIds={Array []}
+      display="row"
       fullWidth={false}
       hasEmptyLabelSpace={false}
       label={
@@ -540,6 +554,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with valid t
     </EuiFormRow>
     <EuiFormRow
       describedByIds={Array []}
+      display="row"
       fullWidth={false}
       hasEmptyLabelSpace={false}
       label={
@@ -582,6 +597,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with valid t
           className="url-time-range"
           compressed={true}
           describedByIds={Array []}
+          display="row"
           fullWidth={false}
           hasEmptyLabelSpace={false}
           label={
@@ -620,6 +636,7 @@ exports[`CustomUrlEditor renders the editor for a discover type URL with valid t
           className="url-time-range"
           compressed={true}
           describedByIds={Array []}
+          display="row"
           error={Array []}
           fullWidth={false}
           hasEmptyLabelSpace={false}
@@ -671,6 +688,7 @@ exports[`CustomUrlEditor renders the editor for a new dashboard type URL with no
       className="url-label"
       compressed={true}
       describedByIds={Array []}
+      display="row"
       error={
         Array [
           "A unique label must be supplied",
@@ -700,6 +718,7 @@ exports[`CustomUrlEditor renders the editor for a new dashboard type URL with no
     <EuiFormRow
       compressed={true}
       describedByIds={Array []}
+      display="row"
       fullWidth={false}
       hasEmptyLabelSpace={false}
       label={
@@ -736,6 +755,7 @@ exports[`CustomUrlEditor renders the editor for a new dashboard type URL with no
     <EuiFormRow
       compressed={true}
       describedByIds={Array []}
+      display="row"
       fullWidth={false}
       hasEmptyLabelSpace={false}
       label={
@@ -770,6 +790,7 @@ exports[`CustomUrlEditor renders the editor for a new dashboard type URL with no
     </EuiFormRow>
     <EuiFormRow
       describedByIds={Array []}
+      display="row"
       fullWidth={false}
       hasEmptyLabelSpace={false}
       label={
@@ -806,6 +827,7 @@ exports[`CustomUrlEditor renders the editor for a new dashboard type URL with no
           className="url-time-range"
           compressed={true}
           describedByIds={Array []}
+          display="row"
           fullWidth={false}
           hasEmptyLabelSpace={false}
           label={
@@ -867,6 +889,7 @@ exports[`CustomUrlEditor renders the editor for other type of URL with duplicate
       className="url-label"
       compressed={true}
       describedByIds={Array []}
+      display="row"
       error={
         Array [
           "A unique label must be supplied",
@@ -896,6 +919,7 @@ exports[`CustomUrlEditor renders the editor for other type of URL with duplicate
     <EuiFormRow
       compressed={true}
       describedByIds={Array []}
+      display="row"
       fullWidth={false}
       hasEmptyLabelSpace={false}
       label={
@@ -932,6 +956,7 @@ exports[`CustomUrlEditor renders the editor for other type of URL with duplicate
     <EuiFormRow
       compressed={true}
       describedByIds={Array []}
+      display="row"
       fullWidth={true}
       hasEmptyLabelSpace={false}
       label={
@@ -979,6 +1004,7 @@ exports[`CustomUrlEditor renders the editor for other type of URL with unique la
       className="url-label"
       compressed={true}
       describedByIds={Array []}
+      display="row"
       error={Array []}
       fullWidth={false}
       hasEmptyLabelSpace={false}
@@ -1004,6 +1030,7 @@ exports[`CustomUrlEditor renders the editor for other type of URL with unique la
     <EuiFormRow
       compressed={true}
       describedByIds={Array []}
+      display="row"
       fullWidth={false}
       hasEmptyLabelSpace={false}
       label={
@@ -1040,6 +1067,7 @@ exports[`CustomUrlEditor renders the editor for other type of URL with unique la
     <EuiFormRow
       compressed={true}
       describedByIds={Array []}
+      display="row"
       fullWidth={true}
       hasEmptyLabelSpace={false}
       label={
diff --git a/x-pack/legacy/plugins/ml/public/jobs/components/custom_url_editor/__snapshots__/list.test.js.snap b/x-pack/legacy/plugins/ml/public/jobs/components/custom_url_editor/__snapshots__/list.test.js.snap
index f4211050ebb268..9120dca7130f58 100644
--- a/x-pack/legacy/plugins/ml/public/jobs/components/custom_url_editor/__snapshots__/list.test.js.snap
+++ b/x-pack/legacy/plugins/ml/public/jobs/components/custom_url_editor/__snapshots__/list.test.js.snap
@@ -10,6 +10,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         error={Array []}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -36,6 +37,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
     <EuiFlexItem>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         label={
@@ -61,6 +63,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         error={Array []}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -90,6 +93,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={true}
         labelType="label"
@@ -120,6 +124,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={true}
         labelType="label"
@@ -154,6 +159,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         error={Array []}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -180,6 +186,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
     <EuiFlexItem>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         label={
@@ -205,6 +212,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         error={Array []}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -234,6 +242,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={true}
         labelType="label"
@@ -264,6 +273,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={true}
         labelType="label"
@@ -298,6 +308,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         error={Array []}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -324,6 +335,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
     <EuiFlexItem>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         label={
@@ -349,6 +361,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         error={Array []}
         fullWidth={false}
         hasEmptyLabelSpace={false}
@@ -378,6 +391,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={true}
         labelType="label"
@@ -408,6 +422,7 @@ exports[`CustomUrlList renders a list of custom URLs 1`] = `
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={true}
         labelType="label"
diff --git a/x-pack/legacy/plugins/ml/public/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap b/x-pack/legacy/plugins/ml/public/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap
index 0afcd7081a4d03..fa5947163a5c74 100644
--- a/x-pack/legacy/plugins/ml/public/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap
+++ b/x-pack/legacy/plugins/ml/public/settings/calendars/edit/calendar_form/__snapshots__/calendar_form.test.js.snap
@@ -36,6 +36,7 @@ exports[`CalendarForm Renders calendar form 1`] = `
   />
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={
       Array [
         "Use lowercase alphanumerics (a-z and 0-9), hyphens or underscores; must start and end with an alphanumeric character",
@@ -65,6 +66,7 @@ exports[`CalendarForm Renders calendar form 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label={
@@ -88,6 +90,7 @@ exports[`CalendarForm Renders calendar form 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label={
@@ -112,6 +115,7 @@ exports[`CalendarForm Renders calendar form 1`] = `
   </EuiFormRow>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     label={
@@ -140,6 +144,7 @@ exports[`CalendarForm Renders calendar form 1`] = `
   />
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={true}
     hasEmptyLabelSpace={false}
     label={
diff --git a/x-pack/legacy/plugins/ml/public/settings/calendars/edit/new_event_modal/new_event_modal.js b/x-pack/legacy/plugins/ml/public/settings/calendars/edit/new_event_modal/new_event_modal.js
index 40bd91a3a21662..2b554c2d46c1b4 100644
--- a/x-pack/legacy/plugins/ml/public/settings/calendars/edit/new_event_modal/new_event_modal.js
+++ b/x-pack/legacy/plugins/ml/public/settings/calendars/edit/new_event_modal/new_event_modal.js
@@ -291,6 +291,9 @@ export const NewEventModal = injectI18n(class NewEventModal extends Component {
                   fullWidth
                 />
               </EuiFormRow>
+
+              <EuiSpacer size="m" />
+
               {this.renderRangedDatePicker()}
 
             </EuiForm>
diff --git a/x-pack/legacy/plugins/ml/public/settings/filter_lists/components/add_item_popover/__snapshots__/add_item_popover.test.js.snap b/x-pack/legacy/plugins/ml/public/settings/filter_lists/components/add_item_popover/__snapshots__/add_item_popover.test.js.snap
index 1517f2e40276d2..bd0c62d2d2fa77 100644
--- a/x-pack/legacy/plugins/ml/public/settings/filter_lists/components/add_item_popover/__snapshots__/add_item_popover.test.js.snap
+++ b/x-pack/legacy/plugins/ml/public/settings/filter_lists/components/add_item_popover/__snapshots__/add_item_popover.test.js.snap
@@ -32,6 +32,7 @@ exports[`AddItemPopover calls addItems with multiple items on clicking Add butto
     <EuiForm>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         label={
@@ -117,6 +118,7 @@ exports[`AddItemPopover opens the popover onButtonClick 1`] = `
     <EuiForm>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         label={
@@ -202,6 +204,7 @@ exports[`AddItemPopover renders the popover 1`] = `
     <EuiForm>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         label={
diff --git a/x-pack/legacy/plugins/ml/public/settings/filter_lists/components/edit_description_popover/__snapshots__/edit_description_popover.test.js.snap b/x-pack/legacy/plugins/ml/public/settings/filter_lists/components/edit_description_popover/__snapshots__/edit_description_popover.test.js.snap
index f3eb5002390948..5b7228b6e6a797 100644
--- a/x-pack/legacy/plugins/ml/public/settings/filter_lists/components/edit_description_popover/__snapshots__/edit_description_popover.test.js.snap
+++ b/x-pack/legacy/plugins/ml/public/settings/filter_lists/components/edit_description_popover/__snapshots__/edit_description_popover.test.js.snap
@@ -32,6 +32,7 @@ exports[`FilterListUsagePopover opens the popover onButtonClick 1`] = `
       <EuiForm>
         <EuiFormRow
           describedByIds={Array []}
+          display="row"
           fullWidth={false}
           hasEmptyLabelSpace={false}
           label={
@@ -90,6 +91,7 @@ exports[`FilterListUsagePopover renders the popover with a description 1`] = `
       <EuiForm>
         <EuiFormRow
           describedByIds={Array []}
+          display="row"
           fullWidth={false}
           hasEmptyLabelSpace={false}
           label={
@@ -148,6 +150,7 @@ exports[`FilterListUsagePopover renders the popover with no description 1`] = `
       <EuiForm>
         <EuiFormRow
           describedByIds={Array []}
+          display="row"
           fullWidth={false}
           hasEmptyLabelSpace={false}
           label={
diff --git a/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/__snapshots__/header.test.js.snap b/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/__snapshots__/header.test.js.snap
index 27eadebec58c0e..ced89dde8eb1af 100644
--- a/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/__snapshots__/header.test.js.snap
+++ b/x-pack/legacy/plugins/ml/public/settings/filter_lists/edit/__snapshots__/header.test.js.snap
@@ -54,6 +54,7 @@ exports[`EditFilterListHeader renders the header when creating a new filter list
   />
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={false}
     hasEmptyLabelSpace={false}
     helpText="Use lowercase alphanumerics (a-z and 0-9), hyphens or underscores; must start and end with an alphanumeric character"
@@ -161,6 +162,7 @@ exports[`EditFilterListHeader renders the header when creating a new filter list
   />
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     error={
       Array [
         "Use lowercase alphanumerics (a-z and 0-9), hyphens or underscores; must start and end with an alphanumeric character",
diff --git a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
index 8209b792ec4d7d..cdc183cec39b96 100644
--- a/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
+++ b/x-pack/legacy/plugins/remote_clusters/public/app/sections/components/remote_cluster_form/__snapshots__/remote_cluster_form.test.js.snap
@@ -42,36 +42,42 @@ Array [
             data-test-subj="remoteClusterFormNameFormRow"
             id="mockId-row"
           >
-            <div>
+            <div
+              class="euiFormRow__labelWrapper"
+            >
               <label
                 aria-invalid="false"
-                class="euiFormLabel"
+                class="euiFormLabel euiFormRow__label"
                 for="mockId"
               >
                 Name
               </label>
             </div>
             <div
-              class="euiFormControlLayout euiFormControlLayout--fullWidth"
+              class="euiFormRow__fieldWrapper"
             >
               <div
-                class="euiFormControlLayout__childrenWrapper"
+                class="euiFormControlLayout euiFormControlLayout--fullWidth"
               >
-                <input
-                  aria-describedby="mockId-help"
-                  class="euiFieldText euiFieldText--fullWidth"
-                  data-test-subj="remoteClusterFormNameInput"
-                  id="mockId"
-                  type="text"
-                  value=""
-                />
+                <div
+                  class="euiFormControlLayout__childrenWrapper"
+                >
+                  <input
+                    aria-describedby="mockId-help"
+                    class="euiFieldText euiFieldText--fullWidth"
+                    data-test-subj="remoteClusterFormNameInput"
+                    id="mockId"
+                    type="text"
+                    value=""
+                  />
+                </div>
+              </div>
+              <div
+                class="euiFormHelpText euiFormRow__text"
+                id="mockId-help"
+              >
+                Name can only contain letters, numbers, underscores, and dashes.
               </div>
-            </div>
-            <div
-              class="euiFormHelpText euiFormRow__text"
-              id="mockId-help"
-            >
-              Name can only contain letters, numbers, underscores, and dashes.
             </div>
           </div>
         </div>
@@ -114,70 +120,76 @@ Array [
             data-test-subj="remoteClusterFormSeedNodesFormRow"
             id="mockId-row"
           >
-            <div>
+            <div
+              class="euiFormRow__labelWrapper"
+            >
               <label
                 aria-invalid="false"
-                class="euiFormLabel"
+                class="euiFormLabel euiFormRow__label"
                 for="mockId"
               >
                 Seed nodes
               </label>
             </div>
             <div
-              aria-describedby="mockId-help"
-              aria-expanded="false"
-              aria-haspopup="listbox"
-              class="euiComboBox euiComboBox--fullWidth"
-              data-test-subj="remoteClusterFormSeedsInput"
-              role="combobox"
+              class="euiFormRow__fieldWrapper"
             >
               <div
-                class="euiFormControlLayout euiFormControlLayout--fullWidth"
+                aria-describedby="mockId-help"
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                class="euiComboBox euiComboBox--fullWidth"
+                data-test-subj="remoteClusterFormSeedsInput"
+                role="combobox"
               >
                 <div
-                  class="euiFormControlLayout__childrenWrapper"
+                  class="euiFormControlLayout euiFormControlLayout--fullWidth"
                 >
                   <div
-                    class="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap-isClearable"
-                    data-test-subj="comboBoxInput"
-                    tabindex="-1"
+                    class="euiFormControlLayout__childrenWrapper"
                   >
-                    <p
-                      class="euiComboBoxPlaceholder"
-                    >
-                      host:port
-                    </p>
                     <div
-                      class="euiComboBox__input"
-                      style="font-size:14px;display:inline-block"
+                      class="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap-isClearable"
+                      data-test-subj="comboBoxInput"
+                      tabindex="-1"
                     >
-                      <input
-                        data-test-subj="comboBoxSearchInput"
-                        id="mockId"
-                        role="textbox"
-                        style="box-sizing:content-box;width:1px"
-                        value=""
-                      />
+                      <p
+                        class="euiComboBoxPlaceholder"
+                      >
+                        host:port
+                      </p>
                       <div
-                        style="position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre"
-                      />
+                        class="euiComboBox__input"
+                        style="font-size:14px;display:inline-block"
+                      >
+                        <input
+                          data-test-subj="comboBoxSearchInput"
+                          id="mockId"
+                          role="textbox"
+                          style="box-sizing:content-box;width:1px"
+                          value=""
+                        />
+                        <div
+                          style="position:absolute;top:0;left:0;visibility:hidden;height:0;overflow:scroll;white-space:pre"
+                        />
+                      </div>
                     </div>
                   </div>
                 </div>
               </div>
-            </div>
-            <div
-              class="euiFormHelpText euiFormRow__text"
-              id="mockId-help"
-            >
-              An IP address or host name, followed by the 
-              <button
-                class="euiLink euiLink--primary"
-                type="button"
+              <div
+                class="euiFormHelpText euiFormRow__text"
+                id="mockId-help"
               >
-                transport port
-              </button>
-               of the remote cluster.
+                An IP address or host name, followed by the 
+                <button
+                  class="euiLink euiLink--primary"
+                  type="button"
+                >
+                  transport port
+                </button>
+                 of the remote cluster.
+              </div>
             </div>
           </div>
         </div>
@@ -233,47 +245,51 @@ Array [
             id="mockId-row"
           >
             <div
-              class="euiSwitch"
+              class="euiFormRow__fieldWrapper"
             >
-              <input
-                class="euiSwitch__input"
-                data-test-subj="remoteClusterFormSkipUnavailableFormToggle"
-                id="mockId"
-                type="checkbox"
-              />
-              <span
-                class="euiSwitch__body"
+              <div
+                class="euiSwitch"
               >
-                <span
-                  class="euiSwitch__thumb"
+                <input
+                  class="euiSwitch__input"
+                  data-test-subj="remoteClusterFormSkipUnavailableFormToggle"
+                  id="mockId"
+                  type="checkbox"
                 />
                 <span
-                  class="euiSwitch__track"
+                  class="euiSwitch__body"
                 >
-                  <svg
-                    class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
-                    focusable="false"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
-                  />
-                  <svg
-                    class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
-                    focusable="false"
-                    height="16"
-                    viewBox="0 0 16 16"
-                    width="16"
-                    xmlns="http://www.w3.org/2000/svg"
+                  <span
+                    class="euiSwitch__thumb"
                   />
+                  <span
+                    class="euiSwitch__track"
+                  >
+                    <svg
+                      class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+                      focusable="false"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                    <svg
+                      class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
+                      focusable="false"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    />
+                  </span>
                 </span>
-              </span>
-              <label
-                class="euiSwitch__label"
-                for="mockId"
-              >
-                Skip if unavailable
-              </label>
+                <label
+                  class="euiSwitch__label"
+                  for="mockId"
+                >
+                  Skip if unavailable
+                </label>
+              </div>
             </div>
           </div>
         </div>
@@ -352,43 +368,49 @@ Array [
     data-test-subj="remoteClusterFormNameFormRow"
     id="mockId-row"
   >
-    <div>
+    <div
+      class="euiFormRow__labelWrapper"
+    >
       <label
         aria-invalid="true"
-        class="euiFormLabel euiFormLabel-isInvalid"
+        class="euiFormLabel euiFormRow__label euiFormLabel-isInvalid"
         for="mockId"
       >
         Name
       </label>
     </div>
     <div
-      class="euiFormControlLayout euiFormControlLayout--fullWidth"
+      class="euiFormRow__fieldWrapper"
     >
       <div
-        class="euiFormControlLayout__childrenWrapper"
+        class="euiFormControlLayout euiFormControlLayout--fullWidth"
       >
-        <input
-          aria-describedby="mockId-help mockId-error-0"
-          class="euiFieldText euiFieldText--fullWidth"
-          data-test-subj="remoteClusterFormNameInput"
-          id="mockId"
-          type="text"
-          value=""
-        />
+        <div
+          class="euiFormControlLayout__childrenWrapper"
+        >
+          <input
+            aria-describedby="mockId-help mockId-error-0"
+            class="euiFieldText euiFieldText--fullWidth"
+            data-test-subj="remoteClusterFormNameInput"
+            id="mockId"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+      <div
+        aria-live="polite"
+        class="euiFormErrorText euiFormRow__text"
+        id="mockId-error-0"
+      >
+        Name is required.
+      </div>
+      <div
+        class="euiFormHelpText euiFormRow__text"
+        id="mockId-help"
+      >
+        Name can only contain letters, numbers, underscores, and dashes.
       </div>
-    </div>
-    <div
-      aria-live="polite"
-      class="euiFormErrorText euiFormRow__text"
-      id="mockId-error-0"
-    >
-      Name is required.
-    </div>
-    <div
-      class="euiFormHelpText euiFormRow__text"
-      id="mockId-help"
-    >
-      Name can only contain letters, numbers, underscores, and dashes.
     </div>
   </div>,
   <div
@@ -396,77 +418,83 @@ Array [
     data-test-subj="remoteClusterFormSeedNodesFormRow"
     id="mockId-row"
   >
-    <div>
+    <div
+      class="euiFormRow__labelWrapper"
+    >
       <label
         aria-invalid="true"
-        class="euiFormLabel euiFormLabel-isInvalid"
+        class="euiFormLabel euiFormRow__label euiFormLabel-isInvalid"
         for="mockId"
       >
         Seed nodes
       </label>
     </div>
     <div
-      aria-describedby="mockId-help mockId-error-0"
-      aria-expanded="false"
-      aria-haspopup="listbox"
-      class="euiComboBox euiComboBox-isInvalid euiComboBox--fullWidth"
-      data-test-subj="remoteClusterFormSeedsInput"
-      role="combobox"
+      class="euiFormRow__fieldWrapper"
     >
       <div
-        class="euiFormControlLayout euiFormControlLayout--fullWidth"
+        aria-describedby="mockId-help mockId-error-0"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        class="euiComboBox euiComboBox-isInvalid euiComboBox--fullWidth"
+        data-test-subj="remoteClusterFormSeedsInput"
+        role="combobox"
       >
         <div
-          class="euiFormControlLayout__childrenWrapper"
+          class="euiFormControlLayout euiFormControlLayout--fullWidth"
         >
           <div
-            class="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap-isClearable"
-            data-test-subj="comboBoxInput"
-            tabindex="-1"
+            class="euiFormControlLayout__childrenWrapper"
           >
-            <p
-              class="euiComboBoxPlaceholder"
-            >
-              host:port
-            </p>
             <div
-              class="euiComboBox__input"
-              style="font-size: 14px; display: inline-block;"
+              class="euiComboBox__inputWrap euiComboBox__inputWrap--fullWidth euiComboBox__inputWrap-isClearable"
+              data-test-subj="comboBoxInput"
+              tabindex="-1"
             >
-              <input
-                data-test-subj="comboBoxSearchInput"
-                id="mockId"
-                role="textbox"
-                style="box-sizing: content-box; width: 2px;"
-                value=""
-              />
+              <p
+                class="euiComboBoxPlaceholder"
+              >
+                host:port
+              </p>
               <div
-                style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
-              />
+                class="euiComboBox__input"
+                style="font-size: 14px; display: inline-block;"
+              >
+                <input
+                  data-test-subj="comboBoxSearchInput"
+                  id="mockId"
+                  role="textbox"
+                  style="box-sizing: content-box; width: 2px;"
+                  value=""
+                />
+                <div
+                  style="position: absolute; top: 0px; left: 0px; visibility: hidden; height: 0px; overflow: scroll; white-space: pre; font-family: -webkit-small-control; letter-spacing: normal; text-transform: none;"
+                />
+              </div>
             </div>
           </div>
         </div>
       </div>
-    </div>
-    <div
-      aria-live="polite"
-      class="euiFormErrorText euiFormRow__text"
-      id="mockId-error-0"
-    >
-      At least one seed node is required.
-    </div>
-    <div
-      class="euiFormHelpText euiFormRow__text"
-      id="mockId-help"
-    >
-      An IP address or host name, followed by the 
-      <button
-        class="euiLink euiLink--primary"
-        type="button"
+      <div
+        aria-live="polite"
+        class="euiFormErrorText euiFormRow__text"
+        id="mockId-error-0"
       >
-        transport port
-      </button>
-       of the remote cluster.
+        At least one seed node is required.
+      </div>
+      <div
+        class="euiFormHelpText euiFormRow__text"
+        id="mockId-help"
+      >
+        An IP address or host name, followed by the 
+        <button
+          class="euiLink euiLink--primary"
+          type="button"
+        >
+          transport port
+        </button>
+         of the remote cluster.
+      </div>
     </div>
   </div>,
   <div
@@ -475,47 +503,51 @@ Array [
     id="mockId-row"
   >
     <div
-      class="euiSwitch"
+      class="euiFormRow__fieldWrapper"
     >
-      <input
-        class="euiSwitch__input"
-        data-test-subj="remoteClusterFormSkipUnavailableFormToggle"
-        id="mockId"
-        type="checkbox"
-      />
-      <span
-        class="euiSwitch__body"
+      <div
+        class="euiSwitch"
       >
-        <span
-          class="euiSwitch__thumb"
+        <input
+          class="euiSwitch__input"
+          data-test-subj="remoteClusterFormSkipUnavailableFormToggle"
+          id="mockId"
+          type="checkbox"
         />
         <span
-          class="euiSwitch__track"
+          class="euiSwitch__body"
         >
-          <svg
-            class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
-            focusable="false"
-            height="16"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-          />
-          <svg
-            class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
-            focusable="false"
-            height="16"
-            viewBox="0 0 16 16"
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="euiSwitch__thumb"
           />
+          <span
+            class="euiSwitch__track"
+          >
+            <svg
+              class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
+              focusable="false"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            />
+            <svg
+              class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
+              focusable="false"
+              height="16"
+              viewBox="0 0 16 16"
+              width="16"
+              xmlns="http://www.w3.org/2000/svg"
+            />
+          </span>
         </span>
-      </span>
-      <label
-        class="euiSwitch__label"
-        for="mockId"
-      >
-        Skip if unavailable
-      </label>
+        <label
+          class="euiSwitch__label"
+          for="mockId"
+        >
+          Skip if unavailable
+        </label>
+      </div>
     </div>
   </div>,
   <div
diff --git a/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_logistics.js b/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_logistics.js
index 62b00453950993..630e81a4235e49 100644
--- a/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_logistics.js
+++ b/x-pack/legacy/plugins/rollup/public/crud_app/sections/job_create/steps/step_logistics.js
@@ -179,6 +179,8 @@ export class StepLogisticsUi extends Component {
             />
           </EuiFormRow>
 
+          <EuiSpacer size="m" />
+
           <EuiText size="s">
             <EuiLink onClick={this.hideAdvancedCron}>
               <FormattedMessage
diff --git a/x-pack/legacy/plugins/security/public/views/login/components/basic_login_form/__snapshots__/basic_login_form.test.tsx.snap b/x-pack/legacy/plugins/security/public/views/login/components/basic_login_form/__snapshots__/basic_login_form.test.tsx.snap
index ae0648013d2e96..35cac1c21d3ba5 100644
--- a/x-pack/legacy/plugins/security/public/views/login/components/basic_login_form/__snapshots__/basic_login_form.test.tsx.snap
+++ b/x-pack/legacy/plugins/security/public/views/login/components/basic_login_form/__snapshots__/basic_login_form.test.tsx.snap
@@ -8,6 +8,7 @@ exports[`BasicLoginForm renders as expected 1`] = `
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         label={
@@ -36,6 +37,7 @@ exports[`BasicLoginForm renders as expected 1`] = `
       </EuiFormRow>
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={false}
         label={
diff --git a/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap b/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap
index 93f0f8f1e471d0..131e19f309cdeb 100644
--- a/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap
+++ b/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/elasticsearch_privileges.test.tsx.snap
@@ -43,6 +43,7 @@ exports[`it renders without crashing 1`] = `
   >
     <EuiFormRow
       describedByIds={Array []}
+      display="row"
       fullWidth={true}
       hasEmptyLabelSpace={true}
       labelType="label"
@@ -109,6 +110,7 @@ exports[`it renders without crashing 1`] = `
   >
     <EuiFormRow
       describedByIds={Array []}
+      display="row"
       fullWidth={false}
       hasEmptyLabelSpace={true}
       labelType="label"
diff --git a/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/index_privilege_form.test.tsx.snap b/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/index_privilege_form.test.tsx.snap
index 6f03204b08f3b8..9c9ac8d469767e 100644
--- a/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/index_privilege_form.test.tsx.snap
+++ b/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/es/__snapshots__/index_privilege_form.test.tsx.snap
@@ -11,6 +11,7 @@ exports[`it renders without crashing 1`] = `
         <EuiFlexItem>
           <EuiFormRow
             describedByIds={Array []}
+            display="row"
             fullWidth={true}
             hasEmptyLabelSpace={false}
             isInvalid={false}
@@ -40,6 +41,7 @@ exports[`it renders without crashing 1`] = `
         <EuiFlexItem>
           <EuiFormRow
             describedByIds={Array []}
+            display="row"
             fullWidth={true}
             hasEmptyLabelSpace={false}
             label={
@@ -127,6 +129,7 @@ exports[`it renders without crashing 1`] = `
     >
       <EuiFormRow
         describedByIds={Array []}
+        display="row"
         fullWidth={false}
         hasEmptyLabelSpace={true}
         labelType="label"
diff --git a/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap b/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap
index f50382003f87ae..c5572aa6262916 100644
--- a/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap
+++ b/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/kibana/simple_privilege_section/__snapshots__/simple_privilege_section.test.tsx.snap
@@ -27,6 +27,7 @@ exports[`<SimplePrivilegeForm> renders without crashing 1`] = `
   >
     <EuiFormRow
       describedByIds={Array []}
+      display="row"
       fullWidth={false}
       hasEmptyLabelSpace={true}
       labelType="label"
diff --git a/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/__snapshots__/privilege_space_form.test.tsx.snap b/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/__snapshots__/privilege_space_form.test.tsx.snap
index b65a181093b546..a2768361a270c9 100644
--- a/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/__snapshots__/privilege_space_form.test.tsx.snap
+++ b/x-pack/legacy/plugins/security/public/views/management/edit_role/components/privileges/kibana/space_aware_privilege_section/__snapshots__/privilege_space_form.test.tsx.snap
@@ -29,6 +29,7 @@ exports[`<PrivilegeSpaceForm> renders without crashing 1`] = `
       <EuiForm>
         <EuiFormRow
           describedByIds={Array []}
+          display="row"
           fullWidth={true}
           hasEmptyLabelSpace={false}
           label="Spaces"
@@ -160,6 +161,7 @@ exports[`<PrivilegeSpaceForm> renders without crashing 1`] = `
         </EuiFormRow>
         <EuiFormRow
           describedByIds={Array []}
+          display="row"
           fullWidth={true}
           hasEmptyLabelSpace={false}
           label="Privilege"
diff --git a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_logistics.tsx b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_logistics.tsx
index f96eb5347bc183..cde5d89fb5e64a 100644
--- a/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_logistics.tsx
+++ b/x-pack/legacy/plugins/snapshot_restore/public/app/components/policy_form/steps/step_logistics.tsx
@@ -405,6 +405,8 @@ export const PolicyStepLogistics: React.FunctionComponent<StepProps> = ({
             />
           </EuiFormRow>
 
+          <EuiSpacer size="m" />
+
           <EuiText size="s">
             <EuiLink
               onClick={() => {
diff --git a/x-pack/legacy/plugins/spaces/public/views/management/components/__snapshots__/confirm_delete_modal.test.tsx.snap b/x-pack/legacy/plugins/spaces/public/views/management/components/__snapshots__/confirm_delete_modal.test.tsx.snap
index 41efb30ce97535..d202df26b572fd 100644
--- a/x-pack/legacy/plugins/spaces/public/views/management/components/__snapshots__/confirm_delete_modal.test.tsx.snap
+++ b/x-pack/legacy/plugins/spaces/public/views/management/components/__snapshots__/confirm_delete_modal.test.tsx.snap
@@ -46,6 +46,7 @@ exports[`ConfirmDeleteModal renders as expected 1`] = `
         </p>
         <EuiFormRow
           describedByIds={Array []}
+          display="row"
           error="Space names do not match."
           fullWidth={false}
           hasEmptyLabelSpace={false}
@@ -63,6 +64,7 @@ exports[`ConfirmDeleteModal renders as expected 1`] = `
             value=""
           />
         </EuiFormRow>
+        <EuiSpacer />
         <EuiCallOut
           color="warning"
           size="m"
diff --git a/x-pack/legacy/plugins/spaces/public/views/management/components/confirm_delete_modal.tsx b/x-pack/legacy/plugins/spaces/public/views/management/components/confirm_delete_modal.tsx
index 34a4a84c70a572..51f595fdbff4d4 100644
--- a/x-pack/legacy/plugins/spaces/public/views/management/components/confirm_delete_modal.tsx
+++ b/x-pack/legacy/plugins/spaces/public/views/management/components/confirm_delete_modal.tsx
@@ -20,6 +20,7 @@ import {
   EuiModalHeaderTitle,
   EuiModalProps,
   EuiOverlayMask,
+  EuiSpacer,
   EuiText,
 } from '@elastic/eui';
 import { FormattedMessage, InjectedIntl, injectI18n } from '@kbn/i18n/react';
@@ -61,15 +62,18 @@ class ConfirmDeleteModalUI extends Component<Props, State> {
         </span>
       );
       warning = (
-        <EuiCallOut color="warning">
-          <EuiText>
-            <FormattedMessage
-              id="xpack.spaces.management.confirmDeleteModal.redirectAfterDeletingCurrentSpaceWarningMessage"
-              defaultMessage="You are about to delete your current space {name}. You will be redirected to choose a different space if you continue."
-              values={{ name }}
-            />
-          </EuiText>
-        </EuiCallOut>
+        <>
+          <EuiSpacer />
+          <EuiCallOut color="warning">
+            <EuiText>
+              <FormattedMessage
+                id="xpack.spaces.management.confirmDeleteModal.redirectAfterDeletingCurrentSpaceWarningMessage"
+                defaultMessage="You are about to delete your current space {name}. You will be redirected to choose a different space if you continue."
+                values={{ name }}
+              />
+            </EuiText>
+          </EuiCallOut>
+        </>
       );
     }
 
diff --git a/x-pack/legacy/plugins/spaces/public/views/management/edit_space/customize_space/__snapshots__/customize_space_avatar.test.tsx.snap b/x-pack/legacy/plugins/spaces/public/views/management/edit_space/customize_space/__snapshots__/customize_space_avatar.test.tsx.snap
index d2e05e114663ab..646d2ed440b634 100644
--- a/x-pack/legacy/plugins/spaces/public/views/management/edit_space/customize_space/__snapshots__/customize_space_avatar.test.tsx.snap
+++ b/x-pack/legacy/plugins/spaces/public/views/management/edit_space/customize_space/__snapshots__/customize_space_avatar.test.tsx.snap
@@ -4,44 +4,41 @@ exports[`renders without crashing 1`] = `
 <form
   onSubmit={[Function]}
 >
-  <EuiFlexItem
-    grow={false}
+  <EuiFormRow
+    describedByIds={Array []}
+    display="row"
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    label="Initials (2 max)"
+    labelType="label"
   >
-    <EuiFormRow
-      describedByIds={Array []}
+    <EuiFieldText
+      compressed={false}
       fullWidth={false}
-      hasEmptyLabelSpace={false}
-      label="Initials (2 max)"
-      labelType="label"
-    >
-      <EuiFieldText
-        compressed={false}
-        fullWidth={false}
-        inputRef={[Function]}
-        isLoading={false}
-        name="spaceInitials"
-        onChange={[Function]}
-        value=""
-      />
-    </EuiFormRow>
-  </EuiFlexItem>
-  <EuiFlexItem
-    grow={true}
+      inputRef={[Function]}
+      isLoading={false}
+      name="spaceInitials"
+      onChange={[Function]}
+      value=""
+    />
+  </EuiFormRow>
+  <EuiSpacer
+    size="m"
+  />
+  <EuiFormRow
+    describedByIds={Array []}
+    display="row"
+    fullWidth={false}
+    hasEmptyLabelSpace={false}
+    isInvalid={false}
+    label="Color"
+    labelType="label"
   >
-    <EuiFormRow
-      describedByIds={Array []}
-      fullWidth={false}
-      hasEmptyLabelSpace={false}
+    <EuiColorPicker
+      color="#BFA180"
       isInvalid={false}
-      label="Color"
-      labelType="label"
-    >
-      <EuiColorPicker
-        color="#BFA180"
-        isInvalid={false}
-        onChange={[Function]}
-      />
-    </EuiFormRow>
-  </EuiFlexItem>
+      onChange={[Function]}
+    />
+  </EuiFormRow>
 </form>
 `;
diff --git a/x-pack/legacy/plugins/spaces/public/views/management/edit_space/customize_space/__snapshots__/space_identifier.test.tsx.snap b/x-pack/legacy/plugins/spaces/public/views/management/edit_space/customize_space/__snapshots__/space_identifier.test.tsx.snap
index d8fbe90000f9aa..bcff2efcebeaf8 100644
--- a/x-pack/legacy/plugins/spaces/public/views/management/edit_space/customize_space/__snapshots__/space_identifier.test.tsx.snap
+++ b/x-pack/legacy/plugins/spaces/public/views/management/edit_space/customize_space/__snapshots__/space_identifier.test.tsx.snap
@@ -4,6 +4,7 @@ exports[`renders without crashing 1`] = `
 <Fragment>
   <EuiFormRow
     describedByIds={Array []}
+    display="row"
     fullWidth={true}
     hasEmptyLabelSpace={false}
     helpText={
diff --git a/x-pack/legacy/plugins/spaces/public/views/management/edit_space/customize_space/customize_space_avatar.tsx b/x-pack/legacy/plugins/spaces/public/views/management/edit_space/customize_space/customize_space_avatar.tsx
index dea3f0d8cec164..519b0cc8b6fbe6 100644
--- a/x-pack/legacy/plugins/spaces/public/views/management/edit_space/customize_space/customize_space_avatar.tsx
+++ b/x-pack/legacy/plugins/spaces/public/views/management/edit_space/customize_space/customize_space_avatar.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { EuiColorPicker, EuiFieldText, EuiFlexItem, EuiFormRow, isValidHex } from '@elastic/eui';
+import { EuiColorPicker, EuiFieldText, EuiSpacer, EuiFormRow, isValidHex } from '@elastic/eui';
 import { InjectedIntl, injectI18n } from '@kbn/i18n/react';
 import React, { ChangeEvent, Component } from 'react';
 import { MAX_SPACE_INITIALS } from '../../../../../common/constants';
@@ -42,38 +42,35 @@ class CustomizeSpaceAvatarUI extends Component<Props, State> {
 
     return (
       <form onSubmit={() => false}>
-        <EuiFlexItem grow={false}>
-          <EuiFormRow
-            label={intl.formatMessage({
-              id: 'xpack.spaces.management.customizeSpaceAvatar.initialItemsFormRowLabel',
-              defaultMessage: 'Initials (2 max)',
-            })}
-          >
-            <EuiFieldText
-              inputRef={this.initialsInputRef}
-              name="spaceInitials"
-              // allows input to be cleared or otherwise invalidated while user is editing the initials,
-              // without defaulting to the derived initials provided by `getSpaceInitials`
-              value={initialsHasFocus ? pendingInitials || '' : getSpaceInitials(space)}
-              onChange={this.onInitialsChange}
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
-        <EuiFlexItem grow={true}>
-          <EuiFormRow
-            label={intl.formatMessage({
-              id: 'xpack.spaces.management.customizeSpaceAvatar.colorFormRowLabel',
-              defaultMessage: 'Color',
-            })}
+        <EuiFormRow
+          label={intl.formatMessage({
+            id: 'xpack.spaces.management.customizeSpaceAvatar.initialItemsFormRowLabel',
+            defaultMessage: 'Initials (2 max)',
+          })}
+        >
+          <EuiFieldText
+            inputRef={this.initialsInputRef}
+            name="spaceInitials"
+            // allows input to be cleared or otherwise invalidated while user is editing the initials,
+            // without defaulting to the derived initials provided by `getSpaceInitials`
+            value={initialsHasFocus ? pendingInitials || '' : getSpaceInitials(space)}
+            onChange={this.onInitialsChange}
+          />
+        </EuiFormRow>
+        <EuiSpacer size="m" />
+        <EuiFormRow
+          label={intl.formatMessage({
+            id: 'xpack.spaces.management.customizeSpaceAvatar.colorFormRowLabel',
+            defaultMessage: 'Color',
+          })}
+          isInvalid={isInvalidSpaceColor}
+        >
+          <EuiColorPicker
+            color={spaceColor}
+            onChange={this.onColorChange}
             isInvalid={isInvalidSpaceColor}
-          >
-            <EuiColorPicker
-              color={spaceColor}
-              onChange={this.onColorChange}
-              isInvalid={isInvalidSpaceColor}
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
+          />
+        </EuiFormRow>
       </form>
     );
   }
diff --git a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap
index 1951f2164fcacf..8f3e81945b1faa 100644
--- a/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap
+++ b/x-pack/legacy/plugins/uptime/public/components/functional/__tests__/__snapshots__/ping_list.test.tsx.snap
@@ -36,6 +36,7 @@ exports[`PingList component renders sorted list without errors 1`] = `
                 <EuiFormRow
                   aria-label="Status"
                   describedByIds={Array []}
+                  display="row"
                   fullWidth={false}
                   hasEmptyLabelSpace={false}
                   label="Status"
@@ -83,6 +84,7 @@ exports[`PingList component renders sorted list without errors 1`] = `
                 <EuiFormRow
                   aria-label="Location"
                   describedByIds={Array []}
+                  display="row"
                   fullWidth={false}
                   hasEmptyLabelSpace={false}
                   label="Location"
diff --git a/x-pack/package.json b/x-pack/package.json
index 490afb19353885..2c0aab2fcf2c38 100644
--- a/x-pack/package.json
+++ b/x-pack/package.json
@@ -184,7 +184,7 @@
     "@babel/runtime": "^7.5.5",
     "@elastic/ctags-langserver": "^0.1.9",
     "@elastic/datemath": "5.0.2",
-    "@elastic/eui": "13.8.1",
+    "@elastic/eui": "14.0.0",
     "@elastic/javascript-typescript-langserver": "^0.2.2",
     "@elastic/lsp-extension": "^0.1.2",
     "@elastic/maki": "6.1.0",
diff --git a/yarn.lock b/yarn.lock
index 89b1b414be290e..595a914e2fcd72 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -983,10 +983,10 @@
     tabbable "^1.1.0"
     uuid "^3.1.0"
 
-"@elastic/eui@13.8.1":
-  version "13.8.1"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-13.8.1.tgz#17bc50c634145a242be9fd4cdc78b857eadf60f3"
-  integrity sha512-4GbNpN3SIOFYviE2cfqIMCUmMf2KNSwEdMHP7cMwwa4u/W708NKOLB52Ipn0raWnWHAuIu9k5v9CrbaZfd1gdA==
+"@elastic/eui@14.0.0":
+  version "14.0.0"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-14.0.0.tgz#4af6e687aec7b981a87dc4da15699f0d92ad17de"
+  integrity sha512-kU3WNPysOYZkgsrQOO1RmLgQmJWYmjVHw4w4HoliwLka2N9AtEYtNu+rFprkDwO7Pvd1lxb/mRPGdJ6NZtZdvA==
   dependencies:
     "@types/lodash" "^4.14.116"
     "@types/numeral" "^0.0.25"