[EuiDatePicker] Fix inline rendering + add append/prepend support

packages/eui/changelogs/upcoming/7987.md

@@ -0,0 +1,5 @@
+- Updated `EuiDatePicker` to support `append` and `prepend` nodes in its form control layout
+
+**Bug fixes**
+
+- Fixed border rendering bug with inline `EuiDatePicker`s with `shadow={false}`

packages/eui/src-docs/src/views/date_picker/states.js

@@ -21,8 +21,8 @@ export default () => {
 
   return (
     /* DisplayToggles wrapper for Docs only */
-    <div>
-      <DisplayToggles>
+    <>
+      <DisplayToggles canPrepend={true} canAppend={true}>
         <EuiDatePicker
           showTimeSelect
           selected={startDate}
@@ -52,6 +52,6 @@ export default () => {
           placeholder="Example of an error"
         />
       </EuiFormRow>
-    </div>
+    </>
   );
 };

packages/eui/src/components/date_picker/date_picker.stories.tsx

@@ -100,6 +100,8 @@ const meta: Meta<EuiDatePickerProps> = {
     isInvalid: false,
     isLoading: false,
     placeholder: '',
+    append: '',
+    prepend: '',
     // manually adding non-resolved prop types (extended from react-date-picker)
     calendarClassName: '',
     customInput: undefined,

packages/eui/src/components/date_picker/date_picker.styles.ts

@@ -31,7 +31,7 @@ export const euiDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
         .euiFormControlLayout {
           ${logicalCSS('height', 'auto')}
           ${logicalCSS('width', 'fit-content')}
-          box-shadow: none;
+          border: none;
           padding: 0;
         }
 
@@ -75,5 +75,14 @@ export const euiDatePickerStyles = (euiThemeContext: UseEuiTheme) => {
         }
       `,
     },
+
+    inGroup: css`
+      .euiFormControlLayout__childrenWrapper {
+        .euiPopover,
+        .react-datepicker__input-container {
+          ${logicalCSS('height', '100%')}
+        }
+      }
+    `,
   };
 };

packages/eui/src/components/date_picker/date_picker.test.tsx

@@ -53,6 +53,29 @@ describe('EuiDatePicker', () => {
     expect(container.innerHTML).toContain('-compressed');
   });
 
+  test('append/prepend', () => {
+    const { container, rerender } = render(
+      <EuiDatePicker append="hello" prepend="world" />
+    );
+    const getAppend = () =>
+      container.querySelector('.euiFormControlLayout__append');
+    const getPrepend = () =>
+      container.querySelector('.euiFormControlLayout__prepend');
+
+    expect(getAppend()).toHaveTextContent('hello');
+    expect(getPrepend()).toHaveTextContent('world');
+
+    // Does not render if controlOnly
+    rerender(<EuiDatePicker append="hello" prepend="world" controlOnly />);
+    expect(getAppend()).not.toBeInTheDocument();
+    expect(getPrepend()).not.toBeInTheDocument();
+
+    // Does not render if inline
+    rerender(<EuiDatePicker append="hello" prepend="world" inline />);
+    expect(getAppend()).not.toBeInTheDocument();
+    expect(getPrepend()).not.toBeInTheDocument();
+  });
+
   // 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', () => {

packages/eui/src/components/date_picker/date_picker.tsx

@@ -22,7 +22,11 @@ import { useCombinedRefs, useEuiMemoizedStyles } from '../../services';
 import { EuiI18nConsumer } from '../context';
 import { CommonProps } from '../common';
 import { PopoverAnchorPosition } from '../popover';
-import { EuiFormControlLayout, useEuiValidatableControl } from '../form';
+import {
+  EuiFormControlLayout,
+  EuiFormControlLayoutProps,
+  useEuiValidatableControl,
+} from '../form';
 import { EuiFormControlLayoutIconsProps } from '../form/form_control_layout/form_control_layout_icons';
 
 import { ReactDatePicker, ReactDatePickerProps } from './react-datepicker';
@@ -138,9 +142,26 @@ interface EuiExtendedDatePickerProps
    */
   popoverPlacement?: PopoverAnchorPosition;
 
+  /**
+   * Creates an input group with element(s) coming before the input.
+   * `string` | `ReactElement` or an array of these
+   *
+   * Ignored if `inline` or `controlOnly` are true.
+   */
+  append?: EuiFormControlLayoutProps['append'];
+  /**
+   * Creates an input group with element(s) coming before the input.
+   * `string` | `ReactElement` or an array of these
+   *
+   * Ignored if `inline` or `controlOnly` are true.
+   */
+  prepend?: EuiFormControlLayoutProps['prepend'];
+
   /**
    * Completely removes form control layout wrapper and ignores
-   * iconType. Best used inside EuiFormControlLayoutDelimited.
+   * `iconType`, `prepend`, and `append`.
+   *
+   * Best used inside EuiFormControlLayoutDelimited.
    */
   controlOnly?: boolean;
 }
@@ -149,6 +170,7 @@ export type EuiDatePickerProps = CommonProps & EuiExtendedDatePickerProps;
 
 export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
   adjustDateOnChange = true,
+  append,
   calendarClassName,
   className,
   compressed,
@@ -177,6 +199,7 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
   placeholder,
   popperClassName,
   popoverPlacement = 'downLeft',
+  prepend,
   readOnly,
   selected,
   shadow = true,
@@ -297,15 +320,23 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
     <span css={cssStyles} className={classes}>
       <EuiFormControlLayout
         icon={optionalIcon}
-        fullWidth={!inline && fullWidth}
-        compressed={!inline && compressed}
         clear={selected && onClear ? { onClick: onClear } : undefined}
         isLoading={isLoading}
         isInvalid={isInvalid}
         isDisabled={disabled}
         readOnly={readOnly}
-        isDelimited={inline} // Styling shortcut for inline calendars
-        iconsPosition={inline ? 'static' : undefined}
+        {...(inline
+          ? {
+              isDelimited: true,
+              iconsPosition: 'static',
+            }
+          : {
+              fullWidth,
+              compressed,
+              append,
+              prepend,
+              css: (append || prepend) && styles.inGroup,
+            })}
       >
         {control}
       </EuiFormControlLayout>

packages/eui/src/components/date_picker/date_picker_range.styles.ts

@@ -58,7 +58,7 @@ export const euiDatePickerRangeInlineStyles = (
         ${logicalCSS('height', 'auto')}
         ${logicalCSS('width', 'fit-content')}
         ${logicalCSS('max-width', '100%')}
-        box-shadow: none;
+        border: none;
         padding: 0;
 
         .euiFormControlLayout__childrenWrapper {