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

chore: make the milestone status a button (#9255)

Browse Source 
https://linear.app/unleash/issue/2-3251/make-the-milestone-status-action-link-and-icon-a-proper-button-that

Makes the milestone status a button while trying to keep most of the
original design intact.


![image](https://github.com/user-attachments/assets/677cb9df-8ae2-4244-8d07-6cd2bd1da5fe)
This commit is contained in:
Nuno Góis 2025-02-07 14:03:59 +00:00 committed by GitHub
parent c02c5a4d47
commit 13ac0567c5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 75 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

121
frontend/src/component/feature/FeatureView/FeatureOverview/ReleasePlan/ReleasePlanMilestone/ReleasePlanMilestoneStatus.tsx
View File

@ -1,38 +1,66 @@
import { Link, styled } from '@mui/material';
import { styled } from '@mui/material';
import PlayCircleIcon from '@mui/icons-material/PlayCircle';
import PauseCircleIcon from '@mui/icons-material/PauseCircle';
import TripOriginIcon from '@mui/icons-material/TripOrigin';
export type MilestoneStatus = 'not-started' | 'active' | 'paused' | 'completed';
const StyledStatus = styled('div', {
const StyledStatusButton = styled('button', {
shouldForwardProp: (prop) => prop !== 'status',
})<{ status: MilestoneStatus }>(({ theme, status }) => ({
display: 'flex',
alignItems: 'center',
gap: theme.spacing(1),
paddingRight: theme.spacing(1),
fontSize: theme.fontSizes.smallerBody,
borderRadius: theme.shape.borderRadiusMedium,
backgroundColor:
status === 'active' ? theme.palette.success.light : 'transparent',
color:
status === 'active'
? theme.palette.success.contrastText
: status === 'completed'
? theme.palette.text.secondary
: theme.palette.text.primary,
'& svg': {
})<{ status: MilestoneStatus; disabled?: boolean }>(
({ theme, status, disabled }) => ({
display: 'flex',
alignItems: 'center',
border: 'none',
gap: theme.spacing(1),
padding: 0,
paddingRight: theme.spacing(1),
cursor: 'pointer',
backgroundColor:
status === 'active' ? theme.palette.success.light : 'transparent',
'&:focus-visible': {
outline: `2px solid ${theme.palette.primary.main}`,
},
'&:hover': {
backgroundColor:
status === 'active'
? theme.palette.success.light
: status === 'paused'
? 'transparent'
: theme.palette.neutral.light,
textDecoration: 'none',
},
fontSize: theme.fontSizes.smallerBody,
lineHeight: theme.fontSizes.smallerBody,
fontWeight: theme.fontWeight.medium,
borderRadius: theme.shape.borderRadiusMedium,
color:
status === 'active'
? theme.palette.success.main
? theme.palette.success.contrastText
: status === 'paused'
? theme.palette.text.disabled
: status === 'completed'
? theme.palette.neutral.border
: theme.palette.primary.main,
},
}));
? theme.palette.text.primary
: theme.palette.primary.main,
textDecoration:
status === 'not-started' || status === 'completed'
? 'underline'
: 'none',
'& svg': {
color:
status === 'active'
? theme.palette.success.main
: status === 'paused'
? theme.palette.text.disabled
: status === 'completed'
? theme.palette.neutral.border
: theme.palette.primary.main,
height: theme.spacing(3),
width: theme.spacing(3),
},
...(disabled && {
pointerEvents: 'none',
}),
}),
);
interface IReleasePlanMilestoneStatusProps {
status: MilestoneStatus;
@ -52,27 +80,28 @@ export const ReleasePlanMilestoneStatus = ({
? 'Restart'
: 'Start';
const statusIcon =
status === 'active' ? (
<TripOriginIcon />
) : status === 'paused' ? (
<PauseCircleIcon />
) : (
<PlayCircleIcon />
);
const disabled = status === 'active' || status === 'paused';
return (
<StyledStatus status={status}>
{status === 'active' ? (
<TripOriginIcon />
) : status === 'paused' ? (
<PauseCircleIcon />
) : (
<PlayCircleIcon />
)}
{status === 'not-started' || status === 'completed' ? (
<Link
onClick={(e) => {
e.stopPropagation();
onStartMilestone();
}}
>
{statusText}
</Link>
) : (
<span>{statusText}</span>
)}
</StyledStatus>
<StyledStatusButton
status={status}
onClick={(e) => {
e.stopPropagation();
onStartMilestone();
}}
disabled={disabled}
>
{statusIcon}
{statusText}
</StyledStatusButton>
);
};