[EuiLink, EuiContextMenu] `external` icon usage semantics
- Dominant language
- TypeScript
- Stars
- 6.4k
- Forks
- 911
- Avg merge
- 2d 11h
- Merged PRs (30d)
- 65
Description
**Requestor**
@MichaelMarcialis
**Problem Statement**
I've got a super nitpicky semantic issue for ya'll regarding a behavior I noticed in `EuiLink` and `EuiContextMenu` (and possibly others). It appears that the `external` icon is automatically appended to any item that has a `target="_blank"`.
In my experience, the `external` icon is only meant to indicate that an action will take a user away from the current site/app. It has nothing to do with whether or not it will open in a new browser tab. While it's correct that most external links do tend to open in new tab, it doesn't mean that opening a new tab is always an external link.
**Proposed Solution**
Should we change the behavior in these components so that the `external` icon is only appended when it's actually taking users to an external site/app? Whether this is something that can be automatically detected or needs to be manually managed, I leave it to ya'll to decide.
Per suggestion by @mgadewoll:
> The general question remains, yes, do we want to distinguish this further, "true" external vs new tab.
:thought_balloon: If so, I guess we should likely decouple `target="_blank"` and `external` and have consumers control it via the `external` prop only, because the components are generic and consumers have the context of what an external site would be for the implementation usage.
**Use Case**
No specific use case; just a general observation.
**Value / Impact**
The most important reason to address this is because we're not currently giving users correct expectations when the `external` icon is applied. We may be just navigating those users to a different page in the same site/app, but just in a new browser tab. It also ends up adding a lot of icons to links/buttons that many not actually need them, which creates visual noise.
**Urgency**
Just a nice-to-have. Not terribly urgent, IMO.
**Do alternatives or workarounds exist?**
From @weronikaolejniczak:
> Fyi you can pass `external={false}` as a workaround. I know it's not ideal because this issue affects all `EuiContextMenu` (and other lists), just sharing a possibility...
**Related code or customizations**
N/A
**Additional context (Optional)**
N/A
**Designs or Specs (Optional)**
N/A
Contributor guide
Research direction
Locate the EuiLink and EuiContextMenu implementations and their tests, then trace how target="_blank" and the external prop affect the icon. Confirm the intended distinction between same-site links opened in a new tab and genuinely external destinations, and add coverage showing that the external icon follows that distinction.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react, typescript
- Domain
- frontend
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 55/100