Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-06-27 01:19:00 +02:00
Code Issues Projects Releases Wiki Activity

fix: permission button unintended full width behavior (#8920)

Browse Source 
Follow-up to https://github.com/Unleash/unleash/pull/8882

The referenced PR caused an unintended behavior by making the button
behave like a normal button would on certain parent containers.
Previously, the span wrapper caused a side effect that restricted the
button’s width, which we were relying on.

By setting some initial styling properties, this PR should hopefully
satisfy both use cases.


![image](https://github.com/user-attachments/assets/2c5a4a97-51ff-426c-b5da-7b00d5d6516a)


![image](https://github.com/user-attachments/assets/f8f3fc13-df19-44d5-8fce-4bb0dc323d4e)


![image](https://github.com/user-attachments/assets/80625e88-0d1a-4c83-93d7-250351dae3a4)
This commit is contained in:
Nuno Góis 2024-12-05 09:23:06 +00:00 committed by GitHub
parent bd0ad18a63
commit ff9492d4f7
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,4 +1,4 @@
import { Button, type ButtonProps } from '@mui/material'; import { Button, styled, type ButtonProps } from '@mui/material';
import Lock from '@mui/icons-material/Lock'; import Lock from '@mui/icons-material/Lock';
import React from 'react'; import React from 'react';
import { import {
@ -12,6 +12,11 @@ import {
useHasProjectEnvironmentAccess, useHasProjectEnvironmentAccess,
} from 'hooks/useHasAccess'; } from 'hooks/useHasAccess';
const StyledButton = styled(Button)({
justifySelf: 'start',
alignSelf: 'start',
});
export interface IPermissionButtonProps extends Omit<ButtonProps, 'title'> { export interface IPermissionButtonProps extends Omit<ButtonProps, 'title'> {
permission: string | string[]; permission: string | string[];
onClick?: (e: any) => void; onClick?: (e: any) => void;
@ -104,7 +109,7 @@ const BasePermissionButton = React.forwardRef<
title={formatAccessText(access, tooltipProps?.title)} title={formatAccessText(access, tooltipProps?.title)}
arrow arrow
> >
<Button <StyledButton
ref={ref} ref={ref}
onClick={onClick} onClick={onClick}
disabled={disabled || !access} disabled={disabled || !access}
@ -115,7 +120,7 @@ const BasePermissionButton = React.forwardRef<
endIcon={endIcon} endIcon={endIcon}
> >
{children} {children}
</Button> </StyledButton>
</TooltipResolver> </TooltipResolver>
); );
}, },

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

@ -75,7 +75,7 @@ exports[`renders an empty list correctly 1`] = `
/> />
<button <button
aria-labelledby="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" className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium css-1pzmo7x-MuiButtonBase-root-MuiButton-root"
disabled={false} disabled={false}
onBlur={[Function]} onBlur={[Function]}
onClick={[Function]} onClick={[Function]}