[EuiDatePicker] Add compressed input styling (#7218)

elastic · Sep 22, 2023 · 3122e51 · 3122e51
1 parent 1aab41d
commit 3122e51
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git 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
@@ -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
@@ -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
@@ -0,0 +1 @@
+- Updated `EuiDatePicker` to support `compressed` input styling