mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
EmptyState: make "message" a required prop (#86029)
* make "message" a required prop on EmptyState * run i18n:extract
This commit is contained in:
@@ -11,17 +11,17 @@ Use an empty state to communicate to the user that there is no data to display,
|
||||
|
||||
Use in place of a results table or list when a search query or filter returns no results.
|
||||
|
||||
There are sensible defaults for the image and message, so in most cases you can use it without any additional props.
|
||||
There are sensible defaults for the image, so in most cases all you need to provide is a message.
|
||||
|
||||
```jsx
|
||||
import { EmptyState } from '@grafana/ui';
|
||||
|
||||
<EmptyState variant="not-found" />;
|
||||
<EmptyState variant="not-found" message="No playlists found" />;
|
||||
```
|
||||
|
||||
### Providing custom overrides
|
||||
|
||||
You can optionally override the message or image, and add additional information or a button (e.g. to clear the search query)
|
||||
You can optionally override or hide the image, add additional information or a button (e.g. to clear the search query)
|
||||
|
||||
```jsx
|
||||
import { Button, EmptyState } from '@grafana/ui';
|
||||
|
||||
@@ -28,6 +28,7 @@ export const Basic: StoryFn<typeof EmptyState> = (args) => {
|
||||
|
||||
Basic.args = {
|
||||
children: 'Use this space to add any additional information',
|
||||
message: 'No results found',
|
||||
variant: 'not-found',
|
||||
};
|
||||
|
||||
|
||||
@@ -1,6 +1,5 @@
|
||||
import React, { ReactNode } from 'react';
|
||||
|
||||
import { t } from '../../utils/i18n';
|
||||
import { Box } from '../Layout/Box/Box';
|
||||
import { Stack } from '../Layout/Stack/Stack';
|
||||
import { Text } from '../Text/Text';
|
||||
@@ -20,7 +19,7 @@ interface Props {
|
||||
/**
|
||||
* Message to display to the user
|
||||
*/
|
||||
message?: string;
|
||||
message: string;
|
||||
/**
|
||||
* Empty state variant. Possible values are 'search'.
|
||||
*/
|
||||
@@ -31,7 +30,7 @@ export const EmptyState = ({
|
||||
button,
|
||||
children,
|
||||
image = <GrotNotFound width={300} />,
|
||||
message = t('grafana-ui.empty-state.not-found-message', 'No results found'),
|
||||
message,
|
||||
hideImage = false,
|
||||
}: React.PropsWithChildren<Props>) => {
|
||||
return (
|
||||
|
||||
@@ -573,9 +573,6 @@
|
||||
"drawer": {
|
||||
"close": "Close"
|
||||
},
|
||||
"empty-state": {
|
||||
"not-found-message": "No results found"
|
||||
},
|
||||
"modal": {
|
||||
"close-tooltip": "Close"
|
||||
},
|
||||
|
||||
@@ -573,9 +573,6 @@
|
||||
"drawer": {
|
||||
"close": "Cľőşę"
|
||||
},
|
||||
"empty-state": {
|
||||
"not-found-message": "Ńő řęşūľŧş ƒőūʼnđ"
|
||||
},
|
||||
"modal": {
|
||||
"close-tooltip": "Cľőşę"
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user