IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Grafana UI: FilterPopup- Replace VerticalGroup and HorizontalGroup with Stack (#86398)

Browse Source
This commit is contained in:
Laura Fernández 2024-04-18 12:16:38 +02:00 committed by GitHub
parent 635d85db7a
commit 6b21d12ce0
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 13 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
packages/grafana-ui/src/components/Table/FilterPopup.tsx
View File

@ -3,7 +3,7 @@ import React, { useCallback, useMemo, useState } from 'react';
import { Field, GrafanaTheme2, SelectableValue } from '@grafana/data';
import { Button, ClickOutsideWrapper, HorizontalGroup, IconButton, Label, VerticalGroup } from '..';
import { Button, ClickOutsideWrapper, IconButton, Label, Stack } from '..';
import { useStyles2, useTheme2 } from '../../themes';
import { FilterList } from './FilterList';
@ -65,9 +65,9 @@ export const FilterPopup = ({
{/* This is just blocking click events from bubbeling and should not have a keyboard interaction. */}
{/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events */}
<div className={cx(styles.filterContainer)} onClick={stopPropagation}>
<VerticalGroup spacing="lg">
<VerticalGroup spacing="xs">
<HorizontalGroup justify="space-between" align="center">
<Stack direction="column" gap={3}>
<Stack direction="column" gap={0.5}>
<Stack justifyContent="space-between" alignItems="center">
<Label className={styles.label}>Filter by values:</Label>
<IconButton
name="text-fields"
@ -77,7 +77,7 @@ export const FilterPopup = ({
setMatchCase((s) => !s);
}}
/>
</HorizontalGroup>
</Stack>
<div className={cx(styles.listDivider)} />
<FilterList
onChange={setValues}
@ -90,25 +90,25 @@ export const FilterPopup = ({
operator={operator}
setOperator={setOperator}
/>
</VerticalGroup>
<HorizontalGroup spacing="lg">
<HorizontalGroup>
</Stack>
<Stack gap={3}>
<Stack>
<Button size="sm" onClick={onFilter}>
Ok
</Button>
<Button size="sm" variant="secondary" onClick={onCancel}>
Cancel
</Button>
</HorizontalGroup>
</Stack>
{clearFilterVisible && (
<HorizontalGroup>
<Stack>
<Button fill="text" size="sm" onClick={onClearFilter}>
Clear filter
</Button>
</HorizontalGroup>
</Stack>
)}
</HorizontalGroup>
</VerticalGroup>
</Stack>
</Stack>
</div>
</ClickOutsideWrapper>
);