[EuiAccordion] Migrate from class to function component by antonbc · Pull Request #9558 · elastic/eui

antonbc · 2026-04-04T07:30:17Z

…d useEuiTheme

Summary

What: Converts EuiAccordion from a class component to a function component.
Why: [EuiAccordion] Migrate from class to function component #9465 Class component refactoring migration
How:
- Replaced class state with useState for isOpen
- Replaced withEuiTheme HOC with useEuiTheme hook

API Changes

No API changes.

component / parent	prop / child	change	description

Screenshots

No visual changes

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
💅 Visual changes
🧪 Test impact — None. All 39 existing tests pass, 21 snapshots match.
🔧 Hard to integrate

Impact level: 🟢 None / 🟢 Low / 🟡 Moderate / 🔴 High

Release Readiness

~~Documentation:~~
~~Figma:~~
~~Migration guide:~~
~~Adoption plan~~

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

Convert to function component with useState
Replace withEuiTheme HOC with useEuiTheme hook if applicable
Maintain controlled/uncontrolled open state behavior
All existing tests pass

…d useEuiTheme

cla-checker-service · 2026-04-04T07:30:22Z

💚 CLA has been signed

github-actions · 2026-04-04T07:30:27Z

👋 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?

github-actions · 2026-04-04T07:33:15Z

👋 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 EuiAccordion from a class component wrapped in withEuiTheme to a function component that uses hooks (useEuiTheme, useGeneratedHtmlId) while aiming to keep behavior and public API the same.

Changes:

Replaced class state/handlers with useState and an internal toggle handler.
Replaced withEuiTheme + WithEuiThemeProps usage with useEuiTheme.
Replaced htmlIdGenerator() instance property with useGeneratedHtmlId().

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

Copilot · 2026-04-04T07:33:53Z

+      setIsOpenState((prevIsOpen) => {
+        const nextState = !prevIsOpen;
+        onToggle?.(nextState);
+        return nextState;
+      });


onToggle is invoked inside the setIsOpenState functional updater. React may call state updater functions more than once (e.g., StrictMode/dev, interrupted renders), which can lead to onToggle firing multiple times for a single user interaction. Consider computing nextState in the click handler using the current isOpenState, calling setIsOpenState(nextState), and then calling onToggle(nextState) outside the updater (or triggering the callback from an effect that only runs for user-initiated toggles).

Suggested change

setIsOpenState((prevIsOpen) => {

const nextState = !prevIsOpen;

onToggle?.(nextState);

return nextState;

});

const nextState = !isOpenState;

setIsOpenState(nextState);

onToggle?.(nextState);

Let's please address this.

Copilot · 2026-04-04T07:33:54Z

+  const euiTheme = useEuiTheme();
+  const classes = classNames(
+    'euiAccordion',
+    { 'euiAccordion-isOpen': isOpen },
+    className
+  );
+
+  const styles = euiAccordionStyles(euiTheme);


useEuiTheme() returns a theme object (with euiTheme, colorMode, etc.), but the local variable is named euiTheme, which reads like it contains only the euiTheme property. Renaming this variable to theme (or destructuring { euiTheme } and adjusting the style call accordingly) would avoid confusion and reduce the chance of misusing the hook return value later.

Suggested change

const euiTheme = useEuiTheme();

const classes = classNames(

'euiAccordion',

{ 'euiAccordion-isOpen': isOpen },

className

);

const styles = euiAccordionStyles(euiTheme);

const theme = useEuiTheme();

const classes = classNames(

'euiAccordion',

{ 'euiAccordion-isOpen': isOpen },

className

);

const styles = euiAccordionStyles(theme);

We actually use euiThemeContext:

const euiThemeContext = useEuiTheme(); const styles = euiAccordionStyles(euiThemeContext);

weronikaolejniczak · 2026-04-07T10:48:21Z

+    className
+  );
+
+  const styles = euiAccordionStyles(euiTheme);


This was not part of the task but we could use useEuiMemoizedStyles

elasticmachine · 2026-04-07T11:10:02Z

💚 Build Succeeded

elasticmachine · 2026-04-07T11:27:52Z

💚 Build Succeeded

Buildkite Build
Commit: 1962403

weronikaolejniczak · 2026-04-07T15:43:32Z

-
-  onToggle = () => {
-    const { forceState } = this.props;
+export const EuiAccordionClass: FunctionComponent<EuiAccordionProps> = ({


nit:

We should export it directly as EuiAccordion, not EuiAccordionClass because that's no longer true.

Suggested change

export const EuiAccordionClass: FunctionComponent<EuiAccordionProps> = ({

export const EuiAccordion: FunctionComponent<EuiAccordionProps> = ({

refactor: convert EuiAccordion to function component with useState an…

b82d6b8

…d useEuiTheme

antonbc requested a review from a team as a code owner April 4, 2026 07:30

Copilot AI review requested due to automatic review settings April 4, 2026 07:30

github-actions bot added the community contribution (Don't delete - used for automation) label Apr 4, 2026

antonbc closed this Apr 4, 2026

Copilot started reviewing on behalf of antonbc April 4, 2026 07:30 View session

antonbc reopened this Apr 4, 2026

Copilot AI reviewed Apr 4, 2026

View reviewed changes

chore: add changelog for elastic#9558

1962403

weronikaolejniczak added the skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) label Apr 7, 2026

weronikaolejniczak reviewed Apr 7, 2026

View reviewed changes

Comment thread packages/eui/changelogs/upcoming/9558.md Outdated

weronikaolejniczak reviewed Apr 7, 2026

View reviewed changes

chore: remove unnecessary changelog entry for elastic#9558

087711b

weronikaolejniczak reviewed Apr 7, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiAccordion] Migrate from class to function component#9558

[EuiAccordion] Migrate from class to function component#9558
antonbc wants to merge 3 commits intoelastic:mainfrom
antonbc:refactor/accordion-function-component

antonbc commented Apr 4, 2026 •

edited

Loading

Uh oh!

cla-checker-service bot commented Apr 4, 2026 •

edited

Loading

Uh oh!

github-actions bot commented Apr 4, 2026

Uh oh!

github-actions bot commented Apr 4, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

weronikaolejniczak Apr 7, 2026

Uh oh!

Copilot AI Apr 4, 2026

Uh oh!

weronikaolejniczak Apr 7, 2026

Uh oh!

Uh oh!

weronikaolejniczak Apr 7, 2026

Uh oh!

elasticmachine commented Apr 7, 2026

Uh oh!

elasticmachine commented Apr 7, 2026

Uh oh!

weronikaolejniczak Apr 7, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

	export const EuiAccordionClass: FunctionComponent<EuiAccordionProps> = ({
	export const EuiAccordion: FunctionComponent<EuiAccordionProps> = ({

Conversation

antonbc commented Apr 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

API Changes

Screenshots

Impact Assessment

Release Readiness

QA instructions for reviewer

Checklist before marking Ready for Review

Reviewer checklist

Uh oh!

cla-checker-service bot commented Apr 4, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Apr 4, 2026

Uh oh!

github-actions bot commented Apr 4, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Apr 4, 2026

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

weronikaolejniczak Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Apr 7, 2026

💚 Build Succeeded

Uh oh!

elasticmachine commented Apr 7, 2026

💚 Build Succeeded

Uh oh!

weronikaolejniczak Apr 7, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

antonbc commented Apr 4, 2026 •

edited

Loading

cla-checker-service bot commented Apr 4, 2026 •

edited

Loading