[EuiSuperDatePicker] Fix quick select button icon spacing (#7217)

elastic · Sep 22, 2023 · 1aab41d · 1aab41d
1 parent badc843
commit 1aab41d
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 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
@@ -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/...r/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap b/...r/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
@@ -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
@@ -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}

diff --git a/upcoming_changelogs/7217.md b/upcoming_changelogs/7217.md
@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiSuperDatePicker` icon spacing on the quick select button
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		Bug fixes

		- Fixed `EuiSuperDatePicker` icon spacing on the quick select button