Added skin tone support for Emojis #4456

mananjadhav · 2021-08-06T14:43:22Z

@stitesExpensify Task complete. Can you review, please?

Details

Extended the existing Emoji Picker to add Skin Tone support.

Fixed Issues

$ #4323

Tests

Tested several emojis with all skin tones
Verified NVP is stored for Preferred Skin tone
Verified NVP is available on refresh on the same device and other devices
Tested Filter + Skintone
Verified missing skin tones for all the emojis
Tested default and null handling for emoji skin tones in case skin tone not available
UI elements in terms of selection, on hover, refreshing the list tested
UI matched with the mockup shared
Tested with Landscape mode for Mobile Devices

QA Steps

Go to chats and open EmojiPicker
With the first attempt the default skin tone should show up.
Choose the skin tone and verify that all the Emojis with Skin tone support have the chosen skin tone
Select any emoji and it should render with the chosen skin tone
Change the skin tone and the emojis should have the updated skin tone
Login with another device and ensure that the chosen Emoji skin tone is reflected by default
Try deleting the emoji and see that it doesn't require two deletes.
Attempt to load the Emoji picker in the Mobile landscape view as well and see that emoji picker doesn't break
Search the emojis with keywords. These should also show up the emojis in chosen skin tone only

Tested On

Screenshots

Web

emoji-skintone-web_nXawXt4H.mp4

Mobile Web

emoji-skintone-mweb_lkLVcSj5.mp4

Updated

Desktop

emoji-skintone-desktop.mp4

iOS

https://user-images.githubusercontent.com/3069065/128576156-2787a270-bdec-4fad-9db2-c4240b5c5211.mp4

Updated

Android

emoji-skintone-android_loTYePmA.mp4

Updated

…code

…oji-skintone

…moji-skintone

…nent

mananjadhav · 2021-09-03T00:29:57Z

@stitesExpensify clarifying again:

CONST.NVP. PREFERRED_EMOJI_SKIN_TONE: 'expensify_preferredEmojiSkinTone'
ONXYKEYS.PREFERRED_EMOJI_SKIN_TONE: 'preferredSkinTone',

right?

stitesExpensify · 2021-09-03T23:34:41Z

Let's just do

CONST.NVP. PREFERRED_EMOJI_SKIN_TONE: 'expensify_preferredEmojiSkinTone'
ONXYKEYS.PREFERRED_EMOJI_SKIN_TONE: 'preferredEmojiSkinTone',

mananjadhav · 2021-09-04T04:45:26Z

Ohh my, Sorry for the confusion but that's what I've done in the PR. I made a typo while putting it in a comment. Can you please review and close it?

stitesExpensify · 2021-09-08T18:14:42Z

Everything is looking great! One more thing I found while testing is that the selector is not the same height as the button which makes the picker jump around

2021-09-08_12-13-30.mp4

mananjadhav · 2021-09-08T18:17:12Z

Okay noted. I'll check and update it.

stitesExpensify · 2021-09-08T18:19:40Z

Thanks! I think after that we'll get this merged!

…moji-skintone # Conflicts: # src/libs/actions/User.js

mananjadhav · 2021-09-09T00:55:28Z

@stitesExpensify PR updated.

Screen.Recording.2021-09-09.at.6.12.44.AM.mov

mananjadhav · 2021-09-09T04:03:58Z

@stitesExpensify I found another issue that the Skintone picker wasn't visible in the mobile landscape mode. This was because of another fix in the PR where we added some top margin so that the landscape mode picker works fine. I've had to change the approach to accommodate skin tone list. I guess now it is good to be merged with all the testing :)

Attached screenshots and updated in the PR body as well.

stitesExpensify

LGTM!

stitesExpensify · 2021-09-09T18:08:22Z

Can you write some QA steps? After that I'll merge :)

mananjadhav · 2021-09-09T18:48:40Z

@stitesExpensify Updated QA steps. Anything I've missed out?

stitesExpensify · 2021-09-09T20:30:32Z

Nope those look great. Time to ship it! 😄

OSBotify · 2021-09-09T20:31:37Z

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

OSBotify · 2021-09-09T22:12:08Z

🚀 Deployed to staging by @stitesExpensify in version: 1.0.95-2 🚀

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

botify · 2021-09-10T19:12:10Z

This has been deployed to production and is now subject to a 7-day regression period.
If no regressions arise, payment will be issued on 2021-09-17. 🎊

OSBotify · 2021-09-10T19:30:11Z

🚀 Deployed to production by @roryabraham in version: 1.0.96-0 🚀

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

allroundexperts · 2023-10-18T10:54:44Z

src/pages/home/report/EmojiSkinToneList.js

+                            }
+                            style={[
+                                styles.pv1,
+                                styles.flex1,


Setting this as flex: 1 caused #28917

Thanks for pointing out.

mananjadhav added 12 commits August 5, 2021 01:16

fix(emoji-skintone): Added skintones list to emoji

e40dc95

fix(emoji-skintone): Added key in Onyx for preferred skintone

ba97173

fix(emoji-skintone): Props and state setup for emojis

8e5c5bb

fix(emoji-skintone): Added view with skintone list and updated emoji …

46c4777

…code

Merge branch 'main' of https://github.com/mananjadhav/App into fix/em…

65c1fe9

…oji-skintone

fix(emoji-skintone): Added default hand skintone

a3eb861

refactor(emoji-skintone): Updated skintone array format

303d4d1

feat(emoji-skintone): Moved skintone picker to a new render function

f92350b

chore(emoji-skintone): Updated translations

c228979

fix(emoj-skintone): Added helpertext with style changes

2715548

fix(emoji-skintone): Updated item style for skintone picker

d2dca50

fix(emoji-skintone): Fixed index check for type selection

ac2da53

mananjadhav requested a review from a team as a code owner August 6, 2021 14:43

MelvinBot requested review from puneetlath and removed request for a team August 6, 2021 14:43

mananjadhav added 15 commits August 6, 2021 20:43

fix(emoji-skintone): Rerender emoji on code change

7a769ad

fix(emoji-skintone): Store skinTone preference on the server side

762f4d8

Merge branch 'main' of https://github.com/mananjadhav/App into feat/e…

e4b4a2f

…moji-skintone

fix(emoji-skintone): Moved preferredSkinTone from state to props

c4abee5

fix(emoji-skintone): Moved the api calls and default key for nvp

d6f205a

fix(emoji-skintone): null handling for skintone

c2e4325

fix(emoji-skintone): 0 handling for skintone

b28846f

docs(emoji-skintone): Updated comments and jsdocs

993c974

refact(emoji-skintone): Moved getSkinToneEmoji to new file

09c810a

fix(emoji-skintone): Added skinPicker to native

968195e

refactor(emoji-skintone): Moved SkinTone picker to a new component

2cbb51d

fix(emoji-skintone): Fixed errors with EmojiSkinTone picker

20a6368

refact(emoji-skintone): replaced function by new skin tone list compo…

523f439

…nent

fix(emoji-skintone): Fixed highlight logic for skin tone list

2f37923

refactor(emoji-skintone): Removed unused references and code cleanup

45e6ed5

mananjadhav requested a review from stitesExpensify September 3, 2021 00:21

refactor(emoji-skintone): Update keynames for onyx and nvp

ac8289e

mananjadhav added 2 commits September 9, 2021 06:13

fix(emoji-skintone): Added separate styling for Emoji Skin tone title

1abd663

Merge branch 'main' of https://github.com/mananjadhav/App into feat/e…

e89ef92

…moji-skintone # Conflicts: # src/libs/actions/User.js

mananjadhav added 3 commits September 9, 2021 09:20

fix(emoji-skintone): Handle landscape view for mobile web

458ef10

fix(emoji-skintone): Removed the modal changes for landscape view

ed46a91

fix(emoji-skintone): Added landscape view check for mobile app

ccd9b8d

mananjadhav mentioned this pull request Sep 9, 2021

iPad - Chat - Delete comment option is not available in the menu in landscape mode #5154

Closed

stitesExpensify approved these changes Sep 9, 2021

View reviewed changes

stitesExpensify merged commit dad9ddd into Expensify:main Sep 9, 2021

OSBotify mentioned this pull request Sep 9, 2021

Deploy Checklist: New Expensify 2021-09-09 #5177

Closed

14 tasks

isagoico mentioned this pull request Sep 14, 2021

Skin tone selector does not have the same dimensions as the emoji list #5247

Closed

eVoloshchak mentioned this pull request May 24, 2023

[PAID] [$1000] Blue border is half cut on right edge in emoji picker on change default skin #17911

Closed

6 tasks

allroundexperts reviewed Oct 18, 2023

View reviewed changes

allroundexperts mentioned this pull request Oct 18, 2023

[HOLD for payment 2023-10-23] [HOLD for payment 2023-10-23] [HOLD for payment 2023-10-20] [HOLD for payment 2023-10-20] [$500] Can click on the space on the right to change the default skin tone #28917

Closed

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Added skin tone support for Emojis #4456

Added skin tone support for Emojis #4456

mananjadhav commented Aug 6, 2021 •

edited

Loading

mananjadhav commented Sep 3, 2021 •

edited

Loading

stitesExpensify commented Sep 3, 2021

mananjadhav commented Sep 4, 2021

stitesExpensify commented Sep 8, 2021

mananjadhav commented Sep 8, 2021

stitesExpensify commented Sep 8, 2021

mananjadhav commented Sep 9, 2021

mananjadhav commented Sep 9, 2021 •

edited

Loading

stitesExpensify left a comment

stitesExpensify commented Sep 9, 2021

mananjadhav commented Sep 9, 2021

stitesExpensify commented Sep 9, 2021

OSBotify commented Sep 9, 2021

OSBotify commented Sep 9, 2021

botify commented Sep 10, 2021

OSBotify commented Sep 10, 2021

allroundexperts Oct 18, 2023

mananjadhav Oct 18, 2023

Added skin tone support for Emojis #4456

Added skin tone support for Emojis #4456

Conversation

mananjadhav commented Aug 6, 2021 • edited Loading

Details

Fixed Issues

Tests

QA Steps

Tested On

Screenshots

Web

Mobile Web

Desktop

iOS

Android

mananjadhav commented Sep 3, 2021 • edited Loading

stitesExpensify commented Sep 3, 2021

mananjadhav commented Sep 4, 2021

stitesExpensify commented Sep 8, 2021

mananjadhav commented Sep 8, 2021

stitesExpensify commented Sep 8, 2021

mananjadhav commented Sep 9, 2021

mananjadhav commented Sep 9, 2021 • edited Loading

stitesExpensify left a comment

Choose a reason for hiding this comment

stitesExpensify commented Sep 9, 2021

mananjadhav commented Sep 9, 2021

stitesExpensify commented Sep 9, 2021

OSBotify commented Sep 9, 2021

OSBotify commented Sep 9, 2021

botify commented Sep 10, 2021

OSBotify commented Sep 10, 2021

allroundexperts Oct 18, 2023

Choose a reason for hiding this comment

mananjadhav Oct 18, 2023

Choose a reason for hiding this comment

mananjadhav commented Aug 6, 2021 •

edited

Loading

mananjadhav commented Sep 3, 2021 •

edited

Loading

mananjadhav commented Sep 9, 2021 •

edited

Loading