fix(ui) Add ellipses and tooltip to long names on home page header #13425
Conversation
| useEffect(() => { | ||
| const el = textRef.current; | ||
| if (el) { | ||
| setIsTruncated(el.scrollWidth > el.clientWidth); | ||
| } | ||
| }, [text]); |
There was a problem hiding this comment.
Should we put this in a resize observer? Maybe not by default -- could impact performance, but option would be nice
| }, [text]); | ||
|
|
||
| return ( | ||
| <Tooltip2 title={isTruncated ? text : undefined}> |
There was a problem hiding this comment.
Are we always using "Tooltip2" over regular tooltip? I think of Tooltip2 as more of a "structured tooltip". And then we should just make our regular Tooltip look like we want, i.e. with a white background and gray text
There was a problem hiding this comment.
yeah that's a good question we need to clear up. let's ask designers to get a final call here
|
🔴 Meticulous spotted visual differences in 135 of 1393 screens tested: view and approve differences detected. Meticulous evaluated ~9 hours of user flows against your PR. Last updated for commit 04c1b13. This comment will update as new commits are pushed. |
datahub-cyborg
bot
added
the
pending-submitter-response
Codecov ReportAttention: Patch coverage is ✅ All tests successful. No failed tests found. ❌ Your patch status has failed because the patch coverage (55.71%) is below the target coverage (75.00%). You can increase the patch coverage or adjust the target coverage. 📢 Thoughts on this report? Let us know! |
datahub-cyborg
bot
added
pending-submitter-merge
and removed
pending-submitter-response
2 participants
With the recent changes to the home page where we got rid of that huge color block, I noticed we weren't properly handling long names but truncating them with an ellipses but they were just getting cut off. I fix this by adding an
OverflowTextcomponent that's pretty bare bones right now but can be beefed out later for different use cases. This simply adds ellipses and shows a tooltip if text is too wide for its area. Still allows line breaks and what not.Here's it in action on the home page: