[EuiDatePickerRange] Add support for compressed display (#7058)

elastic · Aug 9, 2023 · 99068eb · 99068eb
1 parent 17ad68f
commit 99068eb
Show file tree

Hide file tree

Showing 5 changed files with 102 additions and 3 deletions.
diff --git 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

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
@@ -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
@@ -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

diff --git 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}

diff --git a/upcoming_changelogs/7058.md b/upcoming_changelogs/7058.md
@@ -0,0 +1,5 @@
+- Updated `EuiDatePickerRange` to support `compressed` display
+
+**Bug fixes**
+
+- Fixed `EuiSuperDatePicker`'s `compressed` display