Add docs for TagsInput (#27881)

* Add docs for TagsInput * Add import to TagsInput.story.tsx * Update packages/grafana-ui/src/components/TagsInput/TagsInput.mdx Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com> Co-authored-by: Alex Khomenko <Clarity-89@users.noreply.github.com>
2020-09-29 14:30:57 +03:00
parent b995381816
commit 339ef7a1a8
2 changed files with 14 additions and 0 deletions
@@ -0,0 +1,8 @@
+import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { TagsInput } from './TagsInput';
+
+<Meta title="MDX|TagsInput" component={TagsInput} />
+
+# TagsInput
+
+A set of an input field and a button next to it that allows the user to add new tags. The added tags are previewed under the input and can be removed there by clicking the "X" icon. You can customize the width of the input.
@@ -3,6 +3,7 @@ import { action } from '@storybook/addon-actions';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 import { UseState } from '../../utils/storybook/UseState';
 import { TagsInput } from '@grafana/ui';
+import mdx from './TagsInput.mdx';

 const mockTags = ['Some', 'Tags', 'With', 'This', 'New', 'Component'];

@@ -10,6 +11,11 @@ export default {
  title: 'Forms/TagsInput',
  component: TagsInput,
  decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
 };

 export const basic = () => {