From 226b48930e65c4a46fbc2250c87228819f9560e1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Nuno=20G=C3=B3is?= <github@nunogois.com>
Date: Thu, 28 Nov 2024 16:38:11 +0000
Subject: [PATCH] fix: permission button tooltip behavior (#8882)

https://linear.app/unleash/issue/2-3039/fix-the-tooltip-behavior-in-permission-buttons

Improves the tooltip behavior of our permission button component.

This is achieved by removing the extra `span` element that is wrapping
the `Button` component.

#### Before

The tooltip is not correctly aligned with the button. The lower section
of the button is not clickable.


![image](https://github.com/user-attachments/assets/bd5eb4d8-5b59-476f-80b1-227d7afeac2f)

#### After

The tooltip is correctly aligned with the button. Every visible part of
the button is clickable.


![image](https://github.com/user-attachments/assets/3c6271dd-8537-4f75-bd49-38e4b9ae307e)
---
 .../PermissionButton/PermissionButton.tsx     | 26 +++++-----
 .../__snapshots__/TagTypeList.test.tsx.snap   | 52 +++++++++----------
 2 files changed, 36 insertions(+), 42 deletions(-)

diff --git a/frontend/src/component/common/PermissionButton/PermissionButton.tsx b/frontend/src/component/common/PermissionButton/PermissionButton.tsx
index e71ea79bdad2..9a1b5078920c 100644
--- a/frontend/src/component/common/PermissionButton/PermissionButton.tsx
+++ b/frontend/src/component/common/PermissionButton/PermissionButton.tsx
@@ -104,20 +104,18 @@ const BasePermissionButton = React.forwardRef<
                 title={formatAccessText(access, tooltipProps?.title)}
                 arrow
             >
-                <span id={id}>
-                    <Button
-                        ref={ref}
-                        onClick={onClick}
-                        disabled={disabled || !access}
-                        aria-labelledby={id}
-                        variant={variant}
-                        color={color}
-                        {...rest}
-                        endIcon={endIcon}
-                    >
-                        {children}
-                    </Button>
-                </span>
+                <Button
+                    ref={ref}
+                    onClick={onClick}
+                    disabled={disabled || !access}
+                    aria-labelledby={id}
+                    variant={variant}
+                    color={color}
+                    {...rest}
+                    endIcon={endIcon}
+                >
+                    {children}
+                </Button>
             </TooltipResolver>
         );
     },
diff --git a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
index bedd39c8c930..56195a34a98f 100644
--- a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
+++ b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
@@ -73,35 +73,31 @@ exports[`renders an empty list correctly 1`] = `
               <hr
                 className="MuiDivider-root MuiDivider-middle MuiDivider-vertical css-1cqsk4j-MuiDivider-root"
               />
-              <span
-                id="useId-0"
+              <button
+                aria-labelledby="useId-0"
+                className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-om67xs-MuiButtonBase-root-MuiButton-root"
+                disabled={false}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onContextMenu={[Function]}
+                onDragLeave={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                onMouseDown={[Function]}
+                onMouseLeave={[Function]}
+                onMouseUp={[Function]}
+                onTouchEnd={[Function]}
+                onTouchMove={[Function]}
+                onTouchStart={[Function]}
+                tabIndex={0}
+                type="button"
               >
-                <button
-                  aria-labelledby="useId-0"
-                  className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-om67xs-MuiButtonBase-root-MuiButton-root"
-                  disabled={false}
-                  onBlur={[Function]}
-                  onClick={[Function]}
-                  onContextMenu={[Function]}
-                  onDragLeave={[Function]}
-                  onFocus={[Function]}
-                  onKeyDown={[Function]}
-                  onKeyUp={[Function]}
-                  onMouseDown={[Function]}
-                  onMouseLeave={[Function]}
-                  onMouseUp={[Function]}
-                  onTouchEnd={[Function]}
-                  onTouchMove={[Function]}
-                  onTouchStart={[Function]}
-                  tabIndex={0}
-                  type="button"
-                >
-                  New tag type
-                  <span
-                    className="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-                  />
-                </button>
-              </span>
+                New tag type
+                <span
+                  className="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
+                />
+              </button>
             </div>
           </div>
         </div>