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)
Unleash · Nov 28, 2024 · 226b489 · 226b489
1 parent f75cf1d
commit 226b489
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 42 deletions.
diff --git 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
@@ -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>