Enlarge emojis in other contexts than just single character messages #47547

VickyStash · 2024-08-16T07:27:47Z

Details

This is another try to merge the PR related to emojis enlarging, the previous one was reverted.

Fixed Issues

$ #4114
Potentially fixing #14753
PROPOSAL: N/A

Tests

Verify that no errors appear in the JS console

Composer:

Draft a message (of any length) with text and emojis
Verify that emojis are larger (17px) compared to the default size for text (15px) in the composer (emojis + text input)

Report history:

Send a message with emojis and text
Verify that emojis are larger (17px) compared to the default size for text (15pt) in the chat history and 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 [HOLD for payment 2024-12-03] [$1000] Make emojis larger in other contexts than just single character messages #4114 (comment)

Settings:

Go to Settings -> Profile and add emoji to your last name
Verify that emoji appear larger (17px) than the rest of the text (15pt) in the text input
Save the changes
Open LHP
Verify that emoji in user's last name appear larger (25px) compared to the rest of the text (22px)

Offline tests

Same as in the Tests section.

QA Steps

Verify that no errors appear in the JS console

Same as in the Tests section.

PR Author Checklist

Screenshots/Videos

Android: Native

Android: mWeb Chrome

iOS: Native

iOS: mWeb Safari

MacOS: Chrome / Safari

MacOS: Desktop

# Conflicts: # src/components/Composer/index.tsx

melvin-bot · 2024-08-20T15:12:46Z

Hey! I see that you made changes to our Form component. Make sure to update the docs in FORMS.md accordingly. Cheers!

melvin-bot · 2024-08-21T10:08:36Z

@parasharrajat Please copy/paste the Reviewer Checklist from here into a new comment on this PR and complete it. If you have the K2 extension, you can simply click: [this button]

# Conflicts: # src/components/Composer/index.native.tsx # src/pages/home/report/comment/TextCommentFragment.tsx

src/components/TextInput/BaseTextInput/index.native.tsx

src/libs/ComposerUtils/updateIsFullComposerAvailable.ts

src/pages/home/report/comment/TextCommentFragment.tsx

francoisl · 2024-11-18T19:00:10Z

src/CONST.ts

+        get ALL_EMOJIS() {
+            return new RegExp(this.EMOJIS, this.EMOJIS.flags.concat('g'));


Do we even need this, or could we directly add the g flag in EMOJIS above? As far as I can tell, the only place we use EMOJIS is in EmojiUtils.splitTextWithEmojis, and we also add g flag there.

@francoisl I think the answer to your question is here:
#40692 (comment)

Got it, thanks.
Is there any situation where we'll want to use CONST.REGEX.EMOJIS without the g flag? If not, let's at least add the comment about cloning that's currently in splitTextWithEmojis() in here, to add context to other people that read it and wouldn't know if they need to use EMOJIS or ALL_EMOJIS.
Ideally though, we could move it to a more private scope that's not available outside of this file, so that someone can't accidentally use CONST.REGEX.EMOJIS.

VickyStash · 2024-11-19T11:38:32Z

@pecanoro @francoisl I've applied your feedback, let me know if you have more questions!

src/components/TextInput/BaseTextInput/index.native.tsx

francoisl · 2024-11-20T03:10:47Z

src/libs/EmojiUtils.tsx

+        return [];
+    }
+
+    const doesTextContainEmojis = new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g')).test(text);


Can we not use CONST.REGEX.ALL_EMOJIS instead here?

Replacing it here with CONST.REGEX.ALL_EMOJIS causing an issue on ios 🤔
So I've started to think maybe it makes sense to replace CONST.REGEX.ALL_EMOJIS with new RegExp(CONST.REGEX.EMOJIS, CONST.REGEX.EMOJIS.flags.concat('g')) everywhere, though it seems to work as expected in other places.

francoisl · 2024-11-20T03:18:42Z

src/CONST.ts

+        get ALL_EMOJIS() {
+            return new RegExp(this.EMOJIS, this.EMOJIS.flags.concat('g'));


Got it, thanks.
Is there any situation where we'll want to use CONST.REGEX.EMOJIS without the g flag? If not, let's at least add the comment about cloning that's currently in splitTextWithEmojis() in here, to add context to other people that read it and wouldn't know if they need to use EMOJIS or ALL_EMOJIS.
Ideally though, we could move it to a more private scope that's not available outside of this file, so that someone can't accidentally use CONST.REGEX.EMOJIS.

src/libs/EmojiUtils.tsx

# Conflicts: # src/libs/EmojiUtils.tsx

pecanoro · 2024-11-20T15:41:19Z

@parasharrajat @VickyStash Could you both do a quick test again since we have added a few more commits and confirm it's all good? Just to make sure it is not broken

parasharrajat · 2024-11-20T15:53:02Z

Will do.

parasharrajat · 2024-11-21T07:23:50Z

NOTE: There is a slightest change in line-height when we click on the single line input with emoji. This only happens when the value starts with normal text and there is an emoji later.

21.11.2024_12.52.17_REC.mp4

parasharrajat

LGTM.

OSBotify · 2024-11-21T18:07:13Z

✋ This PR was not deployed to staging yet because QA is ongoing. It will be automatically deployed to staging after the next production release.

github-actions · 2024-11-22T20:30:57Z

🚀 Deployed to staging by https://github.com/francoisl in version: 9.0.66-0 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	success ✅
🍎🔄 iOS HybridApp 🍎🔄	success ✅

github-actions · 2024-11-26T16:12:19Z

🚀 Deployed to production by https://github.com/mountiny in version: 9.0.66-8 🚀

platform	result
🤖 android 🤖	success ✅
🖥 desktop 🖥	success ✅
🍎 iOS 🍎	success ✅
🕸 web 🕸	success ✅
🤖🔄 android HybridApp 🤖🔄	failure ❌
🍎🔄 iOS HybridApp 🍎🔄	failure ❌

getusha · 2024-12-12T08:39:09Z

src/styles/index.ts


+        emojisWithTextFontSizeAligned: {
+            fontSize: variables.fontSizeEmojisWithinText,
+            marginVertical: -7,


@VickyStash @parasharrajat what was this vertical margin fixing? coming from #53451

@getusha It was used to align emojis on iOS. So I think we can change it on android to fix the mentioned issue.
Please, remember to test it with different emojis texts, for example with

A multiine text with a big para to test yo main. Now I am testing So let's test 😀 HEH Now he sdsds let see 🥲 and 🥲 overlapping messages so This looks like wor 🙂 hey majun whats wrong

and make sure there are no overlapping and line spacing is equivalent between lines.

andriivitiv · 2025-01-14T11:18:55Z

src/components/Composer/implementation/index.tsx

-            textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {},
+            textContainsOnlyEmojis && hasMultipleLines ? styles.onlyEmojisTextLineHeight : {},


@VickyStash any idea why this was added here? It causes #55068

@CyberAndrii Without hasMultipleLines check even one emoji changes the composer height and makes send button be not aligned in the composer.

Without hasMultipleLines check:

With hasMultipleLines check:

We decide to remove hasMultipleLines completely. #55438

VickyStash added 11 commits August 8, 2024 11:53

WIP on emojis enlarge

8d93e58

Add more options for testing

8fdd879

Improve messages with enlarged emojis display

1a776ab

Code clean up

957737a

Merge branch 'refs/heads/main' into feature/large-emojis

18997d9

Fix composer height when only emojis are entered

27fb058

Increase emojis in the display name

3ab61f4

Merge branch 'refs/heads/main' into feature/large-emojis

2b0caa2

Fix emojis are cut off in some places on ios

e750501

Lint fixes

3175d40

Try to fix react compiler error

8b0828b

VickyStash mentioned this pull request Aug 16, 2024

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

Closed

VickyStash added 6 commits August 19, 2024 15:48

Resolve TODO related to the text selection

776aacd

Merge branch 'refs/heads/main' into feature/large-emojis

6981d7c

Fix cursor jumping on ios

41ffb05

Fix emojis are cut off in the workspace list on ios

2007c58

Fix composer height

9250cd9

Merge branch 'refs/heads/main' into feature/large-emojis

46ddde2

# Conflicts: # src/components/Composer/index.tsx

VickyStash added 3 commits August 20, 2024 17:29

Lint fix

2dd7773

Fix large emojis overlap

cc8e8b1

Improve sender display

435e777

VickyStash changed the title ~~[WIP] Enlarge emojis in other contexts than just single character messages~~ Enlarge emojis in other contexts than just single character messages Aug 21, 2024

VickyStash marked this pull request as ready for review August 21, 2024 10:08

VickyStash requested review from a team as code owners August 21, 2024 10:08

melvin-bot bot requested review from parasharrajat and removed request for a team August 21, 2024 10:08

Merge branch 'refs/heads/main' into feature/large-emojis

d8a3fd2

# Conflicts: # src/components/Composer/index.native.tsx # src/pages/home/report/comment/TextCommentFragment.tsx

pecanoro requested changes Nov 18, 2024

View reviewed changes

src/components/TextInput/BaseTextInput/index.native.tsx Outdated Show resolved Hide resolved

src/libs/ComposerUtils/updateIsFullComposerAvailable.ts Outdated Show resolved Hide resolved

src/pages/home/report/comment/TextCommentFragment.tsx Outdated Show resolved Hide resolved

francoisl reviewed Nov 18, 2024

View reviewed changes

VickyStash added 3 commits November 19, 2024 10:54

Remove empty file which is left after conflicts resolution

8d036e7

Add containsEmojis const

921b364

Add a comment

582d4ba

pecanoro requested changes Nov 19, 2024

View reviewed changes

src/components/TextInput/BaseTextInput/index.native.tsx Show resolved Hide resolved

francoisl reviewed Nov 20, 2024

View reviewed changes

VickyStash added 3 commits November 20, 2024 12:37

Add unit tests

068a496

Merge branch 'refs/heads/main' into feature/large-emojis

5301fe8

# Conflicts: # src/libs/EmojiUtils.tsx

Lint fix

fb197bb

pecanoro approved these changes Nov 20, 2024

View reviewed changes

parasharrajat approved these changes Nov 21, 2024

View reviewed changes

francoisl merged commit fd3639a into Expensify:main Nov 21, 2024

github-actions bot mentioned this pull request Nov 22, 2024

Deploy Checklist: New Expensify 2024-11-22 #52978

Closed

75 tasks

getusha reviewed Dec 12, 2024

View reviewed changes

dominictb mentioned this pull request Dec 18, 2024

Emoji overlaps the word above #54207

Merged

50 tasks

bernhardoj mentioned this pull request Dec 27, 2024

[$250] Chat - Double strike through is applied for emojis #54618

Closed

8 tasks

andriivitiv reviewed Jan 14, 2025

View reviewed changes

andriivitiv mentioned this pull request Jan 14, 2025

[Due for payment 2025-02-19] [$250] Chat - Composer is cutted of when editing message with two lines of emojis. #55068

Closed

8 tasks

getusha mentioned this pull request Feb 25, 2025

[Due for payment 2025-02-25] [$250] Android - Chat - Emoji sent at the bottom of multiline message, overlaps the word above #53451

Closed

8 tasks

jjcoffee mentioned this pull request Apr 4, 2025

[$250] Web - In RHP, the emoji does not have the specified size #59594

Closed

8 tasks

gijoe0295 mentioned this pull request May 17, 2025

[Due for payment 2025-06-24] [$250] iOS Hybrid - Chat - Top half of emoji is cut off when sending a message with markdown #62250

Closed

8 tasks

bernhardoj mentioned this pull request Jun 10, 2025

[Due for payment 2025-09-12] [$250] inconsistent emoji format for markdown #63833

Closed

8 tasks

		get ALL_EMOJIS() {
		return new RegExp(this.EMOJIS, this.EMOJIS.flags.concat('g'));

		textContainsOnlyEmojis ? styles.onlyEmojisTextLineHeight : {},
		textContainsOnlyEmojis && hasMultipleLines ? styles.onlyEmojisTextLineHeight : {},

Enlarge emojis in other contexts than just single character messages #47547

Enlarge emojis in other contexts than just single character messages #47547

Uh oh!

Conversation

VickyStash commented Aug 16, 2024 • edited by pecanoro Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Details

Fixed Issues

Tests

Offline tests

QA Steps

PR Author Checklist

Screenshots/Videos

Uh oh!

melvin-bot bot commented Aug 20, 2024

Uh oh!

melvin-bot bot commented Aug 21, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

VickyStash commented Nov 19, 2024

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

pecanoro commented Nov 20, 2024

Uh oh!

parasharrajat commented Nov 20, 2024

Uh oh!

parasharrajat commented Nov 21, 2024

Uh oh!

parasharrajat left a comment

Choose a reason for hiding this comment

Uh oh!

OSBotify commented Nov 21, 2024

Uh oh!

github-actions bot commented Nov 22, 2024

Uh oh!

github-actions bot commented Nov 26, 2024

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

13 participants

VickyStash commented Aug 16, 2024 •

edited by pecanoro

Loading