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

[IuliiaHerets]

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

[melvin-bot]

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

[melvin-bot]

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.

[IuliiaHerets]

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

[github-actions]

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

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

App/src/components/Search/SearchPageHeader.tsx

Lines 315 to 319 in d5cfecf

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

App/src/components/Search/SearchPageHeader.tsx

Line 86 in 9ddca5c

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

[Kicu]

@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]

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

App/src/components/Search/SearchPageHeader.tsx

Lines 303 to 319 in bea22ee

	{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]

@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]

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

[etCoderDysto]

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

[etCoderDysto]

Proposal updated

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

[Kicu]

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]

Hey! fixed this in a pr I am working on

[lakchote]

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]

No worries @lakchote 👍

[luacmartins]

This is fixed in staging after the CP. Closing.