Background goal
The way in which text truncation is handled by Codex buttons doesn't make them fully ready for all scenarios. Particularly those involving especially long translations in narrow screens. In said cases, Codex buttons (as their OOUI ancestors) will overflow their layout.
As decided in T359636: Define an approach to content overflow in Codex components, Button and Select will be a maximum of one text line and use ellipsis truncation in case the text exceeds. The Button's entire text will appear as a Tooltip when hovering the Button.
Considerations
- This issue originally came from a OOUI task (T165870#8879237): It is not only a matter of removing the property white-space: nowrap; as it appears that, in order to bypass the no-wrap behavior of the OOUI button, we'd have to write separate style modules each time. (see T165870 and T165870#8891653 for further context). Is there any way to fix this also in OOUI in a centralized way?
- In case we provide a wrapping property, then we should make sure to document the cases in which this prop would be useful, and to indicate that the primary recommendation is to keep buttons' text clear, concise and action-oriented.
Acceptance criteria (or Done)
- Define the best approach for content overflow in Codex T359636
Design
- Update the Button component using ellipsis truncation in the Codex Figma library
- Include maximum limitations in the Button Guidelines
Code
- Update the Button component in Codex using ellipsis truncation