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

feat: release plan hover buttons (#9703)

Browse Source
This commit is contained in:
Jaanus Sellin 2025-04-07 11:32:31 +03:00 committed by GitHub
parent 4130e06d17
commit 58d123e998
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 75 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

97
frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureReleasePlanCard/FeatureReleasePlanCard.tsx
View File

@ -20,7 +20,20 @@ const StyledName = styled(StringTruncator)(({ theme }) => ({
marginBottom: theme.spacing(0.5),
}));
const StyledCard = styled(Button)(({ theme }) => ({
const CardContent = styled('div')(({ theme }) => ({
width: '100%',
transition: 'opacity 0.2s ease-in-out',
}));
const HoverButtonsContainer = styled('div')(({ theme }) => ({
position: 'absolute',
right: theme.spacing(2),
display: 'flex',
gap: theme.spacing(1),
opacity: 0,
}));
const StyledCard = styled('div')(({ theme }) => ({
display: 'flex',
flexDirection: 'column',
width: '100%',
@ -35,9 +48,14 @@ const StyledCard = styled(Button)(({ theme }) => ({
borderRadius: theme.spacing(1),
textAlign: 'left',
overflow: 'hidden',
'&:hover, &:focus': {
borderColor: theme.palette.primary.main,
position: 'relative',
[`&:hover ${CardContent}, &:focus-within ${CardContent}`]: {
opacity: 0.5,
},
[`&:hover ${HoverButtonsContainer}, &:focus-within ${HoverButtonsContainer}`]:
{
opacity: 1,
},
}));
const StyledTopRow = styled('div')(({ theme }) => ({
@ -50,34 +68,69 @@ const StyledTopRow = styled('div')(({ theme }) => ({
interface IFeatureReleasePlanCardProps {
template: IReleasePlanTemplate;
onClick: () => void;
onPreviewClick?: (e: React.MouseEvent) => void;
}
export const FeatureReleasePlanCard = ({
template: { name, description },
onClick,
onPreviewClick,
}: IFeatureReleasePlanCardProps) => {
const Icon = getFeatureStrategyIcon('releasePlanTemplate');
const handleUseClick = (e: React.MouseEvent) => {
e.stopPropagation();
onClick();
};
const handlePreviewClick = (e: React.MouseEvent) => {
e.stopPropagation();
if (onPreviewClick) {
onPreviewClick(e);
}
};
return (
<StyledCard onClick={onClick}>
<StyledTopRow>
<StyledIcon>
<Icon />
</StyledIcon>
<StyledName text={name} maxWidth='200' maxLength={25} />
</StyledTopRow>
<Truncator
lines={1}
title={description}
arrow
sx={{
fontSize: (theme) => theme.typography.caption.fontSize,
fontWeight: (theme) => theme.typography.fontWeightRegular,
width: '100%',
}}
>
{description}
</Truncator>
<StyledCard>
<CardContent>
<StyledTopRow>
<StyledIcon>
<Icon />
</StyledIcon>
<StyledName text={name} maxWidth='200' maxLength={25} />
</StyledTopRow>
<Truncator
lines={1}
title={description}
arrow
sx={{
fontSize: (theme) => theme.typography.caption.fontSize,
fontWeight: (theme) =>
theme.typography.fontWeightRegular,
width: '100%',
}}
>
{description}
</Truncator>
</CardContent>
<HoverButtonsContainer>
<Button
variant='contained'
size='small'
onClick={handleUseClick}
tabIndex={0}
>
Use
</Button>
<Button
variant='outlined'
size='small'
onClick={handlePreviewClick}
>
Preview
</Button>
</HoverButtonsContainer>
</StyledCard>
);
};