Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-09-28 17:55:15 +02: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)} title={formatAccessText(access, tooltipProps?.title)}
arrow arrow
> >
<span id={id}> <Button
<Button ref={ref}
ref={ref} onClick={onClick}
onClick={onClick} disabled={disabled || !access}
disabled={disabled || !access} aria-labelledby={id}
aria-labelledby={id} variant={variant}
variant={variant} color={color}
color={color} {...rest}
{...rest} endIcon={endIcon}
endIcon={endIcon} >
> {children}
{children} </Button>
</Button>
</span>
</TooltipResolver> </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 <hr
className="MuiDivider-root MuiDivider-middle MuiDivider-vertical css-1cqsk4j-MuiDivider-root" className="MuiDivider-root MuiDivider-middle MuiDivider-vertical css-1cqsk4j-MuiDivider-root"
/> />
<span <button
id="useId-0" 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 New tag type
aria-labelledby="useId-0" <span
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" className="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
disabled={false} />
onBlur={[Function]} </button>
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>
</div> </div>
</div> </div>
</div> </div>