Introduce Truncate

[Jan-Eimertenbrink]

Description

We will eventually face the issue of extremely long titles appearing in the ContentHeader in mStudio. From an accessibility perspective, text should always remain fully readable. However, long titles may cause the layout to break and extend beyond the intended blue wave area.

To prevent this, I propose introducing a Truncate option within our DesignSystem. This would allow titles to visually shorten with an ellipsis when necessary, helping maintain layout stability.

Accessibility Considerations

Truncation should be used carefully and only when it does not prevent users from accessing the full information.
While truncating text with an ellipsis can exclude keyboard users from reading the full content via hover tooltips, the approach can still be considered accessible if keyboard users have another way to access the complete information.

Example from the current mStudio:

• The title can be truncated in the ContentHeader.
• The full title remains accessible through the LabeledValues on the detail page.

This ensures that all users can still identify the corresponding element while keeping the layout visually consistent.

Inspiration

We can use GitHub’s DesignSystem Primer as a reference, as their style guide provides a comprehensive and well-documented approach to handling text truncation and accessibility.

The introduction of this feature could be postponed until we start refactoring the navigation in mStudio.

[Jan-Eimertenbrink]

We have identified another use case. When displaying a DNS record in a table or list, a TXT record can contain more than 2000 characters, which makes the table layout look cluttered and hard to read.
In most cases, only the beginning of the record is needed to distinguish one TXT record from another. Therefore, the record can be truncated in the table view and displayed or copied in full on the detail page.

The Flow team has therefore decided to implement truncation in the near future.
In the implementation, it should be possible to truncate either at the end or in the middle of the text.
A potential use case for truncating in the middle would be the display of directory paths, where it is important to see both the beginning and the end of the path.