IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-14 09:33:34 -06:00
Code Issues Packages Projects Releases Wiki Activity

EmptyState: Set a max width on the empty state component (#86569)

Browse Source 
set a max width on the empty state component
This commit is contained in:
Ashley Harrison 2024-04-19 11:52:16 +01:00 committed by GitHub
parent 5f7612834e
commit 21588ce7e2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

41
packages/grafana-ui/src/components/EmptyState/EmptyState.tsx
View File

@ -1,6 +1,10 @@
import { css } from '@emotion/css';
import React, { ReactNode } from 'react';
import SVG from 'react-inlinesvg';
import { GrafanaTheme2 } from '@grafana/data';
import { useStyles2 } from '../../themes';
import { Box } from '../Layout/Box/Box';
import { Stack } from '../Layout/Stack/Stack';
import { Text } from '../Text/Text';
@ -37,22 +41,25 @@ export const EmptyState = ({
hideImage = false,
variant,
}: React.PropsWithChildren<Props>) => {
const styles = useStyles2(getStyles);
const imageToShow = image ?? getDefaultImageForVariant(variant);
return (
<Box paddingY={4} gap={4} display="flex" direction="column" alignItems="center">
{!hideImage && imageToShow}
<Stack direction="column" alignItems="center">
<Text variant="h4" textAlignment="center">
{message}
</Text>
{children && (
<Text color="secondary" textAlignment="center">
{children}
<Box paddingY={4} display="flex" direction="column" alignItems="center">
<div className={styles.container}>
{!hideImage && imageToShow}
<Stack direction="column" alignItems="center">
<Text variant="h4" textAlignment="center">
{message}
</Text>
)}
</Stack>
{button}
{children && (
<Text color="secondary" textAlignment="center">
{children}
</Text>
)}
</Stack>
{button}
</div>
</Box>
);
};
@ -73,3 +80,13 @@ function getDefaultImageForVariant(variant: Props['variant']) {
}
}
}
const getStyles = (theme: GrafanaTheme2) => ({
container: css({
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
gap: theme.spacing(4),
maxWidth: '600px',
}),
});