Update Reactions component

[daniellekirkwood]

We'd like to improve the reactions component on iOS to be inline with the changes on Android and Web.

Verify or Build in iOS the ability to...

• Add a reaction from the Reaction row (emoji smiley with plus symbol, see comments)
• Add "Show all" when there's more than the maximum amount of emojis on a message that opens the bottom sheet

Related Android issues:

• Reactions on a message are limited to 8 distinct reactions. element-android#4674
• 'add reaction' interaction on the row of reactions to encourage more (web parity) element-android#3344

figma link

[pixlwave]

First one is there:

Second one exists but expands the visible emoji rather than opening the reactions sheet:

[daniellekirkwood]

Do we want to expand the emoji or open the action sheet? (This decision would apply to both platforms)

[pixlwave]

Possibly helpful context: long pressing any reaction will present the reactions history sheet on iOS.

[amshakal]

Yeah, I think a 'show all' button like you have above will suffice in that case to open up the history sheet. It provides more information than all the emojis listed on the timeline itself.

[daniellekirkwood]

Great, so we'll have the history sheet show on clicking Show all.

Also, @pixlwave WRT "the first one", that is only available on long-press and I think the idea is to have a permanently showing [ :) +] when there's more than 1 reaction on a message. Right, @amshakal ?

[pixlwave]

Ooooo sounds good! I clearly didn't have the full context when posting those screenshots 🤐

[daniellekirkwood]

This will be kept by the App team

[amshakal]

For parity: we are moving to this interaction on Android. element-hq/element-android#4674

[daniellekirkwood]

@amshakal I think this is designed and ready to go? Can you link the figma designs and I will update the issue content :)

[amshakal]

We have designs for Android Happy to create them for iOS if needed. :)

[daniellekirkwood]

I'm going to mark this issue as "ready to build" and whoever is available to take this on will reach out to you if they need iOS designs :)