From bbf5395d51143365d0f624fdc8f1d5707219771c Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 21 Sep 2023 15:49:49 -0700
Subject: [PATCH 1/2] [EuiSuperDatePicker] Fix quick select button icon spacing

---
 .../super_date_picker.test.tsx.snap           | 40 +++++++++----------
 .../quick_select_popover.test.tsx.snap        |  4 +-
 .../_quick_select_popover.scss                |  6 +--
 .../quick_select_popover.tsx                  |  2 +-
 4 files changed, 25 insertions(+), 27 deletions(-)

diff --git a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
index 1cc5c0c40ee..354b88ed7b6 100644
--- a/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
+++ b/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
@@ -22,10 +22,10 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo
           type="button"
         >
           <span
-            class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+            class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
           >
             <span
-              class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+              class="eui-textTruncate euiButtonEmpty__text"
             >
               <span
                 data-euiicon-type="calendar"
@@ -94,10 +94,10 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
           type="button"
         >
           <span
-            class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+            class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
           >
             <span
-              class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+              class="eui-textTruncate euiButtonEmpty__text"
             >
               <span
                 data-euiicon-type="calendar"
@@ -293,10 +293,10 @@ exports[`EuiSuperDatePicker props isDisabled true 1`] = `
           type="button"
         >
           <span
-            class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+            class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
           >
             <span
-              class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+              class="eui-textTruncate euiButtonEmpty__text"
             >
               <span
                 data-euiicon-type="calendar"
@@ -367,10 +367,10 @@ exports[`EuiSuperDatePicker props isQuickSelectOnly is rendered 1`] = `
           type="button"
         >
           <span
-            class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+            class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
           >
             <span
-              class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+              class="eui-textTruncate euiButtonEmpty__text"
             >
               <span
                 data-euiicon-type="calendar"
@@ -432,10 +432,10 @@ exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = `
           type="button"
         >
           <span
-            class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+            class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
           >
             <span
-              class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+              class="eui-textTruncate euiButtonEmpty__text"
             >
               <span
                 data-euiicon-type="calendar"
@@ -484,10 +484,10 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
           type="button"
         >
           <span
-            class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+            class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
           >
             <span
-              class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+              class="eui-textTruncate euiButtonEmpty__text"
             >
               <span
                 data-euiicon-type="calendar"
@@ -559,10 +559,10 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `
           type="button"
         >
           <span
-            class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+            class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
           >
             <span
-              class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+              class="eui-textTruncate euiButtonEmpty__text"
             >
               <span
                 data-euiicon-type="calendar"
@@ -631,10 +631,10 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `
           type="button"
         >
           <span
-            class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+            class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
           >
             <span
-              class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+              class="eui-textTruncate euiButtonEmpty__text"
             >
               <span
                 data-euiicon-type="calendar"
@@ -704,10 +704,10 @@ exports[`EuiSuperDatePicker renders 1`] = `
           type="button"
         >
           <span
-            class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+            class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
           >
             <span
-              class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+              class="eui-textTruncate euiButtonEmpty__text"
             >
               <span
                 data-euiicon-type="calendar"
@@ -780,10 +780,10 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
             type="button"
           >
             <span
-              class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+              class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
             >
               <span
-                class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+                class="eui-textTruncate euiButtonEmpty__text"
               >
                 <span
                   data-euiicon-type="calendar"
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
index df77104fe80..df75cb87606 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
@@ -439,10 +439,10 @@ exports[`EuiQuickSelectPopover is rendered 1`] = `
       type="button"
     >
       <span
-        class="euiButtonEmpty__content emotion-euiButtonDisplayContent"
+        class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
       >
         <span
-          class="eui-textTruncate euiButtonEmpty__text euiQuickSelectPopover__buttonText"
+          class="eui-textTruncate euiButtonEmpty__text"
         >
           <span
             data-euiicon-type="calendar"
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
index 0ca7a8e3c85..3454f08296f 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
@@ -25,10 +25,8 @@
   clear: both;
 }
 
-.euiQuickSelectPopover__buttonText {
-  // Override specificity from universal and sibling selectors
-  // stylelint-disable-next-line declaration-no-important
-  margin-right: $euiSizeXS !important;
+.euiQuickSelectPopover__buttonContent {
+  gap: $euiSizeXS;
 }
 
 .euiQuickSelectPopover__anchor {
diff --git a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
index 565dbc71e95..8da9a4518fd 100644
--- a/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
+++ b/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
@@ -90,7 +90,7 @@ export const EuiQuickSelectPopover: FunctionComponent<
   const quickSelectButton = (
     <EuiButtonEmpty
       className="euiFormControlLayout__prepend"
-      textProps={{ className: 'euiQuickSelectPopover__buttonText' }}
+      contentProps={{ className: 'euiQuickSelectPopover__buttonContent' }}
       onClick={togglePopover}
       aria-label={buttonlabel}
       title={buttonlabel}

From 355b0a6f2b7c94f2df330015e061ed5023ca8533 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 21 Sep 2023 16:26:14 -0700
Subject: [PATCH 2/2] changelog

---
 upcoming_changelogs/7217.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 upcoming_changelogs/7217.md

diff --git a/upcoming_changelogs/7217.md b/upcoming_changelogs/7217.md
new file mode 100644
index 00000000000..f75c77c7187
--- /dev/null
+++ b/upcoming_changelogs/7217.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiSuperDatePicker` icon spacing on the quick select button