elastic / elastic/eui

[EuiLink, EuiContextMenu] `external` icon usage semantics

Open
#9,786 0 comments 0 reactions 0 assignees View on GitHub
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

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.