Workspace - Inconsistency with hovering styles

[kbecciv]

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: 1.3.96.0
Reproducible in staging?: y
Reproducible in production?: n
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: Applause - Internal team
Slack conversation:

Action Performed:

Precondition: Have at least one workspace.

1. Navigate to staging.new.expensify.com.
2. Go to Settings.
3. Click on Workspaces.

Expected Result:

There is no outline feedback around workspace avatars when clicking on Workspaces.

Actual Result:

There is outline feedback around workspace avatars when clicking on Workspaces.

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

Bug6266781_1699326006460.20231107_104300.mp4

View all open jobs on GitHub

[OSBotify]

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

[melvin-bot]

Triggered auto assignment to @MonilBhavsar (Engineering), see https://stackoverflow.com/c/expensify/questions/4319 for more details.

[DylanDylann]

Proposal

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

Workspace - Outline feedback around workspace avatars when clicking on Workspaces

What is the root cause of that problem?

When displaying the avatar we are using isHovered and pressed states of parent Component (Workspaces MenuItem) to get the style for it

App/src/components/MenuItem.js

Lines 349 to 355 in 5df95a1

	<MultipleAvatars
	isHovered={isHovered}
	isPressed={pressed}
	icons={props.floatRightAvatars}
	size={props.floatRightAvatarSize || fallbackAvatarSize}
	fallbackIcon={defaultWorkspaceAvatars.WorkspaceBuilding}
	shouldStackHorizontally={props.shouldStackHorizontally}

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

We can wrap MultipleAvatars component by Hoverable and PressableWithSecondaryInteraction separately and using isHovered and pressed states itself like this

<Hoverable>
            {(isHovered) => (
                <PressableWithSecondaryInteraction
                    ......
                >
                    {({pressed}) => (
                                <MultipleAvatars
                                            isHovered={isHovered}
                                            isPressed={pressed}
                                            icons={props.floatRightAvatars}
                                            size={props.floatRightAvatarSize || fallbackAvatarSize}
                                            fallbackIcon={defaultWorkspaceAvatars.WorkspaceBuilding}
                                            shouldStackHorizontally={props.shouldStackHorizontally}
                                        />

We also make the same fix to other child elements

What alternative solutions did you explore? (Optional)

We can create new props called shouldApplyHoverAndPressStateToChildElement and we only pass isHovered and pressed states of parent Component to child element if shouldApplyHoverAndPressStateToChildElement is true

[situchan]

@DylanDylann For deploy blockers, offending PR should be identified

[bernhardoj]

A regression from #28858 where we change the menu item hover color.

[MonilBhavsar]

Also hovering style on various workspace menu items is affected

Screen.Recording.2023-11-07.at.4.52.06.PM.mov

I'm leaning towards reverting that PR and coming up with new approach and testing plan

[MonilBhavsar]

CP request here https://expensify.slack.com/archives/C07J32337/p1699361229767299

[mountiny]

Fixed in staging, nobody needs to be paid, closing