[HOLD for payment 2024-11-20] [$250] Tab bar in create expense flows uses incorrect icon size

[m-natarajan]

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: 9.0.39-0
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
Expensify/Expensify Issue URL:
Issue reported by: @shawnborton
Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1726810593632939

Action Performed:

1. Go to staging.new.expensify.com
2. Create a submit expense flow
3. Observe the Tab bar

Expected Result:

The tab bar size is standard on all tabs

Actual Result:

In the tab bar for the create expense flows, the icon is at 20x20. However, the tab bar across the top of the Search pages uses an icon that is 16x16

Workaround:

Unknown

Platforms:

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

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

Screenshots/Videos

Add any screenshot/video evidence

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~021838269032808976067
• Upwork Job ID: 1838269032808976067
• Last Price Increase: 2024-09-23
• Automatic offers:
• ShridharGoel | Contributor | 104165006

Issue Owner

Current Issue Owner: @garrettmknight

[melvin-bot]

Triggered auto assignment to @garrettmknight (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.

[abzokhattab]

Edited by proposal-police: This proposal was edited at 2024-09-22 15:42:32 UTC.

Proposal

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

Tab bar in create expense flows uses incorrect text and icon sizes

What is the root cause of that problem?

we are not using the same text styling in both the submit expense and search selectors

App/src/components/Search/SearchStatusBar.tsx

Lines 181 to 201 in d61c06f

	<Button
	key={item.key}
	onLayout={(e) => {
	if (!isActive || isScrolledRef.current || !('left' in e.nativeEvent.layout)) {
	return;
	}
	isScrolledRef.current = true;
	scrollRef.current?.scrollTo({x: (e.nativeEvent.layout.left as number) - styles.pl5.paddingLeft});
	}}
	text={translate(item.text)}
	onPress={onPress}
	icon={item.icon}
	iconFill={isActive ? theme.success : undefined}
	iconHoverFill={theme.success}
	innerStyles={!isActive && styles.bgTransparent}
	hoverStyles={StyleUtils.getBackgroundColorStyle(!isActive ? theme.highlightBG : theme.border)}
	textStyles={!isActive && StyleUtils.getTextColorStyle(theme.textSupporting)}
	textHoverStyles={StyleUtils.getTextColorStyle(theme.text)}
	// We add padding to the first and last items so that they align with the header and table but can overflow outside the screen when scrolled.
	style={[isFirstItem && styles.pl5, isLastItem && styles.pr5]}
	/>

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

1. we should update the icon size to be the normal size as in the TabIcon ... since the default icon size inside the button is enforced as medium, we can pass meduim={false}, this will make both sizes normal and consistent with the tab icon
2. optionally we should add the styles.tabText prop to the textStyles to be the same as the one used for the tab bar of the submit expense

                        textStyles={(!isActive && StyleUtils.getTextColorStyle(theme.textSupporting), styles.tabText(isActive))}

3. optionally we can also add the styles.tabSelector to the ScrollView styles inside the SearchStatusBar

POC

What alternative solutions did you explore? (Optional)

If we want to standardize the icon size to 16x16 across both the search and expense flows, we need to update the expense flow to match the others.
To achieve this, we need to add the following props to the TabIcon component:

hasText
medium

Since all tab icons include text, we need to enable the hasText flag, similar to how it's implemented in the Button component:

App/src/components/Button/index.tsx

Lines 283 to 285 in c119850

	src={icon}
	hasText={!!text}
	fill={isHovered ? iconHoverFill ?? defaultFill : iconFill ?? defaultFill}

Alternatively, we can add the hasText flag to the TabIcon props and set it to true when a title is present (hasText={!!text}) here .

This approach ensures the behavior remains consistent with the button component.

By doing this, the icon will scale up when no text is present in the future.

Result:

[ShridharGoel]

Proposal

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

Tab bar in create expense flows uses incorrect icon size.

What is the root cause of that problem?

Icon size is not being passed in TabIcon, so it takes the default medium size 20x20.

App/src/components/TabSelector/TabIcon.tsx

Lines 25 to 28 in 9160fa5

	<Icon
	src={icon}
	fill={theme.icon}
	/>

App/src/components/TabSelector/TabIcon.tsx

Lines 31 to 35 in 9160fa5

	<Icon
	src={icon}
	fill={theme.iconMenu}
	/>
	</Animated.View>

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

Pass small in those places:

<Animated.View style={{opacity: inactiveOpacity}}>
    <Icon
        src={icon}
        fill={theme.icon}
        small
    />
</Animated.View>
<Animated.View style={[StyleSheet.absoluteFill, {opacity: activeOpacity}]}>
    <Icon
        src={icon}
        fill={theme.iconMenu}
        small
    />
</Animated.View>

[abzokhattab]

Proposal updated

changed the icons size inside the header of the search page

[melvin-bot]

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

[melvin-bot]

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

[thesahindia]

@ShridharGoel's proposal looks good to me!

🎀 👀 🎀 C+ reviewed