elastic / elastic/eui

[EuiContextMenuPanel] Migrate from class to function component

Open
#9,483 3 comments 0 reactions 0 assignees View on GitHub
help wanted low hanging fruit
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

`EuiContextMenuPanel` renders an individual panel within `EuiContextMenu`, handling focus trapping, keyboard navigation, and slide-in/out animations.

- **File:** `components/context_menu/context_menu_panel.tsx`
- **Class size:** 288 lines
- **State:** Constructor-initialized (focus, transition state)
- **Lifecycle:** `getDerivedStateFromProps`, `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`

**Migration notes:**

Full lifecycle suite. Focus management and panel transition animations are tightly coupled to lifecycle timing. `componentDidMount` sets initial focus, `componentDidUpdate` handles panel transitions, `componentWillUnmount` cleans up. Needs careful attention to animation timing.

**Acceptance criteria:**

- [ ] Convert to function component with hooks
- [ ] Maintain panel transition animations
- [ ] Maintain focus management (initial focus, arrow key navigation)
- [ ] All existing tests pass
- [ ] Manual verification of nested context menu navigation

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.