[HOLD for payment 2024-03-25] [HOLD for payment 2024-03-22] Web - Chat - When hovering over a message, reply, edit and menu icons are displayed smaller

[lanitochka17]

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.4.52-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: https://expensify.testrail.io/index.php?/tests/view/4423073
Email or phone of affected tester (no customers): vdargentotest+web031324@gmail.com
Issue reported by: Applause - Internal Team

Action Performed:

Pre-requisite: the user must be logged in

1. Go to any chat
2. Send a message
3. Hover over the message for the action menu to appear

Expected Result:

The "Reply in thread", "Edit comment" and "Menu" icons should be bigger, the same size as the rest

Actual Result:

The "Reply in thread", "Edit comment" and "Menu" icons are smaller than the rest

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

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

[melvin-bot]

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

[lanitochka17]

We think that this bug might be related to #vip-vsp
CC @quinthar

[lanitochka17]

@marcaaron FYI I haven't added the External label as I wasn't 100% sure about this issue. Please take a look and add the label if you agree it's a bug and can be handled by external contributors

[hussnainhamid1]

Proposal

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

Web - Chat - When hovering over a message, reply, edit and menu icons are displayed smaller

What is the root cause of that problem?

Size of the iconWidth and iconHeight are not being set properly, which is causing overall size of the icons look smaller.

App/src/components/Icon/index.tsx

Line 70 in 13f8bc0

const {width: iconWidth, height: iconHeight} = StyleUtils.getIconWidthAndHeightStyle(small, medium, large, width, height);

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

We can set the size of the icons to appear normal by using variables.iconSizeNormal. So here is how the change will look like:

    const iconWidth = small ? variables.iconSizeSmall : width
    const iconHeight = small ? variables.iconSizeSmall : height

And we can further remove the line of code specified in the problem cause section:

    const {width: iconWidth, height: iconHeight} = StyleUtils.getIconWidthAndHeightStyle(small, medium, large, width, height);

What alternative solutions did you explore? (Optional)

N/A

[ikevin127]

Proposal

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

When hovering over a message, the context menu items: Reply in thread, Edit comment and Menu icons are smaller than the rest of the icons.

What is the root cause of that problem?

Offending PR: #37966, specifically the Icon/index.tsx changes from here.

Since here we're setting the ContextMenuItem icons to small size, and the PR introduced the following changes:

Diff

-    const iconWidth = small ? variables.iconSizeSmall : width;
-    const iconHeight = small ? variables.iconSizeSmall : height;
+    const {width: iconWidth, height: iconHeight} = StyleUtils.getIconWidthAndHeightStyle(small, medium, large, width, height);

StyleUtils.getIconWidthAndHeightStyle() returns variables.iconSizeExtraSmall as width / height for the small size now instead of variables.iconSizeSmall as the old Icon/index.tsx code used to do (see diff above).

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

In order to keep the PR's medium / large icon size implementation, we can check if small is true and return variables.iconSizeSmall, otherwise use the values returned by StyleUtils.getIconWidthAndHeightStyle(), like so:

const {width: iconW, height: iconH} = StyleUtils.getIconWidthAndHeightStyle(small, medium, large, width, height);
const iconWidth = small ? variables.iconSizeSmall : iconW;
const iconHeight = small ? variables.iconSizeSmall : iconH;

What alternative solutions did you explore? (Optional)

Alternatively, we can simply revert the Icon/index.tsx changes implemented by offending PR (see diff above in RCA).

[marcaaron]

cc @luacmartins

[narefyev91]

will take this one

[luacmartins]

This is fixed in staging

[luacmartins]

Closing!

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

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

[melvin-bot]

Reviewing label has been removed, please complete the "BugZero Checklist".

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.52-6 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] Fix icons after regression #38275

If no regressions arise, payment will be issued on 2024-03-22. 🎊

For reference, here are some details about the assignees on this issue:

• @narefyev91 does not require payment (Contractor)

[melvin-bot]

The solution for this issue has been 🚀 deployed to production 🚀 in version 1.4.53-2 and is now subject to a 7-day regression period 📆. Here is the list of pull requests that resolve this issue:

• [CP Staging] Fix icons after regression #38275

If no regressions arise, payment will be issued on 2024-03-25. 🎊

For reference, here are some details about the assignees on this issue:

• @narefyev91 does not require payment (Contractor)