Page MenuHomePhabricator

[web] introduce ReactionTooltip component
ClosedPublic

Authored by ginsu on Aug 15 2023, 4:47 PM.
Tags
None
Referenced Files
Unknown Object (File)
Sun, May 19, 5:41 PM
Unknown Object (File)
Sun, May 19, 5:41 PM
Unknown Object (File)
Sun, May 19, 5:41 PM
Unknown Object (File)
Sun, May 19, 5:41 PM
Unknown Object (File)
Sun, May 19, 5:40 PM
Unknown Object (File)
Sun, May 19, 5:40 PM
Unknown Object (File)
Sun, May 19, 5:40 PM
Unknown Object (File)
Feb 19 2024, 6:28 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
Lint Not Applicable
Unit
Tests Not Applicable

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.