Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2024-12-22 19:07:54 +01:00
Code Issues Projects Releases Wiki Activity

Chore: semver constraint context fields improvements (#6730)

Browse Source 
Increases the label width to make the whole box selectable
Adds a small gap to match the style

Closes #
[1-2233](https://linear.app/unleash/issue/1-2233/semver-constraint)


before:
![Screenshot 2024-03-28 at 14 19
39](https://github.com/Unleash/unleash/assets/104830839/bb4a0db7-4054-4c77-aa7f-5dabaff95b94)


after:
![Screenshot 2024-03-28 at 14 19
16](https://github.com/Unleash/unleash/assets/104830839/0dd6e56e-80c7-4771-ba84-93ad68484c8e)

---------

Signed-off-by: andreas-unleash <andreas@getunleash.ai>
This commit is contained in:
andreas-unleash 2024-04-02 09:35:11 +03:00 committed by GitHub
parent d0622f1727
commit e7970186d0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 35 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,6 +24,7 @@ export const LegalValueLabel = ({
<FormControlLabel
value={legal.value}
control={control}
sx={{ width: '100%' }}
label={
<>
<StyledValue>

54
frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx
View File

@ -1,7 +1,7 @@
import type React from 'react';
import { useState } from 'react';
import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
import { FormControl, RadioGroup, Radio, Alert } from '@mui/material';
import { FormControl, RadioGroup, Radio, Alert, styled } from '@mui/material';
import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch';
import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
import { useThemeStyles } from 'themes/themeStyles';
@ -26,6 +26,17 @@ interface ISingleLegalValueProps {
constraintValue: string;
}
const StyledFieldsetContainer = 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 SingleLegalValue = ({
setValue,
value,
@ -80,25 +91,28 @@ export const SingleLegalValue = ({
<ConditionallyRender
condition={Boolean(legalValues.length)}
show={
<FormControl component='fieldset'>
<RadioGroup
aria-label='selected-value'
name='selected'
value={value}
onChange={(e) => {
setError('');
setValue(e.target.value);
}}
>
{filteredValues.map((match) => (
<LegalValueLabel
key={match.value}
legal={match}
control={<Radio />}
/>
))}
</RadioGroup>
</FormControl>
<StyledFieldsetContainer>
<FormControl component='fieldset'>
<RadioGroup
aria-label='selected-value'
name='selected'
value={value}
sx={{ gap: (theme) => theme.spacing(0.5) }}
onChange={(e) => {
setError('');
setValue(e.target.value);
}}
>
{filteredValues.map((match) => (
<LegalValueLabel
key={match.value}
legal={match}
control={<Radio />}
/>
))}
</RadioGroup>
</FormControl>
</StyledFieldsetContainer>
}
elseShow={
<p>No valid legal values available for this operator.</p>