Remove deprecated usages of EuiFormRow's display="columnCompressedSwitch" prop (#198709)

## Summary This prop option has been deprecated as of https://github.com/elastic/eui/pull/7968. `display="columnCompressed"` now automatically accounts for EuiSwitches (via `:has` CSS) and the extra prop option is no longer needed. ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [x] Any UI touched in this PR does not create any new axe failures (run axe in browser: [FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US)) - [x] This renders correctly on smaller devices using a responsive layout. (You can test this [in your browser](https://www.browserstack.com/guide/responsive-testing-on-local-server)) --------- Co-authored-by: Marta Bondyra <4283304+mbondyra@users.noreply.github.com>
2025-04-24 01:38:56 -04:00 · 2024-11-06 10:18:43 -08:00 · 2024-11-06 10:18:43 -08:00 · 83a9acd79b
commit 83a9acd79b
parent 08b83c55f6
31 changed files with 43 additions and 46 deletions
--- 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}
--- 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
--- 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 {
--- 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 {
--- 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}
--- 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}
--- 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', {
--- 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
                  {...{
--- 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
--- 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',
        })}
--- 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',
      })}
--- 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',
          })}
--- 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
--- 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', {
--- 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
--- 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',
      })}
--- 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',
              })}
--- 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',
          })}
--- 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}
--- 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}
--- 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`,
--- 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', {
--- 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', {
--- 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`,
--- 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',
--- 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', {
--- 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}
--- 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}
--- 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`,
--- 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()}
--- 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={