[EuiListGroup] Add external prop

[cauemarcondes]

Like on EuiLink component that has an external property to show an icon which indicates that a link will open on a new window/tab I'd like to add the same property for the EuiListGroup.

The listItems property could receive something like:

{
    iconType: ICON_NAME,
    label: LABEL,
    href: URL,
    external: true
  },

I'll use it on the Observability Overview page, to show the user that some links open on a new tab. elastic/kibana#74223

[cchaos]

I'm not quite sure how this would then interact with the possible extraAction prop which adds a node to the right of the list item. Also, looking at your example, they seem to be referencing the "Read full story" link at the bottom the the article summaries. Could you not just use a regular EuiLink there?

[cauemarcondes]

I'm not quite sure how this would then interact with the possible extraAction prop which adds a node to the right of the list item. Also, looking at your example, they seem to be referencing the "Read full story" link at the bottom the the article summaries. Could you not just use a regular EuiLink there?

@cchaos I'm sorry I should have been more clear. I want to show the external icon on the Resources items and on the read full story.

[cchaos]

Ahh I see. I think you still have an issue though where links/buttons should not be sandwiched between icons. Contextually, looking at this list of "Resources" I would fully expect them to take me outside of the current product. I do not think it is necessary to indicate external. It's similar to how Kibana handles it's Help menu:

The icons purely indicate where the link will take them, but adding the external popout logo to every single link will just add noise making it harder for users to scan the list.

[cauemarcondes]

It does make sense @cchaos , @formgeist what do you think?

[formgeist]

@cchaos Thanks for the feedback on this. I definitely agree with your point about the shear icon overload of having both left and right icons in a list of links. The main concern I've heard from internal folks (mostly) is that we're not indicating when we're opening the link in the same or in a new window. We tend to open internal Kibana links in the same window and external links in a new window. The external icon on the EuiLink does indicate this, I wonder if we perhaps need to have it appear on hover or something similar, which doesn't create consistent visual noise in the list, but only when the user is interacting with the link. Thoughts?

[cchaos]

I do really like the on hover/focus idea but we'd have to be careful about the space we supply for it. For instance, if the link is within a paragraph of text how do we handle the appearance of an icon within?

There's also still a lot to consider with the EuiListGroup (the original ask) though because of the extraAction. I'm open to suggestions on how to make this work.

[formgeist]

@cchaos Very valid points on the general behavior of the external link prop and an example where hover won't work all that great. I'll look into some solutions around adding the popout indication on links, even in cases like EuiListGroup with extraAction enabled.

[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.