Devographics / Devographics/Monorepo

Entity chips UI improvement

Open
#535 2 comments 0 reactions 0 assignees View on GitHub
Dominant language
TypeScript
Stars
178
Forks
55
Avg merge
1m
Merged PRs (30d)
2

Description

## Problems

Currently, the "chips" are so visually distinct that it's jarring. Consider the following chart:

Image

This might have been ok if the big difference in styling communicated a meaningful UI concept. However, the concept being communicated is largely an implementation detail: "this thing has an entity associated with it". Yes, this means it sometimes comes with additional metadata, but not always, which leaves the user wondering what they might be missing.

And when all the metadata is present, it's shown in a huge tooltip, so large it requires scrolling:

Image

And because it's so large, it's only shown on click, which reduces it's usefulness and causes surprise (tooltips shown on click is not a common interaction), with a meeker description tooltip shown on hover:

Image

The baseline icon shows a different tooltip, which also violates expectations, as the chip communicates that this is a single target:

Image

## Potential solution

Split the tooltip info into three separate tooltips, which are displayed on hover:
1. Hovering on label → Description + code snippet (if any)
2. Hovering on baseline icon → Baseline description + compat info (if any)
3. Hovering on link icon → Resources, if any (if none, no link icon is shown).

Mockup:
Image

Contributor guide

No contributing guide indexed for this repository

Research direction

No file or test is named. Start by locating the entity chip implementation and its current label, baseline, link, and tooltip behavior, then compare it with the issue's mockup. Done means the proposed separate hover tooltips are implemented and the link icon is omitted when no resources exist.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
design, frontend
Issue type
Feature
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.