Tag - Text truncation for overflow fix
#2655
Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
There was a problem hiding this comment.
This is looking great, although I did find an interesting "bug"
The tooltip is still there even if the text is fully revealed. Wonder if there is a way to fix this?
UPDATE: It looks like something that was once truncated, but then isn't will have a tooltip. We should also check screen reader behavior. Does the text get read out twice or just once? I think we can loop in the entire team for A11Y
Did you notice this after doing some resizing of the page, or on load? One open issue with the fix is that the tooltip will be added if the text goes from not cut off to cut off on a resize, but not removed if the text goes from cut off to shown. I figure this isn't a use case that will come up often as users aren't usually resizing their browser back and forth, but will see if I can find some fix. Update: This edge case issue with resizing has been resolved |
|
Def want to call out that the there needs to be documentation that informs consumers that truncated text is not accessible for all users and they should prefer limiting the text length before the need for truncation exists. |
Can you elaborate on this? Truncated text will always have tooltips associated to it. Also from my understanding, truncation is a CSS based visual indicator that should still be accessible by a screen reader. One call out is to make sure that the text isn't read out twice. Is there something else I'm missing? |
Yes the truncation is only via CSS. In the DOM the text will still be un-truncated. I did test with voiceover and this does mean that the text does get read twice, which isn't ideal, but no content is lost. It reads the text of the button and then the tooltip associated with it. 
|
| @tracked private _isTextOverflow!: boolean; | ||
| private _observer!: ResizeObserver; | ||
|
|
||
| private _setUpObserver = modifier((element: HTMLElement) => { |
There was a problem hiding this comment.
I like how this aligns with the AdvancedTable observer!
There was a problem hiding this comment.
all credit to dylan, I followed his pattern :)
| @@ -104,4 +125,8 @@ export default class HdsTag extends Component<HdsTagSignature> { | |||
|
|
|||
| return classes.join(' '); | |||
| } | |||
|
|
|||
| private _isOverflow(el: Element): boolean { | |||
| return el.scrollHeight > el.clientHeight; | |||
📌 Summary
This PR fixes an overflow issue present in the
Tagwhen text wraps to > 3 lines. It implements the intended design change to address this, which truncates any text that goes to multiple lines. When truncation occurs, an ellipsis is rendered, and a tooltip showing the full text is added.It also adds
width: fit-content;to the tag to ensure a tag's width never goes beyond its content.🛠️ Detailed description
It was observed in the Tag in HDS-3854 that when the text exceeds 3 lines, the background of the dismiss button obscures the border of the element.
Per design guidance, the chosen solution has been to truncate any text in the tag that goes beyond one line, and add an ellipsis and tooltip with the full text when this truncation occurs.
The text is truncated when the text would wrap to multiple lines using
overflow: hiddenand-webkit-line-clamp: 1. When this occurs a tooltip is also added using thehds-tooltipmodifier, and theHds::TooltipButton.There are several other changes related to this fix.
max-widthof the text is set to150px@tooltipPlacementhas been added to allow for customization of the tooltip placementwidth: fit-contenthas been added to prevent the tag width from ever exceeding its content. This was present previously when the tag had a parent withdisplay: grid.📸 Screenshots
Text Truncation
Before
After
After - Hover / Focus
Width
Before
After
🔗 External links
Jira ticket: HDS-4317
Figma file: Link
👀 Component checklist
💬 Please consider using conventional comments when reviewing this PR.