From 07044309f15f007ca40ba2166de9b7848ea66ace Mon Sep 17 00:00:00 2001 From: Ashley Harrison Date: Thu, 18 Apr 2024 11:22:28 +0100 Subject: [PATCH] EmptyState: Add `completed` variant (#86497) * add 'completed' variant * add central text alignment --- .../src/components/EmptyState/EmptyState.mdx | 10 ++ .../src/components/EmptyState/EmptyState.tsx | 17 +++- .../components/EmptyState/grot-completed.svg | 91 +++++++++++++++++++ 3 files changed, 115 insertions(+), 3 deletions(-) create mode 100644 packages/grafana-ui/src/components/EmptyState/grot-completed.svg diff --git a/packages/grafana-ui/src/components/EmptyState/EmptyState.mdx b/packages/grafana-ui/src/components/EmptyState/EmptyState.mdx index ed1e0863f70..1851d7c91c2 100644 --- a/packages/grafana-ui/src/components/EmptyState/EmptyState.mdx +++ b/packages/grafana-ui/src/components/EmptyState/EmptyState.mdx @@ -66,6 +66,16 @@ import { EmptyState } from '@grafana/ui'; ; ``` +### `variant="completed"` + +For when a user has completed all tasks on a page, such as reading all their notifications. + +```jsx +import { EmptyState } from '@grafana/ui'; + +; +``` + ## Customization For all variants you can: diff --git a/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx b/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx index 97340c52c41..548a1a66477 100644 --- a/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx +++ b/packages/grafana-ui/src/components/EmptyState/EmptyState.tsx @@ -1,4 +1,5 @@ import React, { ReactNode } from 'react'; +import SVG from 'react-inlinesvg'; import { Box } from '../Layout/Box/Box'; import { Stack } from '../Layout/Stack/Stack'; @@ -6,6 +7,7 @@ import { Text } from '../Text/Text'; import { GrotCTA } from './GrotCTA/GrotCTA'; import { GrotNotFound } from './GrotNotFound/GrotNotFound'; +import GrotCompleted from './grot-completed.svg'; interface Props { /** @@ -24,7 +26,7 @@ interface Props { /** * Which variant to use. Affects the default image shown. */ - variant: 'call-to-action' | 'not-found'; + variant: 'call-to-action' | 'not-found' | 'completed'; } export const EmptyState = ({ @@ -41,8 +43,14 @@ export const EmptyState = ({ {!hideImage && imageToShow} - {message} - {children && {children}} + + {message} + + {children && ( + + {children} + + )} {button} @@ -57,6 +65,9 @@ function getDefaultImageForVariant(variant: Props['variant']) { case 'not-found': { return ; } + case 'completed': { + return ; + } default: { throw new Error(`Unknown variant: ${variant}`); } diff --git a/packages/grafana-ui/src/components/EmptyState/grot-completed.svg b/packages/grafana-ui/src/components/EmptyState/grot-completed.svg new file mode 100644 index 00000000000..2205faa698d --- /dev/null +++ b/packages/grafana-ui/src/components/EmptyState/grot-completed.svg @@ -0,0 +1,91 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +