Workspace - Inconsistency with hovering styles

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.

Navigate to staging.new.expensify.com.
Go to Settings.
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?

Screenshots/Videos

Bug6266781_1699326006460.20231107_104300.mp4

View all open jobs on GitHub

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

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

@MonilBhavsar

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

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

@DylanDylann

@DylanDylann For deploy blockers, offending PR should be identified

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

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

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

Fixed in staging, nobody needs to be paid, closing

Navigation Menu

Repository navigation

Workspace - Inconsistency with hovering styles #30952

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Workspace - Inconsistency with hovering styles #30952

Description

Action Performed:

Expected Result:

Actual Result:

Workaround:

Platforms:

Screenshots/Videos

Activity

OSBotify commented on Nov 7, 2023

melvin-bot commented on Nov 7, 2023

DylanDylann commented on Nov 7, 2023

Proposal

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

What is the root cause of that problem?

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

What alternative solutions did you explore? (Optional)

situchan commented on Nov 7, 2023

bernhardoj commented on Nov 7, 2023

MonilBhavsar commented on Nov 7, 2023

MonilBhavsar commented on Nov 7, 2023

mountiny commented on Nov 7, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions