1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-04 13:48:56 +02:00

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)
This commit is contained in:
Nuno Góis 2024-11-28 16:38:11 +00:00 committed by GitHub
parent f75cf1dc60
commit 226b48930e
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 36 additions and 42 deletions

View File

@ -104,7 +104,6 @@ const BasePermissionButton = React.forwardRef<
title={formatAccessText(access, tooltipProps?.title)}
arrow
>
<span id={id}>
<Button
ref={ref}
onClick={onClick}
@ -117,7 +116,6 @@ const BasePermissionButton = React.forwardRef<
>
{children}
</Button>
</span>
</TooltipResolver>
);
},

View File

@ -73,9 +73,6 @@ 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"
@ -101,7 +98,6 @@ exports[`renders an empty list correctly 1`] = `
className="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
/>
</button>
</span>
</div>
</div>
</div>