[Search v1] Improvements to grouped expenses on the Search page

[shawnborton]

We're finding that the bold report title style and "X grouped expenses" feels a bit jarring when we show grouped expenses on the Search page. To help make this page feel more consistent, we'd like to make the following changes on Desktop Search for grouped expenses:

• don't use bold for the report title, use the same font as everywhere else
• remove the HR line that is above the expenses and below the title
• remove X grouped expenses text
• move the expense type icon to the left of the row
• use a more subtle style for view button
  • I think the best idea would be to add a 4th style to our buttons, basically a "link button" style (inspo from Bootstrap). This would use the same height/font/sizing props as all other buttons, but they wouldn't have a BG color and would use our link color instead
• use combined RBR + button pattern when needed. Our buttons already support having an icon in them, we'd just pass the RBR icon plus a color

That gives us something like this for desktop:

For mobile, we'll take a few similar approaches:

• remove the X grouped expenses text
• don't use bold for the title or amount
• use combined RBR button

Also note: we'll want to make sure this PR gets merged first since it has some font changes we'll want here

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~0116b9010289ce564f
• Upwork Job ID: 1804172877990281426
• Last Price Increase: 2024-06-21
• Automatic offers:
• dominictb | Contributor | 102873381

Issue Owner

Current Issue Owner: @sobitneupane

[melvin-bot[bot]]

Job added to Upwork: https://www.upwork.com/jobs/~0116b9010289ce564f

[melvin-bot[bot]]

Triggered auto assignment to @adelekennedy (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 - @sobitneupane (External)

[dominictb]

@shawnborton

• About the feature:

  use combined RBR + button pattern when needed. Our buttons already support having an icon in them, we'd just pass the RBR icon plus a color

Maybe it is not implemented in staging, right? Now, all the button have "View" title.

[dominictb]

Proposal

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

What is the root cause of that problem?

• This is new feature.

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

  Desktop

  1. With the feature

     don't use bold for the report title, use the same font as everywhere else

• We can update this style: https://github.com/Expensify/App/blob/b021195b864211efbaaefe188226b2830b91b7d8/src/styles/index.ts#L5030-L5034 to:

      reportListItemTitle: {
          color: theme.text,
          fontSize: variables.fontSizeNormal,
      },
      reportListItemBoldTitle: {
          color: theme.text,
          fontSize: variables.fontSizeNormal,
          fontWeight: FontUtils.fontWeight.bold,
      },

  and update https://github.com/Expensify/App/blob/b021195b864211efbaaefe188226b2830b91b7d8/src/components/SelectionList/Search/ReportListItem.tsx#L161 to:

                              <Text style={[styles.reportListItemTitle]}>{reportItem?.reportName}</Text>

• With this change, the bold is removed and the font size is 15px.

2. With the feature:

   remove the HR line that is above the expenses and below the title remove X grouped expenses text

• We can remove: https://github.com/Expensify/App/blob/b021195b864211efbaaefe188226b2830b91b7d8/src/components/SelectionList/Search/ReportListItem.tsx#L162 and https://github.com/Expensify/App/blob/b021195b864211efbaaefe188226b2830b91b7d8/src/components/SelectionList/Search/ReportListItem.tsx#L187

3. With the feature:

   move the expense type icon to the left of the row

• We can move: https://github.com/Expensify/App/blob/b021195b864211efbaaefe188226b2830b91b7d8/src/components/SelectionList/Search/TransactionListItemRow.tsx#L360-L366 to below: https://github.com/Expensify/App/blob/b021195b864211efbaaefe188226b2830b91b7d8/src/components/SelectionList/Search/TransactionListItemRow.tsx#L291-L297

4. With the feature:

   use a more subtle style for view button

• We can update the View button's style: https://github.com/Expensify/App/blob/b021195b864211efbaaefe188226b2830b91b7d8/src/components/SelectionList/Search/TransactionListItemRow.tsx#L161

          style={[styles.w100]}
          innerStyles={{backgroundColor: 'transparent'}}
          textStyles={{color: '#007bff'}}

• The hover, press styles can be updated in PR.

5. With the feature:

use combined RBR + button pattern when needed. Our buttons already support having an icon in them, we'd just pass the RBR icon plus a color

• We can create a new function to get the {text, icon, iconFill} data from the current item.
• Then update the Button: https://github.com/Expensify/App/blob/b021195b864211efbaaefe188226b2830b91b7d8/src/components/SelectionList/Search/ReportListItem.tsx#L53-L59

  
      <Button
          ...

• text={text}
• icon={icon}
• iconFill={iconFill} />

Mobile

1. With the feature:

   remove the X grouped expenses text

• We already do it in our change 3. which applies to desktop

2. With the feature:

   don't use bold for the title or amount

• We already do it in our change 1. which applies to desktop

3. With the feature:

use combined RBR button

• We can create a new function to get the {text, icon, iconFill} data from the current item.

• Then update: https://github.com/Expensify/App/blob/b021195b864211efbaaefe188226b2830b91b7d8/src/components/SelectionList/Search/ReportListItem.tsx#L148-L155 to:

  
                  <ExpenseItemHeaderNarrow
                      ...

• buttonText={buttonText}

• icon={icon}

• iconFill={iconFill} />

• Then, update: https://github.com/Expensify/App/blob/b021195b864211efbaaefe188226b2830b91b7d8/src/components/SelectionList/Search/ExpenseItemHeaderNarrow.tsx#L50-L56 to:

  
              <Button
                  ...

• text={buttonText}

• icon={icon}

• iconFill={iconFill} />

[shawnborton]

Maybe it is not implemented in staging, right? Now, all the button have "View" title.

Yeah, none of this is on staging. But what I meant by that comment was that our buttons have a prop where they can take an icon, so we get buttons that look like this:

So I'm saying we can pass in the "dot indicator" icon we have, but also pass in a color (danger red) for it, too.

[adelekennedy]

@sobitneupane one proposal to review above

[melvin-bot[bot]]

@luacmartins, @sobitneupane, @adelekennedy Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[JmillsExpensify]

@sobitneupane Do you mind prioritizing this one when you're online. These are important polish items we'd like to get in product and stress test as soon as we reasonably can.

[sobitneupane]

Thanks for the proposal @dominictb

Overall your proposal looks good to me. I think we should prioritize moving on to the PR, where we can address the minor details.

🎀 👀 🎀 C+ reviewed

[melvin-bot[bot]]

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

[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 📖

[dominictb]

ETA: PR will be up in a day or two.

[JmillsExpensify]

Quick comment since we just started working on the PR. @shawnborton didn't we agree to remove tags on mobile, and in addition the folder icon for categories since only a category will appear on that line moving forward?

[shawnborton]

Yup, but I think we should do that as a separate GH? Maybe even consider doing the Merchant/Description idea too where we show the Description in place of Merchant if no Merchant is available on mobile?

[melvin-bot[bot]]

@luacmartins, @sobitneupane, @adelekennedy, @dominictb Uh oh! This issue is overdue by 2 days. Don't forget to update your issues!

[JmillsExpensify]

Cool, we can go that route too.

[sobitneupane]

Any update on PR @dominictb?

[dominictb]

@sobitneupane I am working on it and PR will be opened in a few hours.

[dominictb]

About the feature:

use combined RBR + button pattern when needed. Our buttons already support having an icon in them, we'd just pass the RBR icon plus a color

• Currently, there are only 2 cases:
  1. if action === 'paid` || action === 'done', we display like:

2. Else, we display:

@shawnborton @luacmartins When does the button display as below?

[shawnborton]

Ah, I guess we haven't implemented the red dots yet for violations so I think we can skip that part for now. @luacmartins does that sound right? When do we plan to add violations here?

[dominictb]

@sobitneupane PR https://github.com/Expensify/App/pull/44674 is ready, and based on the comment above, we can skip:

use combined RBR + button pattern when needed. Our buttons already support having an icon in them, we'd just pass the RBR icon plus a color

[luacmartins]

Violations are blocked on the migration to Auth, so whenever that project is ready.

[luacmartins]

I agree that we don't need to worry about them in the meantime though