[$250] Web - Categories - Button icons turns black when hovering over the button

[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.22-3
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 workspace settings > Categories/Tags/Taxes/Members.
3. Hover over the buttons on the top right.

Expected Result:

The button icon will not turn black when hovering over the button.

Actual Result:

The button icons turns black when hovering over the button.
Issue is also reproducible with Show more and Add stop button

Workaround:

Unknown

Platforms:

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

Screenshots/Videos

Bug6576295_1724089957083.20240820_015050.1.mp4

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01754de5ed278fbfd1
• Upwork Job ID: 1825680074639815229
• Last Price Increase: 2024-08-19
• Automatic offers:
• hoangzinh | Reviewer | 103605340

Issue Owner

Current Issue Owner: @hoangzinh

[melvin-bot]

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

[melvin-bot]

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

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

[IuliiaHerets]

We think that this bug might be related to #wave-collect - Release 1

[etCoderDysto]

Edited by proposal-police: This proposal was edited at 2024-08-19 19:06:14 UTC.

Proposal

Offending PR #47181

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

Button icons turns black when hovering over the button

What is the root cause of that problem?

We are not passing the appropriate theme color (theme.iconHovered) for iconHoverFill prop of button

App/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx

Lines 244 to 249 in c7a8d12

	<Button
	medium
	success
	onPress={navigateToCreateCategoryPage}
	icon={Expensicons.Plus}
	text={translate('workspace.categories.addCategory')}

Here is we use iconHoverFill when user hovers hover the button

App/src/components/Button/index.tsx

Lines 271 to 275 in c7a8d12

	<View style={[large ? styles.mr2 : styles.mr1, !text && styles.mr0, iconStyles]}>
	<Icon
	src={icon}
	hasText={!!text}
	fill={isHovered ? iconHoverFill : iconFill ?? (success || danger ? theme.textLight : theme.icon)}

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

We should pass the appropriate value to iconHoverFill prop in all instance where Button is used

Note: We will search through app to indetify all usages of Button component
When iconHoverFill is not passed to the Button component we can pass theme.textLight to fill prop of icon when danger or success prop is passed to the Button component and theme.icon when neither danger nor success is passed to Button component. This change will be applied here, here, and here. We can extract the fill style to function to avoid the redundancy

<Icon
    src={iconRight}
    fill={isHovered ? iconHoverFill ?? (success || danger ? theme.textLight : theme.icon) : iconFill ?? (success || danger ? theme.textLight : theme.icon)}

What alternative solutions did you explore? (Optional)

Result:

Screen.Recording.2024-08-19.at.10.23.14.at.night.mp4

[neonbhai]

Proposal

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

Button icons turns black when hovering over the button

What is the root cause of that problem?

We recently introduced iconHoverFill in #47181 to help style the statusbar on the search page. This modified the logic of the button to have hoverFill as undefined, if not explicitly passed.

This is different from the earlier behaviour where we defaulted to checking for success/danger props, and choosing theme.textLight or theme.icon:

App/src/components/Button/index.tsx

Line 266 in f9e6f5f

fill={iconFill ?? (success || danger ? theme.textLight : theme.icon)}

We should fallback to the same logic for a hovered icon.

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

We should update the logic here, here, and here to:

const defaultFill = success || danger ? theme.textLight : theme.icon;

fill={
  isHovered
    ? iconHoverFill ?? defaultFill
    : iconFill ?? defaultFill
}

Result

Works perfectly:

Screen.Recording.2024-08-20.at.12.42.53.AM.mov