Chore: ActionRow - Replace HorizontalGroup with Stack (#86143)

This commit is contained in:
Laura Fernández 2024-04-15 15:57:15 +02:00 committed by GitHub
parent b2555cfc01
commit 499ad35a50
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 7 additions and 8 deletions

View File

@ -4039,9 +4039,8 @@ exports[`better eslint`] = {
[0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"] [0, 0, 0, "\'VerticalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
], ],
"public/app/features/search/page/components/ActionRow.tsx:5381": [ "public/app/features/search/page/components/ActionRow.tsx:5381": [
[0, 0, 0, "\'HorizontalGroup\' import from \'@grafana/ui\' is restricted from being used by a pattern. Use Stack component instead.", "0"], [0, 0, 0, "Styles should be written using objects.", "0"],
[0, 0, 0, "Styles should be written using objects.", "1"], [0, 0, 0, "Styles should be written using objects.", "1"]
[0, 0, 0, "Styles should be written using objects.", "2"]
], ],
"public/app/features/search/page/components/SearchResultsTable.tsx:5381": [ "public/app/features/search/page/components/SearchResultsTable.tsx:5381": [
[0, 0, 0, "Styles should be written using objects.", "0"], [0, 0, 0, "Styles should be written using objects.", "0"],

View File

@ -3,7 +3,7 @@ import React, { FormEvent } from 'react';
import { GrafanaTheme2, SelectableValue } from '@grafana/data'; import { GrafanaTheme2, SelectableValue } from '@grafana/data';
import { config } from '@grafana/runtime'; import { config } from '@grafana/runtime';
import { Button, Checkbox, HorizontalGroup, RadioButtonGroup, useStyles2 } from '@grafana/ui'; import { Button, Checkbox, Stack, RadioButtonGroup, useStyles2 } from '@grafana/ui';
import { SortPicker } from 'app/core/components/Select/SortPicker'; import { SortPicker } from 'app/core/components/Select/SortPicker';
import { TagFilter, TermCount } from 'app/core/components/TagFilter/TagFilter'; import { TagFilter, TermCount } from 'app/core/components/TagFilter/TagFilter';
import { t, Trans } from 'app/core/internationalization'; import { t, Trans } from 'app/core/internationalization';
@ -77,7 +77,7 @@ export const ActionRow = ({
return ( return (
<div className={styles.actionRow}> <div className={styles.actionRow}>
<HorizontalGroup spacing="md" width="auto"> <Stack gap={2} alignItems="center">
<TagFilter isClearable={false} tags={state.tag} tagOptions={getTagOptions} onChange={onTagFilterChange} /> <TagFilter isClearable={false} tags={state.tag} tagOptions={getTagOptions} onChange={onTagFilterChange} />
{config.featureToggles.panelTitleSearch && ( {config.featureToggles.panelTitleSearch && (
<Checkbox <Checkbox
@ -110,9 +110,9 @@ export const ActionRow = ({
Panel: {state.panel_type} Panel: {state.panel_type}
</Button> </Button>
)} )}
</HorizontalGroup> </Stack>
<HorizontalGroup spacing="md" width="auto"> <Stack gap={2}>
{!hideLayout && ( {!hideLayout && (
<RadioButtonGroup <RadioButtonGroup
options={getLayoutOptions()} options={getLayoutOptions()}
@ -128,7 +128,7 @@ export const ActionRow = ({
placeholder={sortPlaceholder || t('search.actions.sort-placeholder', 'Sort')} placeholder={sortPlaceholder || t('search.actions.sort-placeholder', 'Sort')}
isClearable isClearable
/> />
</HorizontalGroup> </Stack>
</div> </div>
); );
}; };