Implement new Read Receipt design

[justjanne]

Type: Enhancement
Closes: element-hq/element-web#20574

In Short

• Implement new read receipt design
• Move read receipts out of Event Tile
• Allow setting tab index for avatars
• Allow adding (not replacing) a custom class for ContextMenu
• Allow adding (not replacing) an onFocus handler for RovingAccessibleButton
• Introduce new hook for tooltips
• Introduce new alignments for tooltips

---

Here's what your changelog entry will look like:

✨ Features

• Implement new Read Receipt design (#8389). Fixes Read receipts overlaps messages in timeline element-hq/element-web#20574. Contributed by @justjanne.

Preview: https://pr8389--matrix-react-sdk.netlify.app
⚠️ Do you trust the author of this PR? Maybe this build will steal your keys or give you malware. Exercise caution. Use test accounts.

[codecov]

Codecov Report

Merging #8389 (2bc9d99) into develop (763edb7) will decrease coverage by 0.00%.
The diff coverage is 14.85%.

@@             Coverage Diff             @@
##           develop    #8389      +/-   ##
===========================================
- Coverage    30.47%   30.47%   -0.01%     
===========================================
  Files          889      891       +2     
  Lines        50547    50570      +23     
  Branches     12861    12862       +1     
===========================================
+ Hits         15405    15412       +7     
- Misses       35142    35158      +16     

Impacted Files	Coverage Δ
src/components/structures/ContextMenu.tsx	61.79% <ø> (ø)
src/components/views/avatars/BaseAvatar.tsx	86.95% <ø> (ø)
src/components/views/elements/Tooltip.tsx	55.69% <0.00%> (-8.08%)	⬇️
src/components/views/rooms/EventTile.tsx	46.35% <0.00%> (+3.04%)	⬆️
src/components/views/rooms/ReadReceiptMarker.tsx	0.00% <0.00%> (-1.97%)	⬇️
src/utils/useTooltip.tsx	0.00% <0.00%> (ø)
src/components/views/rooms/ReadReceiptGroup.tsx	7.14% <7.14%> (ø)
...ssibility/roving/RovingAccessibleTooltipButton.tsx	57.14% <57.14%> (-42.86%)	⬇️
...rc/accessibility/roving/RovingAccessibleButton.tsx	100.00% <100.00%> (ø)
src/components/views/avatars/MemberAvatar.tsx	87.87% <100.00%> (+0.37%)	⬆️

[justjanne]

In Action

• Read receipts in inactive status
  
• Hovering over read receipts
  
• Read receipts menu open
  
• Hovering over user in opened read receipts menu
  
• Send Receipts of various states
  

[germain-gg]

That looks great to me, it's such an improvement in the product from my point of view.

Couple of changes, mainly regarding support for the dark theme and a few missing copyright headers.

But that should be good to go afterwards

[niquewoodhouse]

Hi,

Overall I think this is looking much better, thanks. I just having some minor comments.

• .mx_ReadReceiptGroup .mx_ReadReceiptGroup_remainder margin-right: 8 4px. In practice, getting to try it out, it just helped group the number to the faces more closely.
• The background colour for the .mx_ReadReceiptGroup_popup has an alpha value of less than 1, which makes it hard to use. I think I used the wrong colours in Figma, sorry for that. Could we use the same background colour from the .mx_ContextualMenu (screenshot below for reference) for the popup and the same colour background on hover as each item in that menu, for each item in the popup?

Thanks

[germain-gg]

Looks pretty great to me! Once Nique's concerns have been addressed that should be good to go

[justjanne]

Looks pretty great to me! Once Nique's concerns have been addressed that should be good to go

I’ve already addressed them in 2bc9d99, just waiting for nique’s approval :)

[niquewoodhouse]

👍