1
0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-04 00:18:01 +01:00

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

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

View File

@ -6,9 +6,16 @@ const StyledContainer = styled('ul')(({ theme }) => ({
display: 'flex',
flexWrap: 'wrap',
gap: theme.spacing(1),
padding: 0,
padding: theme.spacing(2),
margin: 0,
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;

View File

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