Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-08-23 13:46:45 +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,
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.shape.borderRadius,
transition: 'all 0.1s ease-in-out',
'&:hover': {
border: `1px solid ${theme.palette.primary.main}`,
borderColor: theme.palette.primary.main,
},
}));
export const StyledValue = styled('div')(({ theme }) => ({
lineHeight: 1.33,
fontSize: theme.fontSizes.smallBody,
overflowX: 'hidden',
textOverflow: 'ellipsis',
}));
export const StyledDescription = styled('div')(({ theme }) => ({
lineHeight: 1.33,
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
value={value || legal.value}
control={control}
sx={{ width: '100%' }}
sx={{
width: '100%',
overflowX: 'hidden',
}}
label={
<>
<StyledValue>
<Highlighter search={filter}>
{legal.value}
</Highlighter>
<Truncator title={legal.value} arrow lines={1}>
<Highlighter search={filter}>
{legal.value}
</Highlighter>
</Truncator>
</StyledValue>
<StyledDescription>
<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 }) => ({
display: 'grid',
gridTemplateColumns: 'repeat(auto-fill, 120px)',
gridTemplateColumns: 'repeat(auto-fit, minmax(120px, 1fr))',
gap: theme.spacing(1),
padding: theme.spacing(2),
border: `1px solid ${theme.palette.divider}`,
@ -60,6 +60,15 @@ const StyledValuesContainer = styled('div')(({ theme }) => ({
maxHeight: '378px',
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 }) => ({
marginTop: theme.spacing(2),
marginBottom: theme.spacing(0.5),
@ -185,19 +194,22 @@ export const RestrictiveLegalValues = ({
Boolean(values)
}
show={
<StyledValuesContainer
<StyledChipList
sx={{ border: 0, paddingTop: 0 }}
>
{values.map((value) => {
return (
<Chip
key={value}
label={value}
onDelete={() => onChange(value)}
/>
<li key={value}>
<Chip
label={value}
onDelete={() =>
onChange(value)
}
/>
</li>
);
})}
</StyledValuesContainer>
</StyledChipList>
}
/>
</>