From 12b03e36c98e5dbe813f89e03ae1d4724404a3b2 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 23 Jul 2024 14:15:40 -0700
Subject: [PATCH 01/11] Remove unused refresh interval CSS

- not used anywhere in the EUI repo or Kibana
---
 .../quick_select_popover/_refresh_interval.scss               | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_refresh_interval.scss b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_refresh_interval.scss
index e002eddc4ca..e69de29bb2d 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_refresh_interval.scss
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_refresh_interval.scss
@@ -1,4 +0,0 @@
-.euiRefreshInterval__startButton {
-  // Just enough to keep it the same size for "Start" and "Stop"
-  min-width: 90px;
-}

From 1f87a276b456ca2559d5d1ef3ab2b62855300c31 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 23 Jul 2024 14:20:56 -0700
Subject: [PATCH 02/11] Replace min-width button CSS with a prop instead

- much more straightforward and less custom CSS

+ replace className with a data-test-subj instead (used by several test selectors in Kibana)
---
 .../__snapshots__/quick_select_popover.test.tsx.snap          | 3 ++-
 .../super_date_picker/quick_select_popover/_quick_select.scss | 4 ----
 .../super_date_picker/quick_select_popover/quick_select.tsx   | 3 ++-
 3 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
index 6b094158912..73db1e81bb0 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
@@ -216,7 +216,8 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
       >
         <button
           aria-describedby="generated-id generated-id"
-          class="euiButton euiQuickSelect__applyButton emotion-euiButtonDisplay-s-defaultMinWidth-base-primary"
+          class="euiButton emotion-euiButtonDisplay-s-base-primary"
+          data-test-subj="superDatePickerQuickSelectApplyButton"
           type="button"
         >
           <span
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select.scss b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select.scss
index fa7907252c4..e69de29bb2d 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select.scss
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select.scss
@@ -1,4 +0,0 @@
-.euiQuickSelect__applyButton {
-  // Allow the button to shrink
-  min-width: 0;
-}
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.tsx b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.tsx
index 74c973701fc..0ae81955773 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.tsx
@@ -277,7 +277,8 @@ export class EuiQuickSelect extends Component<
           <EuiFlexItem grow={false}>
             <EuiButton
               aria-describedby={`${this.timeSelectionId} ${this.legendId}`}
-              className="euiQuickSelect__applyButton"
+              data-test-subj="superDatePickerQuickSelectApplyButton"
+              minWidth={0} // Allow the button to shrink
               size="s"
               onClick={this.applyQuickSelect}
               disabled={timeValue <= 0}

From c00dd28d84ff474ff5f254f74ca19c2484d87453 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 23 Jul 2024 19:51:18 -0700
Subject: [PATCH 03/11] Convert basic EuiQuickSelectPopover styles to Emotion

- other styles in this file are kind of all over the place and needs more refactoring
---
 .../super_date_picker.test.tsx.snap           | 40 +++++++++----------
 .../quick_select_popover.test.tsx.snap        |  6 +--
 .../_quick_select_popover.scss                | 27 +++++--------
 .../quick_select_popover.styles.ts            | 37 +++++++++++++++++
 .../quick_select_popover.tsx                  | 15 +++++--
 5 files changed, 80 insertions(+), 45 deletions(-)
 create mode 100644 packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.styles.ts

diff --git a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
index 1abdff6c019..14166d5664d 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/super_date_picker/__snapshots__/super_date_picker.test.tsx.snap
@@ -13,13 +13,13 @@ exports[`EuiSuperDatePicker props accepts data-test-subj and passes to EuiFormCo
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -82,13 +82,13 @@ exports[`EuiSuperDatePicker props compressed is rendered 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -266,14 +266,14 @@ exports[`EuiSuperDatePicker props isDisabled true 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-disabled-isDisabled"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-disabled-isDisabled-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         disabled=""
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -338,13 +338,13 @@ exports[`EuiSuperDatePicker props isQuickSelectOnly is rendered 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -399,13 +399,13 @@ exports[`EuiSuperDatePicker props showUpdateButton can be false 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -448,13 +448,13 @@ exports[`EuiSuperDatePicker props showUpdateButton can be iconOnly 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -520,13 +520,13 @@ exports[`EuiSuperDatePicker props width can be auto 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -589,13 +589,13 @@ exports[`EuiSuperDatePicker props width can be full 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -659,13 +659,13 @@ exports[`EuiSuperDatePicker renders 1`] = `
     >
       <button
         aria-label="Date quick select"
-        class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+        class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
         data-test-subj="superDatePickerToggleQuickMenuButton"
         title="Date quick select"
         type="button"
       >
         <span
-          class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+          class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
         >
           <span
             class="eui-textTruncate euiButtonEmpty__text"
@@ -732,13 +732,13 @@ exports[`EuiSuperDatePicker renders an EuiDatePickerRange 1`] = `
       >
         <button
           aria-label="Date quick select"
-          class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+          class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
           data-test-subj="superDatePickerToggleQuickMenuButton"
           title="Date quick select"
           type="button"
         >
           <span
-            class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+            class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
           >
             <span
               class="eui-textTruncate euiButtonEmpty__text"
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
index 73db1e81bb0..c0d0515b2b0 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panels 1`] = `
 <div
-  class="euiQuickSelectPopover__content"
+  class="euiQuickSelectPopover emotion-euiQuickSelectPopover"
   data-test-subj="superDatePickerQuickMenu"
 >
   <fieldset
@@ -435,13 +435,13 @@ exports[`EuiQuickSelectPopover is rendered 1`] = `
 >
   <button
     aria-label="Date quick select"
-    class="euiButtonEmpty euiFormControlLayout__prepend emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+    class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
     data-test-subj="superDatePickerToggleQuickMenuButton"
     title="Date quick select"
     type="button"
   >
     <span
-      class="euiButtonEmpty__content euiQuickSelectPopover__buttonContent emotion-euiButtonDisplayContent"
+      class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton"
     >
       <span
         class="eui-textTruncate euiButtonEmpty__text"
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
index e103f641d38..675192ef397 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
@@ -1,18 +1,13 @@
-.euiQuickSelectPopover__content {
-  width: $euiFormMaxWidth;
-  max-width: 100%;
-
-  .euiQuickSelectPopover__panel {
-    &:not(:first-child) {
-      border-top: $euiBorderThin;
-      padding-top: $euiSizeM;
-      margin-top: $euiSizeM;
-    }
+.euiQuickSelectPopover__panel {
+  &:not(:first-child) {
+    border-top: $euiBorderThin;
+    padding-top: $euiSizeM;
+    margin-top: $euiSizeM;
+  }
 
-    .euiQuickSelectPopover__panelTitle {
-      float: left;
-      margin-bottom: $euiSizeM;
-    }
+  .euiQuickSelectPopover__panelTitle {
+    float: left;
+    margin-bottom: $euiSizeM;
   }
 }
 
@@ -25,10 +20,6 @@
   clear: both;
 }
 
-.euiQuickSelectPopover__buttonContent {
-  gap: $euiSizeXS;
-}
-
 .euiQuickSelectPopover__sectionItem {
   font-size: $euiFontSizeS;
   line-height: $euiFontSizeS;
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.styles.ts b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.styles.ts
new file mode 100644
index 00000000000..144a67a0d21
--- /dev/null
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.styles.ts
@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../../../services';
+import { logicalCSS } from '../../../../global_styling';
+import { euiFormVariables } from '../../../form/form.styles';
+
+export const euiQuickSelectPopoverStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  const { maxWidth } = euiFormVariables(euiThemeContext);
+
+  return {
+    euiQuickSelectPopover: css`
+      ${logicalCSS('width', maxWidth)}
+      ${logicalCSS('max-width', '100%')}
+    `,
+    euiQuickSelectPopoverButton: css`
+      ${logicalCSS('border-top-right-radius', 0)}
+      ${logicalCSS('border-bottom-right-radius', 0)}
+
+      /* Adds slightly more width between the calendar icon and the dropdown arrow */
+      .euiIcon {
+        ${logicalCSS('width', euiTheme.size.base)}
+      }
+    `,
+    euiQuickSelectPopoverButton__content: css`
+      gap: ${euiTheme.size.xs};
+    `,
+  };
+};
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
index 72370d74240..3cce13b86af 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
@@ -15,13 +15,15 @@ import React, {
   ReactElement,
 } from 'react';
 
+import { useEuiMemoizedStyles } from '../../../../services';
+import { useEuiI18n } from '../../../i18n';
 import { EuiButtonEmpty } from '../../../button';
 import { EuiIcon } from '../../../icon';
 import { EuiPopover } from '../../../popover';
 import { EuiTitle } from '../../../title';
 import { EuiText } from '../../../text';
-import { useEuiI18n } from '../../../i18n';
 
+import { euiQuickSelectPopoverStyles } from './quick_select_popover.styles';
 import { EuiQuickSelect } from './quick_select';
 import { EuiCommonlyUsedTimeRanges } from './commonly_used_time_ranges';
 import { EuiRecentlyUsed } from './recently_used';
@@ -91,10 +93,12 @@ export const EuiQuickSelectPopover: FunctionComponent<
     'Date quick select'
   );
 
+  const styles = useEuiMemoizedStyles(euiQuickSelectPopoverStyles);
+
   const quickSelectButton = (
     <EuiButtonEmpty
-      className="euiFormControlLayout__prepend"
-      contentProps={{ className: 'euiQuickSelectPopover__buttonContent' }}
+      css={styles.euiQuickSelectPopoverButton}
+      contentProps={{ css: styles.euiQuickSelectPopoverButton__content }}
       onClick={togglePopover}
       aria-label={buttonlabel}
       title={buttonlabel}
@@ -145,6 +149,8 @@ export const EuiQuickSelectPanels: FunctionComponent<
   applyTime,
   prevQuickSelect,
 }) => {
+  const styles = useEuiMemoizedStyles(euiQuickSelectPopoverStyles);
+
   const quickSelectElement = (
     <EuiQuickSelect
       applyTime={applyTime}
@@ -201,7 +207,8 @@ export const EuiQuickSelectPanels: FunctionComponent<
 
   return (
     <div
-      className="euiQuickSelectPopover__content"
+      css={styles.euiQuickSelectPopover}
+      className="euiQuickSelectPopover"
       data-test-subj="superDatePickerQuickMenu"
     >
       {customQuickSelectRender ? (

From 025bb2105b41fade138c31e57bd76986a4212d3e Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 23 Jul 2024 20:01:24 -0700
Subject: [PATCH 04/11] Create new internal EuiQuickSelectPanel subcomponent

- contains all the required styling without requiring other usages to set classNames directly

- should also be flexible enough for both `div` and `fieldset/legend` usage
---
 .../_quick_select_popover.scss                | 22 --------
 .../quick_select_panel.styles.ts              | 46 +++++++++++++++++
 .../quick_select_panel.tsx                    | 51 +++++++++++++++++++
 3 files changed, 97 insertions(+), 22 deletions(-)
 create mode 100644 packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.styles.ts
 create mode 100644 packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.tsx

diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
index 675192ef397..016eda561d7 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
@@ -1,25 +1,3 @@
-.euiQuickSelectPopover__panel {
-  &:not(:first-child) {
-    border-top: $euiBorderThin;
-    padding-top: $euiSizeM;
-    margin-top: $euiSizeM;
-  }
-
-  .euiQuickSelectPopover__panelTitle {
-    float: left;
-    margin-bottom: $euiSizeM;
-  }
-}
-
-.euiQuickSelectPopover__section {
-  @include euiScrollBar;
-  max-height: $euiSizeM * 11;
-  overflow: hidden;
-  overflow-y: auto;
-  margin: $euiSizeS 0 0;
-  clear: both;
-}
-
 .euiQuickSelectPopover__sectionItem {
   font-size: $euiFontSizeS;
   line-height: $euiFontSizeS;
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.styles.ts b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.styles.ts
new file mode 100644
index 00000000000..db354afdaef
--- /dev/null
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.styles.ts
@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+
+import { UseEuiTheme } from '../../../../services';
+import {
+  euiScrollBarStyles,
+  logicalCSS,
+  logicalCSSWithFallback,
+  mathWithUnits,
+} from '../../../../global_styling';
+
+export const euiQuickSelectPanelStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+
+  return {
+    euiQuickSelectPanel: css`
+      &:not(:first-child) {
+        ${logicalCSS('border-top', euiTheme.border.thin)}
+        ${logicalCSS('padding-top', euiTheme.size.m)}
+        ${logicalCSS('margin-top', euiTheme.size.m)}
+      }
+    `,
+    euiQuickSelectPanel__title: css`
+      float: left; /* Required for fieldset/legend elements */
+      ${logicalCSS('margin-bottom', euiTheme.size.m)}
+    `,
+    euiQuickSelectPanel__section: css`
+      clear: both; /* Required for fieldset/legend elements */
+      ${logicalCSS('margin-top', euiTheme.size.s)}
+      ${logicalCSS(
+        'max-height',
+        mathWithUnits(euiTheme.size.m, (x) => x * 12)
+      )}
+      overflow: hidden;
+      ${logicalCSSWithFallback('overflow-y', 'auto')}
+      ${euiScrollBarStyles(euiThemeContext)}
+    `,
+  };
+};
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.tsx b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.tsx
new file mode 100644
index 00000000000..4553ae7cc34
--- /dev/null
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.tsx
@@ -0,0 +1,51 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FunctionComponent, ReactNode } from 'react';
+
+import { useEuiMemoizedStyles } from '../../../../services';
+import { EuiTitle } from '../../../title';
+import type { CommonProps } from '../../../common';
+
+import { euiQuickSelectPanelStyles } from './quick_select_panel.styles';
+
+type EuiQuickSelectPanelProps = CommonProps & {
+  component?: 'div' | 'fieldset';
+  title?: ReactNode;
+  titleId?: string;
+  children?: ReactNode;
+};
+
+export const EuiQuickSelectPanel: FunctionComponent<
+  EuiQuickSelectPanelProps
+> = ({ component: Component = 'div', title, titleId, children, ...rest }) => {
+  const isFieldset = Component === 'fieldset';
+  const TitleComponent = isFieldset ? 'legend' : 'span';
+
+  const styles = useEuiMemoizedStyles(euiQuickSelectPanelStyles);
+
+  return (
+    <Component css={styles.euiQuickSelectPanel} {...rest}>
+      {title ? (
+        <>
+          <EuiTitle size="xxxs">
+            <TitleComponent
+              id={titleId}
+              css={styles.euiQuickSelectPanel__title}
+            >
+              {title}
+            </TitleComponent>
+          </EuiTitle>
+          <div css={styles.euiQuickSelectPanel__section}>{children}</div>
+        </>
+      ) : (
+        children
+      )}
+    </Component>
+  );
+};

From b9e4d4633cb42c0070fd0bc9d679891abf8c9e8e Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 23 Jul 2024 20:07:17 -0700
Subject: [PATCH 05/11] Refactor commonly used, recently used, and custom
 panels to use new subcomponent

+ refactor recently used panel to use a flex column with gap instead of margins

+ reorder imports
---
 .../quick_select_popover.test.tsx.snap        | 26 +++++-----
 .../_quick_select_popover.scss                | 10 ----
 .../commonly_used_time_ranges.tsx             | 50 ++++++++-----------
 .../quick_select_panel.styles.ts              |  2 +
 .../quick_select_popover.tsx                  | 14 ++----
 .../quick_select_popover/recently_used.tsx    | 37 ++++++--------
 6 files changed, 56 insertions(+), 83 deletions(-)

diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
index c0d0515b2b0..8abba89a5dc 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
@@ -236,16 +236,16 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
     </p>
   </fieldset>
   <fieldset
-    class="euiQuickSelectPopover__panel"
+    class="emotion-euiQuickSelectPanel"
   >
     <legend
-      class="euiTitle euiQuickSelectPopover__panelTitle emotion-euiTitle-xxxs"
+      class="euiTitle emotion-euiQuickSelectPanel__title-euiTitle-xxxs"
       id="generated-id"
     >
       Commonly used
     </legend>
     <div
-      class="euiQuickSelectPopover__section"
+      class="emotion-euiQuickSelectPanel__section"
     >
       <ul
         aria-labelledby="generated-id"
@@ -253,7 +253,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
         style="grid-template-rows: repeat(1, 1fr);"
       >
         <li
-          class="euiFlexItem euiQuickSelectPopover__sectionItem emotion-euiFlexItem-grow-1"
+          class="euiFlexItem emotion-euiFlexItem-grow-1"
         >
           <button
             class="euiLink emotion-euiLink-primary"
@@ -267,20 +267,22 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
     </div>
   </fieldset>
   <fieldset
-    class="euiQuickSelectPopover__panel"
+    class="emotion-euiQuickSelectPanel"
   >
     <legend
-      class="euiTitle euiQuickSelectPopover__panelTitle emotion-euiTitle-xxxs"
+      class="euiTitle emotion-euiQuickSelectPanel__title-euiTitle-xxxs"
       id="generated-id"
     >
       Recently used date ranges
     </legend>
     <div
-      class="euiQuickSelectPopover__section"
+      class="emotion-euiQuickSelectPanel__section"
     >
-      <ul>
+      <ul
+        class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-column"
+      >
         <li
-          class="euiQuickSelectPopover__sectionItem euiQuickSelectPopover__sectionItem--recentlyUsed"
+          class="euiFlexItem emotion-euiFlexItem-grow-1"
         >
           <button
             class="euiLink emotion-euiLink-primary"
@@ -407,15 +409,15 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
     </p>
   </fieldset>
   <div
-    class="euiQuickSelectPopover__panel"
+    class="emotion-euiQuickSelectPanel"
   >
     <span
-      class="euiTitle emotion-euiTitle-xxxs"
+      class="euiTitle emotion-euiQuickSelectPanel__title-euiTitle-xxxs"
     >
       My custom panel
     </span>
     <div
-      class="euiText euiQuickSelectPopover__section emotion-euiText-s"
+      class="emotion-euiQuickSelectPanel__section"
     >
       <button
         class="euiLink emotion-euiLink-primary"
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
index 016eda561d7..e69de29bb2d 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
@@ -1,10 +0,0 @@
-.euiQuickSelectPopover__sectionItem {
-  font-size: $euiFontSizeS;
-  line-height: $euiFontSizeS;
-
-  &--recentlyUsed {
-    &:not(:last-of-type) {
-      margin-bottom: $euiSizeS;
-    }
-  }
-}
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx
index 7d12ceaaef5..7176609365d 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges.tsx
@@ -7,12 +7,14 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { EuiI18n } from '../../../i18n';
+
+import { useGeneratedHtmlId } from '../../../../services';
+import { useEuiI18n } from '../../../i18n';
 import { EuiFlexGrid, EuiFlexItem } from '../../../flex';
-import { EuiTitle } from '../../../title';
 import { EuiLink } from '../../../link';
-import { useGeneratedHtmlId } from '../../../../services';
+
 import { DurationRange, ApplyTime } from '../../types';
+import { EuiQuickSelectPanel } from './quick_select_panel';
 
 export interface EuiCommonlyUsedTimeRangesProps {
   applyTime: ApplyTime;
@@ -22,7 +24,9 @@ export interface EuiCommonlyUsedTimeRangesProps {
 export const EuiCommonlyUsedTimeRanges: FunctionComponent<
   EuiCommonlyUsedTimeRangesProps
 > = ({ applyTime, commonlyUsedRanges }) => {
+  const title = useEuiI18n('euiCommonlyUsedTimeRanges.legend', 'Commonly used');
   const legendId = useGeneratedHtmlId();
+
   const links = commonlyUsedRanges.map(({ start, end, label }) => {
     const applyCommonlyUsed = () => {
       applyTime({ start, end });
@@ -31,11 +35,7 @@ export const EuiCommonlyUsedTimeRanges: FunctionComponent<
       ? `superDatePickerCommonlyUsed_${label.replace(' ', '_')}`
       : undefined;
     return (
-      <EuiFlexItem
-        key={label}
-        component="li"
-        className="euiQuickSelectPopover__sectionItem"
-      >
+      <EuiFlexItem key={label} component="li">
         <EuiLink onClick={applyCommonlyUsed} data-test-subj={dataTestSubj}>
           {label}
         </EuiLink>
@@ -44,28 +44,18 @@ export const EuiCommonlyUsedTimeRanges: FunctionComponent<
   });
 
   return (
-    <fieldset className="euiQuickSelectPopover__panel">
-      <EuiTitle size="xxxs">
-        <legend id={legendId} className="euiQuickSelectPopover__panelTitle">
-          <EuiI18n
-            token="euiCommonlyUsedTimeRanges.legend"
-            default="Commonly used"
-          />
-        </legend>
-      </EuiTitle>
-      <div className="euiQuickSelectPopover__section">
-        <EuiFlexGrid
-          aria-labelledby={legendId}
-          gutterSize="s"
-          columns={2}
-          direction="column"
-          responsive={false}
-          component="ul"
-        >
-          {links}
-        </EuiFlexGrid>
-      </div>
-    </fieldset>
+    <EuiQuickSelectPanel component="fieldset" titleId={legendId} title={title}>
+      <EuiFlexGrid
+        aria-labelledby={legendId}
+        gutterSize="s"
+        columns={2}
+        direction="column"
+        responsive={false}
+        component="ul"
+      >
+        {links}
+      </EuiFlexGrid>
+    </EuiQuickSelectPanel>
   );
 };
 
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.styles.ts b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.styles.ts
index db354afdaef..9540419cb7d 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.styles.ts
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_panel.styles.ts
@@ -10,6 +10,7 @@ import { css } from '@emotion/react';
 
 import { UseEuiTheme } from '../../../../services';
 import {
+  euiFontSize,
   euiScrollBarStyles,
   logicalCSS,
   logicalCSSWithFallback,
@@ -41,6 +42,7 @@ export const euiQuickSelectPanelStyles = (euiThemeContext: UseEuiTheme) => {
       overflow: hidden;
       ${logicalCSSWithFallback('overflow-y', 'auto')}
       ${euiScrollBarStyles(euiThemeContext)}
+      ${euiFontSize(euiThemeContext, 's')}
     `,
   };
 };
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
index 3cce13b86af..b34326e509c 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.tsx
@@ -20,10 +20,9 @@ import { useEuiI18n } from '../../../i18n';
 import { EuiButtonEmpty } from '../../../button';
 import { EuiIcon } from '../../../icon';
 import { EuiPopover } from '../../../popover';
-import { EuiTitle } from '../../../title';
-import { EuiText } from '../../../text';
 
 import { euiQuickSelectPopoverStyles } from './quick_select_popover.styles';
+import { EuiQuickSelectPanel } from './quick_select_panel';
 import { EuiQuickSelect } from './quick_select';
 import { EuiCommonlyUsedTimeRanges } from './commonly_used_time_ranges';
 import { EuiRecentlyUsed } from './recently_used';
@@ -193,14 +192,9 @@ export const EuiQuickSelectPanels: FunctionComponent<
     }
     return customQuickSelectPanels.map(({ title, content }) => {
       return (
-        <div key={title} className="euiQuickSelectPopover__panel">
-          <EuiTitle size="xxxs">
-            <span>{title}</span>
-          </EuiTitle>
-          <EuiText size="s" className="euiQuickSelectPopover__section">
-            {React.cloneElement(content, { applyTime })}
-          </EuiText>
-        </div>
+        <EuiQuickSelectPanel key={title} title={title}>
+          {React.cloneElement(content, { applyTime })}
+        </EuiQuickSelectPanel>
       );
     });
   }, [customQuickSelectPanels, applyTime]);
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.tsx b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.tsx
index 1734c9582b5..afce2eb881a 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/recently_used.tsx
@@ -7,13 +7,15 @@
  */
 
 import React, { FunctionComponent } from 'react';
-import { PrettyDuration } from '../pretty_duration';
 
-import { EuiI18n } from '../../../i18n';
 import { useGeneratedHtmlId } from '../../../../services';
-import { EuiTitle } from '../../../title';
+import { useEuiI18n } from '../../../i18n';
+import { EuiFlexGroup, EuiFlexItem } from '../../../flex';
 import { EuiLink } from '../../../link';
+
 import { DurationRange, ApplyTime } from '../../types';
+import { PrettyDuration } from '../pretty_duration';
+import { EuiQuickSelectPanel } from './quick_select_panel';
 
 export interface EuiRecentlyUsedProps {
   applyTime: ApplyTime;
@@ -28,6 +30,10 @@ export const EuiRecentlyUsed: FunctionComponent<EuiRecentlyUsedProps> = ({
   dateFormat,
   recentlyUsedRanges = [],
 }) => {
+  const title = useEuiI18n(
+    'euiRecentlyUsed.legend',
+    'Recently used date ranges'
+  );
   const legendId = useGeneratedHtmlId();
 
   if (recentlyUsedRanges.length === 0) {
@@ -39,10 +45,7 @@ export const EuiRecentlyUsed: FunctionComponent<EuiRecentlyUsedProps> = ({
       applyTime({ start, end });
     };
     return (
-      <li
-        className="euiQuickSelectPopover__sectionItem euiQuickSelectPopover__sectionItem--recentlyUsed"
-        key={`${start}-${end}`}
-      >
+      <EuiFlexItem component="li" key={`${start}-${end}`}>
         <EuiLink onClick={applyRecentlyUsed}>
           <PrettyDuration
             timeFrom={start}
@@ -51,24 +54,16 @@ export const EuiRecentlyUsed: FunctionComponent<EuiRecentlyUsedProps> = ({
             dateFormat={dateFormat}
           />
         </EuiLink>
-      </li>
+      </EuiFlexItem>
     );
   });
 
   return (
-    <fieldset className="euiQuickSelectPopover__panel">
-      <EuiTitle size="xxxs">
-        <legend id={legendId} className="euiQuickSelectPopover__panelTitle">
-          <EuiI18n
-            token="euiRecentlyUsed.legend"
-            default="Recently used date ranges"
-          />
-        </legend>
-      </EuiTitle>
-      <div className="euiQuickSelectPopover__section">
-        <ul>{links}</ul>
-      </div>
-    </fieldset>
+    <EuiQuickSelectPanel component="fieldset" titleId={legendId} title={title}>
+      <EuiFlexGroup component="ul" gutterSize="s" direction="column">
+        {links}
+      </EuiFlexGroup>
+    </EuiQuickSelectPanel>
   );
 };
 

From 5ff0fd1d5044dbe273d1931357158a392aa6f2a8 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 23 Jul 2024 20:51:35 -0700
Subject: [PATCH 06/11] Convert EuiRefreshInterval to use new subcomponent +
 fix missing i18n

+ fix incorrect fieldset/legend usage - legend has to be the first child of fieldset to be usable. Plus the label isn't that helpful anyway, so let's create our own
---
 .../auto_refresh/refresh_interval.tsx         | 142 ++++++++++--------
 .../quick_select_popover.test.tsx.snap        |  17 +--
 2 files changed, 89 insertions(+), 70 deletions(-)

diff --git a/packages/eui/src/components/date_picker/auto_refresh/refresh_interval.tsx b/packages/eui/src/components/date_picker/auto_refresh/refresh_interval.tsx
index 9de28b0775e..9ace43ef5f0 100644
--- a/packages/eui/src/components/date_picker/auto_refresh/refresh_interval.tsx
+++ b/packages/eui/src/components/date_picker/auto_refresh/refresh_interval.tsx
@@ -11,15 +11,18 @@ import React, {
   ChangeEventHandler,
   KeyboardEventHandler,
 } from 'react';
+
+import { htmlIdGenerator } from '../../../services';
 import { EuiI18n } from '../../i18n';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiSelect, EuiFieldNumber, EuiFormLabel, EuiSwitch } from '../../form';
-import { htmlIdGenerator } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
+
 import {
   RenderI18nTimeOptions,
   TimeOptions,
 } from '../super_date_picker/time_options';
+import { EuiQuickSelectPanel } from '../super_date_picker/quick_select_popover/quick_select_panel';
 import {
   Milliseconds,
   RefreshUnitsOptions,
@@ -127,7 +130,6 @@ export class EuiRefreshInterval extends Component<
   };
 
   generateId = htmlIdGenerator();
-  legendId = this.generateId();
   refreshSelectionId = this.generateId();
 
   onValueChange: ChangeEventHandler<HTMLInputElement> = (event) => {
@@ -247,66 +249,84 @@ export class EuiRefreshInterval extends Component<
     const { value, units, min } = this.state;
 
     return (
-      <RenderI18nTimeOptions>
-        {({ refreshUnitsOptions }) => (
-          <fieldset className="euiQuickSelectPopover__panel">
-            <EuiFlexGroup
-              alignItems="center"
-              gutterSize="s"
-              responsive={false}
-              wrap
-            >
-              <EuiFlexItem grow={false}>
-                <EuiSwitch
-                  data-test-subj="superDatePickerToggleRefreshButton"
-                  aria-describedby={this.refreshSelectionId}
-                  checked={!isPaused}
-                  onChange={this.toggleRefresh}
-                  compressed
-                  label={
-                    <EuiFormLabel type="legend" id={this.legendId}>
-                      <EuiI18n
-                        token="euiRefreshInterval.legend"
-                        default="Refresh every"
-                      />
-                    </EuiFormLabel>
-                  }
-                />
-              </EuiFlexItem>
-              <EuiFlexItem style={{ minWidth: 60 }}>
-                <EuiFieldNumber
-                  compressed
-                  fullWidth
-                  value={value}
-                  min={min}
-                  onChange={this.onValueChange}
-                  onKeyDown={this.handleKeyDown}
-                  isInvalid={!isPaused && (value === '' || value <= 0)}
-                  disabled={isPaused}
-                  aria-label="Refresh interval value"
-                  aria-describedby={`${this.refreshSelectionId} ${this.legendId}`}
-                  data-test-subj="superDatePickerRefreshIntervalInput"
-                />
-              </EuiFlexItem>
-              <EuiFlexItem style={{ minWidth: 100 }} grow={2}>
-                <EuiSelect
-                  compressed
-                  fullWidth
-                  aria-label="Refresh interval units"
-                  aria-describedby={`${this.refreshSelectionId} ${this.legendId}`}
-                  value={units}
-                  disabled={isPaused}
-                  options={refreshUnitsOptions}
-                  onChange={this.onUnitsChange}
-                  onKeyDown={this.handleKeyDown}
-                  data-test-subj="superDatePickerRefreshIntervalUnitsSelect"
-                />
-              </EuiFlexItem>
-            </EuiFlexGroup>
-            {this.renderScreenReaderText(refreshUnitsOptions)}
-          </fieldset>
+      <EuiI18n
+        tokens={[
+          'euiRefreshInterval.toggleLabel',
+          'euiRefreshInterval.toggleAriaLabel',
+          'euiRefreshInterval.valueAriaLabel',
+          'euiRefreshInterval.unitsAriaLabel',
+        ]}
+        defaults={[
+          'Refresh every',
+          'Toggle refresh',
+          'Refresh interval value',
+          'Refresh interval units',
+        ]}
+      >
+        {([
+          toggleLabel,
+          toggleAriaLabel,
+          valueAriaLabel,
+          unitsAriaLabel,
+        ]: string[]) => (
+          <RenderI18nTimeOptions>
+            {({ refreshUnitsOptions }) => (
+              <EuiQuickSelectPanel>
+                <EuiFlexGroup
+                  alignItems="center"
+                  gutterSize="s"
+                  responsive={false}
+                  wrap
+                >
+                  <EuiFlexItem grow={false}>
+                    <EuiSwitch
+                      data-test-subj="superDatePickerToggleRefreshButton"
+                      checked={!isPaused}
+                      onChange={this.toggleRefresh}
+                      compressed
+                      // The IDs attached to this visible label are unused - we override with our own aria-label
+                      label={<EuiFormLabel>{toggleLabel}</EuiFormLabel>}
+                      aria-label={toggleAriaLabel}
+                      aria-labelledby={undefined}
+                      aria-describedby={this.refreshSelectionId}
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem style={{ minWidth: 60 }}>
+                    <EuiFieldNumber
+                      compressed
+                      fullWidth
+                      value={value}
+                      min={min}
+                      onChange={this.onValueChange}
+                      onKeyDown={this.handleKeyDown}
+                      isInvalid={!isPaused && (value === '' || value <= 0)}
+                      disabled={isPaused}
+                      aria-label={valueAriaLabel}
+                      aria-describedby={this.refreshSelectionId}
+                      data-test-subj="superDatePickerRefreshIntervalInput"
+                    />
+                  </EuiFlexItem>
+                  <EuiFlexItem style={{ minWidth: 100 }} grow={2}>
+                    <EuiSelect
+                      compressed
+                      fullWidth
+                      aria-label={unitsAriaLabel}
+                      aria-describedby={this.refreshSelectionId}
+                      value={units}
+                      disabled={isPaused}
+                      options={refreshUnitsOptions}
+                      onChange={this.onUnitsChange}
+                      onKeyDown={this.handleKeyDown}
+                      data-test-subj="superDatePickerRefreshIntervalUnitsSelect"
+                    />
+                  </EuiFlexItem>
+                </EuiFlexGroup>
+                {this.renderScreenReaderText(refreshUnitsOptions)}
+              </EuiQuickSelectPanel>
+            )}
+          </RenderI18nTimeOptions>
         )}
-      </RenderI18nTimeOptions>
+      </EuiI18n>
     );
   }
 }
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
index 8abba89a5dc..7424708c356 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
@@ -294,8 +294,8 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
       </ul>
     </div>
   </fieldset>
-  <fieldset
-    class="euiQuickSelectPopover__panel"
+  <div
+    class="emotion-euiQuickSelectPanel"
   >
     <div
       class="euiFlexGroup emotion-euiFlexGroup-wrap-s-flexStart-center-row"
@@ -309,7 +309,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
           <button
             aria-checked="false"
             aria-describedby="generated-id"
-            aria-labelledby="generated-id"
+            aria-label="Toggle refresh"
             class="euiSwitch__button"
             data-test-subj="superDatePickerToggleRefreshButton"
             id="generated-id"
@@ -331,12 +331,11 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
             class="euiSwitch__label"
             id="generated-id"
           >
-            <legend
+            <label
               class="euiFormLabel"
-              id="generated-id"
             >
               Refresh every
-            </legend>
+            </label>
           </span>
         </div>
       </div>
@@ -351,7 +350,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
             class="euiFormControlLayout__childrenWrapper"
           >
             <input
-              aria-describedby="generated-id generated-id"
+              aria-describedby="generated-id"
               aria-label="Refresh interval value"
               class="euiFieldNumber emotion-euiFieldNumber-compressed-fullWidth"
               data-test-subj="superDatePickerRefreshIntervalInput"
@@ -375,7 +374,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
             class="euiFormControlLayout__childrenWrapper"
           >
             <select
-              aria-describedby="generated-id generated-id"
+              aria-describedby="generated-id"
               aria-label="Refresh interval units"
               class="euiSelect emotion-euiSelect-compressed-fullWidth"
               data-test-subj="superDatePickerRefreshIntervalUnitsSelect"
@@ -407,7 +406,7 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
     >
       Refresh is off, interval set to 0 Seconds.
     </p>
-  </fieldset>
+  </div>
   <div
     class="emotion-euiQuickSelectPanel"
   >

From 26814bdc0d0f8ab86aad82fd8ac75329cd91b068 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 23 Jul 2024 21:04:36 -0700
Subject: [PATCH 07/11] Update quick select panel to use new subcomponent

- fixes the label looking slightly different from the other panels

+ improve fieldset/legend workaround by absolutely positioning the arrows instead

- a11y tweaks - remove extra verbose screen reader only text, but add `aria-describedby` to make up for it

+ update remaining quick select tests from Enzyme to RTL
---
 .../__snapshots__/quick_select.test.tsx.snap  | 596 ++++++++++++------
 .../quick_select_popover.test.tsx.snap        | 340 +++++-----
 .../quick_select.test.tsx                     |  16 +-
 .../quick_select_popover/quick_select.tsx     | 112 ++--
 .../quick_select_popover.test.tsx             |  51 +-
 5 files changed, 629 insertions(+), 486 deletions(-)

diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.tsx.snap
index c7327d56c9b..add990fea69 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select.test.tsx.snap
@@ -2,250 +2,434 @@
 
 exports[`EuiQuickSelect is rendered 1`] = `
 <fieldset
-  className="euiQuickSelectPopover__panel"
+  aria-describedby="generated-id"
+  class="emotion-euiQuickSelectPanel-render"
 >
-  <EuiI18n
-    default="Quick select a time range"
-    token="euiQuickSelect.legendText"
+  <legend
+    class="euiTitle emotion-euiQuickSelectPanel__title-euiTitle-xxxs"
+    id="generated-id"
   >
-    <Component />
-  </EuiI18n>
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="s"
-    justifyContent="spaceBetween"
-    responsive={false}
+    Quick select
+  </legend>
+  <div
+    class="emotion-euiQuickSelectPanel__section"
   >
-    <EuiFlexItem
-      grow={false}
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row-render"
     >
-      <EuiI18n
-        default="Quick select"
-        token="euiQuickSelect.quickSelectTitle"
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
       >
-        <Component />
-      </EuiI18n>
-    </EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-    >
-      <EuiFlexGroup
-        alignItems="center"
-        gutterSize="s"
-        responsive={false}
-      >
-        <EuiFlexItem
-          grow={false}
+        <span
+          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
-          <EuiI18n
-            default="Previous time window"
-            token="euiQuickSelect.previousLabel"
+          <button
+            aria-label="Previous time window"
+            class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
+            type="button"
           >
-            <Component />
-          </EuiI18n>
-        </EuiFlexItem>
-        <EuiFlexItem
-          grow={false}
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="arrowLeft"
+            />
+          </button>
+        </span>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <span
+          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
-          <EuiI18n
-            default="Next time window"
-            token="euiQuickSelect.nextLabel"
+          <button
+            aria-label="Next time window"
+            class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
+            type="button"
           >
-            <Component />
-          </EuiI18n>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-  <EuiSpacer
-    size="s"
-  />
-  <EuiFlexGroup
-    gutterSize="s"
-    responsive={false}
-  >
-    <EuiFlexItem>
-      <EuiI18n
-        default="Time tense"
-        token="euiQuickSelect.tenseLabel"
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="arrowRight"
+            />
+          </button>
+        </span>
+      </div>
+    </div>
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
+    >
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
-        <Component />
-      </EuiI18n>
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiI18n
-        default="Time value"
-        token="euiQuickSelect.valueLabel"
+        <div
+          class="euiFormControlLayout euiFormControlLayout--compressed"
+        >
+          <div
+            class="euiFormControlLayout__childrenWrapper"
+            style="--euiFormControlRightIconsCount: 1;"
+          >
+            <select
+              aria-describedby="generated-id generated-id"
+              aria-label="Time tense"
+              class="euiSelect emotion-euiSelect-compressed"
+            >
+              <option
+                value="last"
+              >
+                Last
+              </option>
+              <option
+                value="next"
+              >
+                Next
+              </option>
+            </select>
+            <div
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+            >
+              <span
+                class="euiFormControlLayoutCustomIcon"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiFormControlLayoutCustomIcon__icon"
+                  data-euiicon-type="arrowDown"
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
-        <Component />
-      </EuiI18n>
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiI18n
-        default="Time unit"
-        token="euiQuickSelect.unitLabel"
+        <div
+          class="euiFormControlLayout euiFormControlLayout--compressed"
+        >
+          <div
+            class="euiFormControlLayout__childrenWrapper"
+          >
+            <input
+              aria-describedby="generated-id generated-id"
+              aria-label="Time value"
+              class="euiFieldNumber emotion-euiFieldNumber-compressed"
+              step="any"
+              type="number"
+              value="15"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
-        <Component />
-      </EuiI18n>
-    </EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-    >
-      <EuiButton
-        aria-describedby="generated-id generated-id"
-        className="euiQuickSelect__applyButton"
-        disabled={false}
-        onClick={[Function]}
-        size="s"
+        <div
+          class="euiFormControlLayout euiFormControlLayout--compressed"
+        >
+          <div
+            class="euiFormControlLayout__childrenWrapper"
+            style="--euiFormControlRightIconsCount: 1;"
+          >
+            <select
+              aria-describedby="generated-id generated-id"
+              aria-label="Time unit"
+              class="euiSelect emotion-euiSelect-compressed"
+            >
+              <option
+                value="s"
+              >
+                Seconds
+              </option>
+              <option
+                value="m"
+              >
+                Minutes
+              </option>
+              <option
+                value="h"
+              >
+                Hours
+              </option>
+              <option
+                value="d"
+              >
+                Days
+              </option>
+              <option
+                value="w"
+              >
+                Weeks
+              </option>
+              <option
+                value="M"
+              >
+                Months
+              </option>
+              <option
+                value="y"
+              >
+                Years
+              </option>
+            </select>
+            <div
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+            >
+              <span
+                class="euiFormControlLayoutCustomIcon"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiFormControlLayoutCustomIcon__icon"
+                  data-euiicon-type="arrowDown"
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
       >
-        <EuiI18n
-          default="Apply"
-          token="euiQuickSelect.applyButton"
-        />
-      </EuiButton>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-  <EuiScreenReaderOnly>
+        <button
+          aria-describedby="generated-id generated-id"
+          class="euiButton emotion-euiButtonDisplay-s-base-primary"
+          data-test-subj="superDatePickerQuickSelectApplyButton"
+          type="button"
+        >
+          <span
+            class="emotion-euiButtonDisplayContent"
+          >
+            Apply
+          </span>
+        </button>
+      </div>
+    </div>
     <p
+      class="emotion-euiScreenReaderOnly"
       id="generated-id"
     >
-      <EuiI18n
-        default="Currently set to {timeTense} {timeValue} {timeUnit}."
-        token="euiQuickSelect.fullDescription"
-        values={
-          {
-            "timeTense": "last",
-            "timeUnit": "Minutes",
-            "timeValue": 15,
-          }
-        }
-      />
+      Currently set to last 15 Minutes.
     </p>
-  </EuiScreenReaderOnly>
+  </div>
 </fieldset>
 `;
 
 exports[`EuiQuickSelect prevQuickSelect 1`] = `
 <fieldset
-  className="euiQuickSelectPopover__panel"
+  aria-describedby="generated-id"
+  class="emotion-euiQuickSelectPanel-render"
 >
-  <EuiI18n
-    default="Quick select a time range"
-    token="euiQuickSelect.legendText"
+  <legend
+    class="euiTitle emotion-euiQuickSelectPanel__title-euiTitle-xxxs"
+    id="generated-id"
   >
-    <Component />
-  </EuiI18n>
-  <EuiFlexGroup
-    alignItems="center"
-    gutterSize="s"
-    justifyContent="spaceBetween"
-    responsive={false}
+    Quick select
+  </legend>
+  <div
+    class="emotion-euiQuickSelectPanel__section"
   >
-    <EuiFlexItem
-      grow={false}
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row-render"
     >
-      <EuiI18n
-        default="Quick select"
-        token="euiQuickSelect.quickSelectTitle"
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
       >
-        <Component />
-      </EuiI18n>
-    </EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-    >
-      <EuiFlexGroup
-        alignItems="center"
-        gutterSize="s"
-        responsive={false}
-      >
-        <EuiFlexItem
-          grow={false}
+        <span
+          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
-          <EuiI18n
-            default="Previous time window"
-            token="euiQuickSelect.previousLabel"
+          <button
+            aria-label="Previous time window"
+            class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
+            type="button"
           >
-            <Component />
-          </EuiI18n>
-        </EuiFlexItem>
-        <EuiFlexItem
-          grow={false}
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="arrowLeft"
+            />
+          </button>
+        </span>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
+      >
+        <span
+          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
         >
-          <EuiI18n
-            default="Next time window"
-            token="euiQuickSelect.nextLabel"
+          <button
+            aria-label="Next time window"
+            class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
+            type="button"
           >
-            <Component />
-          </EuiI18n>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-  <EuiSpacer
-    size="s"
-  />
-  <EuiFlexGroup
-    gutterSize="s"
-    responsive={false}
-  >
-    <EuiFlexItem>
-      <EuiI18n
-        default="Time tense"
-        token="euiQuickSelect.tenseLabel"
+            <span
+              aria-hidden="true"
+              class="euiButtonIcon__icon"
+              color="inherit"
+              data-euiicon-type="arrowRight"
+            />
+          </button>
+        </span>
+      </div>
+    </div>
+    <div
+      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
+    >
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
-        <Component />
-      </EuiI18n>
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiI18n
-        default="Time value"
-        token="euiQuickSelect.valueLabel"
+        <div
+          class="euiFormControlLayout euiFormControlLayout--compressed"
+        >
+          <div
+            class="euiFormControlLayout__childrenWrapper"
+            style="--euiFormControlRightIconsCount: 1;"
+          >
+            <select
+              aria-describedby="generated-id generated-id"
+              aria-label="Time tense"
+              class="euiSelect emotion-euiSelect-compressed"
+            >
+              <option
+                value="last"
+              >
+                Last
+              </option>
+              <option
+                value="next"
+              >
+                Next
+              </option>
+            </select>
+            <div
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+            >
+              <span
+                class="euiFormControlLayoutCustomIcon"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiFormControlLayoutCustomIcon__icon"
+                  data-euiicon-type="arrowDown"
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
-        <Component />
-      </EuiI18n>
-    </EuiFlexItem>
-    <EuiFlexItem>
-      <EuiI18n
-        default="Time unit"
-        token="euiQuickSelect.unitLabel"
+        <div
+          class="euiFormControlLayout euiFormControlLayout--compressed"
+        >
+          <div
+            class="euiFormControlLayout__childrenWrapper"
+          >
+            <input
+              aria-describedby="generated-id generated-id"
+              aria-label="Time value"
+              class="euiFieldNumber emotion-euiFieldNumber-compressed"
+              step="any"
+              type="number"
+              value="32"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-grow-1"
       >
-        <Component />
-      </EuiI18n>
-    </EuiFlexItem>
-    <EuiFlexItem
-      grow={false}
-    >
-      <EuiButton
-        aria-describedby="generated-id generated-id"
-        className="euiQuickSelect__applyButton"
-        disabled={false}
-        onClick={[Function]}
-        size="s"
+        <div
+          class="euiFormControlLayout euiFormControlLayout--compressed"
+        >
+          <div
+            class="euiFormControlLayout__childrenWrapper"
+            style="--euiFormControlRightIconsCount: 1;"
+          >
+            <select
+              aria-describedby="generated-id generated-id"
+              aria-label="Time unit"
+              class="euiSelect emotion-euiSelect-compressed"
+            >
+              <option
+                value="s"
+              >
+                Seconds
+              </option>
+              <option
+                value="m"
+              >
+                Minutes
+              </option>
+              <option
+                value="h"
+              >
+                Hours
+              </option>
+              <option
+                value="d"
+              >
+                Days
+              </option>
+              <option
+                value="w"
+              >
+                Weeks
+              </option>
+              <option
+                value="M"
+              >
+                Months
+              </option>
+              <option
+                value="y"
+              >
+                Years
+              </option>
+            </select>
+            <div
+              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+            >
+              <span
+                class="euiFormControlLayoutCustomIcon"
+              >
+                <span
+                  aria-hidden="true"
+                  class="euiFormControlLayoutCustomIcon__icon"
+                  data-euiicon-type="arrowDown"
+                />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiFlexItem emotion-euiFlexItem-growZero"
       >
-        <EuiI18n
-          default="Apply"
-          token="euiQuickSelect.applyButton"
-        />
-      </EuiButton>
-    </EuiFlexItem>
-  </EuiFlexGroup>
-  <EuiScreenReaderOnly>
+        <button
+          aria-describedby="generated-id generated-id"
+          class="euiButton emotion-euiButtonDisplay-s-base-primary"
+          data-test-subj="superDatePickerQuickSelectApplyButton"
+          type="button"
+        >
+          <span
+            class="emotion-euiButtonDisplayContent"
+          >
+            Apply
+          </span>
+        </button>
+      </div>
+    </div>
     <p
+      class="emotion-euiScreenReaderOnly"
       id="generated-id"
     >
-      <EuiI18n
-        default="Currently set to {timeTense} {timeValue} {timeUnit}."
-        token="euiQuickSelect.fullDescription"
-        values={
-          {
-            "timeTense": "Next",
-            "timeUnit": "Months",
-            "timeValue": 32,
-          }
-        }
-      />
+      Currently set to Next 32 Months.
     </p>
-  </EuiScreenReaderOnly>
+  </div>
 </fieldset>
 `;
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
index 7424708c356..3a24fd3038c 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/__snapshots__/quick_select_popover.test.tsx.snap
@@ -6,234 +6,218 @@ exports[`EuiQuickSelectPanels customQuickSelectPanels should render custom panel
   data-test-subj="superDatePickerQuickMenu"
 >
   <fieldset
-    class="euiQuickSelectPopover__panel"
+    aria-describedby="generated-id"
+    class="emotion-euiQuickSelectPanel-render"
   >
     <legend
-      class="euiFormLabel emotion-euiScreenReaderOnly"
+      class="euiTitle emotion-euiQuickSelectPanel__title-euiTitle-xxxs"
       id="generated-id"
     >
-      Quick select a time range
+      Quick select
     </legend>
     <div
-      class="euiFlexGroup emotion-euiFlexGroup-s-spaceBetween-center-row"
+      class="emotion-euiQuickSelectPanel__section"
     >
       <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
+        class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row-render"
       >
         <div
-          aria-hidden="true"
-          class="euiFormLabel"
+          class="euiFlexItem emotion-euiFlexItem-growZero"
         >
-          Quick select
+          <span
+            class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+          >
+            <button
+              aria-label="Previous time window"
+              class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
+              type="button"
+            >
+              <span
+                aria-hidden="true"
+                class="euiButtonIcon__icon"
+                color="inherit"
+                data-euiicon-type="arrowLeft"
+              />
+            </button>
+          </span>
         </div>
-      </div>
-      <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
-      >
         <div
-          class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+          class="euiFlexItem emotion-euiFlexItem-growZero"
         >
-          <div
-            class="euiFlexItem emotion-euiFlexItem-growZero"
-          >
-            <span
-              class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-            >
-              <button
-                aria-label="Previous time window"
-                class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="arrowLeft"
-                />
-              </button>
-            </span>
-          </div>
-          <div
-            class="euiFlexItem emotion-euiFlexItem-growZero"
+          <span
+            class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
           >
-            <span
-              class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
+            <button
+              aria-label="Next time window"
+              class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
+              type="button"
             >
-              <button
-                aria-label="Next time window"
-                class="euiButtonIcon emotion-euiButtonIcon-xs-empty-primary"
-                type="button"
-              >
-                <span
-                  aria-hidden="true"
-                  class="euiButtonIcon__icon"
-                  color="inherit"
-                  data-euiicon-type="arrowRight"
-                />
-              </button>
-            </span>
-          </div>
+              <span
+                aria-hidden="true"
+                class="euiButtonIcon__icon"
+                color="inherit"
+                data-euiicon-type="arrowRight"
+              />
+            </button>
+          </span>
         </div>
       </div>
-    </div>
-    <div
-      class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
-    />
-    <div
-      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
-    >
       <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
+        class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
       >
         <div
-          class="euiFormControlLayout euiFormControlLayout--compressed"
+          class="euiFlexItem emotion-euiFlexItem-grow-1"
         >
           <div
-            class="euiFormControlLayout__childrenWrapper"
-            style="--euiFormControlRightIconsCount: 1;"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
-            <select
-              aria-describedby="generated-id generated-id"
-              aria-label="Time tense"
-              class="euiSelect emotion-euiSelect-compressed"
-            >
-              <option
-                value="last"
-              >
-                Last
-              </option>
-              <option
-                value="next"
-              >
-                Next
-              </option>
-            </select>
             <div
-              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+              class="euiFormControlLayout__childrenWrapper"
+              style="--euiFormControlRightIconsCount: 1;"
             >
-              <span
-                class="euiFormControlLayoutCustomIcon"
+              <select
+                aria-describedby="generated-id generated-id"
+                aria-label="Time tense"
+                class="euiSelect emotion-euiSelect-compressed"
+              >
+                <option
+                  value="last"
+                >
+                  Last
+                </option>
+                <option
+                  value="next"
+                >
+                  Next
+                </option>
+              </select>
+              <div
+                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
               >
                 <span
-                  aria-hidden="true"
-                  class="euiFormControlLayoutCustomIcon__icon"
-                  data-euiicon-type="arrowDown"
-                />
-              </span>
+                  class="euiFormControlLayoutCustomIcon"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="euiFormControlLayoutCustomIcon__icon"
+                    data-euiicon-type="arrowDown"
+                  />
+                </span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
-      >
         <div
-          class="euiFormControlLayout euiFormControlLayout--compressed"
+          class="euiFlexItem emotion-euiFlexItem-grow-1"
         >
           <div
-            class="euiFormControlLayout__childrenWrapper"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
-            <input
-              aria-describedby="generated-id generated-id"
-              aria-label="Time value"
-              class="euiFieldNumber emotion-euiFieldNumber-compressed"
-              step="any"
-              type="number"
-              value="15"
-            />
+            <div
+              class="euiFormControlLayout__childrenWrapper"
+            >
+              <input
+                aria-describedby="generated-id generated-id"
+                aria-label="Time value"
+                class="euiFieldNumber emotion-euiFieldNumber-compressed"
+                step="any"
+                type="number"
+                value="15"
+              />
+            </div>
           </div>
         </div>
-      </div>
-      <div
-        class="euiFlexItem emotion-euiFlexItem-grow-1"
-      >
         <div
-          class="euiFormControlLayout euiFormControlLayout--compressed"
+          class="euiFlexItem emotion-euiFlexItem-grow-1"
         >
           <div
-            class="euiFormControlLayout__childrenWrapper"
-            style="--euiFormControlRightIconsCount: 1;"
+            class="euiFormControlLayout euiFormControlLayout--compressed"
           >
-            <select
-              aria-describedby="generated-id generated-id"
-              aria-label="Time unit"
-              class="euiSelect emotion-euiSelect-compressed"
-            >
-              <option
-                value="s"
-              >
-                Seconds
-              </option>
-              <option
-                value="m"
-              >
-                Minutes
-              </option>
-              <option
-                value="h"
-              >
-                Hours
-              </option>
-              <option
-                value="d"
-              >
-                Days
-              </option>
-              <option
-                value="w"
-              >
-                Weeks
-              </option>
-              <option
-                value="M"
-              >
-                Months
-              </option>
-              <option
-                value="y"
-              >
-                Years
-              </option>
-            </select>
             <div
-              class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+              class="euiFormControlLayout__childrenWrapper"
+              style="--euiFormControlRightIconsCount: 1;"
             >
-              <span
-                class="euiFormControlLayoutCustomIcon"
+              <select
+                aria-describedby="generated-id generated-id"
+                aria-label="Time unit"
+                class="euiSelect emotion-euiSelect-compressed"
+              >
+                <option
+                  value="s"
+                >
+                  Seconds
+                </option>
+                <option
+                  value="m"
+                >
+                  Minutes
+                </option>
+                <option
+                  value="h"
+                >
+                  Hours
+                </option>
+                <option
+                  value="d"
+                >
+                  Days
+                </option>
+                <option
+                  value="w"
+                >
+                  Weeks
+                </option>
+                <option
+                  value="M"
+                >
+                  Months
+                </option>
+                <option
+                  value="y"
+                >
+                  Years
+                </option>
+              </select>
+              <div
+                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
               >
                 <span
-                  aria-hidden="true"
-                  class="euiFormControlLayoutCustomIcon__icon"
-                  data-euiicon-type="arrowDown"
-                />
-              </span>
+                  class="euiFormControlLayoutCustomIcon"
+                >
+                  <span
+                    aria-hidden="true"
+                    class="euiFormControlLayoutCustomIcon__icon"
+                    data-euiicon-type="arrowDown"
+                  />
+                </span>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-      <div
-        class="euiFlexItem emotion-euiFlexItem-growZero"
-      >
-        <button
-          aria-describedby="generated-id generated-id"
-          class="euiButton emotion-euiButtonDisplay-s-base-primary"
-          data-test-subj="superDatePickerQuickSelectApplyButton"
-          type="button"
+        <div
+          class="euiFlexItem emotion-euiFlexItem-growZero"
         >
-          <span
-            class="emotion-euiButtonDisplayContent"
+          <button
+            aria-describedby="generated-id generated-id"
+            class="euiButton emotion-euiButtonDisplay-s-base-primary"
+            data-test-subj="superDatePickerQuickSelectApplyButton"
+            type="button"
           >
-            Apply
-          </span>
-        </button>
+            <span
+              class="emotion-euiButtonDisplayContent"
+            >
+              Apply
+            </span>
+          </button>
+        </div>
       </div>
+      <p
+        class="emotion-euiScreenReaderOnly"
+        id="generated-id"
+      >
+        Currently set to last 15 Minutes.
+      </p>
     </div>
-    <p
-      class="emotion-euiScreenReaderOnly"
-      id="generated-id"
-    >
-      Currently set to last 15 Minutes.
-    </p>
   </fieldset>
   <fieldset
     class="emotion-euiQuickSelectPanel"
@@ -436,13 +420,13 @@ exports[`EuiQuickSelectPopover is rendered 1`] = `
 >
   <button
     aria-label="Date quick select"
-    class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary"
+    class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-euiQuickSelectPopoverButton"
     data-test-subj="superDatePickerToggleQuickMenuButton"
     title="Date quick select"
     type="button"
   >
     <span
-      class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton"
+      class="euiButtonEmpty__content emotion-euiButtonDisplayContent-euiQuickSelectPopoverButton__content"
     >
       <span
         class="eui-textTruncate euiButtonEmpty__text"
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.test.tsx b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.test.tsx
index 7299ea14330..d8c23146bda 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.test.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.test.tsx
@@ -7,10 +7,10 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
+import { render } from '../../../../test/rtl';
+import { RenderI18nTimeOptions } from '../time_options';
 
 import { EuiQuickSelect } from './quick_select';
-import { RenderI18nTimeOptions } from '../time_options';
 
 const noop = () => {};
 const defaultProps = {
@@ -21,19 +21,19 @@ const defaultProps = {
 
 describe('EuiQuickSelect', () => {
   test('is rendered', () => {
-    const component = shallow(
+    const { container } = render(
       <RenderI18nTimeOptions>
         {(timeOptions) => (
           <EuiQuickSelect {...defaultProps} timeOptions={timeOptions} />
         )}
       </RenderI18nTimeOptions>
-    ).dive();
+    );
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   test('prevQuickSelect', () => {
-    const component = shallow(
+    const { container } = render(
       <RenderI18nTimeOptions>
         {(timeOptions) => (
           <EuiQuickSelect
@@ -47,8 +47,8 @@ describe('EuiQuickSelect', () => {
           />
         )}
       </RenderI18nTimeOptions>
-    ).dive();
+    );
 
-    expect(component).toMatchSnapshot();
+    expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.tsx b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.tsx
index 0ae81955773..722bd063e66 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select.tsx
@@ -13,17 +13,19 @@ import React, {
 } from 'react';
 import moment from 'moment';
 import dateMath from '@elastic/datemath';
+
 import { htmlIdGenerator } from '../../../../services';
+import { EuiI18n } from '../../../i18n';
+import { EuiScreenReaderOnly } from '../../../accessibility';
 import { EuiButton, EuiButtonIcon } from '../../../button';
 import { EuiFlexGroup, EuiFlexItem } from '../../../flex';
-import { EuiSpacer } from '../../../spacer';
 import { EuiSelect, EuiFieldNumber } from '../../../form';
 import { EuiToolTip } from '../../../tool_tip';
-import { EuiI18n } from '../../../i18n';
-import { EuiScreenReaderOnly } from '../../../accessibility';
+
 import { ApplyTime, QuickSelect, TimeUnitId } from '../../types';
 import { TimeOptions, NEXT } from '../time_options';
 import { parseTimeParts } from './quick_select_utils';
+import { EuiQuickSelectPanel } from './quick_select_panel';
 
 type EuiQuickSelectState = QuickSelect;
 
@@ -158,77 +160,63 @@ export class EuiQuickSelect extends Component<
     const timeUnit = matchedTimeUnit ? matchedTimeUnit.text : '';
 
     return (
-      <fieldset className="euiQuickSelectPopover__panel">
-        <EuiI18n
-          token="euiQuickSelect.legendText"
-          default="Quick select a time range"
-        >
-          {(legendText: string) => (
-            // Legend needs to be the first thing in a fieldset, but we want the visible title within the flex.
-            // So we hide it, but allow screen readers to see it
-            <EuiScreenReaderOnly>
-              <legend id={this.legendId} className="euiFormLabel">
-                {legendText}
-              </legend>
-            </EuiScreenReaderOnly>
-          )}
-        </EuiI18n>
+      <EuiQuickSelectPanel
+        component="fieldset"
+        title={
+          <EuiI18n
+            token="euiQuickSelect.quickSelectTitle"
+            default="Quick select"
+          />
+        }
+        titleId={this.legendId}
+        aria-describedby={this.timeSelectionId}
+        css={{ '> div': { position: 'relative', overflow: 'visible' } }}
+      >
+        {/* Absolutely position the prev/next arrows in the top right hand corner */}
         <EuiFlexGroup
-          responsive={false}
+          css={{
+            position: 'absolute',
+            right: '0',
+            bottom: '100%',
+            transform: 'translateY(-33%)',
+          }}
           alignItems="center"
-          justifyContent="spaceBetween"
           gutterSize="s"
+          responsive={false}
         >
           <EuiFlexItem grow={false}>
             <EuiI18n
-              token="euiQuickSelect.quickSelectTitle"
-              default="Quick select"
+              token="euiQuickSelect.previousLabel"
+              default="Previous time window"
             >
-              {(quickSelectTitle: string) => (
-                <div aria-hidden className="euiFormLabel">
-                  {quickSelectTitle}
-                </div>
+              {(previousLabel: string) => (
+                <EuiToolTip content={previousLabel}>
+                  <EuiButtonIcon
+                    aria-label={previousLabel}
+                    iconType="arrowLeft"
+                    onClick={this.stepBackward}
+                  />
+                </EuiToolTip>
               )}
             </EuiI18n>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiFlexGroup alignItems="center" gutterSize="s" responsive={false}>
-              <EuiFlexItem grow={false}>
-                <EuiI18n
-                  token="euiQuickSelect.previousLabel"
-                  default="Previous time window"
-                >
-                  {(previousLabel: string) => (
-                    <EuiToolTip content={previousLabel}>
-                      <EuiButtonIcon
-                        aria-label={previousLabel}
-                        iconType="arrowLeft"
-                        onClick={this.stepBackward}
-                      />
-                    </EuiToolTip>
-                  )}
-                </EuiI18n>
-              </EuiFlexItem>
-              <EuiFlexItem grow={false}>
-                <EuiI18n
-                  token="euiQuickSelect.nextLabel"
-                  default="Next time window"
-                >
-                  {(nextLabel: string) => (
-                    <EuiToolTip content={nextLabel}>
-                      <EuiButtonIcon
-                        aria-label={nextLabel}
-                        iconType="arrowRight"
-                        onClick={this.stepForward}
-                      />
-                    </EuiToolTip>
-                  )}
-                </EuiI18n>
-              </EuiFlexItem>
-            </EuiFlexGroup>
+            <EuiI18n
+              token="euiQuickSelect.nextLabel"
+              default="Next time window"
+            >
+              {(nextLabel: string) => (
+                <EuiToolTip content={nextLabel}>
+                  <EuiButtonIcon
+                    aria-label={nextLabel}
+                    iconType="arrowRight"
+                    onClick={this.stepForward}
+                  />
+                </EuiToolTip>
+              )}
+            </EuiI18n>
           </EuiFlexItem>
         </EuiFlexGroup>
-        <EuiSpacer size="s" />
         <EuiFlexGroup gutterSize="s" responsive={false}>
           <EuiFlexItem>
             <EuiI18n token="euiQuickSelect.tenseLabel" default="Time tense">
@@ -300,7 +288,7 @@ export class EuiQuickSelect extends Component<
             />
           </p>
         </EuiScreenReaderOnly>
-      </fieldset>
+      </EuiQuickSelectPanel>
     );
   }
 }
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx
index c2da25261b6..1b1203a263e 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.test.tsx
@@ -7,9 +7,9 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
 import { render } from '../../../../test/rtl';
 
+import { EuiLink } from '../../../link';
 import { RenderI18nTimeOptions } from '../time_options';
 import {
   EuiQuickSelectPopover,
@@ -17,13 +17,6 @@ import {
   EuiQuickSelectPanels,
 } from './quick_select_popover';
 
-import { EuiLink } from '../../../link';
-
-import { EuiQuickSelect } from './quick_select';
-import { EuiCommonlyUsedTimeRanges } from './commonly_used_time_ranges';
-import { EuiRecentlyUsed } from './recently_used';
-import { EuiRefreshInterval } from '../../auto_refresh/refresh_interval';
-
 const noop = () => {};
 
 const defaultProps: Omit<EuiQuickSelectPopoverProps, 'timeOptions'> = {
@@ -87,7 +80,7 @@ describe('EuiQuickSelectPanels', () => {
 
   describe('customQuickSelectRender', () => {
     it('should render Quick Select sections in default order when customQuickSelectRender is not present', () => {
-      const component = shallow(
+      const { getByTestSubject } = render(
         <RenderI18nTimeOptions>
           {(timeOptions) => (
             <EuiQuickSelectPanels
@@ -97,22 +90,19 @@ describe('EuiQuickSelectPanels', () => {
             />
           )}
         </RenderI18nTimeOptions>
-      ).dive();
-
-      const menu = component.find(
-        '[data-test-subj="superDatePickerQuickMenu"]'
       );
-
-      expect(menu.children()).toHaveLength(5);
-      expect(menu.children().at(0).is(EuiQuickSelect)).toBeTruthy();
-      expect(menu.children().at(1).is(EuiCommonlyUsedTimeRanges)).toBeTruthy();
-      expect(menu.children().at(2).is(EuiRecentlyUsed)).toBeTruthy();
-      expect(menu.children().at(3).is(EuiRefreshInterval)).toBeTruthy();
-      expect(menu.children().at(4).is('div')).toBeTruthy();
+      const menu = getByTestSubject('superDatePickerQuickMenu');
+
+      expect(menu.childElementCount).toEqual(5);
+      expect(menu.children[0].textContent).toContain('Quick select');
+      expect(menu.children[1].textContent).toContain('Commonly used');
+      expect(menu.children[2].textContent).toContain('Recently used');
+      expect(menu.children[3].textContent).toContain('Refresh every');
+      expect(menu.children[4].textContent).toContain('My custom panel');
     });
 
     it('should render Quick Select sections in a custom order customQuickSelectRender is present', () => {
-      const component = shallow(
+      const { getByTestSubject } = render(
         <RenderI18nTimeOptions>
           {(timeOptions) => (
             <EuiQuickSelectPanels
@@ -137,18 +127,15 @@ describe('EuiQuickSelectPanels', () => {
             />
           )}
         </RenderI18nTimeOptions>
-      ).dive();
-
-      const menu = component.find(
-        '[data-test-subj="superDatePickerQuickMenu"]'
       );
-
-      expect(menu.children()).toHaveLength(5);
-      expect(menu.children().at(0).is('div')).toBeTruthy();
-      expect(menu.children().at(1).is(EuiRefreshInterval)).toBeTruthy();
-      expect(menu.children().at(2).is(EuiQuickSelect)).toBeTruthy();
-      expect(menu.children().at(3).is(EuiCommonlyUsedTimeRanges)).toBeTruthy();
-      expect(menu.children().at(4).is(EuiRecentlyUsed)).toBeTruthy();
+      const menu = getByTestSubject('superDatePickerQuickMenu');
+
+      expect(menu.childElementCount).toEqual(5);
+      expect(menu.children[0].textContent).toContain('My custom panel');
+      expect(menu.children[1].textContent).toContain('Refresh every');
+      expect(menu.children[2].textContent).toContain('Quick select');
+      expect(menu.children[3].textContent).toContain('Commonly used');
+      expect(menu.children[4].textContent).toContain('Recently used');
     });
   });
 });

From 5c6a55ec35f0fd385d2810f6b34868f7626b51de Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 23 Jul 2024 21:11:05 -0700
Subject: [PATCH 08/11] Delete Sass files

---
 packages/eui/src/components/date_picker/_index.scss            | 1 -
 .../src/components/date_picker/super_date_picker/_index.scss   | 1 -
 .../super_date_picker/quick_select_popover/_index.scss         | 3 ---
 .../super_date_picker/quick_select_popover/_quick_select.scss  | 0
 .../quick_select_popover/_quick_select_popover.scss            | 0
 .../quick_select_popover/_refresh_interval.scss                | 0
 6 files changed, 5 deletions(-)
 delete mode 100644 packages/eui/src/components/date_picker/super_date_picker/_index.scss
 delete mode 100644 packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_index.scss
 delete mode 100644 packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select.scss
 delete mode 100644 packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
 delete mode 100644 packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_refresh_interval.scss

diff --git a/packages/eui/src/components/date_picker/_index.scss b/packages/eui/src/components/date_picker/_index.scss
index 08789b2448c..8054cc5308d 100644
--- a/packages/eui/src/components/date_picker/_index.scss
+++ b/packages/eui/src/components/date_picker/_index.scss
@@ -1,3 +1,2 @@
 // The react-date-picker overrides exists in the global_styling folder
 // to easily style differently between default and Amsterdam theme
-@import 'super_date_picker/index';
diff --git a/packages/eui/src/components/date_picker/super_date_picker/_index.scss b/packages/eui/src/components/date_picker/super_date_picker/_index.scss
deleted file mode 100644
index 06a7ba3c66d..00000000000
--- a/packages/eui/src/components/date_picker/super_date_picker/_index.scss
+++ /dev/null
@@ -1 +0,0 @@
-@import 'quick_select_popover/index';
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_index.scss b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_index.scss
deleted file mode 100644
index 4fc081c561d..00000000000
--- a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import 'quick_select_popover';
-@import 'quick_select';
-@import 'refresh_interval';
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select.scss b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select.scss
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_quick_select_popover.scss
deleted file mode 100644
index e69de29bb2d..00000000000
diff --git a/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_refresh_interval.scss b/packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/_refresh_interval.scss
deleted file mode 100644
index e69de29bb2d..00000000000

From 4f8dab2c39b7a2b4656a0c8fb85358755c9b98c5 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 23 Jul 2024 21:27:51 -0700
Subject: [PATCH 09/11] Update visual regression tests

---
 ...op_Forms_EuiRefreshInterval_Playground.png | Bin 4410 -> 4441 bytes
 ...erDatePicker_Custom_Quick_Select_Panel.png | Bin 4324 -> 4323 bytes
 ...tePicker_EuiSuperDatePicker_Playground.png | Bin 4324 -> 4323 bytes
 ...le_Forms_EuiRefreshInterval_Playground.png | Bin 9280 -> 9211 bytes
 ...erDatePicker_Custom_Quick_Select_Panel.png | Bin 7277 -> 7290 bytes
 ...tePicker_EuiSuperDatePicker_Playground.png | Bin 7277 -> 7290 bytes
 6 files changed, 0 insertions(+), 0 deletions(-)

diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRefreshInterval_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiRefreshInterval_Playground.png
index 90b57c8c02169d1b27b19db83de3cd2a5df42264..b89d7fae2275cb68b14336ead69544f091e20768 100644
GIT binary patch
literal 4441
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

literal 4410
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

diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png
index 94a83b4771ce9943ada8e3d515adc5bb040d7a77..0ed7e06c6d58cc9c1533972cb8cd821a76ad724e 100644
GIT binary patch
delta 4298
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

delta 4299
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
SM+q6S^YK_qU$aIX{OW(vB%Xc%

diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png
index 94a83b4771ce9943ada8e3d515adc5bb040d7a77..0ed7e06c6d58cc9c1533972cb8cd821a76ad724e 100644
GIT binary patch
delta 4298
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

delta 4299
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
SM+q6S^YK_qU$aIX{OW(vB%Xc%

diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRefreshInterval_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiRefreshInterval_Playground.png
index 6f44f42f1ad57fd9517534682e0ed2ff561d69c3..4eff6fb0bb5af65d4d39e2608dccb2fc7a11e733 100644
GIT binary patch
literal 9211
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
BEAjvU

literal 9280
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
EFBVcxhX4Qo

diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Custom_Quick_Select_Panel.png
index 05460196756dd1ec1b1486fbe9fec9b806e4d8db..fa3393a4c6422e50a8ed969ade61f388477271a5 100644
GIT binary patch
literal 7290
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

literal 7277
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

diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Playground.png
index 05460196756dd1ec1b1486fbe9fec9b806e4d8db..fa3393a4c6422e50a8ed969ade61f388477271a5 100644
GIT binary patch
literal 7290
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

literal 7277
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


From 23661a18cb7773a3519883f547a459bf14677fac Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 23 Jul 2024 21:30:28 -0700
Subject: [PATCH 10/11] changelog

---
 packages/eui/changelogs/upcoming/7909.md | 3 +++
 1 file changed, 3 insertions(+)
 create mode 100644 packages/eui/changelogs/upcoming/7909.md

diff --git a/packages/eui/changelogs/upcoming/7909.md b/packages/eui/changelogs/upcoming/7909.md
new file mode 100644
index 00000000000..4856688794e
--- /dev/null
+++ b/packages/eui/changelogs/upcoming/7909.md
@@ -0,0 +1,3 @@
+**CSS-in-JS conversions**
+
+- Converted `EuiSuperDatePicker`'s quick select to Emotion

From 25bf162cd50c481b50dc6406f575fe68726c44a2 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 24 Jul 2024 12:07:33 -0700
Subject: [PATCH 11/11] Fix failing a11y test

- referencing a removed className - use data-test-subj instead
---
 .../date_picker/super_date_picker/super_date_picker.a11y.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.a11y.tsx b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.a11y.tsx
index 8742f127480..afb50029634 100644
--- a/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.a11y.tsx
+++ b/packages/eui/src/components/date_picker/super_date_picker/super_date_picker.a11y.tsx
@@ -63,7 +63,7 @@ describe('EuiSuperDatePicker', () => {
     });
 
     it('has zero violations when quick select menu is open', () => {
-      cy.get('button.euiFormControlLayout__prepend').click();
+      cy.get('[data-test-subj="superDatePickerToggleQuickMenuButton"]').click();
       cy.get('div.euiPanel').contains('Quick select').should('exist');
       cy.checkAxe();
     });