Address previous TODO / have EuiFormLayout set the icon affordance CSS variables on wrapper

cee-chen · cee-chen · commit 3faccaa51a93 · 2024-05-29T11:31:40.000-07:00
- while accounting for EuiFormLayoutDelineated's static icons
diff --git a/packages/eui/src-docs/src/views/form_controls/form_controls_example.js b/packages/eui/src-docs/src/views/form_controls/form_controls_example.js
@@ -477,16 +477,6 @@ export const FormControlsExample = {
             the <EuiCode>controlOnly</EuiCode> and <EuiCode>type</EuiCode> props
             of <strong>EuiFieldText</strong> as the wrapped control.
           </p>
-
-          <EuiCallOut title="Additional padding required" color="warning">
-            <p>
-              The padding on the <EuiCode>input</EuiCode> itself doesn&rsquo;t
-              take into account the presence of the various icons supported by{' '}
-              <strong>EuiFormControlLayout</strong>. Any input component
-              provided to <strong>EuiFormControlLayout</strong> is responsible
-              for its own padding.
-            </p>
-          </EuiCallOut>
         </>
       ),
       props: {
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,6 @@ 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 { getIconAffordanceStyles } from '../form/form_control_layout/_num_icons';
 
 import { useCombinedRefs } from '../../services';
 import { EuiI18nConsumer } from '../context';
@@ -282,16 +281,6 @@ export const EuiDatePicker: FunctionComponent<EuiDatePickerProps> = ({
     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
@@ -310,7 +299,6 @@ 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/form/form_control_layout/_form_control_layout.scss b/packages/eui/src/components/form/form_control_layout/_form_control_layout.scss
@@ -5,6 +5,7 @@
   // Let the height expand as needed
   @include euiFormControlSize($includeAlternates: true);
 
+  // TODO: Remove this once all form controls are on Emotion/setting padding via CSS variables
   $iconSize: map-get($euiFormControlIconSizes, 'medium');
   $iconPadding: $euiFormControlPadding;
   $marginBetweenIcons: $euiFormControlPadding / 2;
diff --git a/packages/eui/src/components/form/form_control_layout/_num_icons.ts b/packages/eui/src/components/form/form_control_layout/_num_icons.ts
@@ -60,7 +60,7 @@ export const getIconAffordanceStyles = ({
   isDropdown,
 }: {
   icon?: EuiFormControlLayoutIconsProps['icon'];
-  clear?: boolean;
+  clear?: EuiFormControlLayoutIconsProps['clear'] | boolean;
   isLoading?: boolean;
   isInvalid?: boolean;
   isDropdown?: boolean;
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout.tsx
@@ -15,6 +15,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
+import { getIconAffordanceStyles } from './_num_icons';
 import {
   EuiFormControlLayoutIcons,
   EuiFormControlLayoutIconsProps,
@@ -68,6 +69,10 @@ export type EuiFormControlLayoutProps = CommonProps &
 export class EuiFormControlLayout extends Component<EuiFormControlLayoutProps> {
   static contextType = FormContext;
 
+  static defaultProps = {
+    iconsPosition: 'absolute',
+  };
+
   render() {
     const { defaultFullWidth } = this.context as FormContextValue;
     const {
@@ -101,13 +106,27 @@ export class EuiFormControlLayout extends Component<EuiFormControlLayoutProps> {
       className
     );
 
+    const iconAffordanceStyles =
+      iconsPosition === 'absolute' // Static icons don't need padding affordance
+        ? getIconAffordanceStyles({
+            icon,
+            clear,
+            isInvalid,
+            isLoading,
+            isDropdown,
+          })
+        : undefined;
+
     const prependNodes = this.renderSideNode('prepend', prepend, inputId);
     const appendNodes = this.renderSideNode('append', append, inputId);
 
     return (
       <div className={classes} {...rest}>
         {prependNodes}
-        <div className="euiFormControlLayout__childrenWrapper">
+        <div
+          className="euiFormControlLayout__childrenWrapper"
+          style={iconAffordanceStyles}
+        >
           {this.renderLeftIcons()}
           {children}
           {this.renderRightIcons()}
