Fix/eui migrate class to function components

[toffku]

Summary

• What: Migrated EuiFormControlLayoutIcons from class to function component. Converted class methods (renderCustomIcon, renderLoadingSpinner, renderClearButton, renderInvalidIcon, renderDropdownIcon) into helper functions.

• Why: Fixes [EuiFormControlLayoutIcons] Migrate from class to function components #9461

• How:

  • Removed Component import, kept React import
  • Converted class declaration to arrow function component with destructured props
  • Extracted render methods as standalone functions that accept parameters instead of reading from this.props

API Changes

component / parent	prop / child	change	description
None	None	None	None

Screenshots

Before	After
{Before image}	{After image}

Impact Assessment

Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.

• 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?
• 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
• 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
• 🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.

Impact level: 🟢 None

Release Readiness

• Documentation: {link to docs page(s)}
• Figma: {link to Figma or issue}
• Migration guide: {steps or link, for breaking/visual changes or deprecations}
• Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}

QA instructions for reviewer

Checklist before marking Ready for Review

• Filled out all sections above
• QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
• QA: Tested in CodeSandbox and Kibana
• QA: Tested docs changes
• Tests: Added/updated Jest, Cypress, and VRT
• Changelog: Added changelog entry
• Breaking changes: Added breaking change label (if applicable)

Reviewer checklist

• Approved Impact Assessment — Acceptable to merge given the consumer impact.
• Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

[github-actions]

👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?

[Copilot]

Pull request overview

Migrates EuiFormControlLayoutIcons from a stateless class component to a function component to address #9461, keeping render behavior the same while simplifying the implementation.

Changes:

• Converted EuiFormControlLayoutIcons from class extends Component to a function component with destructured props/defaults
• Extracted former class render methods into module-level helper functions (renderCustomIcon, renderLoadingSpinner, etc.)
• Updated React import to remove the unused Component import

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 05956ba
• Documentation website
• Storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 05956ba

[weronikaolejniczak]

@toffku It's absolutely okay for the purposes of the class to function migration to simply raise these render functions to module level and call it a day. But a more idiomatic approach here would be to make them into components.

E.g.

Suggested change

	const renderCustomIcon = (
	icon: EuiFormControlLayoutIconsProps['icon'],
	isDisabled: EuiFormControlLayoutIconsProps['isDisabled']
	) => {
	if (!icon) {
	return null;
	}
	renderDropdownIcon() {
	const { isDropdown, isDisabled } = this.props;
	if (!isDropdown) {
	return null;
	}
	// Normalize the icon to an object if it's a string.
	const iconProps: IconShape = isIconShape(icon)
	? icon
	: {
	type: icon,
	};
	const { ref: iconRef, side, ...iconRest } = iconProps;
	return (
	<EuiFormControlLayoutCustomIcon
	size="m"
	disabled={isDisabled}
	iconRef={iconRef}
	{...iconRest}
	/>
	);
	};
	const CustomIcon = ({ icon, isDisabled }: {
	icon: EuiFormControlLayoutIconsProps['icon'],
	isDisabled: EuiFormControlLayoutIconsProps['isDisabled']
	}) => {
	if (!icon) return null;
	// Normalize the icon to an object if it's a string.
	const iconProps: IconShape = isIconShape(icon)
	? icon
	: { type: icon };
	const { ref: iconRef, side, ...iconRest } = iconProps;
	return (
	<EuiFormControlLayoutCustomIcon
	size="m"
	disabled={isDisabled}
	iconRef={iconRef}
	{...iconRest}
	/>
	);
	};

and then in EuiFormControlLayoutIcons render: <CustomIcon icon={icon} isDisabled={isDisabled} />

[weronikaolejniczak]

I have just one comment that is very straightforward to address. Otherwise, we're good to go! Thank you for contributing, @toffku 🙏🏻