Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-07-26 13:48:33 +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'}
</StyledButton>
) : null}
{!input.includes('LEGAL_VALUES') && (
<ValueList
values={localConstraint.values}
removeValue={removeValue}
setValues={setValuesWithRecord}
/>
)}
</ConstraintDetails>
{!input.includes('LEGAL_VALUES') && (
<ValueList
values={localConstraint.values}
removeValue={removeValue}
setValues={setValuesWithRecord}
/>
)}
<HtmlTooltip title='Delete constraint' arrow>
<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,
border: `1px solid ${theme.palette.divider}`,
padding: theme.spacing(2),
width: '300px',
width: '250px',
},
}));
const StyledTextField = styled(TextField)(({ theme }) => ({
width: '100%',
marginBottom: theme.spacing(1),
flexGrow: 1,
}));
const ButtonContainer = styled('div')(({ theme }) => ({
const InputRow = styled('div')(({ theme }) => ({
display: 'flex',
justifyContent: 'flex-end',
gap: theme.spacing(1),
alignItems: 'start',
width: '100%',
}));
const ErrorMessage = styled('div')(({ theme }) => ({
@ -166,39 +167,38 @@ const AddValues = forwardRef<HTMLButtonElement, AddValuesProps>(
onClose={() => setOpen(false)}
anchorOrigin={{
vertical: 'bottom',
horizontal: 'center',
horizontal: 'left',
}}
transformOrigin={{
vertical: 'top',
horizontal: 'center',
horizontal: 'left',
}}
>
<div>
<StyledTextField
label='Values'
placeholder='value1, value2, value3...'
value={inputValues}
onChange={(e) => {
setInputValues(e.target.value);
setError('');
}}
onKeyPress={handleKeyPress}
error={Boolean(error)}
helperText={error}
size='small'
fullWidth
autoFocus
/>
<ButtonContainer>
{error && <ErrorMessage>{error}</ErrorMessage>}
<InputRow>
<StyledTextField
placeholder='Enter value'
value={inputValues}
onChange={(e) => {
setInputValues(e.target.value);
setError('');
}}
onKeyPress={handleKeyPress}
size='small'
variant='standard'
fullWidth
autoFocus
/>
<Button
variant='contained'
variant='text'
color='primary'
onClick={handleAdd}
disabled={!inputValues.trim()}
>
Add
</Button>
</ButtonContainer>
</InputRow>
</div>
</StyledPopover>
</>