From 6639b547ddebc98c83c0b6f973899fa1daee4cb3 Mon Sep 17 00:00:00 2001
From: Bartosz Kaszubowski <gosimek@gmail.com>
Date: Thu, 3 Feb 2022 05:52:35 -0800
Subject: [PATCH] UI: fix hover effect of LeftRail icons with badge (#3372)

Summary:
This PR fixes the missing hover effect for the `LeftRail` component buttons, when they have included the badge.

To fix the issue, I had to wrap the whole `Button` with `Badge` component (instead wrapping only around icon). However, this solution required to added `offset` property to the `Badge` which moves the indicator to the position prior change (otherwise indicator was moved to the right corner of the button).

The file has been formatted after the changes with ESLint.

**Edit:** I have also spotted that this change fixes the icon placement inside the button, when badge is present. Earlier, as seen below, the log icon was moved towards the top of the button:
<img width="111" alt="Screenshot 2022-01-31 at 00 57 49" src="https://user-images.githubusercontent.com/719641/151723422-0ffb83ee-5806-412e-9191-f9953f78532e.png">

## Changelog

[desktop] UI: fix hover effect of LeftRail icons with badge

Pull Request resolved: https://github.com/facebook/flipper/pull/3372

Test Plan:
The change has been testes by running the desktop Flipper app locally from source.

## Preview (before & after)

#### Before
<img width="1339" alt="Screenshot 2022-01-31 at 00 24 23" src="https://user-images.githubusercontent.com/719641/151722800-a2f3dd44-aa24-4858-b43e-0620b1f2ae65.png">

#### After

> I have used mocked indicator values locally to ensure that the Badges are displayed correctly.

<img width="1339" alt="Screenshot 2022-01-31 at 00 26 10" src="https://user-images.githubusercontent.com/719641/151722795-745b04ac-9ee4-49a8-8217-206d8d7456e6.png">

<img width="1339" alt="Screenshot 2022-01-31 at 00 45 08" src="https://user-images.githubusercontent.com/719641/151722940-aaaf0e9b-f2d1-4245-8b2b-cfc11052b39e.png">

Reviewed By: aigoncharov

Differential Revision: D33975324

Pulled By: mweststrate

fbshipit-source-id: fe4773b4825b9f22e01821e45259747d319233aa
---
 .../src/sandy-chrome/LeftRail.tsx             | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx b/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx
index 5b3701919..53ed50f1c 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/LeftRail.tsx
@@ -97,16 +97,8 @@ export function LeftRailButton({
   title?: string;
   onClick?: React.MouseEventHandler<HTMLElement>;
 }) {
-  let iconElement =
+  const iconElement =
     icon && cloneElement(icon, {style: {fontSize: small ? 16 : 24}});
-  if (count !== undefined) {
-    iconElement =
-      count === true ? (
-        <Badge dot>{iconElement}</Badge>
-      ) : (
-        <Badge count={count}>{iconElement}</Badge>
-      );
-  }
 
   let res = (
     <LeftRailButtonElem
@@ -123,6 +115,19 @@ export function LeftRailButton({
     />
   );
 
+  if (count !== undefined) {
+    res =
+      count === true ? (
+        <Badge dot offset={[-8, 8]} {...{onClick}}>
+          {res}
+        </Badge>
+      ) : (
+        <Badge count={count} offset={[-6, 5]} {...{onClick}}>
+          {res}
+        </Badge>
+      );
+  }
+
   if (title) {
     res = (
       <Tooltip title={title} placement="right">