From 5adadb58d13b3caae0ae7fe36c68cd7a77b82de5 Mon Sep 17 00:00:00 2001
From: "opensearch-trigger-bot[bot]"
 <98922864+opensearch-trigger-bot[bot]@users.noreply.github.com>
Date: Tue, 20 Aug 2024 11:29:17 -0400
Subject: [PATCH]  Use smaller and compressed varients of buttons and form
 components (#383) (#387)

* Use EuiCompressedFormRow



* Use EuiCompressedField*



* Use EuiCompressedSelect and EuiCompressedSuperSelect



* Use EuiCompressedSwitch



* Update snapshots



---------


(cherry picked from commit 06f24fd210ba8a68dd8a590e4bde0c26437523b1)

Signed-off-by: Miki <miki@amazon.com>
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
---
 .../gantt_chart_editor.test.tsx.snap          |  24 +--
 .../options_editor.test.tsx.snap              | 164 +++---------------
 public/components/gantt_chart_editor.tsx      |  30 ++--
 public/components/options_editor.tsx          |  96 +++++-----
 4 files changed, 98 insertions(+), 216 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
diff --git a/public/components/gantt_chart_editor.tsx b/public/components/gantt_chart_editor.tsx
index d06da8b..7d2ccce 100644
--- a/public/components/gantt_chart_editor.tsx
+++ b/public/components/gantt_chart_editor.tsx
@@ -4,11 +4,11 @@
  */
 
 import {
-  EuiFieldNumber,
-  EuiFormRow,
+  EuiCompressedFieldNumber,
+  EuiCompressedFormRow,
   EuiPanel,
   EuiSpacer,
-  EuiSuperSelect,
+  EuiCompressedSuperSelect,
   EuiTitle,
 } from '@elastic/eui';
 import React from 'react';
@@ -30,39 +30,39 @@ 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."
         >
-          <EuiSuperSelect
+          <EuiCompressedSuperSelect
             data-test-subj="gantt-chart-editor-label-field"
             options={fieldOptions}
             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."
         >
-          <EuiSuperSelect
+          <EuiCompressedSuperSelect
             data-test-subj="gantt-chart-editor-start-time-field"
             options={fieldOptions}
             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."
         >
-          <EuiSuperSelect
+          <EuiCompressedSuperSelect
             data-test-subj="gantt-chart-editor-duration-field"
             options={fieldOptions}
             valueOfSelected={stateParams.durationField}
             onChange={(value) => setValue('durationField', value)}
           />
-        </EuiFormRow>
+        </EuiCompressedFormRow>
       </EuiPanel>
 
       <EuiSpacer size="s" />
@@ -72,16 +72,16 @@ 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."
         >
-          <EuiFieldNumber
+          <EuiCompressedFieldNumber
             data-test-subj="gantt-chart-editor-size-field"
             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..c2c213b 100644
--- a/public/components/options_editor.tsx
+++ b/public/components/options_editor.tsx
@@ -5,12 +5,12 @@
 
 import {
   EuiColorPicker,
-  EuiFieldText,
-  EuiFormRow,
+  EuiCompressedFieldText,
+  EuiCompressedFormRow,
   EuiPanel,
-  EuiSelect,
+  EuiCompressedSelect,
   EuiSpacer,
-  EuiSwitch,
+  EuiCompressedSwitch,
   EuiTitle,
 } from '@elastic/eui';
 import React from 'react';
@@ -36,18 +36,18 @@ export function OptionsEditor({ aggs, stateParams, setValue }: VisOptionsProps<G
         </EuiTitle>
         <EuiSpacer size="s" />
 
-        <EuiFormRow>
-          <EuiSwitch
+        <EuiCompressedFormRow>
+          <EuiCompressedSwitch
             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">
-            <EuiSelect
+          <EuiCompressedFormRow label="Orientation">
+            <EuiCompressedSelect
               data-test-subj="options-editor-legend-orientation-select"
               options={legendOrientationOptions}
               value={stateParams.legendOrientation}
@@ -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>
-          <EuiSwitch
+        <EuiCompressedFormRow>
+          <EuiCompressedSwitch
             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>
-          <EuiSwitch
+        </EuiCompressedFormRow>
+        <EuiCompressedFormRow>
+          <EuiCompressedSwitch
             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">
-          <EuiSelect
+        <EuiCompressedFormRow label="Position">
+          <EuiCompressedSelect
             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>
-          <EuiSwitch
+        <EuiCompressedFormRow>
+          <EuiCompressedSwitch
             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>
-          <EuiSwitch
+        </EuiCompressedFormRow>
+        <EuiCompressedFormRow>
+          <EuiCompressedSwitch
             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">
-            <EuiFieldText
+          <EuiCompressedFormRow label="Label">
+            <EuiCompressedFieldText
               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">
-          <EuiSelect
+        <EuiCompressedFormRow label="Position">
+          <EuiCompressedSelect
             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">
-          <EuiSelect
+        </EuiCompressedFormRow>
+        <EuiCompressedFormRow label="Scale type">
+          <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)}
           />
-        </EuiFormRow>
-        <EuiFormRow label="Time format">
-          <EuiSelect
+        </EuiCompressedFormRow>
+        <EuiCompressedFormRow label="Time format">
+          <EuiCompressedSelect
             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>
-          <EuiSwitch
+        <EuiCompressedFormRow>
+          <EuiCompressedSwitch
             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>
-          <EuiSwitch
+        </EuiCompressedFormRow>
+        <EuiCompressedFormRow>
+          <EuiCompressedSwitch
             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">
-            <EuiFieldText
+          <EuiCompressedFormRow label="Label">
+            <EuiCompressedFieldText
               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>
     );