fix: relation widget style fixes (#911)

This commit is contained in:
Daniel Lautzenheiser
2023-10-04 08:43:07 -04:00
committed by GitHub
parent 2d2b048347
commit a0bc731357
7 changed files with 65 additions and 47 deletions

View File

@ -7,14 +7,12 @@
gap-2
p-2
pr-0
w-relation-widget-label;
min-w-0;
}
.CMS_WidgetRelation_loading {
@apply absolute
inset-y-0
right-4
flex
@apply flex
items-center
pr-2;
w-6
h-6;
}

View File

@ -358,28 +358,18 @@ const RelationControl: FC<WidgetControlProps<string | string[], RelationField>>
>
<Autocomplete
label={
<>
{Array.isArray(selectedValue) && selectedValue.length > 0 ? (
<div className={classes.values}>
{selectedValue.map(selectValue => {
const option = uniqueOptionsByValue[selectValue];
return (
<Pill key={selectValue} noWrap disabled={disabled}>
{option?.label ?? selectValue}
</Pill>
);
})}
</div>
) : null}
{loading ? (
<CircularProgress
key="loading-indicator"
className={classes.loading}
data-testid="relation-loading-indicator"
size="small"
/>
) : null}
</>
Array.isArray(selectedValue) && selectedValue.length > 0 ? (
<div className={classes.values}>
{selectedValue.map(selectValue => {
const option = uniqueOptionsByValue[selectValue];
return (
<Pill key={selectValue} noWrap disabled={disabled}>
{option?.label ?? selectValue}
</Pill>
);
})}
</div>
) : null
}
inputRef={ref}
value={selectedValue}
@ -398,6 +388,16 @@ const RelationControl: FC<WidgetControlProps<string | string[], RelationField>>
return option.label;
}}
endAdornment={
loading ? (
<CircularProgress
key="loading-indicator"
className={classes.loading}
data-testid="relation-loading-indicator"
size="small"
/>
) : null
}
onQuery={filterOptions}
onChange={handleChange}
/>