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 <FormControlLabel
value={legal.value} value={legal.value}
control={control} control={control}
sx={{ width: '100%' }}
label={ label={
<> <>
<StyledValue> <StyledValue>

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

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