Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-01-25 00:07:47 +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: { container: {
display: 'inline-block', display: 'inline-block',
wordBreak: 'break-word', 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: { value: {
lineHeight: 1.33, 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 { useEffect, useState } from 'react';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender'; 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 { useThemeStyles } from 'themes/themeStyles';
import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch'; import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch';
import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader'; import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
@ -49,6 +49,17 @@ export const getIllegalValues = (
return constraintValues.filter((value) => deletedValuesSet.has(value)); 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 = ({ export const RestrictiveLegalValues = ({
data, data,
values, values,
@ -134,23 +145,25 @@ export const RestrictiveLegalValues = ({
/> />
} }
/> />
{filteredValues.map((match) => ( <StyledValuesContainer>
<LegalValueLabel {filteredValues.map((match) => (
key={match.value} <LegalValueLabel
legal={match} key={match.value}
control={ legal={match}
<Checkbox control={
checked={Boolean(valuesMap[match.value])} <Checkbox
onChange={() => onChange(match.value)} checked={Boolean(valuesMap[match.value])}
name={match.value} onChange={() => onChange(match.value)}
color='primary' name={match.value}
disabled={deletedLegalValues color='primary'
.map(({ value }) => value) disabled={deletedLegalValues
.includes(match.value)} .map(({ value }) => value)
/> .includes(match.value)}
} />
/> }
))} />
))}
</StyledValuesContainer>
<ConditionallyRender <ConditionallyRender
condition={Boolean(error)} condition={Boolean(error)}