[EuiDatePicker] Update to dogfood EuiFieldText directly instead of …

…its classNames - icon affordances are still somewhat repeated, but will have to wait for a future PR
elastic · May 20, 2024 · e13aa41 · e13aa41
1 parent 03dc300
commit e13aa41
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 36 deletions.
diff --git a/packages/eui/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap b/packages/eui/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap
@@ -837,7 +837,7 @@ exports[`EuiDatePicker renders 1`] = `
         >
           <input
             aria-label="Press the down key to open a popover containing a calendar."
-            class="euiDatePicker euiFieldText euiFieldText--withIcon testClass1 testClass2 emotion-euiTestCss"
+            class="euiFieldText euiDatePicker testClass1 testClass2 emotion-euiFieldText-euiTestCss"
             type="text"
             value=""
           />

diff --git a/packages/eui/src/components/date_picker/date_picker.tsx b/packages/eui/src/components/date_picker/date_picker.tsx
@@ -21,7 +21,7 @@ import { Moment } from 'moment'; // eslint-disable-line import/named
 
 import { EuiFormControlLayout, useEuiValidatableControl } from '../form';
 import { EuiFormControlLayoutIconsProps } from '../form/form_control_layout/form_control_layout_icons';
-import { getFormControlClassNameForIconCount } from '../form/form_control_layout/_num_icons';
+import { getIconAffordanceStyles } from '../form/form_control_layout/_num_icons';
 
 import { useCombinedRefs } from '../../services';
 import { EuiI18nConsumer } from '../context';
@@ -60,6 +60,8 @@ const unsupportedProps = [
   'showMonthYearDropdown',
   // We overridde this with `popoverPlacement`
   'popperPlacement',
+  // An internal EUI styling concern that consumers shouldn't need to access
+  'defaultInputProps',
 ] as const;
 
 type UnsupportedProps = (typeof unsupportedProps)[number];
@@ -193,37 +195,11 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
     'euiDatePicker--shadow': inline && shadow,
   });
 
-  const numIconsClass = controlOnly
-    ? false
-    : getFormControlClassNameForIconCount({
-        isInvalid,
-        isLoading,
-      });
-
-  const datePickerClasses = classNames(
-    'euiDatePicker',
-    'euiFieldText',
-    numIconsClass,
-    !inline && {
-      'euiFieldText--fullWidth': fullWidth,
-      'euiFieldText-isLoading': isLoading,
-      'euiFieldText--compressed': compressed,
-      'euiFieldText--withIcon': showIcon,
-      'euiFieldText--isClearable': selected && onClear,
-    },
-    className
-  );
+  const datePickerClasses = classNames('euiDatePicker', className);
 
-  let optionalIcon: EuiFormControlLayoutIconsProps['icon'];
-  if (inline || customInput || !showIcon) {
-    optionalIcon = undefined;
-  } else if (iconType) {
-    optionalIcon = iconType;
-  } else if (showTimeSelectOnly) {
-    optionalIcon = 'clock';
-  } else {
-    optionalIcon = 'calendar';
-  }
+  // Passed to the default EuiFieldText input, not passed to custom inputs
+  const defaultInputProps =
+    !inline && !customInput ? { compressed, fullWidth } : undefined;
 
   // In case the consumer did not alter the default date format but wants
   // to add the time select, we append the default time format
@@ -251,6 +227,7 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
             adjustDateOnChange={adjustDateOnChange}
             calendarClassName={calendarClassName}
             className={datePickerClasses}
+            defaultInputProps={defaultInputProps}
             customInput={customInput}
             dateFormat={fullDateFormat}
             dayClassName={dayClassName}
@@ -290,6 +267,27 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
 
   if (controlOnly) return control;
 
+  let optionalIcon: EuiFormControlLayoutIconsProps['icon'];
+  if (inline || customInput || !showIcon) {
+    optionalIcon = undefined;
+  } else if (iconType) {
+    optionalIcon = iconType;
+  } else if (showTimeSelectOnly) {
+    optionalIcon = 'clock';
+  } else {
+    optionalIcon = 'calendar';
+  }
+
+  // TODO: DRY out icon affordance logic to EuiFormControlLayout in the next few PRs
+  const iconAffordanceStyles = !controlOnly
+    ? getIconAffordanceStyles({
+        icon: optionalIcon,
+        clear: !!(selected && onClear),
+        isInvalid,
+        isLoading,
+      })
+    : undefined;
+
   return (
     <span className={classes}>
       <EuiFormControlLayout
@@ -308,6 +306,7 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
             inline && isInvalid && !disabled && !readOnly,
         })}
         iconsPosition={inline ? 'static' : undefined}
+        style={iconAffordanceStyles} // TODO
       >
         {control}
       </EuiFormControlLayout>

diff --git a/packages/eui/src/components/date_picker/react-datepicker/src/index.d.ts b/packages/eui/src/components/date_picker/react-datepicker/src/index.d.ts
@@ -22,7 +22,8 @@
 import * as React from 'react';
 import * as moment from 'moment';
 
-import { EuiPopoverProps, PopoverAnchorPosition } from '../../../popover';
+import type { EuiPopoverProps, PopoverAnchorPosition } from '../../../popover';
+import type { EuiFieldTextProps } from '../../../form/field_text';
 
 export interface ReactDatePickerProps {
   /**
@@ -44,6 +45,7 @@ export interface ReactDatePickerProps {
    * Added to the actual input of the calendar
    */
   className?: string;
+  defaultInputProps?: Partial<EuiFieldTextProps>;
 
   /**
    * Replaces the input with any node, like a button

diff --git a/packages/eui/src/components/date_picker/react-datepicker/src/index.js b/packages/eui/src/components/date_picker/react-datepicker/src/index.js
@@ -64,7 +64,8 @@ import {
   getMonth
 } from "./date_utils";
 
-import {EuiPopover, popoverAnchorPosition} from '../../../popover/popover';
+import { EuiPopover, popoverAnchorPosition } from '../../../popover/popover';
+import { EuiFieldText } from '../../../form/field_text';
 
 export { default as CalendarContainer } from "./calendar_container";
 
@@ -769,8 +770,12 @@ export default class DatePicker extends React.Component {
       [outsideClickIgnoreClass]: this.state.open
     });
 
-    const customInput = this.props.customInput || <input type="text" />;
-    const customInputRef = this.props.customInputRef || "ref";
+    const customInput = this.props.customInput || (
+      <EuiFieldText controlOnly {...this.props.defaultInputProps} />
+    );
+    const customInputRef =
+      this.props.customInputRef ??
+      (this.props.customInput ? 'ref' : 'inputRef');
     const inputValue =
       typeof this.props.value === "string"
         ? this.props.value