From 3122e513ccde2a9eac3c171f9e3e8d0bda52aa08 Mon Sep 17 00:00:00 2001
From: Cee Chen <549407+cee-chen@users.noreply.github.com>
Date: Fri, 22 Sep 2023 09:30:52 -0700
Subject: [PATCH] [EuiDatePicker] Add `compressed` input styling (#7218)

---
 src-docs/src/views/date_picker/states.js        |  2 +-
 src/components/date_picker/date_picker.test.tsx |  6 ++++++
 src/components/date_picker/date_picker.tsx      | 17 ++++++++++++-----
 upcoming_changelogs/7218.md                     |  1 +
 4 files changed, 20 insertions(+), 6 deletions(-)
 create mode 100644 upcoming_changelogs/7218.md

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}
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..5867a4224dc 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,
@@ -199,11 +204,12 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
     'euiDatePicker',
     'euiFieldText',
     numIconsClass,
-    {
+    !inline && {
       'euiFieldText--fullWidth': fullWidth,
       'euiFieldText-isLoading': isLoading,
-      'euiFieldText--withIcon': !inline && showIcon,
-      'euiFieldText--isClearable': !inline && selected && onClear,
+      'euiFieldText--compressed': compressed,
+      'euiFieldText--withIcon': showIcon,
+      'euiFieldText--isClearable': selected && onClear,
     },
     className
   );
@@ -288,7 +294,8 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
     <span className={classes}>
       <EuiFormControlLayout
         icon={optionalIcon}
-        fullWidth={fullWidth}
+        fullWidth={!inline && fullWidth}
+        compressed={!inline && compressed}
         clear={selected && onClear ? { onClick: onClear } : undefined}
         isLoading={isLoading}
         isInvalid={isInvalid}
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