Select: limit text length with ellipsis when it exceeds the maximum
Open, Stalled, MediumPublic
Actions

Assigned To

None

Authored By

	bmartinezcalvo
	Sep 28 2023, 6:16 PM

Description

Background

NOTE: We should not start this task until T364928: [Spike] Investigate ellipsis truncation in Codex components using Tooltip is completed.

In the current Select in Codex, the text wraps to a second line when the text exceeds the maximum of the first line. As decided in T359636: Define an approach to content overflow in Codex components, Select and Button will be maximum of one text line and will use an ellipsis in case the text exceeds. The entire text will be visible using a Tooltip.


Current implementation	Proposal

Previous implementations

Codex demo: Select in Codex
OOUI: Select in OOUI [does not provide truncation support]

Design spec

Component spec sheet

Open questions

Our overflow guidelines for truncation with ellipsis state “Include tooltip support for truncated text, enabling users to access full”.

Tooltip is limited to pointer devices. We should expand the guidelines here.

Acceptance criteria (or Done)

Design

Design the Figma spec sheet and add it in this task
Update the component in the Codex Figma library. This step will be done by a DST member.
Include this maximum limitation in the Select Guidelines

Code

Fix Select component in Codex
- Ensure that full text is available as tooltip and aria-label(?)

Details

Related Changes in Gerrit:

	Subject	Repo	Branch	Lines +/-
	Select: Limit text length with ellipsis	design/codex	main	+7 -2

Customize query in gerrit

Related Objects
Search...

Status	Subtype	Assigned	Task
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
Resolved		bmartinezcalvo	T359636 Define an approach to content overflow in Codex components
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.Sep 28 2023, 6:16 PM

Restricted Application added a subscriber: Aklapper. · View Herald TranscriptSep 28 2023, 6:16 PM

Volker_E moved this task from Backlog to Proposed Component Updates on the Codex board.Sep 29 2023, 7:54 AM

CCiufo-WMF triaged this task as Medium priority.Sep 29 2023, 5:48 PM

CCiufo-WMF moved this task from Inbox to Design Upcoming on the Design-System-Team board.

The Select Figma component is already set to be maximum one line text, so this task is ready to be fixed in Codex. @CCiufo-WMF moving it to Up next to work on it on future sprints.

bmartinezcalvo updated the task description. (Show Details)Mar 7 2024, 5:22 PM

I think we need to discuss this in the more general context of T358948 and T337865. I was planning to create an umbrella task or Epic to tackle this. We should think about truncation holistically instead of component by component.

CCiufo-WMF mentioned this in T359636: Define an approach to content overflow in Codex components.Mar 8 2024, 3:35 PM

CCiufo-WMF moved this task from Up Next to Backlog on the Design-System-Team board.

This task is pending guidelines from T359636.

bmartinezcalvo updated the task description. (Show Details)May 13 2024, 3:58 PM

bmartinezcalvo closed subtask T359636: Define an approach to content overflow in Codex components as Resolved.May 13 2024, 4:52 PM

bmartinezcalvo reopened subtask T359636: Define an approach to content overflow in Codex components as Open.

CCiufo-WMF closed subtask T359636: Define an approach to content overflow in Codex components as Resolved.May 13 2024, 6:26 PM

CCiufo-WMF mentioned this in T364928: [Spike] Investigate ellipsis truncation in Codex components using Tooltip.May 14 2024, 9:08 PM

CCiufo-WMF added a subtask: T364928: [Spike] Investigate ellipsis truncation in Codex components using Tooltip.

matmarex subscribed.Jun 4 2024, 9:59 PM

Change #1038909 had a related patch set uploaded (by Bartosz Dziewoński; author: Bartosz Dziewoński):

[design/codex@main] Select: Limit text length with ellipsis

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

gerritbot added a project: Patch-For-Review.Jun 4 2024, 9:59 PM

I see one usability concern with ellipsis in Select as is. You can't see what the full label of the Select is anywhere anymore. I'm not convinced that we're taking away a good boundary for designers/developers to actually think about a proper (internationalized) label firsthand. @bmartinezcalvo

Volker_E updated the task description. (Show Details)Jun 5 2024, 7:06 AM

In addition to above comment, while AT users still have access to the full label, touch screen users wouldn't with a browser default tooltip only solution.

In T347621#9862380, @Volker_E wrote:

I see one usability concern with ellipsis in Select as is. You can't see what the full label of the Select is anywhere anymore.

You can see the full label of the selected option inside the dropdown.

You can't see the full original label of the Select, but you already can't see it after selecting any option (it goes away irreversibly), so that label can't be used for anything important anyway. We shouldn't bother adding a tooltip for it. Real labels already need to use a Field wrapper.

CCiufo-WMF added a parent task: T366683: Select: label is misaligned if font size is 14px equivalent.Jul 5 2024, 4:20 PM

bmartinezcalvo updated the task description. (Show Details)Jan 20 2025, 5:41 PM

CCiufo-WMF moved this task from Proposed Component Updates to Backlog on the Codex board.May 30 2025, 6:51 PM

	F37834475: Captura de pantalla 2023-09-28 a las 19.45.59.png
	Sep 28 2023, 6:16 PM

	F37834474: Captura de pantalla 2023-09-28 a las 19.44.38.png
	Sep 28 2023, 6:16 PM

Select: limit text length with ellipsis when it exceeds the maximumOpen, Stalled, MediumPublicActions