grafana/ui: Add invalid prop to the TagsInput (grafana#34409)

* Add invalid prop to the tag input

* Enable controls

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

@@ -1,11 +1,11 @@
-import { Meta, Story, Preview, Props } from '@storybook/addon-docs/blocks';
+import { Meta, 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.
+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 next to the input and can be removed by clicking the "X" icon. You can customize the width of the input.
 
 ### Props
 <Props of={TagsInput} />

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

@@ -1,9 +1,10 @@
 import React, { useState } from 'react';
+import { Meta, Story } from '@storybook/react';
+import { TagsInput, Props } from './TagsInput';
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
-import { TagsInput } from '@grafana/ui';
-import mdx from './TagsInput.mdx';
 import { StoryExample } from '../../utils/storybook/StoryExample';
 import { VerticalGroup } from '../Layout/Layout';
+import mdx from './TagsInput.mdx';
 
 export default {
   title: 'Forms/TagsInput',
@@ -13,12 +14,20 @@ export default {
     docs: {
       page: mdx,
     },
+    knobs: {
+      disable: true,
+    },
+    controls: {
+      exclude: ['onChange', 'className', 'tags'],
+    },
   },
-};
+} as Meta;
+
+type StoryProps = Omit<Props, 'onChange' | 'className' | 'tags'>;
 
-export const Basic = () => {
+export const Basic: Story<StoryProps> = (props) => {
   const [tags, setTags] = useState<string[]>([]);
-  return <TagsInput tags={tags} onChange={setTags} />;
+  return <TagsInput {...props} tags={tags} onChange={setTags} />;
 };
 
 export const WithManyTags = () => {

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

@@ -8,12 +8,17 @@ import { Input } from '../Input/Input';
 
 export interface Props {
   placeholder?: string;
+  /** Array of selected tags */
   tags?: string[];
   onChange: (tags: string[]) => void;
   width?: number;
   className?: string;
+  /** Toggle disabled state */
   disabled?: boolean;
+  /** Enable adding new tags when input loses focus */
   addOnBlur?: boolean;
+  /** Toggle invalid state */
+  invalid?: boolean;
 }
 
 export const TagsInput: FC<Props> = ({
@@ -24,6 +29,7 @@ export const TagsInput: FC<Props> = ({
   className,
   disabled,
   addOnBlur,
+  invalid,
 }) => {
   const [newTagName, setNewName] = useState('');
   const styles = useStyles(getStyles);
@@ -77,6 +83,7 @@ export const TagsInput: FC<Props> = ({
           value={newTagName}
           onKeyUp={onKeyboardAdd}
           onBlur={onBlur}
+          invalid={invalid}
           suffix={
             newTagName.length > 0 && (
               <Button fill="text" className={styles.addButtonStyle} onClick={onAdd} size="md">