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

fix: legal value selector chips and option updates (#9819)

Browse Source
This commit is contained in:
Thomas Heartman 2025-04-23 14:41:28 +02:00 committed by GitHub
parent b179f86fb7
commit 9977b3e0f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 34 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts
View File

@ -7,16 +7,20 @@ export const StyledContainer = styled('div')(({ theme }) => ({
background: theme.palette.background.paper, background: theme.palette.background.paper,
border: `1px solid ${theme.palette.divider}`, border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.shape.borderRadius, borderRadius: theme.shape.borderRadius,
transition: 'all 0.1s ease-in-out',
'&:hover': { '&:hover': {
border: `1px solid ${theme.palette.primary.main}`, borderColor: theme.palette.primary.main,
}, },
})); }));
export const StyledValue = styled('div')(({ theme }) => ({ export const StyledValue = styled('div')(({ theme }) => ({
lineHeight: 1.33, lineHeight: 1.33,
fontSize: theme.fontSizes.smallBody, fontSize: theme.fontSizes.smallBody,
overflowX: 'hidden',
textOverflow: 'ellipsis',
})); }));
export const StyledDescription = styled('div')(({ theme }) => ({ export const StyledDescription = styled('div')(({ theme }) => ({
lineHeight: 1.33, lineHeight: 1.33,
fontSize: theme.fontSizes.smallerBody, fontSize: theme.fontSizes.smallerBody,

13
frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx
View File

@ -27,13 +27,18 @@ export const LegalValueLabel = ({
<FormControlLabel <FormControlLabel
value={value || legal.value} value={value || legal.value}
control={control} control={control}
sx={{ width: '100%' }} sx={{
width: '100%',
overflowX: 'hidden',
}}
label={ label={
<> <>
<StyledValue> <StyledValue>
<Highlighter search={filter}> <Truncator title={legal.value} arrow lines={1}>
{legal.value} <Highlighter search={filter}>
</Highlighter> {legal.value}
</Highlighter>
</Truncator>
</StyledValue> </StyledValue>
<StyledDescription> <StyledDescription>
<Truncator <Truncator

28
frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
View File

@ -52,7 +52,7 @@ export const getIllegalValues = (
const StyledValuesContainer = styled('div')(({ theme }) => ({ const StyledValuesContainer = styled('div')(({ theme }) => ({
display: 'grid', display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, 120px)', gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
gap: theme.spacing(1), gap: theme.spacing(1),
padding: theme.spacing(2), padding: theme.spacing(2),
border: `1px solid ${theme.palette.divider}`, border: `1px solid ${theme.palette.divider}`,
@ -60,6 +60,15 @@ const StyledValuesContainer = styled('div')(({ theme }) => ({
maxHeight: '378px', maxHeight: '378px',
overflow: 'auto', overflow: 'auto',
})); }));
const StyledChipList = styled('ul')(({ theme }) => ({
display: 'flex',
flexWrap: 'wrap',
listStyle: 'none',
gap: theme.spacing(1),
padding: theme.spacing(2),
}));
const StyledStack = styled(Stack)(({ theme }) => ({ const StyledStack = styled(Stack)(({ theme }) => ({
marginTop: theme.spacing(2), marginTop: theme.spacing(2),
marginBottom: theme.spacing(0.5), marginBottom: theme.spacing(0.5),
@ -185,19 +194,22 @@ export const RestrictiveLegalValues = ({
Boolean(values) Boolean(values)
} }
show={ show={
<StyledValuesContainer <StyledChipList
sx={{ border: 0, paddingTop: 0 }} sx={{ border: 0, paddingTop: 0 }}
> >
{values.map((value) => { {values.map((value) => {
return ( return (
<Chip <li key={value}>
key={value} <Chip
label={value} label={value}
onDelete={() => onChange(value)} onDelete={() =>
/> onChange(value)
}
/>
</li>
); );
})} })}
</StyledValuesContainer> </StyledChipList>
} }
/> />
</> </>