thunderbird / thunderbird/services-ui

Component to handle truncating long names

Open
#325 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement
Dominant language
Vue
Stars
9
Forks
1
Avg merge
6h 58m
Merged PRs (30d)
6

Description

Is your feature request related to a problem? Please describe.

The problem is that sometimes text to display is longer than the space allotted for it in a design

Describe the solution you'd like

This would be useful in places like the "current sign-in" table where we have an long app or device name.

To keep from breaking designs, we should truncate long names with an ellipsis. Then for accessibility, Show the full name on hover, keyboard focus, or tap. Dismiss it with Escape, by tapping outside, or when focus moves away.

Describe alternatives you've considered

One-off solution was considered, but this will be a recurring concerns a centralized services-ui component is better.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by locating the current sign-in table and existing shared components in services-ui, then review their conventions for accessibility and interaction behavior. Done means a reusable component truncates long names with an ellipsis, exposes the full name on hover, keyboard focus, or tap, and dismisses it on Escape, outside tap, or focus change.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
frontend
Issue type
Feature
Difficulty
3/5
Estimated time
1-2 days
Activity status
Active
Clarity
Mostly clear
Newbie friendliness
68/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.