From c1b598fc270377bc44aa146eda16cbe883b98a70 Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Thu, 7 Nov 2024 07:11:05 +1100
Subject: [PATCH] [8.x] Remove deprecated usages of
 &#x60;EuiFormRow&#x60;&#x27;s
 &#x60;display&#x3D;&quot;columnCompressedSwitch&quot;&#x60; prop (#198709)
 (#199210)

# Backport

This will backport the following commits from `main` to `8.x`:
- [Remove deprecated usages of &#x60;EuiFormRow&#x60;&#x27;s
&#x60;display&#x3D;&quot;columnCompressedSwitch&quot;&#x60; prop
(#198709)](https://github.com/elastic/kibana/pull/198709)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Cee
Chen","email":"549407+cee-chen@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-11-06T18:18:43Z","message":"Remove
deprecated usages of `EuiFormRow`'s `display=\"columnCompressedSwitch\"`
prop (#198709)\n\n## Summary\r\n\r\nThis prop option has been deprecated
as of\r\nhttps://github.com/elastic/eui/pull/7968.
`display=\"columnCompressed\"`\r\nnow automatically accounts for
EuiSwitches (via `:has` CSS) and the\r\nextra prop option is no longer
needed.\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n\r\n---------\r\n\r\nCo-authored-by:
Marta Bondyra
<4283304+mbondyra@users.noreply.github.com>","sha":"83a9acd79b79fa650c610adb13bff1ced2c707fc","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","EUI","v9.0.0","backport:version","v8.17.0"],"title":"Remove
deprecated usages of `EuiFormRow`'s `display=\"columnCompressedSwitch\"`
prop","number":198709,"url":"https://github.com/elastic/kibana/pull/198709","mergeCommit":{"message":"Remove
deprecated usages of `EuiFormRow`'s `display=\"columnCompressedSwitch\"`
prop (#198709)\n\n## Summary\r\n\r\nThis prop option has been deprecated
as of\r\nhttps://github.com/elastic/eui/pull/7968.
`display=\"columnCompressed\"`\r\nnow automatically accounts for
EuiSwitches (via `:has` CSS) and the\r\nextra prop option is no longer
needed.\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n\r\n---------\r\n\r\nCo-authored-by:
Marta Bondyra
<4283304+mbondyra@users.noreply.github.com>","sha":"83a9acd79b79fa650c610adb13bff1ced2c707fc"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/198709","number":198709,"mergeCommit":{"message":"Remove
deprecated usages of `EuiFormRow`'s `display=\"columnCompressedSwitch\"`
prop (#198709)\n\n## Summary\r\n\r\nThis prop option has been deprecated
as of\r\nhttps://github.com/elastic/eui/pull/7968.
`display=\"columnCompressed\"`\r\nnow automatically accounts for
EuiSwitches (via `:has` CSS) and the\r\nextra prop option is no longer
needed.\r\n\r\n### Checklist\r\n\r\n- [x] [Unit or
functional\r\ntests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)\r\nwere
updated or added to match the most common scenarios\r\n- [x] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))\r\n\r\n---------\r\n\r\nCo-authored-by:
Marta Bondyra
<4283304+mbondyra@users.noreply.github.com>","sha":"83a9acd79b79fa650c610adb13bff1ced2c707fc"}},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Cee Chen <549407+cee-chen@users.noreply.github.com>
---
 .../annotation_editor_controls.tsx                 |  2 +-
 .../testing_embedded_lens/public/controls.tsx      | 14 +++++++-------
 .../settings/alerts_settings/alerts_settings.tsx   |  2 +-
 .../knowledge_base/knowledge_base_settings.tsx     |  2 +-
 .../partition_labels/extended_template.tsx         |  2 +-
 .../application/data_drift/data_drift_view.tsx     |  2 +-
 .../components/geo_upload_form/geo_upload_form.tsx |  2 +-
 .../editor_frame/config_panel/layer_panel.tsx      |  3 ---
 .../axis/extent/axis_extent_settings.tsx           |  2 +-
 .../axis/ticks/axis_ticks_settings.tsx             |  2 +-
 .../ignore_global_filter/settings_control.tsx      |  2 +-
 .../legend/legend_settings_popover.tsx             |  4 ++--
 .../datatable/components/dimension_editor.tsx      |  4 ++--
 .../datatable/components/toolbar.tsx               |  2 +-
 .../visualizations/gauge/dimension_editor.tsx      |  2 +-
 .../visualizations/partition/layer_settings.tsx    |  2 +-
 .../tagcloud/tagcloud_toolbar/tagcloud_toolbar.tsx |  2 +-
 .../xy/xy_config_panel/axis_settings_popover.tsx   |  6 +++---
 .../missing_values_option.tsx                      |  2 +-
 .../vector_style_editor.test.tsx.snap              |  4 ++--
 .../vector/components/color/dynamic_color_form.tsx |  2 +-
 .../categorical_data_mapping_popover.tsx           |  2 +-
 .../data_mapping/ordinal_data_mapping_popover.tsx  |  2 +-
 .../vector/components/size/dynamic_size_form.tsx   |  2 +-
 .../vector/components/vector_style_editor.tsx      |  2 +-
 .../public/components/force_refresh_checkbox.tsx   |  2 +-
 .../public/components/global_filter_checkbox.tsx   |  2 +-
 .../public/components/global_time_checkbox.tsx     |  2 +-
 .../layer_settings/layer_settings.tsx              |  6 +++---
 .../trigger_actions/filter_by_map_extent/modal.tsx |  2 +-
 .../trigger_actions/synchronize_movement/modal.tsx |  2 +-
 31 files changed, 43 insertions(+), 46 deletions(-)

diff --git a/packages/kbn-event-annotation-components/components/annotation_editor_controls/annotation_editor_controls.tsx b/packages/kbn-event-annotation-components/components/annotation_editor_controls/annotation_editor_controls.tsx
index fbef21087cffd..de230ac617987 100644
--- a/packages/kbn-event-annotation-components/components/annotation_editor_controls/annotation_editor_controls.tsx
+++ b/packages/kbn-event-annotation-components/components/annotation_editor_controls/annotation_editor_controls.tsx
@@ -386,7 +386,7 @@ const ConfigPanelGenericSwitch = ({
   value: boolean;
   onChange: (event: EuiSwitchEvent) => void;
 }) => (
-  <EuiFormRow label={label} display="columnCompressedSwitch" fullWidth>
+  <EuiFormRow label={label} display="columnCompressed" fullWidth>
     <EuiSwitch
       compressed
       label={label}
diff --git a/x-pack/examples/testing_embedded_lens/public/controls.tsx b/x-pack/examples/testing_embedded_lens/public/controls.tsx
index 6cfcd414ed66d..6f7658e981e4d 100644
--- a/x-pack/examples/testing_embedded_lens/public/controls.tsx
+++ b/x-pack/examples/testing_embedded_lens/public/controls.tsx
@@ -150,7 +150,7 @@ export function OverrideSwitch({
         </EuiToolTip>
       }
       helpText={helpText}
-      display="columnCompressedSwitch"
+      display="columnCompressed"
       hasChildLabel={false}
     >
       <EuiSwitch
@@ -249,7 +249,7 @@ export function AttributesMenu({
           </EuiFormRow>
         ) : null}
         {isPieChart(currentAttributes) ? (
-          <EuiFormRow label="Show values" display="columnCompressedSwitch">
+          <EuiFormRow label="Show values" display="columnCompressed">
             <EuiSwitch
               label="As percentage"
               name="switch"
@@ -269,7 +269,7 @@ export function AttributesMenu({
           </EuiFormRow>
         ) : null}
         {isHeatmapChart(currentAttributes) ? (
-          <EuiFormRow label="Show values" display="columnCompressedSwitch">
+          <EuiFormRow label="Show values" display="columnCompressed">
             <EuiSwitch
               label="As percentage"
               name="switch"
@@ -287,7 +287,7 @@ export function AttributesMenu({
           </EuiFormRow>
         ) : null}
         {isGaugeChart(currentAttributes) ? (
-          <EuiFormRow label="Ticks visibility" display="columnCompressedSwitch">
+          <EuiFormRow label="Ticks visibility" display="columnCompressed">
             <EuiSwitch
               label="Show ticks"
               name="switch"
@@ -522,7 +522,7 @@ export function PanelMenu({
         <EuiSpacer />
         <EuiFormRow
           label="Enable triggers"
-          display="columnCompressedSwitch"
+          display="columnCompressed"
           helpText="This setting controls the interactivity of the chart: when disabled the chart won't bubble any event on user action."
         >
           <EuiSwitch
@@ -538,7 +538,7 @@ export function PanelMenu({
         </EuiFormRow>
         <EuiFormRow
           label="Enable default action"
-          display="columnCompressedSwitch"
+          display="columnCompressed"
           helpText="When disabled the default panel actions (i.e. CSV download)"
         >
           <EuiSwitch
@@ -589,7 +589,7 @@ export function PanelMenu({
               </span>
             </EuiToolTip>
           }
-          display="columnCompressedSwitch"
+          display="columnCompressed"
           helpText="Pass a consumer defined action to show in the panel context menu."
         >
           <EuiSwitch
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/alerts_settings/alerts_settings.tsx b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/alerts_settings/alerts_settings.tsx
index 57ad1312a271e..4aa3611f523c3 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/alerts_settings/alerts_settings.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/assistant/settings/alerts_settings/alerts_settings.tsx
@@ -28,7 +28,7 @@ const AlertsSettingsComponent = ({ knowledgeBase, setUpdatedKnowledgeBaseSetting
   return (
     <>
       <EuiFormRow
-        display="columnCompressedSwitch"
+        display="columnCompressed"
         label={i18n.ALERTS_LABEL}
         css={css`
           .euiFormRow__labelWrapper {
diff --git a/x-pack/packages/kbn-elastic-assistant/impl/knowledge_base/knowledge_base_settings.tsx b/x-pack/packages/kbn-elastic-assistant/impl/knowledge_base/knowledge_base_settings.tsx
index 18bc0cbe5a384..49830d337e7cb 100644
--- a/x-pack/packages/kbn-elastic-assistant/impl/knowledge_base/knowledge_base_settings.tsx
+++ b/x-pack/packages/kbn-elastic-assistant/impl/knowledge_base/knowledge_base_settings.tsx
@@ -149,7 +149,7 @@ export const KnowledgeBaseSettings: React.FC<Props> = React.memo(
         <EuiHorizontalRule margin={'s'} />
 
         <EuiFormRow
-          display="columnCompressedSwitch"
+          display="columnCompressed"
           label={i18n.KNOWLEDGE_BASE_LABEL}
           css={css`
             .euiFormRow__labelWrapper {
diff --git a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/partition_labels/extended_template.tsx b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/partition_labels/extended_template.tsx
index 8884533fb7ce3..1be1d50824cfd 100644
--- a/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/partition_labels/extended_template.tsx
+++ b/x-pack/plugins/canvas/canvas_plugin_src/uis/arguments/partition_labels/extended_template.tsx
@@ -116,7 +116,7 @@ export const ExtendedTemplate: FunctionComponent<Props> = ({ onValueChange, argV
         />
       </EuiFormRow>
       <EuiSpacer size="s" />
-      <EuiFormRow label={strings.getValuesLabel()} display="columnCompressedSwitch">
+      <EuiFormRow label={strings.getValuesLabel()} display="columnCompressed">
         <EuiSwitch
           compressed
           checked={showValues}
diff --git a/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_view.tsx b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_view.tsx
index 170c96d1e0682..06f600928e2a2 100644
--- a/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_view.tsx
+++ b/x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_view.tsx
@@ -216,7 +216,7 @@ export const DataDriftView = ({
         runAnalysisDisabled={!dataView || requiresWindowParameters}
       >
         <EuiFlexItem grow={false}>
-          <EuiFormRow display="columnCompressedSwitch">
+          <EuiFormRow display="columnCompressed">
             <EuiSwitch
               label={showOnlyDriftedFieldsOptionLabel}
               aria-label={showOnlyDriftedFieldsOptionLabel}
diff --git a/x-pack/plugins/file_upload/public/components/geo_upload_form/geo_upload_form.tsx b/x-pack/plugins/file_upload/public/components/geo_upload_form/geo_upload_form.tsx
index 05b6c6244810f..d5720e4f2f556 100644
--- a/x-pack/plugins/file_upload/public/components/geo_upload_form/geo_upload_form.tsx
+++ b/x-pack/plugins/file_upload/public/components/geo_upload_form/geo_upload_form.tsx
@@ -142,7 +142,7 @@ export class GeoUploadForm extends Component<Props, State> {
               onIndexNameValidationEnd={this.props.onIndexNameValidationEnd}
             />
             <EuiSpacer size="m" />
-            <EuiFormRow display="columnCompressedSwitch">
+            <EuiFormRow display="columnCompressed">
               <EuiToolTip
                 position="top"
                 content={i18n.translate('xpack.fileUpload.smallChunks.tooltip', {
diff --git a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
index cfdcdba4632e3..a60d7006ee337 100644
--- a/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
+++ b/x-pack/plugins/lens/public/editor_frame_service/editor_frame/config_panel/layer_panel.tsx
@@ -684,9 +684,6 @@ export function LayerPanel(props: LayerPanelProps) {
               {layerDatasource?.LayerSettingsComponent && (
                 <layerDatasource.LayerSettingsComponent {...layerDatasourceConfigProps} />
               )}
-              {layerDatasource?.LayerSettingsComponent && visualizationLayerSettings.data ? (
-                <EuiSpacer size="m" />
-              ) : null}
               {activeVisualization?.LayerSettingsComponent && visualizationLayerSettings.data ? (
                 <activeVisualization.LayerSettingsComponent
                   {...{
diff --git a/x-pack/plugins/lens/public/shared_components/axis/extent/axis_extent_settings.tsx b/x-pack/plugins/lens/public/shared_components/axis/extent/axis_extent_settings.tsx
index 27a03b49e8e7f..ef0a17fe8353c 100644
--- a/x-pack/plugins/lens/public/shared_components/axis/extent/axis_extent_settings.tsx
+++ b/x-pack/plugins/lens/public/shared_components/axis/extent/axis_extent_settings.tsx
@@ -111,7 +111,7 @@ export function AxisBoundsControl({
           label={i18n.translate('xpack.lens.fullExtent.niceValues', {
             defaultMessage: 'Round to nice values',
           })}
-          display="columnCompressedSwitch"
+          display="columnCompressed"
           fullWidth
         >
           <EuiSwitch
diff --git a/x-pack/plugins/lens/public/shared_components/axis/ticks/axis_ticks_settings.tsx b/x-pack/plugins/lens/public/shared_components/axis/ticks/axis_ticks_settings.tsx
index 8f47307d19d36..3ce579ea22f61 100644
--- a/x-pack/plugins/lens/public/shared_components/axis/ticks/axis_ticks_settings.tsx
+++ b/x-pack/plugins/lens/public/shared_components/axis/ticks/axis_ticks_settings.tsx
@@ -40,7 +40,7 @@ export const AxisTicksSettings: React.FunctionComponent<AxisTicksSettingsProps>
   return (
     <>
       <EuiFormRow
-        display="columnCompressedSwitch"
+        display="columnCompressed"
         label={i18n.translate('xpack.lens.shared.tickLabels', {
           defaultMessage: 'Tick labels',
         })}
diff --git a/x-pack/plugins/lens/public/shared_components/ignore_global_filter/settings_control.tsx b/x-pack/plugins/lens/public/shared_components/ignore_global_filter/settings_control.tsx
index df1af5f084c55..3bea37c67edb4 100644
--- a/x-pack/plugins/lens/public/shared_components/ignore_global_filter/settings_control.tsx
+++ b/x-pack/plugins/lens/public/shared_components/ignore_global_filter/settings_control.tsx
@@ -18,7 +18,7 @@ export function IgnoreGlobalFilterRowControl({
 }) {
   return (
     <EuiFormRow
-      display="columnCompressedSwitch"
+      display="columnCompressed"
       label={i18n.translate('xpack.lens.layerSettings.ignoreGlobalFilters', {
         defaultMessage: 'Use global filters',
       })}
diff --git a/x-pack/plugins/lens/public/shared_components/legend/legend_settings_popover.tsx b/x-pack/plugins/lens/public/shared_components/legend/legend_settings_popover.tsx
index ae82ffa43e628..0daac4b7a2ebb 100644
--- a/x-pack/plugins/lens/public/shared_components/legend/legend_settings_popover.tsx
+++ b/x-pack/plugins/lens/public/shared_components/legend/legend_settings_popover.tsx
@@ -360,7 +360,7 @@ export function LegendSettingsPopover<LegendStats extends LegendValue = XYLegend
       )}
       {showsShowValueSetting && (
         <EuiFormRow
-          display="columnCompressedSwitch"
+          display="columnCompressed"
           label={i18n.translate('xpack.lens.shared.valueInLegendLabel', {
             defaultMessage: 'Show value',
           })}
@@ -415,7 +415,7 @@ export function LegendSettingsPopover<LegendStats extends LegendValue = XYLegend
 
       {isLegendNotHidden && renderNestedLegendSwitch && (
         <EuiFormRow
-          display="columnCompressedSwitch"
+          display="columnCompressed"
           label={i18n.translate('xpack.lens.shared.nestedLegendLabel', {
             defaultMessage: 'Nested',
           })}
diff --git a/x-pack/plugins/lens/public/visualizations/datatable/components/dimension_editor.tsx b/x-pack/plugins/lens/public/visualizations/datatable/components/dimension_editor.tsx
index 9fb71142d2402..c67cf3cdb9b1a 100644
--- a/x-pack/plugins/lens/public/visualizations/datatable/components/dimension_editor.tsx
+++ b/x-pack/plugins/lens/public/visualizations/datatable/components/dimension_editor.tsx
@@ -256,7 +256,7 @@ export function TableDimensionEditor(props: TableDimensionEditorProps) {
           label={i18n.translate('xpack.lens.table.columnVisibilityLabel', {
             defaultMessage: 'Hide column',
           })}
-          display="columnCompressedSwitch"
+          display="columnCompressed"
         >
           <EuiSwitch
             compressed
@@ -292,7 +292,7 @@ export function TableDimensionEditor(props: TableDimensionEditorProps) {
           label={i18n.translate('xpack.lens.table.columnFilterClickLabel', {
             defaultMessage: 'Directly filter on click',
           })}
-          display="columnCompressedSwitch"
+          display="columnCompressed"
         >
           <EuiSwitch
             compressed
diff --git a/x-pack/plugins/lens/public/visualizations/datatable/components/toolbar.tsx b/x-pack/plugins/lens/public/visualizations/datatable/components/toolbar.tsx
index a9d983b65e210..6795a53298306 100644
--- a/x-pack/plugins/lens/public/visualizations/datatable/components/toolbar.tsx
+++ b/x-pack/plugins/lens/public/visualizations/datatable/components/toolbar.tsx
@@ -112,7 +112,7 @@ export function DataTableToolbar(props: VisualizationToolbarProps<DatatableVisua
           label={i18n.translate('xpack.lens.table.visualOptionsPaginateTable', {
             defaultMessage: 'Paginate table',
           })}
-          display="columnCompressedSwitch"
+          display="columnCompressed"
         >
           <EuiToolTip
             content={i18n.translate('xpack.lens.table.visualOptionsPaginateTableTooltip', {
diff --git a/x-pack/plugins/lens/public/visualizations/gauge/dimension_editor.tsx b/x-pack/plugins/lens/public/visualizations/gauge/dimension_editor.tsx
index b30e36cfefa37..fdbe6913d21c9 100644
--- a/x-pack/plugins/lens/public/visualizations/gauge/dimension_editor.tsx
+++ b/x-pack/plugins/lens/public/visualizations/gauge/dimension_editor.tsx
@@ -143,7 +143,7 @@ export function GaugeDimensionEditor(
             </PalettePanelContainer>
           </EuiFormRow>
           <EuiFormRow
-            display="columnCompressedSwitch"
+            display="columnCompressed"
             fullWidth
             label={
               <TooltipWrapper
diff --git a/x-pack/plugins/lens/public/visualizations/partition/layer_settings.tsx b/x-pack/plugins/lens/public/visualizations/partition/layer_settings.tsx
index 6f13800a91a2c..6e9912b7043bd 100644
--- a/x-pack/plugins/lens/public/visualizations/partition/layer_settings.tsx
+++ b/x-pack/plugins/lens/public/visualizations/partition/layer_settings.tsx
@@ -30,7 +30,7 @@ export function LayerSettings(
 
   return (
     <EuiFormRow
-      display="columnCompressedSwitch"
+      display="columnCompressed"
       label={i18n.translate('xpack.lens.pieChart.multipleMetrics', {
         defaultMessage: 'Multiple metrics',
       })}
diff --git a/x-pack/plugins/lens/public/visualizations/tagcloud/tagcloud_toolbar/tagcloud_toolbar.tsx b/x-pack/plugins/lens/public/visualizations/tagcloud/tagcloud_toolbar/tagcloud_toolbar.tsx
index 12e4bbcab4021..07d847e7be0e5 100644
--- a/x-pack/plugins/lens/public/visualizations/tagcloud/tagcloud_toolbar/tagcloud_toolbar.tsx
+++ b/x-pack/plugins/lens/public/visualizations/tagcloud/tagcloud_toolbar/tagcloud_toolbar.tsx
@@ -100,7 +100,7 @@ export function TagcloudToolbar(props: VisualizationToolbarProps<TagcloudState>)
               />
             </EuiFormRow>
             <EuiFormRow
-              display="columnCompressedSwitch"
+              display="columnCompressed"
               label={i18n.translate('xpack.lens.label.tagcloud.showLabel', {
                 defaultMessage: 'Show label',
               })}
diff --git a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.tsx b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.tsx
index 1bf00cb0afb6f..9b03ac7c72a31 100644
--- a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.tsx
+++ b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/axis_settings_popover.tsx
@@ -279,7 +279,7 @@ export const AxisSettingsPopover: React.FunctionComponent<AxisSettingsPopoverPro
         isTitleVisible={isTitleVisible}
       />
       <EuiFormRow
-        display="columnCompressedSwitch"
+        display="columnCompressed"
         label={i18n.translate('xpack.lens.xyChart.Gridlines', {
           defaultMessage: 'Gridlines',
         })}
@@ -332,7 +332,7 @@ export const AxisSettingsPopover: React.FunctionComponent<AxisSettingsPopoverPro
       )}
       {setEndzoneVisibility && (
         <EuiFormRow
-          display="columnCompressedSwitch"
+          display="columnCompressed"
           label={i18n.translate('xpack.lens.xyChart.showEnzones', {
             defaultMessage: 'Show partial data markers',
           })}
@@ -352,7 +352,7 @@ export const AxisSettingsPopover: React.FunctionComponent<AxisSettingsPopoverPro
       )}
       {setCurrentTimeMarkerVisibility && (
         <EuiFormRow
-          display="columnCompressedSwitch"
+          display="columnCompressed"
           label={i18n.translate('xpack.lens.xyChart.showCurrenTimeMarker', {
             defaultMessage: 'Show current time marker',
           })}
diff --git a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/visual_options_popover/missing_values_option.tsx b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/visual_options_popover/missing_values_option.tsx
index c600f4fa4bae4..d39a1a410d6aa 100644
--- a/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/visual_options_popover/missing_values_option.tsx
+++ b/x-pack/plugins/lens/public/visualizations/xy/xy_config_panel/visual_options_popover/missing_values_option.tsx
@@ -120,7 +120,7 @@ export const MissingValuesOptions: React.FC<MissingValuesOptionProps> = ({
                 label={i18n.translate('xpack.lens.xyChart.missingValuesStyle', {
                   defaultMessage: 'Show as dotted line',
                 })}
-                display="columnCompressedSwitch"
+                display="columnCompressed"
               >
                 <EuiSwitch
                   showLabel={false}
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/__snapshots__/vector_style_editor.test.tsx.snap b/x-pack/plugins/maps/public/classes/styles/vector/components/__snapshots__/vector_style_editor.test.tsx.snap
index c0ff79d051e62..691327928eb67 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/__snapshots__/vector_style_editor.test.tsx.snap
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/__snapshots__/vector_style_editor.test.tsx.snap
@@ -392,7 +392,7 @@ exports[`should render 1`] = `
     size="m"
   />
   <EuiFormRow
-    display="columnCompressedSwitch"
+    display="columnCompressed"
   >
     <EuiSwitch
       checked={true}
@@ -741,7 +741,7 @@ exports[`should render with no style fields 1`] = `
     size="m"
   />
   <EuiFormRow
-    display="columnCompressedSwitch"
+    display="columnCompressed"
   >
     <EuiSwitch
       checked={true}
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/color/dynamic_color_form.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/color/dynamic_color_form.tsx
index 27641aca604bb..5ce192ec6e377 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/color/dynamic_color_form.tsx
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/color/dynamic_color_form.tsx
@@ -159,7 +159,7 @@ export function DynamicColorForm({
           invert={invert}
         />
         {!!styleOptions.useCustomColorRamp ? null : (
-          <EuiFormRow display="columnCompressedSwitch">
+          <EuiFormRow display="columnCompressed">
             <EuiSwitch
               label={i18n.translate('xpack.maps.style.revereseColorsLabel', {
                 defaultMessage: `Reverse colors`,
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/data_mapping/categorical_data_mapping_popover.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/data_mapping/categorical_data_mapping_popover.tsx
index 8990e086b4c6b..7193680d4a6f8 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/data_mapping/categorical_data_mapping_popover.tsx
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/data_mapping/categorical_data_mapping_popover.tsx
@@ -31,7 +31,7 @@ export function CategoricalDataMappingPopover<DynamicOptions>(props: Props<Dynam
 
   return (
     <DataMappingPopover>
-      <EuiFormRow display="columnCompressedSwitch">
+      <EuiFormRow display="columnCompressed">
         <>
           <EuiSwitch
             label={i18n.translate('xpack.maps.styles.fieldMetaOptions.isEnabled.categoricalLabel', {
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/data_mapping/ordinal_data_mapping_popover.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/data_mapping/ordinal_data_mapping_popover.tsx
index a614d707d0c83..d599000322d69 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/data_mapping/ordinal_data_mapping_popover.tsx
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/data_mapping/ordinal_data_mapping_popover.tsx
@@ -161,7 +161,7 @@ export function OrdinalDataMappingPopover<DynamicOptions>(props: Props<DynamicOp
 
     return (
       <Fragment>
-        <EuiFormRow display="columnCompressedSwitch">
+        <EuiFormRow display="columnCompressed">
           <>
             <EuiSwitch
               label={i18n.translate('xpack.maps.styles.ordinalDataMapping.isEnabledSwitchLabel', {
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/size/dynamic_size_form.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/size/dynamic_size_form.tsx
index 8efe05bc2644c..87e59546ae6ca 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/size/dynamic_size_form.tsx
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/size/dynamic_size_form.tsx
@@ -72,7 +72,7 @@ export function DynamicSizeForm({
           showLabels
           compressed
         />
-        <EuiFormRow display="columnCompressedSwitch">
+        <EuiFormRow display="columnCompressed">
           <EuiSwitch
             label={i18n.translate('xpack.maps.style.revereseSizeLabel', {
               defaultMessage: `Reverse size`,
diff --git a/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.tsx b/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.tsx
index e1b23aa28f5a1..1c8bd5534a55d 100644
--- a/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.tsx
+++ b/x-pack/plugins/maps/public/classes/styles/vector/components/vector_style_editor.tsx
@@ -616,7 +616,7 @@ export class VectorStyleEditor extends Component<Props, State> {
     }
 
     return (
-      <EuiFormRow display="columnCompressedSwitch">
+      <EuiFormRow display="columnCompressed">
         <EuiSwitch
           label={i18n.translate('xpack.maps.vectorStyleEditor.isTimeAwareLabel', {
             defaultMessage: 'Apply global time to style metadata requests',
diff --git a/x-pack/plugins/maps/public/components/force_refresh_checkbox.tsx b/x-pack/plugins/maps/public/components/force_refresh_checkbox.tsx
index 0cbd02ec7b0a7..82d65d132f976 100644
--- a/x-pack/plugins/maps/public/components/force_refresh_checkbox.tsx
+++ b/x-pack/plugins/maps/public/components/force_refresh_checkbox.tsx
@@ -20,7 +20,7 @@ export function ForceRefreshCheckbox({ applyForceRefresh, setApplyForceRefresh }
   };
 
   return (
-    <EuiFormRow display="columnCompressedSwitch">
+    <EuiFormRow display="columnCompressed">
       <EuiToolTip
         position="top"
         content={i18n.translate('xpack.maps.filterEditor.applyForceRefreshTooltip', {
diff --git a/x-pack/plugins/maps/public/components/global_filter_checkbox.tsx b/x-pack/plugins/maps/public/components/global_filter_checkbox.tsx
index 502cc1973d329..3aef7a98e5b44 100644
--- a/x-pack/plugins/maps/public/components/global_filter_checkbox.tsx
+++ b/x-pack/plugins/maps/public/components/global_filter_checkbox.tsx
@@ -35,7 +35,7 @@ export function GlobalFilterCheckbox({
       });
 
   return (
-    <EuiFormRow display="columnCompressedSwitch">
+    <EuiFormRow display="columnCompressed">
       <EuiToolTip position="top" content={tooltipMessage}>
         <EuiSwitch
           label={label}
diff --git a/x-pack/plugins/maps/public/components/global_time_checkbox.tsx b/x-pack/plugins/maps/public/components/global_time_checkbox.tsx
index 4db771c1edbaf..2277873115170 100644
--- a/x-pack/plugins/maps/public/components/global_time_checkbox.tsx
+++ b/x-pack/plugins/maps/public/components/global_time_checkbox.tsx
@@ -34,7 +34,7 @@ export function GlobalTimeCheckbox({
       });
 
   return (
-    <EuiFormRow display="columnCompressedSwitch">
+    <EuiFormRow display="columnCompressed">
       <EuiToolTip position="top" content={tooltipMessage}>
         <EuiSwitch
           label={label}
diff --git a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
index 3513e0939eb08..17c6aac4a8f39 100644
--- a/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
+++ b/x-pack/plugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx
@@ -94,7 +94,7 @@ export function LayerSettings(props: Props) {
       return null;
     }
     return (
-      <EuiFormRow display="columnCompressedSwitch">
+      <EuiFormRow display="columnCompressed">
         <EuiToolTip
           position="top"
           content={i18n.translate('xpack.maps.layerPanel.settingsPanel.fittableFlagTooltip', {
@@ -157,7 +157,7 @@ export function LayerSettings(props: Props) {
     }
 
     return (
-      <EuiFormRow display="columnCompressedSwitch">
+      <EuiFormRow display="columnCompressed">
         <EuiSwitch
           label={i18n.translate('xpack.maps.layerPanel.settingsPanel.labelsOnTop', {
             defaultMessage: `Show labels on top`,
@@ -173,7 +173,7 @@ export function LayerSettings(props: Props) {
 
   const renderDisableTooltips = () => {
     return !isVectorLayer(props.layer) ? null : (
-      <EuiFormRow display="columnCompressedSwitch">
+      <EuiFormRow display="columnCompressed">
         <EuiSwitch
           label={i18n.translate('xpack.maps.layerPanel.settingsPanel.DisableTooltips', {
             defaultMessage: `Show tooltips`,
diff --git a/x-pack/plugins/maps/public/trigger_actions/filter_by_map_extent/modal.tsx b/x-pack/plugins/maps/public/trigger_actions/filter_by_map_extent/modal.tsx
index 0a992e02a6cfd..7d2e757518224 100644
--- a/x-pack/plugins/maps/public/trigger_actions/filter_by_map_extent/modal.tsx
+++ b/x-pack/plugins/maps/public/trigger_actions/filter_by_map_extent/modal.tsx
@@ -34,7 +34,7 @@ class FilterByMapExtentModal extends Component<Props> {
   _renderSwitches() {
     return mapEmbeddablesSingleton.getMapPanels().map((mapPanel) => {
       return (
-        <EuiFormRow display="columnCompressedSwitch" key={mapPanel.id}>
+        <EuiFormRow display="columnCompressed" key={mapPanel.id}>
           <EuiSwitch
             label={mapPanel.getTitle()}
             checked={mapPanel.getIsFilterByMapExtent()}
diff --git a/x-pack/plugins/maps/public/trigger_actions/synchronize_movement/modal.tsx b/x-pack/plugins/maps/public/trigger_actions/synchronize_movement/modal.tsx
index a51a9e59dbae3..ff0584c5cbb0c 100644
--- a/x-pack/plugins/maps/public/trigger_actions/synchronize_movement/modal.tsx
+++ b/x-pack/plugins/maps/public/trigger_actions/synchronize_movement/modal.tsx
@@ -42,7 +42,7 @@ class SynchronizeMovementModal extends Component<Props> {
       const hasErrors = synchronizedPanels.length === 1 && mapPanel.getIsMovementSynchronized();
       return (
         <EuiFormRow
-          display="columnCompressedSwitch"
+          display="columnCompressed"
           key={mapPanel.id}
           isInvalid={hasErrors}
           error={