Background goal
Sometimes the content (usually text) within a component overflows (exceeds) the component's maximum width, whether that component has a fixed max width or is at the limit of its parent container.
There is already reported issues in Codex with Selects (T347621) and Buttons (T337865), but this problem applies to many other components such as Comboboxes, Menus, Tabs, InfoChips, and more.
There are different ways to handle content overflow, such as text truncation or wrapping. There is clearly a need to provide guidelines on how overflow should be handled and provide sensible defaults in Codex components that conform to the guidelines. It's possible that the guidelines would be different between components.
Approach
Depending on whether there is overflow in the text or elements, the approach is to use the following solutions for managing content overflow:
- Wrapping: it will be used as the base solution to content overflow, enabling text to extend onto multiple lines when it doesn’t affect the fixed height of the component.
- Ellipsis: it will be used to maintain consistency when component height is essential (e.g. Button, Select) and to prevent disparities in the heights of element groups (e.g. group of chips within a ChipInput). A Tooltip will be used to display the entire text when the ellipsis is used.
- Fade effect: it will be reserved to indicate that a group of elements can be scrolled (e.g. Tabs). Fade effects will not be used for text truncation, as ellipsis will serve this purpose instead.
| This approach has been documented in these Content overflow guidelines. |
The following components need to be updated to align with this new approach:
- Select T347621: Select: limit text length with ellipsis when it exceeds the maximum
- Button T337865: Buttons: limit text length with ellipsis when it exceeds the maximum
Acceptance Criteria
- Provide best practices in the guidelines for how to deal with overflowing text.
- Identify which components are affected by possible overflowing content.
Future tasks
- T364928: [Spike] Investigate support for ellipsis truncation of content in Codex component
- T364611: Content overflow guidelines: include them in Codex
- T347621: Select: limit text length with ellipsis when it exceeds the maximum
- T337865: Buttons: limit text length with ellipsis when it exceeds the maximum