Remove deprecated usages of EuiFormRow's `display="columnCompressed…

…Switch"` prop (elastic#198709) ## Summary This prop option has been deprecated as of elastic/eui#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 <[email protected]>
kibanamachine · Nov 6, 2024 · 83a9acd · 83a9acd
1 parent 08b83c5
commit 83a9acd
Show file tree

Hide file tree

Showing 31 changed files with 43 additions and 46 deletions.
diff --git a/...nnotation-components/components/annotation_editor_controls/annotation_editor_controls.tsx b/...nnotation-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
@@ -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/...ackages/kbn-elastic-assistant/impl/assistant/settings/alerts_settings/alerts_settings.tsx b/...ackages/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...public/visualizations/xy/xy_config_panel/visual_options_popover/missing_values_option.tsx b/...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/...s/public/classes/styles/vector/components/__snapshots__/vector_style_editor.test.tsx.snap b/...s/public/classes/styles/vector/components/__snapshots__/vector_style_editor.test.tsx.snap
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
@@ -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/...public/classes/styles/vector/components/data_mapping/categorical_data_mapping_popover.tsx b/...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/...aps/public/classes/styles/vector/components/data_mapping/ordinal_data_mapping_popover.tsx b/...aps/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/...ugins/maps/public/connected_components/edit_layer_panel/layer_settings/layer_settings.tsx b/...ugins/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
@@ -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
@@ -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={