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

Chore: context fields UI improvements when creating context field (#6714)

Browse Source 
Styling adjustments based on
https://linear.app/unleash/issue/UNL-371/ui-improvement-createedit-context-field

- Remove maxWidth from container
- In ul - add maxHeight, padding and border and hide when :empty

Closes #
[UNL-371](https://linear.app/unleash/issue/UNL-371/ui-improvement-createedit-context-field)

Before: 
![Screenshot 2024-03-28 at 11 46
12](https://github.com/Unleash/unleash/assets/104830839/8150fb96-0a5a-4fd8-988a-82a42da51faf)

After:
![Screenshot 2024-03-28 at 11 47
03](https://github.com/Unleash/unleash/assets/104830839/186b806c-4557-42a8-b119-22d1b781cc57)

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
This commit is contained in:
andreas-unleash 2024-03-28 13:07:04 +02:00 committed by GitHub
parent 99935fec94
commit 5b325568d1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/src/component/context/ContectFormChip/ContextFormChipList.tsx
View File

@ -6,9 +6,16 @@ const StyledContainer = styled('ul')(({ theme }) => ({
display: 'flex', display: 'flex',
flexWrap: 'wrap', flexWrap: 'wrap',
gap: theme.spacing(1), gap: theme.spacing(1),
padding: 0, padding: theme.spacing(2),
margin: 0, margin: 0,
marginBottom: '1rem !important', marginBottom: '1rem !important',
maxHeight: '412px',
overflow: 'auto',
borderRadius: theme.shape.borderRadiusMedium,
border: `1px solid ${theme.palette.divider}`,
'&:empty': {
display: 'none',
},
})); }));
export const ContextFormChipList: React.FC = StyledContainer; export const ContextFormChipList: React.FC = StyledContainer;

8
frontend/src/component/context/ContextForm/ContextForm.tsx
View File

@ -42,10 +42,6 @@ const StyledForm = styled('form')({
height: '100%', height: '100%',
}); });
const StyledContainer = styled('div')({
maxWidth: '470px',
});
const StyledInputDescription = styled('p')(({ theme }) => ({ const StyledInputDescription = styled('p')(({ theme }) => ({
marginBottom: theme.spacing(1), marginBottom: theme.spacing(1),
})); }));
@ -159,7 +155,7 @@ export const ContextForm: React.FC<IContextForm> = ({
return ( return (
<StyledForm onSubmit={onSubmit}> <StyledForm onSubmit={onSubmit}>
<StyledContainer> <div>
<StyledInputDescription> <StyledInputDescription>
What is your context name? What is your context name?
</StyledInputDescription> </StyledInputDescription>
@ -266,7 +262,7 @@ export const ContextForm: React.FC<IContextForm> = ({
<Typography>{stickiness ? 'On' : 'Off'}</Typography> <Typography>{stickiness ? 'On' : 'Off'}</Typography>
</StyledSwitchContainer> </StyledSwitchContainer>
<ContextFieldUsage contextName={contextName} /> <ContextFieldUsage contextName={contextName} />
</StyledContainer> </div>
<StyledButtonContainer> <StyledButtonContainer>
{children} {children}
<StyledCancelButton onClick={onCancel}> <StyledCancelButton onClick={onCancel}>