Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2026-02-04 20:10:52 +01:00
Code Issues Projects Releases Wiki Activity

chore: increase size of Milestone name input (#11239)

Browse Source 
Makes the input expand to use all available horizontal space when
editing a milestone name inside the accordion.


https://linear.app/unleash/issue/CJUX-351/ux-edit-milestone-name-release-templates

## Before: 

<img width="600" alt="Screenshot 2026-01-16 at 16 46 40 (2)"
src="https://github.com/user-attachments/assets/9bfbed55-05c5-4373-a6e0-3004a30d6280"
/>


## After:
<img width="600" alt="Screenshot 2026-01-16 at 16 46 49 (2)"
src="https://github.com/user-attachments/assets/ae7b74bb-09f2-4048-9315-a3dc19041ad6"
/>
This commit is contained in:
Kamala 2026-01-16 20:23:22 +01:00 committed by Boris
parent acdfb26c20
commit 70958d00de
1 changed files with 34 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

56
frontend/src/component/releases/ReleasePlanTemplate/TemplateForm/MilestoneList/MilestoneCard/MilestoneCardName.tsx
View File

@ -4,10 +4,15 @@ import { styled } from '@mui/material';
import { useState } from 'react';
import Input from 'component/common/Input/Input';
const StyledInput = styled(Input)(({ theme }) => ({
const StyledInput = styled(Input)({
width: '100%',
}));
});
const StyledInputContainer = styled('div')(({ theme }) => ({
width: '100%',
height: 'auto',
marginRight: theme.spacing(2),
}));
const StyledMilestoneCardTitle = styled('span')(({ theme }) => ({
fontWeight: theme.fontWeight.bold,
fontSize: theme.fontSizes.bodySize,
@ -17,13 +22,18 @@ const StyledEditIcon = styled(Edit, {
shouldForwardProp: (prop) => prop !== 'hasError',
})<{ hasError: boolean }>(({ theme, hasError = false }) => ({
cursor: 'pointer',
marginTop: theme.spacing(-0.25),
marginTop: theme.spacing(-0.5),
marginLeft: theme.spacing(0.5),
height: theme.spacing(2.5),
width: theme.spacing(2.5),
color: hasError ? theme.palette.error.main : theme.palette.text.secondary,
}));
const StyledRow = styled('div')({
display: 'inline-flex',
alignItems: 'center',
});
interface IMilestoneCardNameProps {
milestone: IReleasePlanMilestonePayload;
errors: { [key: string]: string };
@ -39,7 +49,7 @@ export const MilestoneCardName = ({
}: IMilestoneCardNameProps) => {
const [editMode, setEditMode] = useState(false);
return (
<>
<StyledInputContainer>
{editMode && (
<StyledInput
label=''
@ -65,25 +75,27 @@ export const MilestoneCardName = ({
)}
{!editMode && (
<>
<StyledMilestoneCardTitle
onClick={(ev) => {
setEditMode(true);
ev.preventDefault();
ev.stopPropagation();
}}
>
{milestone.name}
</StyledMilestoneCardTitle>
<StyledEditIcon
hasError={Boolean(errors?.[`${milestone.id}_name`])}
onClick={(ev) => {
setEditMode(true);
ev.preventDefault();
ev.stopPropagation();
}}
/>
<StyledRow>
<StyledMilestoneCardTitle
onClick={(ev) => {
setEditMode(true);
ev.preventDefault();
ev.stopPropagation();
}}
>
{milestone.name}
</StyledMilestoneCardTitle>
<StyledEditIcon
hasError={Boolean(errors?.[`${milestone.id}_name`])}
onClick={(ev) => {
setEditMode(true);
ev.preventDefault();
ev.stopPropagation();
}}
/>
</StyledRow>
</>
)}
</>
</StyledInputContainer>
);
};