Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Web - Search - Dropdown and Filters button have no spacing between each other #48069

Closed
1 of 6 tasks
IuliiaHerets opened this issue Aug 27, 2024 · 16 comments
Closed
1 of 6 tasks
Assignees
Labels
Bug Something is broken. Auto assigns a BugZero manager. Engineering Reviewing Has a PR in review Weekly KSv2

Comments

@IuliiaHerets
Copy link

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: v9.0.25-0
Reproducible in staging?: Y
Reproducible in production?: N
Email or phone of affected tester (no customers): applausetester+kh050806@applause.expensifail.com
Issue reported by: Applause Internal Team

Action Performed:

  1. Go to staging.new.expensify.com
  2. Go to Search.
  3. Select expense via checkbox.

Expected Result:

Dropdown and Filters button will have some spacing between each other.

Actual Result:

Dropdown and Filters button have no spacing between each other

Workaround:

Unknown

Platforms:

  • Android: Native
  • Android: mWeb Chrome
  • iOS: Native
  • iOS: mWeb Safari
  • MacOS: Chrome / Safari
  • MacOS: Desktop

Screenshots/Videos

Bug6583774_1724725699215.20240827_102615.mp4

View all open jobs on GitHub

@IuliiaHerets IuliiaHerets added DeployBlockerCash This issue or pull request should block deployment Bug Something is broken. Auto assigns a BugZero manager. labels Aug 27, 2024
Copy link

melvin-bot bot commented Aug 27, 2024

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

Copy link

melvin-bot bot commented Aug 27, 2024

Triggered auto assignment to @strepanier03 (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details. Please add this bug to a GH project, as outlined in the SO.

@melvin-bot melvin-bot bot added the Daily KSv2 label Aug 27, 2024
@IuliiaHerets
Copy link
Author

We think that this bug might be related to #wave-control

@github-actions github-actions bot added Engineering Hourly KSv2 and removed Daily KSv2 labels Aug 27, 2024
Copy link
Contributor

👋 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:

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

@etCoderDysto
Copy link
Contributor

etCoderDysto commented Aug 27, 2024

Edited by proposal-police: This proposal was edited at 2024-08-27 11:19:28 UTC.

Proposal

Offending PR: #47931

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

Dropdown and Filters button have no spacing between each other

What is the root cause of that problem?

We are not providing margin left for filter button component here

<Button
text={translate('search.filtersHeader')}
icon={Expensicons.Filters}
onPress={() => Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS)}
/>

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

We should pass a margin left to the styles prop of the button

style={[styles.ml2]}

What alternative solutions did you explore? (Optional)

We should add styles.gap2 or styles.gap4 to HeaderWrapper that wraps the buttons at the View component below, and remove left margin from the dropdown button

<View style={[styles.reportOptions, styles.flexRow, styles.pr5, styles.alignItemsCenter, styles.gap2]}>{children}</View>

<View style={[styles.reportOptions, styles.flexRow, styles.pr5, styles.alignItemsCenter]}>{children}</View>

@Kicu
Copy link
Contributor

Kicu commented Aug 27, 2024

@etCoderDysto could you try to use gap (styles.gap4) on a parent component of buttons instead of left margin on a button?

I think it would be a bit cleaner

@Nodebrute
Copy link
Contributor

Nodebrute commented Aug 27, 2024

Edited by proposal-police: This proposal was edited at 2024-08-27 10:40:21 UTC.

Proposal

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

Web - Search - Dropdown and Filters button have no spacing between each other

What is the root cause of that problem?

We are no adding any gap

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

We should wrap button and dropdown menu in a View and add styles

{headerButtonsOptions.length > 0 && (
<ButtonWithDropdownMenu
onPress={() => null}
shouldAlwaysShowDropdownMenu
pressOnEnter
buttonSize={CONST.DROPDOWN_BUTTON_SIZE.MEDIUM}
customText={translate('workspace.common.selected', {selectedNumber: selectedTransactionsKeys.length})}
options={headerButtonsOptions}
isSplitButton={false}
style={styles.ml2}
/>
)}
<Button
text={translate('search.filtersHeader')}
icon={Expensicons.Filters}
onPress={() => Navigation.navigate(ROUTES.SEARCH_ADVANCED_FILTERS)}
/>

             <View style={[styles.w100, styles.flexRow, styles.gap2]}>

We can adjust the gap and other styles according to design.

What alternative solutions did you explore? (Optional)

@etCoderDysto
Copy link
Contributor

@etCoderDysto could you try to use gap (styles.gap4) on a parent component of buttons instead of left margin on a button?

I think it would be a bit cleaner

Checking @Kicu

@Nodebrute
Copy link
Contributor

@Kicu Can you check my proposal? These are the styles we are using in other pages

@etCoderDysto
Copy link
Contributor

etCoderDysto commented Aug 27, 2024

@Kicu We can also do that as @Nodebrute suggested in his proposal, and we should also remove margin left from the dropdown button

@etCoderDysto
Copy link
Contributor

Proposal updated

@Kicu I have updated my alternative solution according to your suggestion

@Kicu
Copy link
Contributor

Kicu commented Aug 27, 2024

Thanks for the updates.
I think the solution of removing margin from button and using gapX in a parent component is a good solution 👍

However I work as a consultant and I'm not a Contributor+ so I cannot officially assign you to this task. Calling @lakchote could you take a look at this?

@289Adam289
Copy link
Contributor

Hey! fixed this in a pr I am working on

@melvin-bot melvin-bot bot added Reviewing Has a PR in review Weekly KSv2 and removed Hourly KSv2 labels Aug 27, 2024
@lakchote
Copy link
Contributor

Calling @lakchote could you take a look at this?

@289Adam289 has a PR under review that fixes it that is already approved, using the gap property to properly space, same as the approach you were envisioning @Kicu.

Thanks for having taken the time to review the proposal even if you're not a C+.

Sorry @etCoderDysto but since the other PR is already approved, and a C+ is currently going through the reviewer checklist, I'm assigning @289Adam289 to the issue.

@etCoderDysto
Copy link
Contributor

No worries @lakchote 👍

@luacmartins luacmartins self-assigned this Aug 27, 2024
@luacmartins
Copy link
Contributor

This is fixed in staging after the CP. Closing.

@luacmartins luacmartins removed the DeployBlockerCash This issue or pull request should block deployment label Aug 27, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Bug Something is broken. Auto assigns a BugZero manager. Engineering Reviewing Has a PR in review Weekly KSv2
Projects
None yet
Development

No branches or pull requests

8 participants