[EuiListGroupItem] Make the extraAction prop less restrictive

[ryankeairns]

During a PR review, we came upon a case in Lens where the design necessitates placing a help icon/tooltip inside the list item. The design is akin to the layout provided by the extraAction prop on EuiListGroupItem, but in this case they don't need a button, per se. Specifically, an EuiIconTip in the position of the extraAction would seemingly do the trick.

My thought would be to make the extraAction prop less restrictive, allowing for other content such as (in this case) an EuiIconTip

As an aside, the List Group component allows a 'global' tooltip that essentially serves truncated list item text which is a different use case.

For reference, there is the comment thread on the PR:
elastic/kibana#83437 (comment)

...and a peek at the desired layout:

[cchaos]

Quick question. Do you think this info icon should be that far away from the text/label that it's concerned with? When I look at this screenshot, the proximity of the icon is much closer to that of the next column and therefore might have some association confusion.

[ryankeairns]

I think where it looked most odd was when several of these were being displayed as you end up with that jagged look.

That said, I don't how frequently it would occur that multiple of these are unvailable. It's a valid question, and I can see this going the way of "its fine to just let it slide over". I can follow up with that question.

[github-actions]

👋 Hey there. This issue hasn't had any activity for 180 days. We'll automatically close it if that trend continues for another week. If you feel this issue is still valid and needs attention please let us know with a comment.

[github-actions]

❌ We're automatically closing this issue due to lack of activity. Please comment if you feel this was done in error.

[sscoville-expr]

Hello there. I know this is closed, but I'm wondering if there's been any advancement in this request? I also would like the extraAction prop to be a bit more open-minded. In my case, I'd be using for a popover effect. Can this issue be opened back up or does a new one need to be created?

[miukimiu]

Hi @sscoville-expr,

We didn't follow up on this issue because the icon tip could be positioned next to the label. The label accepts a React node.

Do you have a design of what you want to achieve? So we can recommend if there's a better component to your use case. Or, if we think your use case can benefit more EUI consumers, we can reopen the issue.

[sscoville-expr]

Sure thing. Here's the example I'm referring to: [image: image.png] I would like to utilize the "extraAction" to display an ellipsis icon wrapped in EuiPopover. The popover would be used to display another component. Let me know if you need any more information. Thanks in advance for taking the time to look into this.

[bujowskis]

Hi, it seems the issue of @sscoville-expr has not been resolved yet. It would be a nice feature, somewhat similar to how we can use the render() function in EuiTable. Ran into this issue working on a project almost 1 hear after the most recent comment under this thread, I'd say it's worth looking into it. Will try to implement this if it prevails, I;m not experienced enough yet tho.

Let me know if someone wants more dets