Start date popover for date picker range starts at the calendar icon

CHANGELOG.md

@@ -1,5 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
+- Added `iconType` prop to `EuiDatePicker` ([#3383](https://github.com/elastic/eui/pull/3383))
 - Applied `max-width: 100%` to `EuiPageBody` so inner flex-based items don't overflow their containers  ([#3375](https://github.com/elastic/eui/pull/3375))
 - Added `titleSize` prop to `EuiStep` and `EuiSteps` ([#3340](https://github.com/elastic/eui/pull/3340))
 - Handled `ref` passed to `EuiHeaderSectionItemButton` ([#3378](https://github.com/elastic/eui/pull/3378))
@@ -14,6 +15,7 @@
 - Applies `max-width: 100%` to `EuiPageBody` so inner flex-based items don't overflow their containers  ([#3375](https://github.com/elastic/eui/pull/3375))
 - Added `ReactElement` to `EuiCard` `image` prop type to allow custom component ([#3370](https://github.com/elastic/eui/pull/3370))
 - Fixed `EuiCollapsibleNavGroup` `titleSize` prop type to properly exclude `l` and `m` sizes ([#3365](https://github.com/elastic/eui/pull/3365))
+- Fixed `EuiDatePickerRange` start date popover to sit left under the icon ([#3383](https://github.com/elastic/eui/pull/3383))
 
 ## [`23.1.0`](https://github.com/elastic/eui/tree/v23.1.0)
 

src/components/date_picker/__snapshots__/date_picker_range.test.tsx.snap

@@ -6,13 +6,6 @@ exports[`EuiDatePickerRange is rendered 1`] = `
   class="euiDatePickerRange testClass1 testClass2"
   data-test-subj="test subject string"
 >
-  <span
-    class="euiDatePickerRange__icon"
-  >
-    <div
-      data-euiicon-type="calendar"
-    />
-  </span>
   <span>
     <span
       class="euiDatePicker euiDatePicker--shadow"
@@ -31,12 +24,25 @@ exports[`EuiDatePickerRange is rendered 1`] = `
             >
               <input
                 aria-label=""
-                class="euiDatePicker euiFieldText"
+                class="euiDatePicker euiFieldText euiFieldText--withIcon"
                 type="text"
                 value=""
               />
             </div>
           </div>
+          <div
+            class="euiFormControlLayoutIcons"
+          >
+            <span
+              class="euiFormControlLayoutCustomIcon"
+            >
+              <div
+                aria-hidden="true"
+                class="euiFormControlLayoutCustomIcon__icon"
+                data-euiicon-type="calendar"
+              />
+            </span>
+          </div>
         </div>
       </div>
     </span>

src/components/date_picker/_date_picker_range.scss

@@ -37,12 +37,6 @@
 
   // Direct descendent selectors to override `> span`
 
-  > .euiDatePickerRange__icon {
-    flex: 0 0 auto;
-    padding-left: $euiFormControlPadding;
-    padding-right: $euiFormControlPadding;
-  }
-
   > .euiDatePickerRange__delimeter {
     background-color: transparent !important; // override .euiFormControlLayout--group .euiText
     line-height: 1 !important;

src/components/date_picker/date_picker.tsx

@@ -90,6 +90,11 @@ interface EuiExtendedDatePickerProps extends ReactDatePickerProps {
    */
   showIcon?: boolean;
 
+  /**
+   * Pass an icon type to change the default `calendar` or `clock` icon
+   */
+  iconType?: EuiFormControlLayoutIconsProps['icon'];
+
   /**
    * Sets the placement of the popover. It accepts: `"bottom"`, `"bottom-end"`, `"bottom-start"`, `"left"`, `"left-end"`, `"right"`, `"right-end"`, `"right-start"`, `"top"`, `"top-end"`, `"top-start"`
    */
@@ -129,6 +134,7 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> {
       excludeDates,
       filterDate,
       fullWidth,
+      iconType,
       injectTimes,
       inline,
       inputRef,
@@ -176,6 +182,8 @@ export class EuiDatePicker extends Component<_EuiDatePickerProps> {
     let optionalIcon: EuiFormControlLayoutIconsProps['icon'];
     if (inline || customInput || !showIcon) {
       optionalIcon = undefined;
+    } else if (iconType) {
+      optionalIcon = iconType;
     } else if (showTimeSelectOnly) {
       optionalIcon = 'clock';
     } else {

src/components/date_picker/date_picker_range.tsx

@@ -27,7 +27,7 @@ import React, {
 import classNames from 'classnames';
 
 import { EuiText } from '../text';
-import { EuiIcon, IconType } from '../icon';
+import { IconType } from '../icon';
 import { CommonProps } from '../common';
 import { EuiDatePickerProps } from './date_picker';
 
@@ -80,29 +80,17 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
     className
   );
 
-  // Set the icon for the entire group instead of per control
-  let optionalIcon;
-  if (iconType) {
-    const icon = typeof iconType === 'string' ? iconType : 'calendar';
-    optionalIcon = (
-      <span className="euiDatePickerRange__icon">
-        <EuiIcon type={icon} />
-      </span>
-    );
-  } else {
-    optionalIcon = null;
-  }
-
   let startControl = startDateControl;
   let endControl = endDateControl;
 
   if (!isCustom) {
     startControl = cloneElement(
       startDateControl as ReactElement<EuiDatePickerProps>,
       {
-        showIcon: false,
         fullWidth: fullWidth,
         readOnly: readOnly,
+        iconType: typeof iconType === 'boolean' ? undefined : iconType,
+        showIcon: !!iconType,
       }
     );
 
@@ -123,7 +111,6 @@ export const EuiDatePickerRange: FunctionComponent<EuiDatePickerRangeProps> = ({
         children
       ) : (
         <Fragment>
-          {optionalIcon}
           {startControl}
           <EuiText
             className="euiDatePickerRange__delimeter"