App
App copied to clipboard
Expensify
[$1000] Make emojis larger in other contexts than just single character messages
If you haven’t already, check out our contributing guidelines for onboarding and email [email protected] 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
- Go to
Settings->Profileand add emoji(s) to your last name 😎. - Save your profile.
- Open the
SettingsRHP 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
- Go to
Settings->Profileand add emoji(s) to your last name 😎. - Save your profile.
- 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
Triggered auto assignment to @Christinadobrzyn (AutoAssignerTriage), see https://stackoverflow.com/c/expensify/questions/4749 for more details.
@stitesExpensify
Which of one of these we want to do?
- Make emojis bigger in all contexts, but single emojis should still be even bigger.
- 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 https://github.com/Expensify/Expensify.cash/issues/3712, but I'll hold until we sort this.
If this issue is a pass. I think it is a good time to minimize the regex used for comparison.
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.
Thanks @jboniface. If we end up following the original spec I think a good proposal would be
- Modify our
ReportActionItemFragmentof typeCOMMENTto check if ourfragment.texthas emojis - but only if it fails ourisSingleEmojitest. - If it has, modify our
Textto include nestedTexts containing emojis with a modified style
Triggered auto assignment to @ctkochan22 (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.
This issue has not been updated in over 15 days. eroding to Monthly issue.
P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!
@jboniface, this Monthly task hasn't been acted upon in 6 weeks; closing.
If you disagree, feel encouraged to reopen it -- but pick your least important issue to close instead.
Why didn't this get worked on? @ctkochan22 (or another engineer) can this be worked on by an external contributor? If so, can you add the External label so we can get this posted?
I'm going to reopen for now cuz I think it'd be nice to have multiple-emoji messages show larger
Yeah this can be worked on by an external contributor. I'm not sure why I didn't add the label, my bad.
Triggered auto assignment to @JmillsExpensify (External), see https://stackoverflow.com/c/expensify/questions/8582 for more details.
Oh I love this one, great issue! Upwork job is here: https://www.upwork.com/jobs/~014ad72dfc29342e5e. Applying the exported label so that we can re-ignite proposals.
Triggered auto assignment to Contributor-plus team member for initial proposal review - @parasharrajat (Exported)
Triggered auto assignment to @roryabraham (Exported), see https://stackoverflow.com/c/expensify/questions/7972 for more details.
I think this issue need to be more specific. I'm really not sure what the requirements are.
Originally I asked @stitesExpensify for specification, but I'm not sure -- maybe we should ask Design? Again, the original spec was:
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.
I'm not sure if that's what was implemented, and the values were just too small or what
Super fair feedback. @jboniface do you want to take this back to #design?
Hi, what exactly needs to be fleshed out here? Are we discussing the sizes for emojis in all contexts?
@michelle-thompson yeah, we're trying to clarify what those contexts and sizes should specifically be
If we test the following: Text - 15pt Inline emoji - 19pt Standalone emoji - 27pt
We get something like this, which looks good to me.
The only other suggestion I have is that standalone emojis stay at 27pt, so long as there is no text. Said another way, no max number of emojis before reverting back to 19pt.
Thoughts?
Yeah, I like that. I think the size limiting is kind of arbitrary when the only thing on the line is emoji.
For sure, just wanted to point it out since it seems like only one emoji is currently allowed before reverting to smaller type.
I like @michelle-thompson 's mockup above. Since there are only two lines with emoji, do you think there are other examples where text/emoji are mixed and matched (on same and different lines) where they might not look clean? or.. look crowded. ie. the ❤️ was under Zany's name and there were a line of only large emoji below that
Here's a few more emojis thrown in for good measure! I think it still holds up pretty well.
Looks good, a few of the emoji look like they're 'raised up' a bit, is that 'to be expected' because of the increased size/ratio of emoji to text?
a few of the emoji look like they're 'raised up' a bit
Agree, maybe we can fix it by standardizing on a line-height of 19pt to match the larger font of the emoji (even for lines that contain no emoji)? Not sure
Yes, since emojis are a different size they're not gonna be aligned perfectly. You can see in Slack the same also happens:
@roryabraham we can certainly try, but I actually don't mind how it looks now! I wouldn't want to increase line height so much that regular text looks oddly spaced out.
Hmmm to my less-trained eyes that slack emoji looks vertically centered with respect to the text (where the screenshot from our app above does not). Notice how in your screenshots of NewDot, emoji share the same baseline with regular text, but in Slack that's not necessarily the case:
| NewDot | Slack |
|---|---|
 |
 |