Page MenuHomePhabricator

[web] introduce ReactionTooltip component
ClosedPublic

Authored by ginsu on Aug 15 2023, 4:47 PM.
Tags
None
Referenced Files
F2018599: D8823.diff
Sat, Jun 15, 11:24 PM
F2015966: D8823.id30388.diff
Sat, Jun 15, 12:41 AM
Unknown Object (File)
Fri, Jun 14, 8:58 AM
Unknown Object (File)
Fri, Jun 14, 7:29 AM
Unknown Object (File)
Thu, Jun 13, 9:51 PM
Unknown Object (File)
Thu, Jun 13, 12:14 PM
Unknown Object (File)
Sun, Jun 9, 7:01 PM
Unknown Object (File)
Sun, May 26, 10:06 AM
Subscribers

Details

Summary

This diff introduces the ReactionTooltip component that we be rendered whenever a user hovers over a reaction pill. This diff just introduces the component and subsequent diffs will handle the other parts to building a tooltip (calculating the tooltipSize and creating the hook that will create this tooltip)

Here is the linear thread where we discuss what should the ReactionTooltip look like

Here is the design (there are some changes and all of this was discussed in the linear thread):

Screenshot 2023-08-17 at 8.16.50 PM.png (662×1 px, 142 KB)

Something to note about the tooltip is that see more will conditionally render based on if 6 or more users have reacted to that message with the same reaction

Depends on D8831

Test Plan

Please see the demo video below to see what the tooltip looks and behaves like:

Diff Detail

Repository
rCOMM Comm
Lint
No Lint Coverage
Unit
No Test Coverage

Event Timeline

ginsu edited the summary of this revision. (Show Details)
ginsu requested review of this revision.Aug 15 2023, 5:06 PM
ginsu edited the summary of this revision. (Show Details)

update

ginsu retitled this revision from DRAFT: [web] introduce ReactionTooltip component to [web] introduce ReactionTooltip component.Aug 17 2023, 10:29 AM
ginsu edited the summary of this revision. (Show Details)
ginsu edited the test plan for this revision. (Show Details)
ginsu added reviewers: atul, kamil.
ginsu added inline comments.
web/chat/chat-constants.js
25–39 ↗(On Diff #30034)

We will need these constants when we introduce the calculateReactionTooltip function. Just introducing this here now to preemptively prepare for that

ginsu edited the summary of this revision. (Show Details)
web/chat/reaction-tooltip.react.js
38 ↗(On Diff #30034)

Convenient shorthand

This revision is now accepted and ready to land.Aug 24 2023, 1:49 PM
This revision was automatically updated to reflect the committed changes.