elastic
[EuiListGroupItem] Support multiple actions/context menu
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)
There is a known workaround (sandbox) but it's not aligned with designs and has a11y issues. That's why I marked it as High prio.
The solution is straightforward and it's been approved by @ek-so. We'd render a button + popover with EuiContextMenu in place of the action if more than one action is passed. It will require an update to the documentation. That's why I'm marking it as Small and 2 sp. Up to discussion within the team.
Likely a breaking change that would affect consumers:
An acceptable migration would be putting the singular actions into an array: actions={[]}.
Likely a breaking change that would affect consumers:
I'm guessing we could introduce a new actions prop and deprecate the extraAction prop in order to avoid a breaking change.
Hey @stephmilovic, just wanted to follow up with you. Did you manage to implement something on your side? Do you still have a need for this?