[HOLD for payment 2024-10-17] [$125] [Search v2.3] IOS - Emoji is cut off in the dropdown button

@dylanexpensify

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

Version Number: 9.0.41-2
Reproducible in staging?: Y
Reproducible in production?: N
If this was caught during regression testing, add the test name, ID and link from TestRail: N/A
Email or phone of affected tester (no customers): applausetester+kh010901@applause.expensifail.com
Issue reported by: Applause - Internal Team

Action Performed:

Precondition:

There is at least one saved search

Launch New Expensify app
Go to Search
Tap on the dropdown button
Tap 3-dot menu next to the saved search
Tap Rename
Enter an emoji and save it
Dismiss the dropdown modal

Expected Result:

The emoji will not be cut off in the dropdown button

Actual Result:

The emoji is cut off in the dropdown button

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Add any screenshot/video evidence

Ubyn6545.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

Upwork Job URL: https://www.upwork.com/jobs/~021840184545557049275
Upwork Job ID: 1840184545557049275
Last Price Increase: 2024-09-29
Automatic offers:

ahmedGaber93 | Reviewer | 104219452
Nodebrute | Contributor | 104219453

Issue Owner

Current Issue Owner: @dylanexpensify

@roryabraham

Triggered auto assignment to @roryabraham (DeployBlockerCash), see https://stackoverflowteams.com/c/expensify/questions/9980/ for more details.

👋 Friendly reminder that deploy blockers are time-sensitive ⏱ issues! Check out the open `StagingDeployCash` deploy checklist to see the list of PRs included in this release, then work quickly to do one of the following:

Identify the pull request that introduced this issue and revert it.
Find someone who can quickly fix the issue.
Fix the issue yourself.

Production:

Gird8845.1.mp4

Edited by proposal-police: This proposal was edited at 2024-09-28 19:37:50 UTC.

Proposal

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

Emoji is cut off in the dropdown button

What is the root cause of that problem?

We recently enabled users to add emojis to saved search names, but we didn't update the styles of the Text component to support emojis.

App/src/pages/Search/SearchTypeMenuNarrow.tsx

Lines 158 to 163 in 3047c1b

    
           <Text 
        
               numberOfLines={1} 
        
               style={[styles.textStrong, styles.flexShrink1, styles.fontSizeLabel]} 
        
           > 
        
               {menuTitle} 
        
           </Text>

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

We should also add styles of lineHeight: variables.lineHeightLarge to this text component

App/src/pages/Search/SearchTypeMenuNarrow.tsx

Lines 158 to 163 in 3047c1b

    
           <Text 
        
               numberOfLines={1} 
        
               style={[styles.textStrong, styles.flexShrink1, styles.fontSizeLabel]} 
        
           > 
        
               {menuTitle} 
        
           </Text>

Solution 1

          style={[styles.textStrong, styles.flexShrink1, styles.label]}

Solution 2

                                style={[styles.textStrong, styles.flexShrink1, styles.fontSizeLabel, styles.lineHeightLarge]}

Other minor styles can be adjusted in the PR

What alternative solutions did you explore? (Optional)

We can also use styles.textLineHeightNormal here

                                style={[styles.textStrong, styles.flexShrink1, styles.fontSizeLabel,styles.textLineHeightNormal]}

Alternative solution 2
We can add the lineheight styles according to the design.

Issue stemming from #49528, but NAB and not worth reverting imo

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

@ahmedGaber93

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

fix emoji styles #50075

If no regressions arise, payment will be issued on 2024-10-17. 🎊

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

@ahmedGaber93 requires payment automatic offer (Reviewer)
@Nodebrute requires payment automatic offer (Contributor)

@ahmedGaber93

BugZero Checklist: The PR fixing this issue has been merged! The following checklist (instructions) will need to be completed before the issue can be closed:

[@ahmedGaber93] The PR that introduced the bug has been identified. Link to the PR:
[@ahmedGaber93] The offending PR has been commented on, pointing out the bug it caused and why, so the author and reviewers can learn from the mistake. Link to comment:
[@ahmedGaber93] A discussion in #expensify-bugs has been started about whether any other steps should be taken (e.g. updating the PR review checklist) in order to catch this type of bug sooner. Link to discussion:
[@ahmedGaber93] Determine if we should create a regression test for this bug.
[@ahmedGaber93] If we decide to create a regression test for the bug, please propose the regression test steps to ensure the same bug will not reach production again.
[@dylanexpensify] Link the GH issue for creating/updating the regression test once above steps have been agreed upon:

I think this is a minor fix and no regression test require.

Tomorrow!

Done!

Navigation Menu

Repository navigation

[HOLD for payment 2024-10-17] [$125] [Search v2.3] IOS - Emoji is cut off in the dropdown button #49890

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

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)

45 remaining items

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	<Text
	numberOfLines={1}
	style={[styles.textStrong, styles.flexShrink1, styles.fontSizeLabel]}
	>
	{menuTitle}
	</Text>

[HOLD for payment 2024-10-17] [$125] [Search v2.3] IOS - Emoji is cut off in the dropdown button #49890

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

melvin-bot commented on Sep 28, 2024

github-actions commented on Sep 28, 2024

lanitochka17 commented on Sep 28, 2024

Nodebrute commented on Sep 28, 2024

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)

roryabraham commented on Sep 29, 2024

45 remaining items

melvin-bot commented on Oct 10, 2024

melvin-bot commented on Oct 10, 2024

melvin-bot commented on Oct 10, 2024

ahmedGaber93 commented on Oct 11, 2024

dylanexpensify commented on Oct 16, 2024

dylanexpensify commented on Oct 17, 2024

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions