From e60195a6ad97e1900bfe556b5704536d06bffa09 Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Thu, 11 Jul 2024 08:47:18 -0700
Subject: [PATCH 1/5] Use EuiCompressedFormRow

Signed-off-by: Miki <miki@amazon.com>
---
 public/components/gantt_chart_editor.tsx | 18 +++----
 public/components/options_editor.tsx     | 62 ++++++++++++------------
 2 files changed, 40 insertions(+), 40 deletions(-)

diff --git a/public/components/gantt_chart_editor.tsx b/public/components/gantt_chart_editor.tsx
index d06da8b..a0490af 100644
--- a/public/components/gantt_chart_editor.tsx
+++ b/public/components/gantt_chart_editor.tsx
@@ -5,7 +5,7 @@
 
 import {
   EuiFieldNumber,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiPanel,
   EuiSpacer,
   EuiSuperSelect,
@@ -30,7 +30,7 @@ export function GanttChartEditor({ aggs, stateParams, setValue }: VisOptionsProp
           <h3>Metrics</h3>
         </EuiTitle>
         <EuiSpacer size="s" />
-        <EuiFormRow
+        <EuiCompressedFormRow
           label="Event"
           helpText="Gantt chart allows you to compare schedules of the selected field."
         >
@@ -40,8 +40,8 @@ export function GanttChartEditor({ aggs, stateParams, setValue }: VisOptionsProp
             valueOfSelected={stateParams.labelField || 'select'}
             onChange={(value) => setValue('labelField', value)}
           />
-        </EuiFormRow>
-        <EuiFormRow
+        </EuiCompressedFormRow>
+        <EuiCompressedFormRow
           label="Start time"
           helpText="Select a timestamp field to represent the beginning of a schedule."
         >
@@ -51,8 +51,8 @@ export function GanttChartEditor({ aggs, stateParams, setValue }: VisOptionsProp
             valueOfSelected={stateParams.startTimeField}
             onChange={(value) => setValue('startTimeField', value)}
           />
-        </EuiFormRow>
-        <EuiFormRow
+        </EuiCompressedFormRow>
+        <EuiCompressedFormRow
           label="Duration"
           helpText="Value of duration field must be a time interval that can be added to the start timestamp field."
         >
@@ -62,7 +62,7 @@ export function GanttChartEditor({ aggs, stateParams, setValue }: VisOptionsProp
             valueOfSelected={stateParams.durationField}
             onChange={(value) => setValue('durationField', value)}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiPanel>
 
       <EuiSpacer size="s" />
@@ -72,7 +72,7 @@ export function GanttChartEditor({ aggs, stateParams, setValue }: VisOptionsProp
           <h3>Results</h3>
         </EuiTitle>
         <EuiSpacer size="s" />
-        <EuiFormRow
+        <EuiCompressedFormRow
           label="View number of results"
           helpText="Results ordered by descending start time."
         >
@@ -81,7 +81,7 @@ export function GanttChartEditor({ aggs, stateParams, setValue }: VisOptionsProp
             value={stateParams.size}
             onChange={(e) => setValue('size', parseInt(e.target.value, 10))}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiPanel>
     </>
   );
diff --git a/public/components/options_editor.tsx b/public/components/options_editor.tsx
index cbbd547..bd28390 100644
--- a/public/components/options_editor.tsx
+++ b/public/components/options_editor.tsx
@@ -6,7 +6,7 @@
 import {
   EuiColorPicker,
   EuiFieldText,
-  EuiFormRow,
+  EuiCompressedFormRow,
   EuiPanel,
   EuiSelect,
   EuiSpacer,
@@ -36,17 +36,17 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
         </EuiTitle>
         <EuiSpacer size="s" />
 
-        <EuiFormRow>
+        <EuiCompressedFormRow>
           <EuiSwitch
             data-test-subj="options-editor-legend-switch"
             label="Show legend"
             checked={stateParams.showLegend}
             onChange={(e) => setValue('showLegend', e.target.checked)}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
 
         {stateParams.showLegend && (
-          <EuiFormRow label="Orientation">
+          <EuiCompressedFormRow label="Orientation">
             <EuiSelect
               data-test-subj="options-editor-legend-orientation-select"
               options={legendOrientationOptions}
@@ -56,7 +56,7 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
               }
               disabled={!stateParams.showLegend}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         )}
       </EuiPanel>
     );
@@ -70,22 +70,22 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
         </EuiTitle>
         <EuiSpacer size="s" />
 
-        <EuiFormRow>
+        <EuiCompressedFormRow>
           <EuiSwitch
             data-test-subj="options-editor-grid-y-switch"
             label="Show Y-axis grids"
             checked={stateParams.yAxisShowGrid}
             onChange={(e) => setValue('yAxisShowGrid', e.target.checked)}
           />
-        </EuiFormRow>
-        <EuiFormRow>
+        </EuiCompressedFormRow>
+        <EuiCompressedFormRow>
           <EuiSwitch
             data-test-subj="options-editor-grid-x-switch"
             label="Show X-axis grids"
             checked={stateParams.xAxisShowGrid}
             onChange={(e) => setValue('xAxisShowGrid', e.target.checked)}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiPanel>
     );
   };
@@ -98,9 +98,9 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
         </EuiTitle>
         <EuiSpacer size="s" />
 
-        <EuiFormRow label="Color">
+        <EuiCompressedFormRow label="Color">
           <EuiColorPicker color={stateParams.colors} onChange={(e) => setValue('colors', e)} />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiPanel>
     );
   };
@@ -138,41 +138,41 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
         </EuiTitle>
         <EuiSpacer size="s" />
 
-        <EuiFormRow label="Position">
+        <EuiCompressedFormRow label="Position">
           <EuiSelect
             data-test-subj="options-editor-y-axis-position-select"
             options={yAxisPositionOptions}
             value={stateParams.yAxisPosition}
             onChange={(e) => setValue('yAxisPosition', e.target.value as PlotlyAxisPosition)}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
 
-        <EuiFormRow>
+        <EuiCompressedFormRow>
           <EuiSwitch
             data-test-subj="options-editor-y-axis-switch"
             label="Show Y-axis line"
             checked={stateParams.yAxisShowLine}
             onChange={(e) => setValue('yAxisShowLine', e.target.checked)}
           />
-        </EuiFormRow>
-        <EuiFormRow>
+        </EuiCompressedFormRow>
+        <EuiCompressedFormRow>
           <EuiSwitch
             data-test-subj="options-editor-y-axis-label-switch"
             label="Show Y-axis label"
             checked={stateParams.yAxisShowTitle}
             onChange={(e) => setValue('yAxisShowTitle', e.target.checked)}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
 
         {stateParams.yAxisShowTitle ? (
-          <EuiFormRow label="Label">
+          <EuiCompressedFormRow label="Label">
             <EuiFieldText
               data-test-subj="options-editor-y-axis-label-input"
               placeholder="Label"
               value={stateParams.yAxisTitle}
               onChange={(e) => setValue('yAxisTitle', e.target.value)}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         ) : null}
       </EuiPanel>
     );
@@ -186,57 +186,57 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
         </EuiTitle>
         <EuiSpacer size="s" />
 
-        <EuiFormRow label="Position">
+        <EuiCompressedFormRow label="Position">
           <EuiSelect
             data-test-subj="options-editor-x-axis-position-select"
             options={xAxisPositionOptions}
             value={stateParams.xAxisPosition}
             onChange={(e) => setValue('xAxisPosition', e.target.value as PlotlyAxisPosition)}
           />
-        </EuiFormRow>
-        <EuiFormRow label="Scale type">
+        </EuiCompressedFormRow>
+        <EuiCompressedFormRow label="Scale type">
           <EuiSelect
             data-test-subj="options-editor-x-axis-scale-type-select"
             options={axisTypeOptions}
             value={stateParams.xAxisType}
             onChange={(e) => setValue('xAxisType', e.target.value as PlotlyAxisType)}
           />
-        </EuiFormRow>
-        <EuiFormRow label="Time format">
+        </EuiCompressedFormRow>
+        <EuiCompressedFormRow label="Time format">
           <EuiSelect
             data-test-subj="options-editor-x-axis-time-format-select"
             options={timeFormatOptions}
             value={stateParams.timeFormat}
             onChange={(e) => setValue('timeFormat', e.target.value)}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
 
-        <EuiFormRow>
+        <EuiCompressedFormRow>
           <EuiSwitch
             data-test-subj="options-editor-x-axis-switch"
             label="Show X-axis line"
             checked={stateParams.xAxisShowLine}
             onChange={(e) => setValue('xAxisShowLine', e.target.checked)}
           />
-        </EuiFormRow>
-        <EuiFormRow>
+        </EuiCompressedFormRow>
+        <EuiCompressedFormRow>
           <EuiSwitch
             data-test-subj="options-editor-x-axis-label-switch"
             label="Show X-axis label"
             checked={stateParams.xAxisShowTitle}
             onChange={(e) => setValue('xAxisShowTitle', e.target.checked)}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
 
         {stateParams.xAxisShowTitle ? (
-          <EuiFormRow label="Label">
+          <EuiCompressedFormRow label="Label">
             <EuiFieldText
               data-test-subj="options-editor-x-axis-label-input"
               placeholder="Label"
               value={stateParams.xAxisTitle}
               onChange={(e) => setValue('xAxisTitle', e.target.value)}
             />
-          </EuiFormRow>
+          </EuiCompressedFormRow>
         ) : null}
       </EuiPanel>
     );

From 77e7a99fc231ea31a0338723c9cb1d36e4d7a140 Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Thu, 11 Jul 2024 10:48:59 -0700
Subject: [PATCH 2/5] Use EuiCompressedField*

Signed-off-by: Miki <miki@amazon.com>
---
 public/components/gantt_chart_editor.tsx | 4 ++--
 public/components/options_editor.tsx     | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/public/components/gantt_chart_editor.tsx b/public/components/gantt_chart_editor.tsx
index a0490af..b488383 100644
--- a/public/components/gantt_chart_editor.tsx
+++ b/public/components/gantt_chart_editor.tsx
@@ -4,7 +4,7 @@
  */
 
 import {
-  EuiFieldNumber,
+  EuiCompressedFieldNumber,
   EuiCompressedFormRow,
   EuiPanel,
   EuiSpacer,
@@ -76,7 +76,7 @@ export function GanttChartEditor({ aggs, stateParams, setValue }: VisOptionsProp
           label="View number of results"
           helpText="Results ordered by descending start time."
         >
-          <EuiFieldNumber
+          <EuiCompressedFieldNumber
             data-test-subj="gantt-chart-editor-size-field"
             value={stateParams.size}
             onChange={(e) => setValue('size', parseInt(e.target.value, 10))}
diff --git a/public/components/options_editor.tsx b/public/components/options_editor.tsx
index bd28390..056e73e 100644
--- a/public/components/options_editor.tsx
+++ b/public/components/options_editor.tsx
@@ -5,7 +5,7 @@
 
 import {
   EuiColorPicker,
-  EuiFieldText,
+  EuiCompressedFieldText,
   EuiCompressedFormRow,
   EuiPanel,
   EuiSelect,
@@ -166,7 +166,7 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
 
         {stateParams.yAxisShowTitle ? (
           <EuiCompressedFormRow label="Label">
-            <EuiFieldText
+            <EuiCompressedFieldText
               data-test-subj="options-editor-y-axis-label-input"
               placeholder="Label"
               value={stateParams.yAxisTitle}
@@ -230,7 +230,7 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
 
         {stateParams.xAxisShowTitle ? (
           <EuiCompressedFormRow label="Label">
-            <EuiFieldText
+            <EuiCompressedFieldText
               data-test-subj="options-editor-x-axis-label-input"
               placeholder="Label"
               value={stateParams.xAxisTitle}

From ee92b80285ae4bcc58998ac90a9297227b42f35b Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Thu, 11 Jul 2024 13:25:07 -0700
Subject: [PATCH 3/5] Use EuiCompressedSelect and EuiCompressedSuperSelect

Signed-off-by: Miki <miki@amazon.com>
---
 public/components/gantt_chart_editor.tsx |  8 ++++----
 public/components/options_editor.tsx     | 12 ++++++------
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/public/components/gantt_chart_editor.tsx b/public/components/gantt_chart_editor.tsx
index b488383..7d2ccce 100644
--- 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
index 056e73e..f5a1c5e 100644
--- 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,7 +187,7 @@ 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}
@@ -195,7 +195,7 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
           />
         </EuiCompressedFormRow>
         <EuiCompressedFormRow label="Scale type">
-          <EuiSelect
+          <EuiCompressedSelect
             data-test-subj="options-editor-x-axis-scale-type-select"
             options={axisTypeOptions}
             value={stateParams.xAxisType}
@@ -203,7 +203,7 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
           />
         </EuiCompressedFormRow>
         <EuiCompressedFormRow label="Time format">
-          <EuiSelect
+          <EuiCompressedSelect
             data-test-subj="options-editor-x-axis-time-format-select"
             options={timeFormatOptions}
             value={stateParams.timeFormat}

From 11aa1d6ab38962e5a540f5356dc5eb3b5223f6df Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Thu, 11 Jul 2024 14:24:00 -0700
Subject: [PATCH 4/5] Use EuiCompressedSwitch

Signed-off-by: Miki <miki@amazon.com>
---
 public/components/options_editor.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/public/components/options_editor.tsx b/public/components/options_editor.tsx
index f5a1c5e..c2c213b 100644
--- a/public/components/options_editor.tsx
+++ b/public/components/options_editor.tsx
@@ -10,7 +10,7 @@ import {
   EuiPanel,
   EuiCompressedSelect,
   EuiSpacer,
-  EuiSwitch,
+  EuiCompressedSwitch,
   EuiTitle,
 } from '@elastic/eui';
 import React from 'react';
@@ -37,7 +37,7 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
         <EuiSpacer size="s" />
 
         <EuiCompressedFormRow>
-          <EuiSwitch
+          <EuiCompressedSwitch
             data-test-subj="options-editor-legend-switch"
             label="Show legend"
             checked={stateParams.showLegend}
@@ -71,7 +71,7 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
         <EuiSpacer size="s" />
 
         <EuiCompressedFormRow>
-          <EuiSwitch
+          <EuiCompressedSwitch
             data-test-subj="options-editor-grid-y-switch"
             label="Show Y-axis grids"
             checked={stateParams.yAxisShowGrid}
@@ -79,7 +79,7 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
           />
         </EuiCompressedFormRow>
         <EuiCompressedFormRow>
-          <EuiSwitch
+          <EuiCompressedSwitch
             data-test-subj="options-editor-grid-x-switch"
             label="Show X-axis grids"
             checked={stateParams.xAxisShowGrid}
@@ -148,7 +148,7 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
         </EuiCompressedFormRow>
 
         <EuiCompressedFormRow>
-          <EuiSwitch
+          <EuiCompressedSwitch
             data-test-subj="options-editor-y-axis-switch"
             label="Show Y-axis line"
             checked={stateParams.yAxisShowLine}
@@ -156,7 +156,7 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
           />
         </EuiCompressedFormRow>
         <EuiCompressedFormRow>
-          <EuiSwitch
+          <EuiCompressedSwitch
             data-test-subj="options-editor-y-axis-label-switch"
             label="Show Y-axis label"
             checked={stateParams.yAxisShowTitle}
@@ -212,7 +212,7 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
         </EuiCompressedFormRow>
 
         <EuiCompressedFormRow>
-          <EuiSwitch
+          <EuiCompressedSwitch
             data-test-subj="options-editor-x-axis-switch"
             label="Show X-axis line"
             checked={stateParams.xAxisShowLine}
@@ -220,7 +220,7 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
           />
         </EuiCompressedFormRow>
         <EuiCompressedFormRow>
-          <EuiSwitch
+          <EuiCompressedSwitch
             data-test-subj="options-editor-x-axis-label-switch"
             label="Show X-axis label"
             checked={stateParams.xAxisShowTitle}

From b08b796099c6526ce5dda5d7f40cec1f1c3cf82c Mon Sep 17 00:00:00 2001
From: Miki <miki@amazon.com>
Date: Fri, 2 Aug 2024 11:33:15 -0700
Subject: [PATCH 5/5] Update snapshots

Signed-off-by: Miki <miki@amazon.com>
---
 .../gantt_chart_editor.test.tsx.snap          |  24 +--
 .../options_editor.test.tsx.snap              | 164 +++---------------
 2 files changed, 35 insertions(+), 153 deletions(-)

diff --git a/public/components/__tests__/__snapshots__/gantt_chart_editor.test.tsx.snap b/public/components/__tests__/__snapshots__/gantt_chart_editor.test.tsx.snap
index ae2cf1d..93c111d 100644
--- a/public/components/__tests__/__snapshots__/gantt_chart_editor.test.tsx.snap
+++ b/public/components/__tests__/__snapshots__/gantt_chart_editor.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`<GanttChartEditor /> spec renders the component 1`] = `
     class="euiSpacer euiSpacer--s"
   />
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -42,7 +42,7 @@ exports[`<GanttChartEditor /> spec renders the component 1`] = `
               value="spanID"
             />
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
@@ -57,7 +57,7 @@ exports[`<GanttChartEditor /> spec renders the component 1`] = `
                   aria-describedby="random_html_id-help-0"
                   aria-haspopup="true"
                   aria-labelledby="random_html_id random_html_id"
-                  class="euiSuperSelectControl"
+                  class="euiSuperSelectControl euiSuperSelectControl--compressed"
                   data-test-subj="gantt-chart-editor-label-field"
                   type="button"
                 />
@@ -69,7 +69,7 @@ exports[`<GanttChartEditor /> spec renders the component 1`] = `
                   >
                     <svg
                       aria-hidden="true"
-                      class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                      class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                       focusable="false"
                       height="16"
                       role="img"
@@ -97,7 +97,7 @@ exports[`<GanttChartEditor /> spec renders the component 1`] = `
     </div>
   </div>
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -126,7 +126,7 @@ exports[`<GanttChartEditor /> spec renders the component 1`] = `
               value="startTime"
             />
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
@@ -141,7 +141,7 @@ exports[`<GanttChartEditor /> spec renders the component 1`] = `
                   aria-describedby="random_html_id-help-0"
                   aria-haspopup="true"
                   aria-labelledby="random_html_id random_html_id"
-                  class="euiSuperSelectControl"
+                  class="euiSuperSelectControl euiSuperSelectControl--compressed"
                   data-test-subj="gantt-chart-editor-start-time-field"
                   type="button"
                 />
@@ -153,7 +153,7 @@ exports[`<GanttChartEditor /> spec renders the component 1`] = `
                   >
                     <svg
                       aria-hidden="true"
-                      class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                      class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                       focusable="false"
                       height="16"
                       role="img"
@@ -181,7 +181,7 @@ exports[`<GanttChartEditor /> spec renders the component 1`] = `
     </div>
   </div>
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -210,7 +210,7 @@ exports[`<GanttChartEditor /> spec renders the component 1`] = `
               value="duration"
             />
             <div
-              class="euiFormControlLayout"
+              class="euiFormControlLayout euiFormControlLayout--compressed"
             >
               <div
                 class="euiFormControlLayout__childrenWrapper"
@@ -225,7 +225,7 @@ exports[`<GanttChartEditor /> spec renders the component 1`] = `
                   aria-describedby="random_html_id-help-0"
                   aria-haspopup="true"
                   aria-labelledby="random_html_id random_html_id"
-                  class="euiSuperSelectControl"
+                  class="euiSuperSelectControl euiSuperSelectControl--compressed"
                   data-test-subj="gantt-chart-editor-duration-field"
                   type="button"
                 />
@@ -237,7 +237,7 @@ exports[`<GanttChartEditor /> spec renders the component 1`] = `
                   >
                     <svg
                       aria-hidden="true"
-                      class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                      class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                       focusable="false"
                       height="16"
                       role="img"
diff --git a/public/components/__tests__/__snapshots__/options_editor.test.tsx.snap b/public/components/__tests__/__snapshots__/options_editor.test.tsx.snap
index 433bab0..76e0c16 100644
--- a/public/components/__tests__/__snapshots__/options_editor.test.tsx.snap
+++ b/public/components/__tests__/__snapshots__/options_editor.test.tsx.snap
@@ -13,7 +13,7 @@ exports[`<OptionsEditor /> spec renders the component 1`] = `
     class="euiSpacer euiSpacer--s"
   />
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -30,13 +30,13 @@ exports[`<OptionsEditor /> spec renders the component 1`] = `
       class="euiFormRow__fieldWrapper"
     >
       <div
-        class="euiFormControlLayout"
+        class="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           class="euiFormControlLayout__childrenWrapper"
         >
           <select
-            class="euiSelect"
+            class="euiSelect euiSelect--compressed"
             data-test-subj="options-editor-y-axis-position-select"
             id="random_html_id"
           >
@@ -59,7 +59,7 @@ exports[`<OptionsEditor /> spec renders the component 1`] = `
             >
               <svg
                 aria-hidden="true"
-                class="euiIcon euiIcon--medium euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
+                class="euiIcon euiIcon--small euiIcon-isLoading euiFormControlLayoutCustomIcon__icon"
                 focusable="false"
                 height="16"
                 role="img"
@@ -78,14 +78,14 @@ exports[`<OptionsEditor /> spec renders the component 1`] = `
     </div>
   </div>
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
       class="euiFormRow__fieldWrapper"
     >
       <div
-        class="euiSwitch"
+        class="euiSwitch euiSwitch--compressed"
       >
         <button
           aria-checked="true"
@@ -104,36 +104,7 @@ exports[`<OptionsEditor /> spec renders the component 1`] = `
             />
             <span
               class="euiSwitch__track"
-            >
-              <svg
-                aria-hidden="true"
-                class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                />
-              </svg>
-              <svg
-                aria-hidden="true"
-                class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                />
-              </svg>
-            </span>
+            />
           </span>
         </button>
         <span
@@ -146,14 +117,14 @@ exports[`<OptionsEditor /> spec renders the component 1`] = `
     </div>
   </div>
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
       class="euiFormRow__fieldWrapper"
     >
       <div
-        class="euiSwitch"
+        class="euiSwitch euiSwitch--compressed"
       >
         <button
           aria-checked="true"
@@ -172,36 +143,7 @@ exports[`<OptionsEditor /> spec renders the component 1`] = `
             />
             <span
               class="euiSwitch__track"
-            >
-              <svg
-                aria-hidden="true"
-                class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                />
-              </svg>
-              <svg
-                aria-hidden="true"
-                class="euiIcon euiIcon--medium euiIcon-isLoading euiSwitch__icon euiSwitch__icon--checked"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M5.277 10.088c.02.014.04.03.057.047.582.55 1.134.812 1.666.812.586 0 1.84-.293 3.713-.88L9 6.212V2H7v4.212l-1.723 3.876Zm-.438.987L3.539 14h8.922l-1.32-2.969C9.096 11.677 7.733 12 7 12c-.74 0-1.463-.315-2.161-.925ZM6 2H5V1h6v1h-1v4l3.375 7.594A1 1 0 0 1 12.461 15H3.54a1 1 0 0 1-.914-1.406L6 6V2Z"
-                />
-              </svg>
-            </span>
+            />
           </span>
         </button>
         <span
@@ -214,7 +156,7 @@ exports[`<OptionsEditor /> spec renders the component 1`] = `
     </div>
   </div>
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -231,13 +173,13 @@ exports[`<OptionsEditor /> spec renders the component 1`] = `
       class="euiFormRow__fieldWrapper"
     >
       <div
-        class="euiFormControlLayout"
+        class="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           class="euiFormControlLayout__childrenWrapper"
         >
           <input
-            class="euiFieldText"
+            class="euiFieldText euiFieldText--compressed"
             data-test-subj="options-editor-y-axis-label-input"
             id="random_html_id"
             placeholder="Label"
@@ -264,7 +206,7 @@ exports[`<OptionsEditor /> spec renders the component with different options 1`]
     class="euiSpacer euiSpacer--s"
   />
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
@@ -281,13 +223,13 @@ exports[`<OptionsEditor /> spec renders the component with different options 1`]
       class="euiFormRow__fieldWrapper"
     >
       <div
-        class="euiFormControlLayout"
+        class="euiFormControlLayout euiFormControlLayout--compressed"
       >
         <div
           class="euiFormControlLayout__childrenWrapper"
         >
           <select
-            class="euiSelect"
+            class="euiSelect euiSelect--compressed"
             data-test-subj="options-editor-y-axis-position-select"
             id="random_html_id"
           >
@@ -310,7 +252,7 @@ exports[`<OptionsEditor /> spec renders the component with different options 1`]
             >
               <svg
                 aria-hidden="true"
-                class="euiIcon euiIcon--medium euiFormControlLayoutCustomIcon__icon"
+                class="euiIcon euiIcon--small euiFormControlLayoutCustomIcon__icon"
                 focusable="false"
                 height="16"
                 role="img"
@@ -330,14 +272,14 @@ exports[`<OptionsEditor /> spec renders the component with different options 1`]
     </div>
   </div>
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
       class="euiFormRow__fieldWrapper"
     >
       <div
-        class="euiSwitch"
+        class="euiSwitch euiSwitch--compressed"
       >
         <button
           aria-checked="true"
@@ -356,37 +298,7 @@ exports[`<OptionsEditor /> spec renders the component with different options 1`]
             />
             <span
               class="euiSwitch__track"
-            >
-              <svg
-                aria-hidden="true"
-                class="euiIcon euiIcon--medium euiSwitch__icon"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M7.293 8 3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8Z"
-                />
-              </svg>
-              <svg
-                aria-hidden="true"
-                class="euiIcon euiIcon--medium euiSwitch__icon euiSwitch__icon--checked"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M6.5 12a.502.502 0 0 1-.354-.146l-4-4a.502.502 0 0 1 .708-.708L6.5 10.793l6.646-6.647a.502.502 0 0 1 .708.708l-7 7A.502.502 0 0 1 6.5 12"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
+            />
           </span>
         </button>
         <span
@@ -399,14 +311,14 @@ exports[`<OptionsEditor /> spec renders the component with different options 1`]
     </div>
   </div>
   <div
-    class="euiFormRow"
+    class="euiFormRow euiFormRow--compressed"
     id="random_html_id-row"
   >
     <div
       class="euiFormRow__fieldWrapper"
     >
       <div
-        class="euiSwitch"
+        class="euiSwitch euiSwitch--compressed"
       >
         <button
           aria-checked="false"
@@ -425,37 +337,7 @@ exports[`<OptionsEditor /> spec renders the component with different options 1`]
             />
             <span
               class="euiSwitch__track"
-            >
-              <svg
-                aria-hidden="true"
-                class="euiIcon euiIcon--medium euiSwitch__icon"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M7.293 8 3.146 3.854a.5.5 0 1 1 .708-.708L8 7.293l4.146-4.147a.5.5 0 0 1 .708.708L8.707 8l4.147 4.146a.5.5 0 0 1-.708.708L8 8.707l-4.146 4.147a.5.5 0 0 1-.708-.708L7.293 8Z"
-                />
-              </svg>
-              <svg
-                aria-hidden="true"
-                class="euiIcon euiIcon--medium euiSwitch__icon euiSwitch__icon--checked"
-                focusable="false"
-                height="16"
-                role="img"
-                viewBox="0 0 16 16"
-                width="16"
-                xmlns="http://www.w3.org/2000/svg"
-              >
-                <path
-                  d="M6.5 12a.502.502 0 0 1-.354-.146l-4-4a.502.502 0 0 1 .708-.708L6.5 10.793l6.646-6.647a.502.502 0 0 1 .708.708l-7 7A.502.502 0 0 1 6.5 12"
-                  fill-rule="evenodd"
-                />
-              </svg>
-            </span>
+            />
           </span>
         </button>
         <span