Devographics / Devographics/Monorepo
Entity chips UI improvement
- 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:
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:
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:
The baseline icon shows a different tooltip, which also violates expectations, as the chip communicates that this is a single target:
## 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:
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