[HOLD for payment 2024-12-03] [$1000] Make emojis larger in other contexts than just single character messages

[jboniface]

If you haven’t already, check out our contributing guidelines for onboarding and email contributors@expensify.com to request to join our Slack channel!

---

This issue covers several related scenarios:

Scenario 1

Action Performed:

Add an emoji with other plain text characters in a message in the composer.

Expected Result:

The emoji should be larger (19pt) compared to the default size for text (15pt) in the composer. The emoji and text should appear vertically centered with respect to eachother, such that the baseline of the emoji is below the plain text and the middle of the text vertically aligns with the middle of the emoji (like the right-hand-side of this example.

Actual Result:

The emoji is the same size as the rest of the text.

Scenario 2

Action Performed:

Send a message with emoji and text.

Expected Result:

The emoji should be larger (19pt) compared to the default size for text (15pt) in the chat history. The emoji and text should appear vertically centered with respect to eachother, such that the baseline of the emoji is below the plain text and the middle of the text vertically aligns with the middle of the emoji (like the right-hand-side of this example

Actual Result:

The emoji is the same size as the rest of the text.

Scenario 3

Action Performed

Draft a message (of any length) with only emoji.

Expected Result

The emoji should appear very large (27pt) in the composer.

Actual Result

The emoji appear very small (15pt).

Scenario 4

Action Performed

Send a message (of any length) with only emoji.

Expected Result

The emoji should appear very large (27pt) in the report history.

Actual Result

The emoji only appear large in the report history if there is only one emoji in the message.

Scenario 5

Action Performed

Go to Settings -> Profile and add emoji(s) to your last name 😎

Expected Result

The emoji should appear larger (19pt) than the rest of the text (15pt) in the text input. The emoji and text should appear vertically centered with respect to eachother, such that the baseline of the emoji is below the plain text and the middle of the text vertically aligns with the middle of the emoji (like the right-hand-side of this example

Actual Result

The emoji appear the same size as the text.

Scenario 6

Action Performed

1. Go to Settings -> Profile and add emoji(s) to your last name 😎.
2. Save your profile.
3. Open the Settings RHP and look at your name:

Expected Result

The emoji should appear larger (21pt) than the rest of the text (17pt) in the text input. The emoji and text should appear vertically centered with respect to eachother, such that the baseline of the emoji is below the plain text and the middle of the text vertically aligns with the middle of the emoji (like the right-hand-side of this example

Actual Result

The emoji and text have the same height:

Scenario 7

Action Performed

1. Go to Settings -> Profile and add emoji(s) to your last name 😎.
2. Save your profile.
3. Open a chat with another user and send them a message. Take a look at your message in the report history.

Expected Result

The emoji should appear larger (19pt) than the rest of the test (15pt). The emoji and text should appear vertically centered with respect to eachother, such that the baseline of the emoji is below the plain text and the middle of the text vertically aligns with the middle of the emoji (like the right-hand-side of this example

Actual Result

The emoji appears the same size as the rest of the text.

Workaround:

no

Platform:

all

View all open jobs on Upwork

Issue Owner

Current Issue Owner: @JmillsExpensify

[MelvinBot]

Triggered auto assignment to @Christinadobrzyn (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.

[rdjuric]

@stitesExpensify

Which of one of these we want to do?

1. Make emojis bigger in all contexts, but single emojis should still be even bigger.
2. Make emojis in all context as big as our current singleEmoji, and single emojis are no long bigger than usual.

I was about to open a PR with some improvements for the isSingleEmoji function that I wrote for #3712, but I'll hold until we sort this.

[parasharrajat]

If this issue is a pass. I think it is a good time to minimize the regex used for comparison.

[jboniface]

this is the original spec:

The default text size is 15, so when there is text inline with the emoji the emoji will be size 19, and when the emoji is sent by itself it will be size 27.

but I'd like @stitesExpensify to confirm whether we diverged from this plan over the course of design since this feature was on hold for many months.

[rdjuric]

Thanks @jboniface. If we end up following the original spec I think a good proposal would be

1. Modify our ReportActionItemFragment of type COMMENT to check if our fragment.text has emojis - but only if it fails our isSingleEmoji test.
2. If it has, modify our Text to include nested Texts containing emojis with a modified style

[MelvinBot]

Triggered auto assignment to @ctkochan22 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.