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: Modal - Replace HorizontalGroup with Stack (#85756)

Browse Source
This commit is contained in:
Laura Fernández 2024-04-09 10:31:11 +02:00 committed by GitHub
parent 0f1b65a7ad
commit 0bdb96552a
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 9 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
.betterer.results
View File

@ -864,9 +864,6 @@ exports[`better eslint`] = {
"packages/grafana-ui/src/components/Menu/Menu.story.tsx:5381": [
[0, 0, 0, "\'VerticalGroup\' import from \'../Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
],
"packages/grafana-ui/src/components/Modal/Modal.tsx:5381": [
[0, 0, 0, "\'HorizontalGroup\' import from \'../Layout/Layout\' is restricted from being used by a pattern. Use Stack component instead.", "0"]
],
"packages/grafana-ui/src/components/Modal/ModalsContext.tsx:5381": [
[0, 0, 0, "Unexpected any. Specify a different type.", "0"],
[0, 0, 0, "Unexpected any. Specify a different type.", "1"],

18
packages/grafana-ui/src/components/Modal/Modal.tsx
View File

@ -8,7 +8,7 @@ import { useStyles2 } from '../../themes';
import { IconName } from '../../types';
import { t } from '../../utils/i18n';
import { IconButton } from '../IconButton/IconButton';
import { HorizontalGroup } from '../Layout/Layout';
import { Stack } from '../Layout/Stack/Stack';
import { ModalHeader } from './ModalHeader';
import { getModalStyles } from './getModalStyles';
@ -105,23 +105,23 @@ function ModalButtonRow({ leftItems, children }: { leftItems?: React.ReactNode;
if (leftItems) {
return (
<div className={styles.modalButtonRow}>
<HorizontalGroup justify="space-between">
<HorizontalGroup justify="flex-start" spacing="md">
<Stack justifyContent="space-between">
<Stack justifyContent="flex-start" gap={2}>
{leftItems}
</HorizontalGroup>
<HorizontalGroup justify="flex-end" spacing="md">
</Stack>
<Stack justifyContent="flex-end" gap={2}>
{children}
</HorizontalGroup>
</HorizontalGroup>
</Stack>
</Stack>
</div>
);
}
return (
<div className={styles.modalButtonRow}>
<HorizontalGroup justify="flex-end" spacing="md" wrap={true}>
<Stack justifyContent="flex-end" gap={2} wrap="wrap">
{children}
</HorizontalGroup>
</Stack>
</div>
);
}