[EuiDelayHide] Migrate from class to function component - #9919
[EuiDelayHide] Migrate from class to function component#9919AmirmAfzal wants to merge 3 commits into
Conversation
|
💚 CLA has been signed |
|
👋 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
Bot
added
the
community contribution
|
👋 Just signed the CLA. Could a maintainer approve the workflow run and kick off the Buildkite build when convenient? Thanks! |
There was a problem hiding this comment.
This changelog is not needed because refactoring to a function component is an internal change, not consumer-facing. We can drop it 😄
|
buildkite test this |
There was a problem hiding this comment.
Pull request overview
Migrates EuiDelayHide (in packages/eui) from a React class component to a function component using hooks, while preserving the existing delay-to-hide behavior and default prop values (now expressed via parameter defaults and optional TS props).
Changes:
- Refactored lifecycle/state logic to
useState,useRef, anduseEffect, keeping the existing single in-flight timer behavior and unmount cleanup. - Updated TypeScript props so
hideandminimumDurationare optional (with defaultsfalseand1000). - Added an upcoming changelog entry documenting the conversion.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated no comments.
| File | Description |
|---|---|
| packages/eui/src/components/delay_hide/delay_hide.tsx | Replaces class lifecycle methods with hooks while keeping the same render/timer semantics and defaults. |
| packages/eui/changelogs/upcoming/9919.md | Adds a changelog entry noting the component conversion. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
44 visual difference(s) found - expand to review, then click Approve visual changes to update baselineseuiicon (2 differences)
euicombobox (9 differences)
euiform (1 difference)
euiinlineedittext (2 differences)
euiflexgrid (1 difference)
euiflyout (14 differences)
euiheader (4 differences)
euicollapsiblenav (4 differences)
euicontextmenu (1 difference)
euikeypadmenu (1 difference)
euidatagrid (4 differences)
euitable (1 difference)
|
|
buildkite test this |
💚 Build Succeeded
History
|
💚 Build Succeeded
History
|
|
Could you also make sure this component works with StrictMode? 🙏🏻 |
Summary
EuiDelayHidefrom a class component to a function component using hooks.getDerivedStateFromProps,componentDidMount,componentDidUpdate,componentWillUnmount) withuseState,useRef, anduseEffect. Kept the same delay-timing logic, including the single in-flight timer guard and the unmount cleanup.API Changes
false(previously required withdefaultProps)1000(previously required withdefaultProps)Screenshots
N/A — no visual changes; this is an internal implementation refactor.
Impact Assessment
No consumer-facing behavior changes. The public API surface is identical at runtime; only the TypeScript types for
hideandminimumDurationbecame optional (matching their existingdefaultProps).Impact level: 🟢 None
Release Readiness
Documentation:No docs page changes neededFigma:No design changesMigration guide:Not a breaking changeAdoption planNot a new featureQA instructions for reviewer
EuiDelayHidestory in Storybookhidebecomestruehideback tofalseimmediately shows the content againminimumDuration(e.g. 2000) is respectedChecklist before marking Ready for Review
QA: Tested light/dark modes, high contrast, mobile, browsersNo visual changes; unit tests cover the timing behaviorQA: Tested in CodeSandbox and KibanaInternal refactor; unit tests + Storybook usedTests: Added/updated Jest, Cypress, and VRTExisting tests unchanged and passing (13/13)Reviewer checklist