From 339ef7a1a8fc4eb9e3e7677fc855c51d058b2711 Mon Sep 17 00:00:00 2001 From: Jess <53754871+jessover9000@users.noreply.github.com> Date: Tue, 29 Sep 2020 13:30:57 +0200 Subject: [PATCH] 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 Co-authored-by: Alex Khomenko --- .../grafana-ui/src/components/TagsInput/TagsInput.mdx | 8 ++++++++ .../src/components/TagsInput/TagsInput.story.tsx | 6 ++++++ 2 files changed, 14 insertions(+) create mode 100644 packages/grafana-ui/src/components/TagsInput/TagsInput.mdx diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.mdx b/packages/grafana-ui/src/components/TagsInput/TagsInput.mdx new file mode 100644 index 00000000000..409e7814f8b --- /dev/null +++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.mdx @@ -0,0 +1,8 @@ +import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks'; +import { TagsInput } from './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. diff --git a/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx b/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx index ac585847cf4..25af1e9bb8e 100644 --- a/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx +++ b/packages/grafana-ui/src/components/TagsInput/TagsInput.story.tsx @@ -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 = () => {