elastic / elastic/eui

[EuiListGroupItem] Support multiple actions/context menu

Open
#8,958 5 comments 0 reactions 0 assignees View on GitHub
request
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 11h
Merged PRs (30d)
65

Description

**Problem Statement**
The Security Assistant's conversation side menu currently uses `EuiListGroup` / `EuiListGroupItem` to display items, with the `extraAction` prop used to show a delete button. Design has requested that this be updated to use a context menu with multiple actions. The current `EuiListGroupItem` API does not appear to support multiple actions directly.

**Proposed Solution**
Enhance `EuiListGroupItem` to support multiple actions in place of the single `extraAction` prop, potentially by allowing an array of actions or a context menu trigger. This would allow more flexibility for item-specific actions beyond just delete.

**Use Case**
Security Assistant → Conversation side menu.
The menu items represent saved conversations. Users should be able to open a context menu for each item to choose from multiple actions like copy url, duplicate, delete, etc.

**Value / Impact**
- Improves usability by grouping actions in a context menu instead of exposing a single action.
- Reduces visual clutter and makes the interface more scalable as more actions are added.
- Benefits both end users (cleaner UI, easier access to actions) and developers (centralized implementation using EUI components).

**Urgency**
Moderate — required to meet design changes for the Security Assistant. Without this, we may need to implement a workaround that duplicates functionality outside of EUI. I'd like to use this in 9.2, but will implement by own functionality for it if needed in the meantime.

**Do alternatives or workarounds exist?**
We could manually add an `EuiContextMenu` next to each list item.

**Related code or customizations**
Current implementation uses `extraAction` to render a delete button in each `EuiListGroupItem` for the conversation side menu.

**Do alternatives or workarounds exist?**

**Related code or customizations**

**Additional context (Optional)**

**Designs or Specs (Optional)**

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.