new: text-truncate

[Berjesty]

Description

• Currently in TDS Core we don't have a pattern to truncate long names. For the new Bill method notifications we have email addresses with checkboxes and require a TDS pattern to follow when email addresses are too long. Please see the design references below.

Recommendation

• We can use 3 dots approach

Designs

• Screenshots

• Sketch file

Meta

• TDS version: vX.Y.Z
• Willing to develop solution: Yes/No
• Has workaround: Yes/No
• High impact: Yes/No

[theetrain]

Hi @Berjesty has this been design approved? Also, can you describe the pattern in more detail?

• When would you truncate emails, all the time, or only in the context of checkbox items?

[Berjesty]

Currently, there is no pattern in TDS to support this. We are in discovery phase exploring design options to improve CX. It can be discussed in our Design DPA meetup.

[lucylist]

hey @Berjesty i know you guys are testing this. Please keep us informed as to which direction you guys go with so we can implement this into TDS! In the meantime if you're OK with it, we'll put this ticket on blocked status.

[lucylist]

hey @Berjesty just moving the conversation on slack to this ticket.

Here's the summary of your comments:

Key takeaways from user testing are:

1. Truncating works better when fading the last values
2. Display at least 10 values before truncating (minimum)
3. Update CTA should stay on same line with the email address (keeps the link within context and within proximity)
4. 3 dots as a visual indicator was successful however there was no way to view the truncated emails --> suggestion is to make truncation clickable so that user can view the email address on the same page

https://telus.invisionapp.com/d/main/#/console/15108412/335300695/preview

[lucylist]

not sure that it’s a specific component though or rather a pattern that is carried forward in various components. I would say the treatment of elongated anything would be a pattern that we could document and push moving forward.

the second issue: having email (hyperlink) open up a tool tip on click: is changing the users expectation and isn't accessible from a cognitive/keyboard/screenreader perspective so I would explore other options that could invoke the tooltip.

I’ll set some time up for us to have a quick jam on this and see where it best fits!

[lucylist]

@Berjesty to investigate what other 'things' could get truncated to make sure these guidelines work well in those scenarios.

@MarieF to take it away to explore other ways to treat the email to invoke the full email address.

Once guidelines are fleshed out and treatment of truncated items are sorted out, TDS will take it and apply it to the affected components.

[Mariefhrmnn]

New trials to follow up our discussion this morning.

[Mariefhrmnn]

Hey @Christina-Lo That is the final pattern approuved by @Berjesty and @gkychow

For _TDS_core

New Design reference XL: https://telus.invisionapp.com/d/main/#/console/16159628/340865417/preview M: https://telus.invisionapp.com/d/main/#/console/16159628/340865415/preview M w. tooltip: https://telus.invisionapp.com/d/main/#/console/16159628/340865974/preview XS: https://telus.invisionapp.com/d/main/#/console/16159628/340865416/preview XS w. tooltip: https://telus.invisionapp.com/d/main/#/console/16159628/340865975/preview

Final component https://telus.invisionapp.com/d/main/#/console/16159628/342164538/preview

[theetrain]

This has been backlogged by the core team: https://telusdigital.atlassian.net/browse/TDS-1137

[theetrain]

Just curious, have we explored using the title attribute instead of adding a truncate button?

See example: https://codepen.io/etrain/pen/gOYQyVN

[DanGenuardi]

We have it laid out like this on the usage page due to the fact that names can run really long, and we don't want to have the phone number not aligned with the rest of the phone numbers and we want to be consistent within desktop and tablet.

[DanGenuardi]

what it looks like on tablet and desktop.

[DanGenuardi]

Also another edge case could be on the updated tab design for subscribers names on it for the usage page.

[theetrain]

Update: here are the latest assets from the TDS team:

Code sandbox demo: https://codesandbox.io/s/text-truncate-omrle InVision file: https://telus.invisionapp.com/d/main#/console/13491097/384197835/preview

Discussion

• The entire truncated text portion should be a button, while the Bubble appears above the Truncate icon. Update; we won't move forward with this idea.
• Let's explore which parts of the text should be truncated; only the ending, or the middle part that shows the beginning and end of the string. Update; only the ending should be truncated as per usability testing.

[theetrain]

Update:

The TDS team will no longer be building the Truncate component due to its few use cases across TELUS experiences. Contributors are welcome to submit this to tds-community, and this issue will remain open in tds-community.

InVision file: https://telus.invisionapp.com/d/main#/console/13491097/384197835/preview Code Sandbox: https://codesandbox.io/s/text-truncate-omrle

Designer notes

• Consider only making the Truncate icon clickable
• Only truncate the end of the email text as per usability testing
• icon is 18x18, the clickable area is 32x32, shape area (the background circle that appears on focus) is 32x32

Developer notes

• Use InteractiveIcon.jsx from core-interactive-icon, how to wrap Christina's SVG
• Use the Bubble from core-tooltip
• Ensure the experience announces appropriate text to assistive technologies. Look to core-tooltip for inspiration. Make use of aria-controls
• Use default text-overflow CSS behaviour, clip, though if possible, try to truncate by the character using JS
• Make use of negative margins such that the visible icon is spaced 4px away from the truncated text, but is still vertically centred
• More reading: https://inclusive-components.design/tooltips-toggletips/

Icon SVG: TextTruncate18x18.svg.zip