FilterList: Improve "No values" display (#90032)

* FilterList: Improve "No values" display

* Switch to ternary
This commit is contained in:
Alex Khomenko 2024-07-08 13:27:34 +03:00 committed by GitHub
parent 675457fb10
commit c1ec327b74
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -184,8 +184,8 @@ export const FilterList = ({
<FilterInput placeholder="Filter values" onChange={setSearchFilter} value={searchFilter} /> <FilterInput placeholder="Filter values" onChange={setSearchFilter} value={searchFilter} />
</Stack> </Stack>
)} )}
{!items.length && <Label>No values</Label>} {items.length > 0 ? (
{items.length && ( <>
<List <List
height={height} height={height}
itemCount={items.length} itemCount={items.length}
@ -205,8 +205,6 @@ export const FilterList = ({
); );
}} }}
</List> </List>
)}
{items.length && (
<Stack direction="column" gap={0.25}> <Stack direction="column" gap={0.25}>
<div className={cx(styles.selectDivider)} /> <div className={cx(styles.selectDivider)} />
<div className={cx(styles.filterListRow)}> <div className={cx(styles.filterListRow)}>
@ -219,6 +217,9 @@ export const FilterList = ({
/> />
</div> </div>
</Stack> </Stack>
</>
) : (
<Label className={styles.noValuesLabel}>No values</Label>
)} )}
</Stack> </Stack>
); );
@ -246,4 +247,7 @@ const getStyles = (theme: GrafanaTheme2) => ({
borderTop: `1px solid ${theme.colors.border.medium}`, borderTop: `1px solid ${theme.colors.border.medium}`,
padding: theme.spacing(0.5, 2), padding: theme.spacing(0.5, 2),
}), }),
noValuesLabel: css({
paddingTop: theme.spacing(1),
}),
}); });