[HOLD for payment 2023-06-12] [$1000] Padding above “no result found” error in message input “Emoji- Search bar” is not consistent.

[kavimuru]

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:

1. Open “Chats”
2. Click “Emoji”.
3. Search an invalid Emoji, so that “no result found” error appear.
4. Observe that the bottom padding of the input field is 8px 16px.
5. Please note that all below search bar reflects padding of 0px 20px 12px on search of an invalid item.
   Search bar next to chats.
   Send money- select a currency.
   Profile- Pronouns
   Profile- Timezone
   DOB-Year

Expected Result:

Padding for the error “No result found” should be consistent among pages.

Actual Result:

Padding for the error “No result found” is not consistent among pages.

Workaround:

Can the user still use Expensify without this being fixed? Have you informed them of the workaround?

Platforms:

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

• Android / native
• Android / Chrome
• iOS / native
• iOS / Safari
• MacOS / Chrome / Safari
• MacOS / Desktop

Version Number: 1.3.13.2
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

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

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01399c717b42532302
• Upwork Job ID: 1658488402800201728
• Last Price Increase: 2023-05-30

[melvin-bot]

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

[melvin-bot]

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

[dhairyasenjaliya]

Proposal

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

• Padding above “no result found” error in message input “Emoji- Search bar” is not consistent

What is the root cause of that problem?

• The root cause is we are using normal <View> Inside EmojiPickerMenu/index.js and we have added styles.pb2 instead of styles.pb3 which is we are using in <OptionsSelector> that makes un-consistent

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

• We just need to change styles.pb2 to styles.pb3 which is exactly used at <OptionsSelector>

- <View style={[styles.ph4, styles.pb2, styles.pt2]}>
+ <View style={[styles.ph4, styles.pb3, styles.pt2]}>
                        <TextInput
                            label={this.props.translate('common.search')}
                            onChangeText={this.filterEmojis}
                            defaultValue=""
                            ref={(el) => (this.searchInput = el)}
                            autoFocus
                            selectTextOnFocus={this.state.selectTextOnFocus}
                            onSelectionChange={this.onSelectionChange}
                            onFocus={() => this.setState({isFocused: true, highlightedIndex: -1, isUsingKeyboardMovement: false})}
                            onBlur={() => this.setState({isFocused: false})}
                        />
                    </View>

What alternative solutions did you explore? (Optional)

• We can adjust styling of margin top of emoji group

Result

[huzaifa-99]

Proposal

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

We want the padding for the error “No result found” to be consistent among components.

What is the root cause of that problem?

In emoji search input we don't apply the proper bottom padding on the input

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

We should add consistent input to the emoji search input by replacing this line with

<View style={[styles.ph4, styles.pb3, styles.pt2]}>

This would however cause padding inconsistencies in normal search mode, so we should also remove styles.pt2 from this line to make it consistent.

What alternative solutions did you explore? (Optional)

N/A

[dhairyasenjaliya]

Proposal - 2

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

• Padding above “no result found” error in message input “Emoji- Search bar” is not consistent

What is the root cause of that problem?

• The root cause is we are using normal <View> Inside EmojiPickerMenu/index.js and we have added styles.pb2 instead of styles.pb3 which is we are using in <OptionsSelector> that makes un-consistent

• I find un-consistency in my proposal - 1 which is it will add extra padding-bottom to CategoryShortcutBar as well

• Also just removing styles.pt2 from CategoryShortcutBar will cause another bug on a native app that it will mismatch padding from the top and bottom

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

• So what changes we can approach is that we just need to add styles.pt1 to noResultsFound <Text> component which will add marginTop:4 so combined both will be marginBottom : 8 from emoji search bar + marginTop: 4 from noResultsFound <Text> makes total space between component is 12 which is actually missing as per consistency

• Also CategoryShortcutBar has its own padding that is applied to the button which is perfect and this changes doesn't affect that as well

• as updated proposal to add changes as below conversation here [HOLD for payment 2023-06-12] [$1000] Padding above “no result found” error in message input “Emoji- Search bar” is not consistent. #18909 (comment), we need to adjust WorkspaceMembersPage.js as well for consistency we need to replace pv4 to pv3 but we can also adjust top and bottom differently

 // EmojiPickerMenu/index.js
 
                 {this.state.filteredEmojis.length === 0 ? (
+                    <Text style={[styles.pt1, styles.disabledText, styles.emojiPickerList, styles.textLabel, styles.colorMuted, this.isMobileLandscape() && styles.emojiPickerListLandscape]}>
                        {this.props.translate('common.noResultsFound')}
                    </Text>
                ) :
 
 
 
 //WorkspaceMembersPage.js
 
-                          <View style={[styles.w100, styles.pv4, styles.ph5]}>
+                            <View style={[styles.w100, styles.pv3, styles.ph5]}>
                                <TextInput
                                    value={this.state.searchValue}
                                    onChangeText={this.updateSearchValue}
                                    label={this.props.translate('optionsSelector.findMember')}
                                />
                            </View>
 

What alternative solutions did you explore? (Optional)

• N/A

Result

[melvin-bot]

Job added to Upwork: https://www.upwork.com/jobs/~01399c717b42532302

[melvin-bot]

Current assignee @slafortune is eligible for the External assigner, not assigning anyone new.