[$250] [Search v1] Design updates to Search rows on mobile

[shawnborton]

We have a few simplifications we'd like to make for the mobile view of Search rows to help make the rows a bit more digestible and legible:

1. Let's remove the tag from the bottom line under the merchant, and only show a Category if one is available
2. Let's remove the icon in front of Category
3. If no category exists, let's vertically center the Merchant line in the available space
4. If no Merchant exists, let's use the Description if it exists. If neither exists, do nothing and leave it blank

cc @JmillsExpensify @luacmartins @Expensify/design

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01b532850f6d400dbe
• Upwork Job ID: 1806412035454885668
• Last Price Increase: 2024-06-27
• Automatic offers:
• dukenv0307 | Reviewer | 102915283
• dominictb | Contributor | 102915284

Issue Owner

Current Issue Owner: @dukenv0307

[melvin-bot[bot]]

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

[melvin-bot[bot]]

Triggered auto assignment to @garrettmknight (NewFeature), see https://stackoverflowteams.com/c/expensify/questions/14418#:~:text=BugZero%20process%20steps%20for%20feature%20requests for more details. Please add this Feature request to a GH project, as outlined in the SO.

[melvin-bot[bot]]

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

[neonbhai]

Proposal

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

Design updates to Search rows on mobile

What is the root cause of that problem?

This is a feature request

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

Let's remove the tag from the bottom line under the merchant, and only show a Category if one is available

We will remove the Tag Cell from here: https://github.com/Expensify/App/blob/3519795a4c2f41e9549131bd6c3b89bdbc2c172b/src/components/SelectionList/Search/TransactionListItemRow.tsx#L249-L253

Let's remove the icon in front of Category

We will edit this function to only use TextWithTooltip. We will remove this part. We will update the styles to use only one component if it can be done simply.

If no category exists, let's vertically center the Merchant line in the available space

We will add alignItemsCenter styling to this view if transactionItem?.category doesn't exist. We will use a variable to facilitate the check. The line seems near centre but not on, so we apply this.

If no Merchant exists, let's use the Description if it exists. If neither exists, do nothing and leave it blank

We will add a check here to see if transactionItem.formattedMerchant exists. We will render the description if it doesn't. https://github.com/Expensify/App/blob/3519795a4c2f41e9549131bd6c3b89bdbc2c172b/src/components/SelectionList/Search/TransactionListItemRow.tsx#L112

Assuming we want this behaviour on web also. If not we will add a check for isLargeScreenWidth when defaulting to description

[dominictb]

Proposal

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

• [Search v1] Design updates to Search rows on mobile

What is the root cause of that problem?

• New feature.

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

  1. With the feature:

     Let's remove the tag from the bottom line under the merchant, and only show a Category if one is available

• We can update: https://github.com/Expensify/App/blob/b021195b864211efbaaefe188226b2830b91b7d8/src/components/SelectionList/Search/TransactionListItemRow.tsx#L244-L261 to:

• <View style={[styles.flex2, !item.category && styles.justifyContentCenter, styles.gap1]}> <MerchantCell transactionItem={item} showTooltip={showTooltip} isLargeScreenWidth={false} />

• {item.category && (

• <View style={[styles.flexRow, styles.flex1, styles.alignItemsEnd]}>

• <CategoryCell

• isLargeScreenWidth={isLargeScreenWidth}

• showTooltip={showTooltip}

• transactionItem={item}

• />

• )}

2. With the feature:

   Let's remove the icon in front of Category

• We can update: https://github.com/Expensify/App/blob/3519795a4c2f41e9549131bd6c3b89bdbc2c172b/src/components/SelectionList/Search/TransactionListItemRow.tsx#L169-L174 to:

• <TextWithTooltip shouldShowTooltip={showTooltip} text={transactionItem?.category} style={[styles.textMicro, styles.mnh0]} />

• In above, we only remove the icon, the text style should not be changed.

3. With the feature:

   If no category exists, let's vertically center the Merchant line in the available space

• We already do it in 1.

4. With the feature:

If no Merchant exists, let's use the Description if it exists. If neither exists, do nothing and leave it blank

• We can update: https://github.com/Expensify/App/blob/27a8d0a6d88698e7d2cc6d42692abfbe7a8f6b76/src/components/SelectionList/Search/TransactionListItemRow.tsx#L112 to:

  
  let merchant = transactionItem.shouldShowMerchant ? transactionItem.formattedMerchant : description;

• if (!isLargeScreenWidth) {
• merchant = transactionItem.shouldShowMerchant ? (transactionItem.formattedMerchant ?
• transactionItem.formattedMerchant : description) : description;
• }

  then update:
  https://github.com/Expensify/App/blob/27a8d0a6d88698e7d2cc6d42692abfbe7a8f6b76/src/components/SelectionList/Search/TransactionListItemRow.tsx#L302
  to:

                  isLargeScreenWidth={true}

• In the above, we only display the description as the fallback of the merchant in small screen width and shouldn't do it in large screen width because, in that screen, we have a column named "merchant". In this case, displaying the description instead of the merchant will confuse the user. But it is just my point, we can still apply the same feature on both screens based on the design team's decision.

  What alternative solutions did you explore? (Optional)

[dominictb]

Proposal Updated

[dukenv0307]

Thanks for all your proposals.

@neonbhai Your proposal is first but using alignItemsCenter is not correct to me. It should be justifyContentCenter like @dominictb's proposal.

I also agree we should set isLargeScreenWidth={true} in

https://github.com/Expensify/App/blob/27a8d0a6d88698e7d2cc6d42692abfbe7a8f6b76/src/components/SelectionList/Search/TransactionListItemRow.tsx#L302

At this place, isLargeScreenWidth is already true so setting isLargeScreenWidth: false can cause confusion.

Let's go with @dominictb's proposal

BTW, should we apply the description fallback on web/desktop? If yes, do we need to change the merchant column name? @shawnborton @luacmartins

🎀👀🎀 C+ reviewed

[melvin-bot[bot]]

Current assignee @luacmartins is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot[bot]]

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

Offer link Upwork job

[melvin-bot[bot]]

📣 @dominictb 🎉 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 📖

[luacmartins]

BTW, should we apply the description fallback on web/desktop? If yes, do we need to change the merchant column name? @shawnborton @luacmartins

I'll let @shawnborton confirm this one since he's more on top of those discussions.

[shawnborton]

BTW, should we apply the description fallback on web/desktop? If yes, do we need to change the merchant column name?

I think we decided no, since we plan to implement the dynamic columns on web/desktop - right @luacmartins ?

[luacmartins]

Yea, that makes sense!

[dominictb]

@dukenv0307 PR https://github.com/Expensify/App/pull/44677 is ready