Grafana UI: EmptySearchResult docs (#30281)

* Grafana-UI: Remove sass

* Grafana-UI: Add story/docs

packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.mdx

@@ -0,0 +1,17 @@
+import { ArgsTable } from '@storybook/addon-docs/blocks';
+import { EmptySearchResult } from './EmptySearchResult';
+
+# EmptySearchResult
+
+A styled container for a message, displayed when no search results are found. Used in the visualizations search, among others.
+
+### Usage
+
+```jsx
+import { EmptySearchResult } from '@grafana/ui';
+
+<EmptySearchResult>Could not find anything matching your query</EmptySearchResult>;
+```
+
+### Props
+<ArgsTable of={EmptySearchResult} />

packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.story.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { EmptySearchResult } from './EmptySearchResult';
+import { withCenteredStory } from '@grafana/ui/src/utils/storybook/withCenteredStory';
+import mdx from './EmptySearchResult.mdx';
+
+export default {
+  title: 'Visualizations/EmptySearchResult',
+  component: EmptySearchResult,
+  decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Basic = () => {
+  return <EmptySearchResult>Could not find anything matching your query</EmptySearchResult>;
+};

packages/grafana-ui/src/components/EmptySearchResult/EmptySearchResult.tsx

@@ -1,11 +1,27 @@
-import React, { FC } from 'react';
+import React, { FC } from 'react';
+import { GrafanaTheme } from '@grafana/data';
+import { css } from 'emotion';
+import { useStyles } from '../../themes';
 
 export interface Props {
   children: JSX.Element | string;
 }
 
 const EmptySearchResult: FC<Props> = ({ children }) => {
-  return <div className="empty-search-result">{children}</div>;
+  const styles = useStyles(getStyles);
+  return <div className={styles.container}>{children}</div>;
 };
 
+const getStyles = (theme: GrafanaTheme) => {
+  return {
+    container: css`
+      border-left: 3px solid ${theme.palette.blue80};
+      background-color: ${theme.colors.bg2};
+      padding: ${theme.spacing.d};
+      min-width: 350px;
+      border-radius: ${theme.border.radius.md};
+      margin-bottom: ${theme.spacing.xl};
+    `,
+  };
+};
 export { EmptySearchResult };

packages/grafana-ui/src/components/EmptySearchResult/_EmptySearchResult.scss

@@ -1,8 +0,0 @@
-.empty-search-result {
-  border-left: 3px solid $info-box-border-color;
-  background-color: $empty-list-cta-bg;
-  padding: $spacer;
-  min-width: 350px;
-  border-radius: $border-radius;
-  margin-bottom: $spacer * 2;
-}

packages/grafana-ui/src/components/index.scss

@@ -2,7 +2,6 @@
 @import 'ColorPicker/ColorPicker';
 @import 'CustomScrollbar/CustomScrollbar';
 @import 'Drawer/Drawer';
-@import 'EmptySearchResult/EmptySearchResult';
 @import 'FormField/FormField';
 @import 'PanelOptionsGrid/PanelOptionsGrid';
 @import 'RefreshPicker/RefreshPicker';