[$500] Private Note - Left line/border of quoted text is not visible when hovering over it in Notes

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

---

Action Performed:

1. Go to staging.
2. Access any chat.
3. Click on the header and navigate to "Private notes."
4. Go to My note > Notes
5. Enter "> test" and save it.
6. Observe that the left line isn't visible on hovering.

Expected Result:

The left line should remain visible when hovering

Actual Result:

The left line is hidden

Workaround:

Unknown

Platforms:

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

• [ ] Android / native
• [ ] Android / Chrome
• [ ] iOS / native
• [ ] iOS / Safari
• [x] MacOS / Chrome / Safari
• [x] MacOS / Desktop

Version Number: 1.3.77.5 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 Notes/Photos/Videos: Any additional supporting documentation

https://github.com/Expensify/App/assets/93399543/d393f7d5-e16d-49b9-a80a-3b44ccb60de7

https://github.com/Expensify/App/assets/93399543/2b266b24-8eeb-4b24-add8-b7f53beb9c31

https://github.com/Expensify/App/assets/93399543/5ecc3c78-6144-47b5-a758-78f6f6ebf7a6

Expensify/Expensify Issue URL: Issue reported by: @aman-atg Slack conversation: https://expensify.slack.com/archives/C049HHMV9SM/p1696349601547269

View all open jobs on GitHub

Upwork Automation - Do Not Edit

• Upwork Job URL: https://www.upwork.com/jobs/~01a4212fb13e89f5bb
• Upwork Job ID: 1709663891418292224
• Last Price Increase: 2023-10-25
• Automatic offers:
• hoangzinh | Reviewer | 27460002
• ZhenjaHorbach | Contributor | 27460004
• aman-atg | Reporter | 27460007

[shawnborton]

Ah, I mean like if you are looking at the chats list, when I say selected or :active I am referring to the the item that is selected as the current chat. I also mean that in the sense of a row that is actively being pressed down. This shouldn't change our button states btw - I think those are all covered. This is just for the rows we have in things like the chats list, option menus, etc.

[hoangzinh]

Thanks @shawnborton. cc @ZhenjaHorbach could you update your proposal again with the above confirmation? I hope you can come up with a simpler approach. Btw, please prefer to use plain English when explaining your solution.

[ZhenjaHorbach]

@shawnborton @hoangzinh

ok ) I can do it But I'm a little confused Because we forget about the current bug) Because if we use the border while being pressed down Then we will have a current bug Only instead of hovering while being pressed down ) since private note or description in task is also a menu item

Can we don't use border color for active state or hover for menu items and choose something else ?)

[hoangzinh]

For :hover, we gonna use highlightBG color for menu items, so that should solve this GH issue as well.

[shawnborton]

Yup, that makes sense to me. I agree that on press down the border color will blend in so maybe we need to flip the border color to something else on press?

[hoangzinh]

Currently, we're using buttonPressedBG color on press down for menu items.

[ZhenjaHorbach]

Okay cool, let's plan for that.

• :hover uses highlightBG color
• selected or active uses border color

https://github.com/Expensify/App/issues/28858#issuecomment-1777671460

@hoangzinh Yes, it's true ) But if for selected or active state we will use border than we will have this problem

https://github.com/Expensify/App/assets/68128028/95774e97-f3ab-408a-947f-dfc2ad0f169f

[shawnborton]

Yup - hence why I am suggesting we consider switching the border color on press in that example you just shared.

[melvin-bot[bot]]

@hoangzinh @peterdbarkerUK @grgia this issue is now 3 weeks old. There is one more week left before this issue breaks WAQ and will need to go internal. What needs to happen to get a PR in review this week? Please create a thread in #expensify-open-source to discuss. Thanks!

[melvin-bot[bot]]

📣 It's been a week! Do we have any satisfactory proposals yet? Do we need to adjust the bounty for this issue? 💸

[hoangzinh]

Yup - hence why I am suggesting we consider switching the border color on press in that example you just shared.

Due to limitations of the current code implementation, it's not straightforward to switching the border color on press or hover for blockquote in menu items. IMO, it could require a huge change to do it.

@shawnborton To move this issue go forward, can we only update :hover uses highlightBG color in this GH issue? And leave selected or active as it currently is for now?

[shawnborton]

I think I would still update the active/pressed color but just live with the fact that the border might slightly disappear during that event.

[hoangzinh]

cool. Thanks @shawnborton. cc @ZhenjaHorbach could you update your proposal again? ^ Thanks

[ZhenjaHorbach]

cool. Thanks @shawnborton. cc @ZhenjaHorbach could you update your proposal again? ^ Thanks

@hoangzinh Hello ) Done )

[hoangzinh]

Thanks @ZhenjaHorbach. Just one more concern in your proposal. In your option 2, why don't we just update function getButtonBackgroundColorStyle as you mentioned, and leave everything as it's?

[ZhenjaHorbach]

@hoangzinh

I don't know how correct this is) This function is used in many places Moreover, we already have the desired color for the active state (themeColors.border) We only need to change press state color to the same color as active state (But I don't think we need to do it inside getButtonBackgroundColorStyle. Since this may cause regression in other places) And add isHover color for MenuItem

[hoangzinh]

Moreover, we already have the desired color for the active state (themeColors.border)

Let's forget the active state in the codebase. It has a different meaning with @shawnborton mentioned in his comment https://github.com/Expensify/App/issues/28858#issuecomment-1766410442. His mean:

• :hover uses highlightBG color
• :selected (or pressed) uses border color

[ZhenjaHorbach]

But as far as I understand The active state is precisely what is used for selected elements at the moment

But good ) Since we decided to change the color inside this function I will update the proposition In any case, we need to set the color during hover

https://github.com/Expensify/App/issues/28858#issuecomment-1747586975

[hoangzinh]

The active state is precisely what is used for selected elements at the moment

@ZhenjaHorbach, As far as I know, in the context of Menu item, it won't have selected status, but only pressed or hovered or default one. Thus, I think we can just update colors here, https://github.com/Expensify/App/blob/55f86ce3c9f4bf9e149c9bd258576f0f4dcfb977/src/styles/StyleUtils.ts#L523-L526.

[ZhenjaHorbach]

In LHN menu for which we also use MenuItem we have selected status when we use keyboard arrows )

https://github.com/Expensify/App/assets/68128028/caa9bbd8-c408-4cf6-9046-09d4fa789382

[hoangzinh]

@shawnborton what do you think about the above recording? If a user navigates by keyboard to select a row (menu) in LHN. We should display the background with border color or same with :hover (highlightBG color)

[dubielzyk-expensify]

Covering while Shawn is away. Let's use highlightBG for that scenario so that it differenciates the hover from the keyboard navigation 👍

[hoangzinh]

@dubielzyk-expensify could you take a look at those recordings, does it look good to you?

Before: https://github.com/Expensify/App/issues/28858#issuecomment-1785649415 After:

https://github.com/Expensify/App/assets/9639873/cda09c8c-d1df-4bda-b01f-3113b585be20

[dubielzyk-expensify]

Looks good to me!

[ZhenjaHorbach]

@hoangzinh I have updated the proposition ) https://github.com/Expensify/App/issues/28858#issuecomment-1747586975

Now yes, we only need to update getButtonBackgroundColorStyle )

[hoangzinh]

@ZhenjaHorbach Thanks for updating your proposal https://github.com/Expensify/App/issues/28858#issuecomment-1747586975 and actively discussing on solution. Your RCA and solution look good to me

🎀👀🎀 C+ reviewed

[melvin-bot[bot]]

Current assignee @grgia is eligible for the choreEngineerContributorManagement assigner, not assigning anyone new.

[melvin-bot[bot]]

📣 @hoangzinh 🎉 An offer has been automatically sent to your Upwork account for the Reviewer role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job

[melvin-bot[bot]]

📣 @ZhenjaHorbach 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

[melvin-bot[bot]]

📣 @aman-atg 🎉 An offer has been automatically sent to your Upwork account for the Reporter role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job

[ZhenjaHorbach]

📣 @ZhenjaHorbach 🎉 An offer has been automatically sent to your Upwork account for the Contributor role 🎉 Thanks for contributing to the Expensify app!

Offer link Upwork job Please accept the offer and leave a comment on the Github issue letting us know when we can expect a PR to be ready for review 🧑‍💻 Keep in mind: Code of Conduct | Contributing 📖

PR will be ready tomorrow

[melvin-bot[bot]]

⚠️ Looks like this issue was linked to a Deploy Blocker here

If you are the assigned CME please investigate whether the linked PR caused a regression and leave a comment with the results.

If a regression has occurred and you are the assigned CM follow the instructions here.

If this regression could have been avoided please consider also proposing a recommendation to the PR checklist so that we can avoid it in the future.

[hoangzinh]

@ZhenjaHorbach our PR has been reverted because of https://github.com/Expensify/App/issues/30952

[ZhenjaHorbach]

What a pity (

Apparently, we need to add a new parameter for this function And we will only pass the parameter for a limited list of an item(only FAB elements, only RHN, Private notes) for which we want a new colors

https://github.com/Expensify/App/blob/55f86ce3c9f4bf9e149c9bd258576f0f4dcfb977/src/styles/StyleUtils.ts#L521-L532

[hoangzinh]

And we will only pass the parameter for a limited list of an item(only FAB elements, only RHN, Private notes) for which we want a new colors

I don't think it's a good idea. Because it will cause inconsistency :hover background in other places using the menu item.

[ZhenjaHorbach]

And we will only pass the parameter for a limited list of an item(only FAB elements, only RHN, Private notes) for which we want a new colors

I don't think it's a good idea. Because it will cause inconsistency :hover background in other places using the menu item.

Another alternative could be Go through all the places where the item menu is used and choose a new color that is which doesn't match anywhere when we hover over the element with the background color

[hoangzinh]

@ZhenjaHorbach Can you give the screenshot of those places? then we can ask for suggestions from our design team

[ZhenjaHorbach]

@ZhenjaHorbach Can you give the screenshot of those places? then we can ask for suggestions from our design team

@hoangzinh

Where does the new color match the background color during hover?

[hoangzinh]

Yes, I'm curious how many are there.

[ZhenjaHorbach]

Yes, I'm curious how many are there.

I hope I found everything ) In short, all problems are typical for Section component Which has a background color that matches the new hover color So if decided to fix it, we only need to make minimal changes

[hoangzinh]

Perfect. Can you raise your question/opinion to our design team (@shawnborton or @dubielzyk-expensify) to ask their advice on that issue? Thanks.

[ZhenjaHorbach]

Asked a question on Slack https://expensify.slack.com/archives/C01GTK53T8Q/p1700213083108879

[melvin-bot[bot]]

This issue has not been updated in over 15 days. @hoangzinh, @peterdbarkerUK, @grgia, @ZhenjaHorbach eroding to Monthly issue.

P.S. Is everyone reading this sure this is really a near-term priority? Be brave: if you disagree, go ahead and close it out. If someone disagrees, they'll reopen it, and if they don't: one less thing to do!

[melvin-bot[bot]]

Triggered auto assignment to @sakluger (Bug), see https://stackoverflow.com/c/expensify/questions/14418 for more details.

[sakluger]

@grgia do we still need this issue? Based on the Slack thread, you created a separate GH issue which I think will fix this bug.

If we close this issue, do we owe payments to anyone for work done up until now?

[sakluger]

According to @grgia we can close out this issue. There was a PR merged in Oct but then reverted, so no payment is due.