[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

m-natarajan · 2023-10-05T13:53:30Z

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

Action Performed:

Open any report
Send a message
Hover on message and click add reaction
Hover on space on the right of "change the default skin tone", Observe clickable

Expected Result:

Can not click on space on the right of "change the default skin tone"

Actual Result:

Can click on space on the right of "change the default skin tone"

Workaround:

unknown

Platforms:

Which of our officially supported platforms is this issue occurring on?

Version Number: 1.3.78-0
Reproducible in staging?: y
Reproducible in production?: y
If this was caught during regression testing, add the test name, ID and link from TestRail:
Email or phone of affected tester (no customers):
Logs: https://stackoverflow.com/c/expensify/questions/4856
Notes/Photos/Videos: Any additional supporting documentation

Screen.Recording.2023-10-04.at.20.15.30.mov

Screen.Recording.2023-10-04.at.20.12.47.mov

RPReplay_Final1696424601.MP4

RPReplay_Final1696424637.MP4

Screen.Recording.2023-10-04.at.20.02.44.mov

Screen.Recording.2023-10-04.at.19.52.55.mov

Recording.475.mp4

Expensify/Expensify Issue URL:
Issue reported by: @namhihi237
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1696424388503359

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~01da9a465c887f2507
Upwork Job ID: 1709929828423364608
Last Price Increase: 2023-10-05
Automatic offers:

Pujan92 | Contributor | 27095403
namhihi237 | Reporter | 27095405

melvin-bot · 2023-10-05T13:53:37Z

Job added to Upwork: https://www.upwork.com/jobs/~01da9a465c887f2507

saranshbalyan-1234 · 2023-10-05T13:53:41Z

Proposal

Please re-state the problem that we are trying to solve in this issue.

Able to click on the space on the right to 'change the default skin tone'

What is the root cause of that problem?

App/src/components/EmojiPicker/EmojiSkinToneList.js

Lines 47 to 57 in a07bb15

    
           <PressableWithoutFeedback 
        
               onPress={toggleIsSkinToneListVisible} 
        
               style={[styles.flex1, styles.flexRow, styles.alignSelfCenter, styles.justifyContentStart, styles.alignItemsCenter]} 
        
               accessibilityLabel={props.translate('emojiPicker.skinTonePickerLabel')} 
        
               accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} 
        
           > 
        
               <View style={[styles.emojiItem, styles.justifyContentCenter]}> 
        
                   <Text style={[styles.emojiText, styles.ph2, styles.textNoWrap]}>{currentSkinTone.code}</Text> 
        
               </View> 
        
               <Text style={[styles.emojiSkinToneTitle]}>{props.translate('emojiPicker.skinTonePickerLabel')}</Text> 
        
           </PressableWithoutFeedback>

styles.flex1 is causing the issue to occupy all the space available.

What changes do you think we should make in order to solve the problem?

Remove styles.flex1 from and add styles.ml4 to the <Text component where 'emojiPicker.skinTonePickerLabel' is there.
Solution would look something like this.
Tested and works fine in all platform

  <PressableWithoutFeedback
          onPress={toggleIsSkinToneListVisible}
          style={[styles.flexRow, styles.alignSelfCenter, styles.justifyContentStart, styles.alignItemsCenter]}
          accessibilityLabel={props.translate('emojiPicker.skinTonePickerLabel')}
          accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON}
    >
          <View style={[styles.emojiItem, styles.justifyContentCenter]}>
                 <Text style={[styles.emojiText, styles.ph2, styles.textNoWrap]}>{currentSkinTone.code}</Text>
          </View>
          <Text style={[styles.emojiSkinToneTitle,styles.ml4]}>{props.translate('emojiPicker.skinTonePickerLabel')}</Text>
  </PressableWithoutFeedback>

What alternative solutions did you explore? (Optional)

N/A

melvin-bot · 2023-10-05T13:53:43Z

Triggered auto assignment to Contributor-plus team member for initial proposal review - @allroundexperts (External)

m-natarajan · 2023-10-05T13:54:17Z

Proposal by @namhihi237

Please re-state the problem that we are trying to solve in this issue.

We want to fix can not click on the space on the right of "change the default skin tone"

What is the root cause of that problem?

We are having PressableWithoutFeedback wrap icon and text. it is taking up the entire width.

App/src/components/EmojiPicker/EmojiSkinToneList.js

Lines 47 to 57 in 24aa7c1

    
           <PressableWithoutFeedback 
        
               onPress={toggleIsSkinToneListVisible} 
        
               style={[styles.flex1, styles.flexRow, styles.alignSelfCenter, styles.justifyContentStart, styles.alignItemsCenter]} 
        
               accessibilityLabel={props.translate('emojiPicker.skinTonePickerLabel')} 
        
               accessibilityRole={CONST.ACCESSIBILITY_ROLE.BUTTON} 
        
           > 
        
               <View style={[styles.emojiItem, styles.justifyContentCenter]}> 
        
                   <Text style={[styles.emojiText, styles.ph2, styles.textNoWrap]}>{currentSkinTone.code}</Text> 
        
               </View> 
        
               <Text style={[styles.emojiSkinToneTitle]}>{props.translate('emojiPicker.skinTonePickerLabel')}</Text> 
        
           </PressableWithoutFeedback>

What changes do you think we should make in order to solve the problem?

We should remove flex1 in Pressable Without Feedback so that it no longer takes up the entire width

<PressableWithoutFeedback
    style={[styles.flexRow, styles.alignSelfCenter, styles.justifyContentStart, styles.alignItemsCenter]}
>
       <View style={[styles.emojiItem, styles.justifyContentCenter, styles.mh2]}>
            <Text style={[styles.emojiText]}>{currentSkinTone.code}</Text>

What alternative solutions did you explore? (Optional)

N/A

Pujan92 · 2023-10-05T14:35:52Z

Proposal

Please re-state the problem that we are trying to solve in this issue.

An entire row of the skin tone is pressable

What is the root cause of that problem?

We have given flex1 for the Pressable which will take available width.

App/src/components/EmojiPicker/EmojiSkinToneList.js

Line 49 in 76c971b

    
           style={[styles.flex1, styles.flexRow, styles.alignSelfCenter, styles.justifyContentStart, styles.alignItemsCenter]}

What changes do you think we should make in order to solve the problem?

We need to make below changes

Remove flex1 style from the Pressable
Add styles.wAuto to the wrapper View of the currentSkinTone

App/src/components/EmojiPicker/EmojiSkinToneList.js

Line 53 in 76c971b

<View style={[styles.emojiItem, styles.justifyContentCenter]}>

Why? bcoz style class emojiItem contains prop width: 12.5% and if we take out flex1 from parent then the width gets reduced and this 12.5% width won't be sufficient for the currentSkinTone. So with styles.wAuto it will override the width and take the required width.

Remove width 100% from the emojiSkinToneTitle otherwise it overflows and creates an issue for native.
https://github.com/Expensify/App/blob/76c971b1430df7ddbfe2ce4a80c400ab4e9d1fd6/src/components/EmojiPicker/EmojiSkinToneList.js#L56C47-L56C47

App/src/styles/styles.js

Lines 1745 to 1746 in 76c971b

emojiSkinToneTitle: {

width: '100%',

allroundexperts · 2023-10-08T20:02:04Z

@Pujan92's proposal looks good to me.

With all prior proposals, the layout seems to break on Android like below:

🎀 👀 🎀 C+ reviewed

melvin-bot · 2023-10-08T20:02:11Z

Triggered auto assignment to @MariaHCD, see https://stackoverflow.com/c/expensify/questions/7972 for more details.

melvin-bot · 2023-10-09T07:01:39Z

📣 @allroundexperts Please request via NewDot manual requests for the Reviewer role ($500)

melvin-bot · 2023-10-09T07:01:44Z

📣 @Pujan92 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job
Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻
Keep in mind: Code of Conduct | Contributing 📖

melvin-bot · 2023-10-09T07:01:48Z

📣 @namhihi237 🎉 An offer has been automatically sent to your Upwork account for the Reporter role 🎉 Thanks for contributing to the Expensify app!

Offer link
Upwork job

Pujan92 · 2023-10-10T13:53:53Z

@allroundexperts PR is ready for review!

melvin-bot · 2023-10-11T07:33:56Z

🎯 ⚡️ Woah @allroundexperts / @Pujan92, great job pushing this forwards! ⚡️

The pull request got merged within 3 working days of assignment, so this job is eligible for a 50% #urgency bonus 🎉

when @Pujan92 got assigned: 2023-10-09 07:01:44 Z
when the PR got merged: 2023-10-11 07:33:55 UTC

On to the next one 🚀

melvin-bot · 2023-10-13T22:00:28Z

Reviewing label has been removed, please complete the "BugZero Checklist".

melvin-bot · 2023-10-13T22:52:52Z

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.83-11 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

Fix: Can click on the space on the right to change the default skin tone #29177

If no regressions arise, payment will be issued on 2023-10-20. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

External issue reporter
Contributor that fixed the issue
Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

@Pujan92 requires payment offer (Contributor)
@allroundexperts does not require payment (Eligible for Manual Requests)
@namhihi237 requires payment offer (Reporter)

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

Merged PR within 3 business days of assignment - 50% bonus
Merged PR more than 9 business days after assignment - 50% penalty

melvin-bot · 2023-10-16T21:15:30Z

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.84-10 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

Fix: Can click on the space on the right to change the default skin tone #29177

If no regressions arise, payment will be issued on 2023-10-23. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

External issue reporter
Contributor that fixed the issue
Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

@Pujan92 requires payment offer (Contributor)
@allroundexperts does not require payment (Eligible for Manual Requests)
@namhihi237 requires payment offer (Reporter)

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

Merged PR within 3 business days of assignment - 50% bonus
Merged PR more than 9 business days after assignment - 50% penalty

melvin-bot · 2023-10-16T21:40:59Z

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.3.84-10 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

Fix: Can click on the space on the right to change the default skin tone #29177

If no regressions arise, payment will be issued on 2023-10-23. 🎊

After the hold period is over and BZ checklist items are completed, please complete any of the applicable payments for this issue, and check them off once done.

External issue reporter
Contributor that fixed the issue
Contributor+ that helped on the issue and/or PR

For reference, here are some details about the assignees on this issue:

@Pujan92 requires payment offer (Contributor)
@allroundexperts does not require payment (Eligible for Manual Requests)
@namhihi237 requires payment offer (Reporter)

As a reminder, here are the bonuses/penalties that should be applied for any External issue:

Merged PR within 3 business days of assignment - 50% bonus
Merged PR more than 9 business days after assignment - 50% penalty

allroundexperts · 2023-10-18T11:00:43Z

Checklist

Added skin tone support for Emojis #4456
https://github.com/Expensify/App/pull/4456/files#r1363669041
N/A
A regression test would be good.

Regression test

Login and open any report
Send a message
Hover on message and click add reaction
Hover on space on the right of "change the default skin tone" and verify that its not clickable

Do we 👍 or 👎 ?

MariaHCD · 2023-10-23T12:07:36Z

Look good to me. Although I just realized we don't have a BZ member on this issue? 😕

melvin-bot · 2023-10-23T12:07:52Z

Triggered auto assignment to @MitchExpensify (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

melvin-bot · 2023-10-23T12:07:54Z

Bug0 Triage Checklist (Main S/O)

This "bug" occurs on a supported platform (ensure Platforms in OP are ✅)
This bug is not a duplicate report (check E/App issues and #expensify-bugs)
- If it is, comment with a link to the original report, close the issue and add any novel details to the original issue instead
This bug is reproducible using the reproduction steps in the OP. S/O
- If the reproduction steps are clear and you're unable to reproduce the bug, check with the reporter and QA first, then close the issue.
- If the reproduction steps aren't clear and you determine the correct steps, please update the OP.
This issue is filled out as thoroughly and clearly as possible
- Pay special attention to the title, results, platforms where the bug occurs, and if the bug happens on staging/production.
I have reviewed and subscribed to the linked Slack conversation to ensure Slack/Github stay in sync

MariaHCD · 2023-10-23T12:08:52Z

@MitchExpensify The PR has already been merged and deployed, we just need the payments to go out here. Thanks!

JmillsExpensify · 2023-10-23T16:34:43Z

Need a payment summary for this issue.

MitchExpensify · 2023-10-24T19:26:46Z

Payment summary:

$750 @Pujan92 requires payment offer (Contributor)
$750 @allroundexperts does not require payment (Eligible for Manual Requests)
50 @namhihi237 requires payment offer (Reporter)

JmillsExpensify · 2023-10-24T19:31:06Z

$750 payment approved for @allroundexperts based on comment above.

MitchExpensify · 2023-10-24T19:35:44Z

All paid in Upwork

m-natarajan added the External Added to denote the issue can be worked on by a contributor label Oct 5, 2023

melvin-bot bot changed the title ~~Can click on the space on the right to change the default skin tone~~ [$500] Can click on the space on the right to change the default skin tone Oct 5, 2023

melvin-bot bot added the Help Wanted Apply this label when an issue is open to proposals by contributors label Oct 5, 2023

melvin-bot bot assigned allroundexperts Oct 5, 2023

melvin-bot bot added the Daily KSv2 label Oct 5, 2023

melvin-bot bot assigned MariaHCD Oct 8, 2023

MariaHCD assigned Pujan92 Oct 9, 2023

melvin-bot bot removed the Help Wanted Apply this label when an issue is open to proposals by contributors label Oct 9, 2023

Pujan92 mentioned this issue Oct 10, 2023

Fix: Can click on the space on the right to change the default skin tone #29177

Merged

59 tasks

melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Daily KSv2 labels Oct 10, 2023

melvin-bot bot added Weekly KSv2 Awaiting Payment Auto-added when associated PR is deployed to production and removed Weekly KSv2 labels Oct 13, 2023

melvin-bot bot changed the title ~~[$500] Can click on the space on the right to change the default skin tone~~ [HOLD for payment 2023-10-20] [$500] Can click on the space on the right to change the default skin tone Oct 13, 2023

melvin-bot bot removed the Reviewing Has a PR in review label Oct 13, 2023

melvin-bot bot changed the title ~~[HOLD for payment 2023-10-20] [$500] Can click on the space on the right to change the default skin tone~~ [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 Oct 13, 2023

melvin-bot bot added Weekly KSv2 and removed Weekly KSv2 labels Oct 16, 2023

allroundexperts mentioned this issue Oct 18, 2023

Added skin tone support for Emojis #4456

Merged

5 tasks

melvin-bot bot added Daily KSv2 Overdue and removed Weekly KSv2 labels Oct 20, 2023

melvin-bot bot removed the Overdue label Oct 23, 2023

MariaHCD added the Bug Something is broken. Auto assigns a BugZero manager. label Oct 23, 2023

melvin-bot bot assigned MitchExpensify Oct 23, 2023

MitchExpensify closed this as completed Oct 24, 2023

idanbe4 mentioned this issue May 17, 2024

[Snyk] Security upgrade expo from 50.0.4 to 51.0.8 be4solutions/App#10

Open

MelvinBot mentioned this issue May 17, 2024

[Snyk] Security upgrade expo from 50.0.4 to 51.0.8 #42357

Closed

50 tasks

melvin-bot bot mentioned this issue May 17, 2024

[Snyk] Security upgrade expo from 50.0.4 to 51.0.8 #42358

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[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

[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

m-natarajan commented Oct 5, 2023 •

edited by melvin-bot bot

Loading

melvin-bot bot commented Oct 5, 2023

saranshbalyan-1234 commented Oct 5, 2023

melvin-bot bot commented Oct 5, 2023

m-natarajan commented Oct 5, 2023

Pujan92 commented Oct 5, 2023

allroundexperts commented Oct 8, 2023 •

edited

Loading

melvin-bot bot commented Oct 8, 2023

melvin-bot bot commented Oct 9, 2023

melvin-bot bot commented Oct 9, 2023

melvin-bot bot commented Oct 9, 2023

Pujan92 commented Oct 10, 2023

melvin-bot bot commented Oct 11, 2023

melvin-bot bot commented Oct 13, 2023

melvin-bot bot commented Oct 13, 2023

melvin-bot bot commented Oct 16, 2023

melvin-bot bot commented Oct 16, 2023

allroundexperts commented Oct 18, 2023

MariaHCD commented Oct 23, 2023

melvin-bot bot commented Oct 23, 2023

melvin-bot bot commented Oct 23, 2023

MariaHCD commented Oct 23, 2023

JmillsExpensify commented Oct 23, 2023

MitchExpensify commented Oct 24, 2023

JmillsExpensify commented Oct 24, 2023

MitchExpensify commented Oct 24, 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

[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

Comments

m-natarajan commented Oct 5, 2023 • edited by melvin-bot bot Loading

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

melvin-bot bot commented Oct 5, 2023

saranshbalyan-1234 commented Oct 5, 2023

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

melvin-bot bot commented Oct 5, 2023

m-natarajan commented Oct 5, 2023

Proposal by @namhihi237

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

What alternative solutions did you explore? (Optional)

Pujan92 commented Oct 5, 2023

Proposal

Please re-state the problem that we are trying to solve in this issue.

What is the root cause of that problem?

What changes do you think we should make in order to solve the problem?

allroundexperts commented Oct 8, 2023 • edited Loading

melvin-bot bot commented Oct 8, 2023

melvin-bot bot commented Oct 9, 2023

melvin-bot bot commented Oct 9, 2023

melvin-bot bot commented Oct 9, 2023

Pujan92 commented Oct 10, 2023

melvin-bot bot commented Oct 11, 2023

melvin-bot bot commented Oct 13, 2023

melvin-bot bot commented Oct 13, 2023

melvin-bot bot commented Oct 16, 2023

melvin-bot bot commented Oct 16, 2023

allroundexperts commented Oct 18, 2023

Checklist

Regression test

MariaHCD commented Oct 23, 2023

melvin-bot bot commented Oct 23, 2023

melvin-bot bot commented Oct 23, 2023

Bug0 Triage Checklist (Main S/O)

MariaHCD commented Oct 23, 2023

JmillsExpensify commented Oct 23, 2023

MitchExpensify commented Oct 24, 2023

JmillsExpensify commented Oct 24, 2023

MitchExpensify commented Oct 24, 2023

m-natarajan commented Oct 5, 2023 •

edited by melvin-bot bot

Loading

allroundexperts commented Oct 8, 2023 •

edited

Loading