Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-31 13:47:02 +02:00
Code Issues Projects Releases Wiki Activity

feat: styling of new add values (#9788)

Browse Source 
1. Moved add values to the left.
2. Popover has new styling, as in designs


![image](https://github.com/user-attachments/assets/311670e1-7cb3-46ee-a6d7-fbbef9ac21f2)
This commit is contained in:
Jaanus Sellin 2025-04-17 11:30:36 +03:00 committed by GitHub
parent d988b61764
commit 9678054116
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 33 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/EditableConstraint.tsx
View File

@ -378,14 +378,15 @@ export const EditableConstraint: FC<Props> = ({
{localConstraint.caseInsensitive ? 'Aa' : 'A/a'} {localConstraint.caseInsensitive ? 'Aa' : 'A/a'}
</StyledButton> </StyledButton>
) : null} ) : null}
{!input.includes('LEGAL_VALUES') && (
<ValueList
values={localConstraint.values}
removeValue={removeValue}
setValues={setValuesWithRecord}
/>
)}
</ConstraintDetails> </ConstraintDetails>
{!input.includes('LEGAL_VALUES') && (
<ValueList
values={localConstraint.values}
removeValue={removeValue}
setValues={setValuesWithRecord}
/>
)}
<HtmlTooltip title='Delete constraint' arrow> <HtmlTooltip title='Delete constraint' arrow>
<IconButton type='button' size='small' onClick={onDelete}> <IconButton type='button' size='small' onClick={onDelete}>

50
frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/ValueList.tsx
View File

@ -88,18 +88,19 @@ const StyledPopover = styled(Popover)(({ theme }) => ({
borderRadius: theme.shape.borderRadiusLarge, borderRadius: theme.shape.borderRadiusLarge,
border: `1px solid ${theme.palette.divider}`, border: `1px solid ${theme.palette.divider}`,
padding: theme.spacing(2), padding: theme.spacing(2),
width: '300px', width: '250px',
}, },
})); }));
const StyledTextField = styled(TextField)(({ theme }) => ({ const StyledTextField = styled(TextField)(({ theme }) => ({
width: '100%', flexGrow: 1,
marginBottom: theme.spacing(1),
})); }));
const ButtonContainer = styled('div')(({ theme }) => ({ const InputRow = styled('div')(({ theme }) => ({
display: 'flex', display: 'flex',
justifyContent: 'flex-end', gap: theme.spacing(1),
alignItems: 'start',
width: '100%',
})); }));
const ErrorMessage = styled('div')(({ theme }) => ({ const ErrorMessage = styled('div')(({ theme }) => ({
@ -166,39 +167,38 @@ const AddValues = forwardRef<HTMLButtonElement, AddValuesProps>(
onClose={() => setOpen(false)} onClose={() => setOpen(false)}
anchorOrigin={{ anchorOrigin={{
vertical: 'bottom', vertical: 'bottom',
horizontal: 'center', horizontal: 'left',
}} }}
transformOrigin={{ transformOrigin={{
vertical: 'top', vertical: 'top',
horizontal: 'center', horizontal: 'left',
}} }}
> >
<div> <div>
<StyledTextField {error && <ErrorMessage>{error}</ErrorMessage>}
label='Values' <InputRow>
placeholder='value1, value2, value3...' <StyledTextField
value={inputValues} placeholder='Enter value'
onChange={(e) => { value={inputValues}
setInputValues(e.target.value); onChange={(e) => {
setError(''); setInputValues(e.target.value);
}} setError('');
onKeyPress={handleKeyPress} }}
error={Boolean(error)} onKeyPress={handleKeyPress}
helperText={error} size='small'
size='small' variant='standard'
fullWidth fullWidth
autoFocus autoFocus
/> />
<ButtonContainer>
<Button <Button
variant='contained' variant='text'
color='primary' color='primary'
onClick={handleAdd} onClick={handleAdd}
disabled={!inputValues.trim()} disabled={!inputValues.trim()}
> >
Add Add
</Button> </Button>
</ButtonContainer> </InputRow>
</div> </div>
</StyledPopover> </StyledPopover>
</> </>