Commit 60cf95fa by Peter Holmberg Committed by GitHub

Docs: Basic docs for FormValidationMessage (#27658)

parent e8a6b9db
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} />
import React from 'react'; import React from 'react';
import { FieldValidationMessage } from './FieldValidationMessage';
import { text } from '@storybook/addon-knobs'; import { text } from '@storybook/addon-knobs';
import { FieldValidationMessage } from './FieldValidationMessage';
import mdx from './FieldValidationMessage.mdx';
const getKnobs = () => { const getKnobs = () => {
return { return {
...@@ -11,6 +12,11 @@ const getKnobs = () => { ...@@ -11,6 +12,11 @@ const getKnobs = () => {
export default { export default {
title: 'Forms/FieldValidationMessage', title: 'Forms/FieldValidationMessage',
component: FieldValidationMessage, component: FieldValidationMessage,
parameters: {
docs: {
page: mdx,
},
},
}; };
export const simple = () => { export const simple = () => {
......
import React from 'react'; import React from 'react';
import { useTheme, stylesFactory } from '../../themes';
import { GrafanaTheme } from '@grafana/data';
import { css, cx } from 'emotion'; import { css, cx } from 'emotion';
import { GrafanaTheme } from '@grafana/data';
import { Icon } from '../Icon/Icon'; import { Icon } from '../Icon/Icon';
import { useTheme, stylesFactory } from '../../themes';
export interface FieldValidationMessageProps { export interface FieldValidationMessageProps {
children: string; children: string;
/** Override component style */
className?: string; className?: string;
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment