Use EuiCompressedSelect and EuiCompressedSuperSelect

Signed-off-by: Miki <[email protected]>
opensearch-project · Aug 1, 2024 · ee92b80 · ee92b80
1 parent 77e7a99
commit ee92b80
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 10 deletions.
diff --git a/public/components/gantt_chart_editor.tsx b/public/components/gantt_chart_editor.tsx
@@ -8,7 +8,7 @@ import {
   EuiCompressedFormRow,
   EuiPanel,
   EuiSpacer,
-  EuiSuperSelect,
+  EuiCompressedSuperSelect,
   EuiTitle,
 } from '@elastic/eui';
 import React from 'react';
@@ -34,7 +34,7 @@ export function GanttChartEditor({ aggs, stateParams, setValue }: VisOptionsProp
           label="Event"
           helpText="Gantt chart allows you to compare schedules of the selected field."
         >
-          <EuiSuperSelect
+          <EuiCompressedSuperSelect
             data-test-subj="gantt-chart-editor-label-field"
             options={fieldOptions}
             valueOfSelected={stateParams.labelField || 'select'}
@@ -45,7 +45,7 @@ export function GanttChartEditor({ aggs, stateParams, setValue }: VisOptionsProp
           label="Start time"
           helpText="Select a timestamp field to represent the beginning of a schedule."
         >
-          <EuiSuperSelect
+          <EuiCompressedSuperSelect
             data-test-subj="gantt-chart-editor-start-time-field"
             options={fieldOptions}
             valueOfSelected={stateParams.startTimeField}
@@ -56,7 +56,7 @@ export function GanttChartEditor({ aggs, stateParams, setValue }: VisOptionsProp
           label="Duration"
           helpText="Value of duration field must be a time interval that can be added to the start timestamp field."
         >
-          <EuiSuperSelect
+          <EuiCompressedSuperSelect
             data-test-subj="gantt-chart-editor-duration-field"
             options={fieldOptions}
             valueOfSelected={stateParams.durationField}

diff --git a/public/components/options_editor.tsx b/public/components/options_editor.tsx
@@ -8,7 +8,7 @@ import {
   EuiCompressedFieldText,
   EuiCompressedFormRow,
   EuiPanel,
-  EuiSelect,
+  EuiCompressedSelect,
   EuiSpacer,
   EuiSwitch,
   EuiTitle,
@@ -47,7 +47,7 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
 
         {stateParams.showLegend && (
           <EuiCompressedFormRow label="Orientation">
-            <EuiSelect
+            <EuiCompressedSelect
               data-test-subj="options-editor-legend-orientation-select"
               options={legendOrientationOptions}
               value={stateParams.legendOrientation}
@@ -139,7 +139,7 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
         <EuiSpacer size="s" />
 
         <EuiCompressedFormRow label="Position">
-          <EuiSelect
+          <EuiCompressedSelect
             data-test-subj="options-editor-y-axis-position-select"
             options={yAxisPositionOptions}
             value={stateParams.yAxisPosition}
@@ -187,23 +187,23 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
         <EuiSpacer size="s" />
 
         <EuiCompressedFormRow label="Position">
-          <EuiSelect
+          <EuiCompressedSelect
             data-test-subj="options-editor-x-axis-position-select"
             options={xAxisPositionOptions}
             value={stateParams.xAxisPosition}
             onChange={(e) => setValue('xAxisPosition', e.target.value as PlotlyAxisPosition)}
           />
         </EuiCompressedFormRow>
         <EuiCompressedFormRow label="Scale type">
-          <EuiSelect
+          <EuiCompressedSelect
             data-test-subj="options-editor-x-axis-scale-type-select"
             options={axisTypeOptions}
             value={stateParams.xAxisType}
             onChange={(e) => setValue('xAxisType', e.target.value as PlotlyAxisType)}
           />
         </EuiCompressedFormRow>
         <EuiCompressedFormRow label="Time format">
-          <EuiSelect
+          <EuiCompressedSelect
             data-test-subj="options-editor-x-axis-time-format-select"
             options={timeFormatOptions}
             value={stateParams.timeFormat}