diff --git a/packages/eui/changelogs/upcoming/7799.md b/packages/eui/changelogs/upcoming/7799.md new file mode 100644 index 00000000000..77f4bb71e7b --- /dev/null +++ b/packages/eui/changelogs/upcoming/7799.md @@ -0,0 +1 @@ +- Updated `EuiFormControlLayout` to automatically pass icon padding affordance down to child `input`s 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 index 04e18077c66..35e8b168289 100644 --- 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 controlOnly and type props of EuiFieldText as the wrapped control.

- - -

- The padding on the input itself doesn’t - take into account the presence of the various icons supported by{' '} - EuiFormControlLayout. Any input component - provided to EuiFormControlLayout is responsible - for its own padding. -

- ), props: { diff --git a/packages/eui/src/components/date_picker/date_picker.tsx b/packages/eui/src/components/date_picker/date_picker.tsx index 2c05deceee5..719395f87d0 100644 --- 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 = ({ 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 ( = ({ inline && isInvalid && !disabled && !readOnly, })} iconsPosition={inline ? 'static' : undefined} - style={iconAffordanceStyles} // TODO > {control} diff --git a/packages/eui/src/components/form/field_text/field_text.tsx b/packages/eui/src/components/form/field_text/field_text.tsx index 1c0d10a03b8..3f99adc1762 100644 --- a/packages/eui/src/components/form/field_text/field_text.tsx +++ b/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 = (props) => { placeholder, value, className, - style, icon, isInvalid, inputRef, @@ -99,12 +92,6 @@ export const EuiFieldText: FunctionComponent = (props) => { controlOnly && styles.controlOnly, ]; - const iconAffordanceStyles = useMemo(() => { - return !controlOnly - ? getIconAffordanceStyles({ icon, isInvalid, isLoading }) - : undefined; - }, [controlOnly, icon, isInvalid, isLoading]); - const control = ( = (props) => { placeholder={placeholder} className={classes} css={cssStyles} - style={{ ...iconAffordanceStyles, ...style }} value={value} ref={inputRef} readOnly={readOnly} 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 index b0b41443cf1..d94c5af5e36 100644 --- 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 index da6be253d96..1dad9f03c73 100644 --- 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 index 5039efa0268..48d227f97e9 100644 --- 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 { static contextType = FormContext; + static defaultProps = { + iconsPosition: 'absolute', + }; + render() { const { defaultFullWidth } = this.context as FormContextValue; const { @@ -101,13 +106,27 @@ export class EuiFormControlLayout extends Component { 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 (
{prependNodes} -
+
{this.renderLeftIcons()} {children} {this.renderRightIcons()}