From a89040737740eb1d07ce17e8ded381700776b9ae Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 21 Sep 2023 16:04:43 -0700
Subject: [PATCH 1/4] [EuiDatePicker] Add `compressed` prop

---
 src/components/date_picker/date_picker.test.tsx | 6 ++++++
 src/components/date_picker/date_picker.tsx      | 9 ++++++++-
 2 files changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/date_picker/date_picker.test.tsx b/src/components/date_picker/date_picker.test.tsx
index 2c99803809c..d0f2208f559 100644
--- a/src/components/date_picker/date_picker.test.tsx
+++ b/src/components/date_picker/date_picker.test.tsx
@@ -21,6 +21,12 @@ describe('EuiDatePicker', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  test('compressed', () => {
+    const { container } = render(<EuiDatePicker compressed />);
+    // TODO: Should probably be a visual snapshot test
+    expect(container.innerHTML).toContain('--compressed');
+  });
+
   // TODO: These tests/snapshots don't really do anything in Jest without
   // the corresponding popover opening. Should be switched to an E2E test instead
   describe.skip('popoverPlacement', () => {
diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx
index 4c41d516553..a05d6417e5a 100644
--- a/src/components/date_picker/date_picker.tsx
+++ b/src/components/date_picker/date_picker.tsx
@@ -72,9 +72,13 @@ interface EuiExtendedDatePickerProps
   dayClassName?: (date: Moment) => string | null;
 
   /**
-   * Makes the input full width
+   * Renders the input as full width
    */
   fullWidth?: boolean;
+  /**
+   * Renders the input with compressed height and sizing
+   */
+  compressed?: boolean;
 
   /**
    * ref for the ReactDatePicker instance
@@ -147,6 +151,7 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
   adjustDateOnChange = true,
   calendarClassName,
   className,
+  compressed,
   controlOnly,
   customInput,
   dateFormat = euiDatePickerDefaultDateFormat,
@@ -201,6 +206,7 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
     numIconsClass,
     {
       'euiFieldText--fullWidth': fullWidth,
+      'euiFieldText--compressed': compressed,
       'euiFieldText-isLoading': isLoading,
       'euiFieldText--withIcon': !inline && showIcon,
       'euiFieldText--isClearable': !inline && selected && onClear,
@@ -289,6 +295,7 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
       <EuiFormControlLayout
         icon={optionalIcon}
         fullWidth={fullWidth}
+        compressed={compressed}
         clear={selected && onClear ? { onClick: onClear } : undefined}
         isLoading={isLoading}
         isInvalid={isInvalid}

From 60773f74b9fff5f0830c5ab42dd558f156496fbd Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 21 Sep 2023 16:18:47 -0700
Subject: [PATCH 2/4] [misc] Clean up `inline` conditionals

- DRY out where possible
- apply some missing checks to form layout component (may as well not apply classes/styles)
---
 src/components/date_picker/date_picker.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/date_picker/date_picker.tsx b/src/components/date_picker/date_picker.tsx
index a05d6417e5a..5867a4224dc 100644
--- a/src/components/date_picker/date_picker.tsx
+++ b/src/components/date_picker/date_picker.tsx
@@ -204,12 +204,12 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
     'euiDatePicker',
     'euiFieldText',
     numIconsClass,
-    {
+    !inline && {
       'euiFieldText--fullWidth': fullWidth,
-      'euiFieldText--compressed': compressed,
       'euiFieldText-isLoading': isLoading,
-      'euiFieldText--withIcon': !inline && showIcon,
-      'euiFieldText--isClearable': !inline && selected && onClear,
+      'euiFieldText--compressed': compressed,
+      'euiFieldText--withIcon': showIcon,
+      'euiFieldText--isClearable': selected && onClear,
     },
     className
   );
@@ -294,8 +294,8 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
     <span className={classes}>
       <EuiFormControlLayout
         icon={optionalIcon}
-        fullWidth={fullWidth}
-        compressed={compressed}
+        fullWidth={!inline && fullWidth}
+        compressed={!inline && compressed}
         clear={selected && onClear ? { onClick: onClear } : undefined}
         isLoading={isLoading}
         isInvalid={isInvalid}

From 1003562f69282023d11892352bbf13f796c1c5ad Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 21 Sep 2023 16:07:07 -0700
Subject: [PATCH 3/4] Update docs example

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

diff --git a/src-docs/src/views/date_picker/states.js b/src-docs/src/views/date_picker/states.js
index dbca3463c0d..8d4276764d7 100644
--- a/src-docs/src/views/date_picker/states.js
+++ b/src-docs/src/views/date_picker/states.js
@@ -22,7 +22,7 @@ export default () => {
   return (
     /* DisplayToggles wrapper for Docs only */
     <div>
-      <DisplayToggles canCompressed={false}>
+      <DisplayToggles>
         <EuiDatePicker
           showTimeSelect
           selected={startDate}

From 434a9a7eab7b44faf38730ec9b6c8e0105afd95c Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 21 Sep 2023 16:24:23 -0700
Subject: [PATCH 4/4] changelog

---
 upcoming_changelogs/7218.md | 1 +
 1 file changed, 1 insertion(+)
 create mode 100644 upcoming_changelogs/7218.md

diff --git a/upcoming_changelogs/7218.md b/upcoming_changelogs/7218.md
new file mode 100644
index 00000000000..bd27aed2164
--- /dev/null
+++ b/upcoming_changelogs/7218.md
@@ -0,0 +1 @@
+- Updated `EuiDatePicker` to support `compressed` input styling