InfoChip and InputChip: use Tooltip to show the entire label when the chip uses ellipsis
Closed, ResolvedPublicSpike
Actions

Assigned To

Authored By

	bmartinezcalvo
	Mar 20 2025, 10:55 AM

Description

Background goal

When the text exceeds the available space in an InfoChip or InputChip, it will display ellipses to indicate that it is truncated. Since text can become quite lengthy, particularly in an InputChip within a ChipInput on a mobile screen, a Tooltip can be used to show the full label. This will allow users to view the entire text when necessary.

Captura de pantalla 2025-03-20 a las 11.54.59.png (262×756 px, 24 KB)

Considerations

On touchable screens, the Tooltip will be shown by long pressing on the chip.

Acceptance criteria (or Done)

Display a Tooltip to show the entire label of chips when they use ellipsis in:
- InfoChip
- InputChip

Details

Related Changes in Gerrit:

Subject	Repo	Branch	Lines +/-
Tooltip, InfoChip, InputChip: introduce useOverflowTooltip composable	design/codex	main	+64 -45
InfoChip, InputChip: add tooltip to display entire label	design/codex	main	+102 -9
Update Codex from v2.0.0 to v2.1.0	mediawiki/core	master	+2 K -1 K
docs: Minor followup patch to I3a584dee62c96bfe05bf5b94cb2cf00659af16b7 to add details to AUTHORS.txt	design/codex	main	+1 -0

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
Open		None	T311757 ButtonGroup, ToggleButtonGroup: Add full-width prop
Open		bmartinezcalvo	T310158 Button, ButtonGroup: solve max-width and text issues
Stalled		None	T337865 Buttons: limit text length with ellipsis when it exceeds the maximum
Open		None	T366683 Select: label is misaligned if font size is 14px equivalent
Stalled		None	T347621 Select: limit text length with ellipsis when it exceeds the maximum
Duplicate	BUG REPORT	None	T373747 ChipInput: Chips with long aliases overflow from the border input box
Open	Spike	None	T364928 [Spike] Investigate ellipsis truncation in Codex components using Tooltip
Resolved	Spike	theprotonade	T389475 InfoChip and InputChip: use Tooltip to show the entire label when the chip uses ellipsis

Event Timeline

bmartinezcalvo created this task.Mar 20 2025, 10:55 AM

bmartinezcalvo triaged this task as Medium priority.

bmartinezcalvo mentioned this in T388857: InfoChip, InputChip: Update max-width to @size-full.Mar 20 2025, 11:04 AM

CCiufo-WMF moved this task from Inbox to Needs Refinement on the Design-System-Team board.Mar 20 2025, 3:22 PM

DTorsani-WMF added a project: good first task.May 2 2025, 9:06 AM

Thank you for tagging this task with good first task for Wikimedia newcomers!

Newcomers often may not be aware of things that may seem obvious to seasoned contributors, so please take a moment to reflect on how this task might look to somebody who has never contributed to Wikimedia projects.

A good first task is a self-contained, non-controversial task with a clear approach. It should be well-described with pointers to help a completely new contributor, for example it should clearly pointed to the codebase URL and provide clear steps to help a contributor get setup for success. We've included some guidelines at https://phabricator.wikimedia.org/tag/good_first_task/ !

Thank you for helping us drive new contributions to our projects <3

theprotonade claimed this task.May 30 2025, 8:20 AM

Change #1152291 had a related patch set uploaded (by Theprotonade; author: Theprotonade):

[design/codex@main] InfoChip, InputChip: add tooltip to display entire label

https://gerrit.wikimedia.org/r/1152291

gerritbot added a project: Patch-For-Review.May 30 2025, 3:29 PM

Punith.nyk subscribed.Jun 2 2025, 3:18 PM

This comment was removed by Punith.nyk.

CCiufo-WMF moved this task from Backlog to Upcoming on the Codex board.Jun 2 2025, 4:46 PM

CCiufo-WMF lowered the priority of this task from Medium to Low.Jun 2 2025, 5:28 PM

Out of engineering enclave: I think it's useful to have the overflow behaviour as general approach (and not opt-in/optional).

egardner moved this task from Upcoming to Code Review on the Codex board.Jun 2 2025, 8:15 PM

egardner moved this task from Code Review to In Progress on the Codex board.

egardner moved this task from In Progress to Code Review on the Codex board.Jun 9 2025, 10:54 PM

egardner moved this task from Code Review to Pending Release on the Codex board.Jun 9 2025, 11:16 PM

Change #1152291 merged by jenkins-bot:

[design/codex@main] InfoChip, InputChip: add tooltip to display entire label

https://gerrit.wikimedia.org/r/1152291

Maintenance_bot removed a project: Patch-For-Review.Jun 9 2025, 11:30 PM

Change #1154920 had a related patch set uploaded (by Theprotonade; author: Theprotonade):

[design/codex@main] docs: Minor followup patch to I3a584dee62c96bfe05bf5b94cb2cf00659af16b7 to add details to AUTHORS.txt

https://gerrit.wikimedia.org/r/1154920

gerritbot added a project: Patch-For-Review.Jun 10 2025, 5:06 AM

Change #1154920 merged by jenkins-bot:

[design/codex@main] docs: Minor followup patch to I3a584dee62c96bfe05bf5b94cb2cf00659af16b7 to add details to AUTHORS.txt

https://gerrit.wikimedia.org/r/1154920

Maintenance_bot removed a project: Patch-For-Review.Jun 10 2025, 6:30 AM

Change #1155734 had a related patch set uploaded (by Bernard Wang; author: Bernard Wang):

[mediawiki/core@master] Update Codex from v2.0.0 to v2.1.0

https://gerrit.wikimedia.org/r/1155734

gerritbot added a project: Patch-For-Review.Jun 11 2025, 4:52 PM

Test wiki created on Patch demo by BWang (WMF) using patch(es) linked to this task:
https://patchdemo.wmcloud.org/wikis/25f905bb47/w/

Change #1155734 merged by jenkins-bot:

[mediawiki/core@master] Update Codex from v2.0.0 to v2.1.0

https://gerrit.wikimedia.org/r/1155734

Maintenance_bot removed a project: Patch-For-Review.Jun 11 2025, 8:32 PM

bmartinezcalvo updated the task description. (Show Details)Jun 12 2025, 10:10 AM

egardner closed this task as Resolved.Jun 12 2025, 8:48 PM

Change #1156480 had a related patch set uploaded (by Eric Gardner; author: Eric Gardner):

[design/codex@main] Tooltip, InfoChip, InputChip: introduce useOverflowTooltip composable

https://gerrit.wikimedia.org/r/1156480

gerritbot added a project: Patch-For-Review.Jun 12 2025, 10:58 PM

Test wiki on Patch demo by BWang (WMF) using patch(es) linked to this task was deleted:

~~https://patchdemo.wmcloud.org//wikis/25f905bb47/w/~~

	F58878170: Captura de pantalla 2025-03-20 a las 11.54.59.png
	Mar 20 2025, 10:55 AM

InfoChip and InputChip: use Tooltip to show the entire label when the chip uses ellipsisClosed, ResolvedPublicSpikeActions