Grafana-UI: LoadingPlaceholder docs (#28874)

* Refactor props

* Add docs

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

@@ -0,0 +1,15 @@
+import { Props } from '@storybook/addon-docs/blocks';
+import { LoadingPlaceholder } from './LoadingPlaceholder';
+
+# LoadingPlaceholder
+
+Loading indicator with a text. Used to alert a user to wait for an activity to complete.
+
+### Usage
+
+```jsx
+<LoadingPlaceholder text='Loading...'/>
+```
+
+### Props
+<Props of={LoadingPlaceholder} />

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

@@ -0,0 +1,19 @@
+import React from 'react';
+import { LoadingPlaceholder } from './LoadingPlaceholder';
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+import mdx from './LoadingPlaceholder.mdx';
+
+export default {
+  title: 'General/LoadingPlaceholder',
+  component: LoadingPlaceholder,
+  decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const basic = () => {
+  return <LoadingPlaceholder text="Loading..." />;
+};

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

@@ -1,12 +1,32 @@
-import React, { SFC } from 'react';
+import React, { HTMLAttributes, SFC } from 'react';
+import { css, cx } from 'emotion';
+import { GrafanaTheme } from '@grafana/data';
 import { Spinner } from '../Spinner/Spinner';
+import { useStyles } from '../../themes';
 
-interface LoadingPlaceholderProps {
+/**
+ * @public
+ */
+export interface LoadingPlaceholderProps extends HTMLAttributes<HTMLDivElement> {
   text: string;
 }
 
-export const LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text }) => (
-  <div className="gf-form-group">
-    {text} <Spinner inline={true} />
-  </div>
-);
+/**
+ * @public
+ */
+export const LoadingPlaceholder: SFC<LoadingPlaceholderProps> = ({ text, className, ...rest }) => {
+  const styles = useStyles(getStyles);
+  return (
+    <div className={cx(styles.container, className)} {...rest}>
+      {text} <Spinner inline={true} />
+    </div>
+  );
+};
+
+const getStyles = (theme: GrafanaTheme) => {
+  return {
+    container: css`
+      margin-bottom: ${theme.spacing.xl};
+    `,
+  };
+};

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

@@ -13,7 +13,7 @@ export { ClipboardButton } from './ClipboardButton/ClipboardButton';
 export { Cascader, CascaderOption } from './Cascader/Cascader';
 export { ButtonCascader } from './ButtonCascader/ButtonCascader';
 
-export { LoadingPlaceholder } from './LoadingPlaceholder/LoadingPlaceholder';
+export { LoadingPlaceholder, LoadingPlaceholderProps } from './LoadingPlaceholder/LoadingPlaceholder';
 export { ColorPicker, SeriesColorPicker } from './ColorPicker/ColorPicker';
 export { SeriesColorPickerPopover, SeriesColorPickerPopoverWithTheme } from './ColorPicker/SeriesColorPickerPopover';
 export { PanelOptionsGroup } from './PanelOptionsGroup/PanelOptionsGroup';