[EuiFormControlLayout] Automatically handle icon affordance via CSS v…

…ariables (#7799)

packages/eui/changelogs/upcoming/7799.md

@@ -0,0 +1 @@
+- Updated `EuiFormControlLayout` to automatically pass icon padding affordance down to child `input`s

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: {

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>

packages/eui/src/components/form/field_text/field_text.tsx

@@ -6,12 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, {
-  InputHTMLAttributes,
-  Ref,
-  FunctionComponent,
-  useMemo,
-} from 'react';
+import React, { InputHTMLAttributes, Ref, FunctionComponent } from 'react';
 import classNames from 'classnames';
 
 import { useEuiMemoizedStyles } from '../../../services';
@@ -21,7 +16,6 @@ import {
   EuiFormControlLayoutProps,
 } from '../form_control_layout';
 import { EuiValidatableControl } from '../validatable_control';
-import { getIconAffordanceStyles } from '../form_control_layout/_num_icons';
 import { useFormContext } from '../eui_form_context';
 
 import { euiFieldTextStyles } from './field_text.styles';
@@ -72,7 +66,6 @@ export const EuiFieldText: FunctionComponent<EuiFieldTextProps> = (props) => {
     placeholder,
     value,
     className,
-    style,
     icon,
     isInvalid,
     inputRef,
@@ -99,12 +92,6 @@ export const EuiFieldText: FunctionComponent<EuiFieldTextProps> = (props) => {
     controlOnly && styles.controlOnly,
   ];
 
-  const iconAffordanceStyles = useMemo(() => {
-    return !controlOnly
-      ? getIconAffordanceStyles({ icon, isInvalid, isLoading })
-      : undefined;
-  }, [controlOnly, icon, isInvalid, isLoading]);
-
   const control = (
     <EuiValidatableControl isInvalid={isInvalid}>
       <input
@@ -114,7 +101,6 @@ export const EuiFieldText: FunctionComponent<EuiFieldTextProps> = (props) => {
         placeholder={placeholder}
         className={classes}
         css={cssStyles}
-        style={{ ...iconAffordanceStyles, ...style }}
         value={value}
         ref={inputRef}
         readOnly={readOnly}

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;

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;

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()}