Configurable truncation options for text component

[shinytoyrobots]

Area

UI Components

The problem

The default text truncation is a trailing ellipse. This doesn't account for all potential use cases (e.g. content that has important data at the end of sentence as well as the start).

The solution

We may wish for alternative options (e.g. a "middle" ellipse for content that has important info at both start and finish). We should provide some configurability here for the consumer to define the type of truncation (while defaulting to trailing ellipse).

Alternatives and examples

https://stackoverflow.com/questions/831552/ellipsis-in-the-middle-of-a-text-mac-style

https://caniuse.com/css-line-clamp

Are you a JPMorgan Chase & Co. employee?

• [X] I am an employee of JPMorgan Chase & Co.

[shinytoyrobots]

From @jeanlaleuf's comments on @ivan-calderon demo in design check-in today. Also, @mikearildbrown - are there any content standards around truncation that we should be aware of?

[mikearildbrown]

@shinytoyrobots our content guide recommends an ellipsis with a space both before and after, so those end and middle ellipses should have spaces either side.

I'll let you know if anything else comes to mind/if I find any other guidelines that may be relevant here

[ivan-calderon]

Just following up on yesterday's comments by @jeanlaleuf. For the List component, I confirmed with @Fercas123 and @bhoppers2008 that:

• "We are using the text component inside of the List for the text truncation"
• "the listitemnext is detecting if it is overflown, and if so it gets wrapped in the tooltip"
• "the screen reader will read the full string (not the truncated string), when the item has focus"