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

fix: legal values styling in segments (#9044)

Browse Source
This commit is contained in:
Mateusz Kwasniewski 2024-12-31 08:45:17 +01:00 committed by GitHub
parent 71eb6b1511
commit 18cd0e2cdb
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 38 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts
View File

@ -4,6 +4,13 @@ export const useStyles = makeStyles()((theme) => ({
container: {
display: 'inline-block',
wordBreak: 'break-word',
padding: theme.spacing(0.5, 1),
background: theme.palette.background.paper,
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.shape.borderRadius,
'&:hover': {
border: `1px solid ${theme.palette.primary.main}`,
},
},
value: {
lineHeight: 1.33,

49
frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
View File

@ -1,6 +1,6 @@
import { useEffect, useState } from 'react';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { Alert, Checkbox } from '@mui/material';
import { Alert, Checkbox, styled } from '@mui/material';
import { useThemeStyles } from 'themes/themeStyles';
import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch';
import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
@ -49,6 +49,17 @@ export const getIllegalValues = (
return constraintValues.filter((value) => deletedValuesSet.has(value));
};
const StyledValuesContainer = styled('div')(({ theme }) => ({
display: 'flex',
flexWrap: 'wrap',
gap: theme.spacing(1),
padding: theme.spacing(2),
border: `1px solid ${theme.palette.divider}`,
borderRadius: theme.shape.borderRadiusMedium,
maxHeight: '378px',
overflow: 'auto',
}));
export const RestrictiveLegalValues = ({
data,
values,
@ -134,23 +145,25 @@ export const RestrictiveLegalValues = ({
/>
}
/>
{filteredValues.map((match) => (
<LegalValueLabel
key={match.value}
legal={match}
control={
<Checkbox
checked={Boolean(valuesMap[match.value])}
onChange={() => onChange(match.value)}
name={match.value}
color='primary'
disabled={deletedLegalValues
.map(({ value }) => value)
.includes(match.value)}
/>
}
/>
))}
<StyledValuesContainer>
{filteredValues.map((match) => (
<LegalValueLabel
key={match.value}
legal={match}
control={
<Checkbox
checked={Boolean(valuesMap[match.value])}
onChange={() => onChange(match.value)}
name={match.value}
color='primary'
disabled={deletedLegalValues
.map(({ value }) => value)
.includes(match.value)}
/>
}
/>
))}
</StyledValuesContainer>
<ConditionallyRender
condition={Boolean(error)}