From 33da103de5c205c95658b7e77556c5417ef96bf7 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 8 Aug 2023 11:21:06 -0700
Subject: [PATCH 1/4] [EuiDatePickerRange] Support `compressed` prop

- Because `EuiSuperDatePicker` supports `compressed` behavior, `EuiDatePickerRange` needs to as well
---
 src/components/date_picker/date_picker_range.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/components/date_picker/date_picker_range.tsx b/src/components/date_picker/date_picker_range.tsx
index c44ff5fd883..f246fb36905 100644
--- a/src/components/date_picker/date_picker_range.tsx
+++ b/src/components/date_picker/date_picker_range.tsx
@@ -35,7 +35,13 @@ import { EuiDatePickerProps } from './date_picker';
 export type EuiDatePickerRangeProps = CommonProps &
   Pick<
     EuiFormControlLayoutDelimitedProps,
-    'isLoading' | 'isInvalid' | 'readOnly' | 'fullWidth' | 'prepend' | 'append'
+    | 'isLoading'
+    | 'isInvalid'
+    | 'readOnly'
+    | 'fullWidth'
+    | 'compressed'
+    | 'prepend'
+    | 'append'
   > & {
     /**
      * Including any children will replace all innards with the provided children
@@ -100,6 +106,7 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
   inline,
   shadow = true,
   fullWidth: _fullWidth,
+  compressed: _compressed,
   isCustom,
   readOnly,
   isLoading,
@@ -111,8 +118,9 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
   prepend,
   ...rest
 }) => {
-  // `fullWidth` should not affect inline datepickers (matches non-range behavior)
+  // `fullWidth` and `compressed` should not affect inline datepickers (matches non-range behavior)
   const fullWidth = _fullWidth && !inline;
+  const compressed = _compressed && !inline;
 
   const classes = classNames('euiDatePickerRange', className);
 
@@ -206,6 +214,7 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
         startControl={startControl}
         endControl={endControl}
         fullWidth={fullWidth}
+        compressed={compressed}
         readOnly={readOnly}
         isDisabled={disabled}
         isInvalid={isInvalid}

From f566d89775db0893c8d66282f260c409737016b0 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 8 Aug 2023 11:21:14 -0700
Subject: [PATCH 2/4] Add test

---
 .../date_picker_range.test.tsx.snap           | 73 +++++++++++++++++++
 .../date_picker/date_picker_range.test.tsx    | 12 +++
 2 files changed, 85 insertions(+)

diff --git a/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap b/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap
index 2b9f038c269..bf4a44442ee 100644
--- a/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap
+++ b/src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap
@@ -75,6 +75,79 @@ exports[`EuiDatePickerRange is rendered 1`] = `
 </span>
 `;
 
+exports[`EuiDatePickerRange props compressed 1`] = `
+<span
+  class="euiDatePickerRange emotion-euiDatePickerRange"
+>
+  <div
+    class="euiFormControlLayout euiFormControlLayout--compressed euiFormControlLayoutDelimited"
+  >
+    <div
+      class="euiFormControlLayout__childrenWrapper"
+    >
+      <div
+        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--static"
+      >
+        <span
+          class="euiFormControlLayoutCustomIcon"
+        >
+          <span
+            aria-hidden="true"
+            class="euiFormControlLayoutCustomIcon__icon"
+            data-euiicon-type="calendar"
+          />
+        </span>
+      </div>
+      <div
+        class="euiPopover emotion-euiPopover"
+      >
+        <div
+          class="euiPopover__anchor css-zih94u-render"
+        >
+          <div
+            class="react-datepicker__input-container"
+          >
+            <input
+              aria-label="Press the down key to open a popover containing a calendar."
+              class="euiDatePicker euiFieldText euiDatePickerRange__start euiFormControlLayoutDelimited__input"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="euiText euiFormControlLayoutDelimited__delimiter emotion-euiText-s-euiTextColor-subdued"
+      >
+        <span
+          data-euiicon-type="sortRight"
+        >
+          to
+        </span>
+      </div>
+      <div
+        class="euiPopover emotion-euiPopover"
+      >
+        <div
+          class="euiPopover__anchor css-zih94u-render"
+        >
+          <div
+            class="react-datepicker__input-container"
+          >
+            <input
+              aria-label="Press the down key to open a popover containing a calendar."
+              class="euiDatePicker euiFieldText euiDatePickerRange__end euiFormControlLayoutDelimited__input"
+              type="text"
+              value=""
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</span>
+`;
+
 exports[`EuiDatePickerRange props disabled 1`] = `
 <span
   class="euiDatePickerRange emotion-euiDatePickerRange"
diff --git a/src/components/date_picker/date_picker_range.test.tsx b/src/components/date_picker/date_picker_range.test.tsx
index 78bf56c50bd..68914f01765 100644
--- a/src/components/date_picker/date_picker_range.test.tsx
+++ b/src/components/date_picker/date_picker_range.test.tsx
@@ -41,6 +41,18 @@ describe('EuiDatePickerRange', () => {
       expect(container.firstChild).toMatchSnapshot();
     });
 
+    test('compressed', () => {
+      const { container } = render(
+        <EuiDatePickerRange
+          startDateControl={<EuiDatePicker />}
+          endDateControl={<EuiDatePicker />}
+          compressed
+        />
+      );
+
+      expect(container.firstChild).toMatchSnapshot();
+    });
+
     test('readOnly', () => {
       const { container } = render(
         <EuiDatePickerRange

From d66ea903ef2e24f0520e18ae78d12fb558d48547 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 8 Aug 2023 11:21:20 -0700
Subject: [PATCH 3/4] Update docs

---
 src-docs/src/views/date_picker/range.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src-docs/src/views/date_picker/range.tsx b/src-docs/src/views/date_picker/range.tsx
index 87d1576bfd5..ea2a6957b07 100644
--- a/src-docs/src/views/date_picker/range.tsx
+++ b/src-docs/src/views/date_picker/range.tsx
@@ -10,7 +10,7 @@ export default () => {
 
   return (
     /* DisplayToggles wrapper for Docs only */
-    <DisplayToggles canCompressed={false} canPrepend={true} canAppend={true}>
+    <DisplayToggles canPrepend={true} canAppend={true}>
       <EuiDatePickerRange
         startDateControl={
           <EuiDatePicker

From d422d6f1a8c4b3dbdb97a19508052a8b78ef6e30 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Tue, 8 Aug 2023 11:28:09 -0700
Subject: [PATCH 4/4] changelog

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

diff --git a/upcoming_changelogs/7058.md b/upcoming_changelogs/7058.md
new file mode 100644
index 00000000000..e1e398b2e97
--- /dev/null
+++ b/upcoming_changelogs/7058.md
@@ -0,0 +1,5 @@
+- Updated `EuiDatePickerRange` to support `compressed` display
+
+**Bug fixes**
+
+- Fixed `EuiSuperDatePicker`'s `compressed` display