Docs: Basic docs for FormValidationMessage (#27658)

packages/grafana-ui/src/components/Forms/FieldValidationMessage.mdx

@@ -0,0 +1,27 @@
+import { Meta, Props } from '@storybook/addon-docs/blocks';
+import { FieldValidationMessage } from './FieldValidationMessage';
+
+<Meta title="MDX|FieldValidationMessage" component={FieldValidationMessage} />
+
+# FieldValidationMessage
+Component for displaying a validation error message under an element.
+
+### Example usage
+An example usage of this is in out `FormField` component.
+
+```tsx
+export const CustomFormField = () => {
+  return (
+    <div>
+      Label
+        <div>
+          <input />
+          {error &&
+            (<FormValidationMessage>Invalid input</FormValidationMessage>)}
+        </div>
+    </div>
+  )
+}
+```
+
+<Props of={FieldValidationMessage} />

packages/grafana-ui/src/components/Forms/FieldValidationMessage.story.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { FieldValidationMessage } from './FieldValidationMessage';
 import { text } from '@storybook/addon-knobs';
+import { FieldValidationMessage } from './FieldValidationMessage';
+import mdx from './FieldValidationMessage.mdx';
 
 const getKnobs = () => {
   return {
@@ -11,6 +12,11 @@ const getKnobs = () => {
 export default {
   title: 'Forms/FieldValidationMessage',
   component: FieldValidationMessage,
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };
 
 export const simple = () => {

packages/grafana-ui/src/components/Forms/FieldValidationMessage.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
-import { useTheme, stylesFactory } from '../../themes';
-import { GrafanaTheme } from '@grafana/data';
 import { css, cx } from 'emotion';
+import { GrafanaTheme } from '@grafana/data';
 import { Icon } from '../Icon/Icon';
+import { useTheme, stylesFactory } from '../../themes';
 
 export interface FieldValidationMessageProps {
   children: string;
+  /** Override component style */
   className?: string;
 }