Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

fix: permission button tooltip behavior (#8882)

Browse Source 
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
frontend/src/component/common/PermissionButton/PermissionButton.tsx
View File

@ -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>
);
},

52
frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
View File

@ -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>