mirror of
https://github.com/Unleash/unleash.git
synced 2025-07-31 13:47:02 +02:00
fix: legal value selector chips and option updates (#9819)
This commit is contained in:
parent
b179f86fb7
commit
9977b3e0f8
@ -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,
|
||||
|
@ -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
|
||||
|
@ -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>
|
||||
}
|
||||
/>
|
||||
</>
|
||||
|
Loading…
Reference in New Issue
Block a user