[EuiSuperDatePicker] Fix incorrect button margins in quick select pop…

…over (#6380)

* [EuiDatePicker] Fix incorrect buttons margins in quick select popover

* Adding CL

* Remove now-unnecessary negative margin workarounds

* Tweak changelog

- more generic since we're fixing multiple margins, label cause of bugs in case it's handy to search for in the future

* Fixed recently used `li`s missing sufficient spacing

* Remove last unnecessary negative margin accommodation + smooth out section spacing

- using margin instead of padding makes the scroll experience nicer for recently used ranges

- this also makes it so custom panels don't need the spacer, it already comes from margin

Co-authored-by: Constance Chen <constance.chen.3@gmail.com>

src/components/date_picker/super_date_picker/_super_date_picker.scss

@@ -1,15 +1,17 @@
 // sass-lint:disable-block function-name-format
 
 .euiSuperDatePicker__flexWrapper {
-  // Need to offset 8px because of negative margins added by small size gutter
-  max-width: calc(100% + #{$euiSizeS});
+  max-width: 100%;
   // Set a sensible min-width for when width is auto
   min-width: MIN(($euiFormMaxWidth / 2) + $euiSuperDatePickerButtonWidth + $euiSizeS, 100%);
   width: $euiSuperDatePickerWidth + $euiSuperDatePickerButtonWidth + $euiSizeS;
 
+  @include euiBreakpoint('xs', 's') {
+    width: 100%;
+  }
+
   &.euiSuperDatePicker__flexWrapper--fullWidth {
-    // Need to offset 8px because of negative margins added by small size gutter
-    width: calc(100% + #{$euiSizeS});
+    width: 100%;
   }
 
   &.euiSuperDatePicker__flexWrapper--isQuickSelectOnly {
@@ -76,9 +78,3 @@
     cursor: not-allowed;
   }
 }
-
-@include euiBreakpoint('xs', 's') {
-  .euiSuperDatePicker__flexWrapper {
-    width: calc(100% + #{$euiSizeS});
-  }
-}

src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss

@@ -8,7 +8,7 @@
   max-height: $euiSizeM * 11;
   overflow: hidden;
   overflow-y: auto;
-  padding: $euiSizeS 0 $euiSizeXS; // Offset negative margin from flex items
+  margin: $euiSizeS 0 0;
 }
 
 // sass-lint:disable no-important
@@ -25,7 +25,9 @@
   font-size: $euiFontSizeS;
   line-height: $euiFontSizeS;
 
-  &:not(:last-of-type) {
-    margin-bottom: $euiSizeS;
+  &--recentlyUsed {
+    &:not(:last-of-type) {
+      margin-bottom: $euiSizeS;
+    }
   }
 }

src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx

@@ -12,7 +12,6 @@ import { EuiButtonEmpty } from '../../../button';
 import { EuiIcon } from '../../../icon';
 import { EuiPopover } from '../../../popover';
 import { EuiTitle } from '../../../title';
-import { EuiSpacer } from '../../../spacer';
 import { EuiHorizontalRule } from '../../../horizontal_rule';
 import { EuiText } from '../../../text';
 
@@ -135,7 +134,6 @@ export class EuiQuickSelectPopover extends Component<
           <EuiTitle size="xxxs">
             <span>{title}</span>
           </EuiTitle>
-          <EuiSpacer size="xs" />
           <EuiText size="s" className="euiQuickSelectPopover__section">
             {React.cloneElement(content, { applyTime: this.applyTime })}
           </EuiText>

src/components/date_picker/super_date_picker/quick_select_popover/recently_used.tsx

@@ -40,7 +40,7 @@ export const EuiRecentlyUsed: FunctionComponent<EuiRecentlyUsedProps> = ({
     };
     return (
       <li
-        className="euiQuickSelectPopover__sectionItem"
+        className="euiQuickSelectPopover__sectionItem euiQuickSelectPopover__sectionItem--recentlyUsed"
         key={`${start}-${end}`}
       >
         <EuiLink onClick={applyRecentlyUsed}>

upcoming_changelogs/6380.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed incorrect margins in `EuiSuperDatePicker` caused by `EuiFlex` CSS gap change