Display description and joining date in mentioned user popover #6824
Conversation
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #6824 +/- ##
=======================================
Coverage 99.42% 99.42%
=======================================
Files 272 272
Lines 10446 10448 +2
Branches 2507 2509 +2
=======================================
+ Hits 10386 10388 +2
Misses 60 60 ☔ View full report in Codecov by Sentry. |
| <div data-testid="display-name" className="text-color-text-light"> | ||
| {content.display_name} | ||
| {content.description && ( | ||
| <div data-testid="description" className="line-clamp-2"> |
There was a problem hiding this comment.
I'm experimenting on cropping the description to up to 2 lines to avoid having an excessively big popover.
On the other hand, descriptions are 250-character long tops, so maybe we can simply let them be shown in full.
The problem with cropping is that perhaps we should then add the full content in the element's title attribute, but for that to work, we need #6821
There was a problem hiding this comment.
On the other hand, descriptions are 250-character long tops, so maybe we can simply let them be shown in full.
Truncating at say 2 or 3 lines seems reasonable to me.
A max-length description looks like:
| @@ -161,7 +161,7 @@ export default function MarkdownView(props: MarkdownViewProps) { | |||
| open={!!popoverContent} | |||
| onClose={() => setPopoverContentAfterDelay(null)} | |||
| anchorElementRef={mentionsPopoverAnchorRef} | |||
| classes="px-3 py-2" | |||
| classes="px-3 py-2 !max-w-[75%]" | |||
There was a problem hiding this comment.
Limit the size of the popover to a maximum of 75% of the sidebar, to let it breathe.
acelaya
force-pushed
the
mention-popover-content
branch
from
6857ec3 to
ff879d6
Compare
acelaya
force-pushed
the
mention-popover-content
branch
from
ff879d6 to
efb214f
Compare
acelaya
force-pushed
the
mention-popover-content
branch
from
efb214f to
3557f2d
Compare
|
We might want to set a minimum width or aspect ratio on the popover to avoid it looking too tall if the username and description are short: 
|
| it('renders expected fields based on valid mention shape', () => { | ||
| const wrapper = createComponent(mention); | ||
| performAssertions(wrapper); | ||
| }); |
There was a problem hiding this comment.
If each test here has different assertions, they could just be separate tests.
| @@ -167,6 +170,10 @@ export type Mention = { | |||
| display_name: string | null; | |||
| /** Link to the user profile, if applicable */ | |||
| link: string | null; | |||
| /** The user description/bio */ | |||
| description: string | null; | |||
| /** The date in which the user joined, in ISO format */ | |||
There was a problem hiding this comment.
| /** The date in which the user joined, in ISO format */ | |
| /** The date when the user joined, in ISO format */ |
| <div data-testid="display-name" className="text-color-text-light"> | ||
| {content.display_name} | ||
| {content.description && ( | ||
| <div data-testid="description" className="line-clamp-2"> |
There was a problem hiding this comment.
On the other hand, descriptions are 250-character long tops, so maybe we can simply let them be shown in full.
Truncating at say 2 or 3 lines seems reasonable to me.
A max-length description looks like:
Closes #6822
Depends on hypothesis/h#9349, hypothesis/h#9352 and hypothesis/frontend-shared#1879
Display the user description and the date in which they joined in the mention popover.
Tip
Easier to review ignoring whitespaces