Page MenuHomePhabricator

[Spike] Investigate ellipsis truncation in Codex components using Tooltip
Open, MediumPublicSpike

Description

In T359636, one of the approaches to handle content overflow is to use ellipses when it is important to maintain a consistent component height. This will be needed for Buttons (T337865), Selects (T347621), and other components like ChipInputs. The suggested method for providing the full text content to users is through a Tooltip.

We need to ensure that we can reliably automatically apply ellipses truncation in these situations. We also need to ensure using a Tooltip to display the full Button label does not present any accessibility issues, particularly on touchable screens where the hover is not possible.

There has been feedback in T337865#9861972 that the content overflow approach should avoid using ellipses in Buttons, which we can evaluate once we have a working version.

Acceptance Criteria

  • Determine if ellipsis truncation can be reliably used for truncation in Codex components
  • Determine if a Tooltip can reliably be rendered when text is truncated using an ellipsis, including on touch devices
  • Decide if using ellipses for Button labels is still the best UX

Related Objects

Event Timeline

CCiufo-WMF triaged this task as Medium priority.
CCiufo-WMF renamed this task from [Spike] Investigate support for ellipsis truncation of content in Codex component to [Spike] Investigate ellipsis truncation in Codex components using Tooltip.Jul 8 2024, 4:30 PM
CCiufo-WMF set the point value for this task to 5.Jul 8 2024, 6:05 PM
CCiufo-WMF removed the point value 5 for this task.Aug 23 2024, 7:44 PM
CCiufo-WMF moved this task from Up Next to Needs Refinement on the Design-System-Team board.