Chore: Improve Tagstory (#51677)

packages/grafana-ui/src/components/Tags/Tag.mdx

@@ -1,6 +1,8 @@
 import { Story, Preview, Props } from '@storybook/addon-docs/blocks';
 import { Tag } from './Tag';
 
+<Meta title="MDX|Tag" component={Tag} />
+
 # Tag
 
 Used for displaying metadata, for example to add more details to search results. Background and border colors are generated from the tag name.

packages/grafana-ui/src/components/Tags/Tag.story.tsx

@@ -1,10 +1,10 @@
 import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react';
 import React from 'react';
 
-import { Tag } from '@grafana/ui';
-
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
+import { Props as TagProps, Tag } from './Tag';
 import mdx from './Tag.mdx';
 
 export default {
@@ -15,9 +15,28 @@ export default {
     docs: {
       page: mdx,
     },
+    controls: {
+      exclude: ['onClick'],
+    },
+  },
+  args: {
+    name: 'Tag',
+    colorIndex: 0,
+    showIcon: false,
   },
 };
 
-export const single = () => {
+interface StoryProps extends TagProps {
-  return <Tag name="Tag" onClick={action('Tag clicked')} />;
+  showIcon?: boolean;
+}
+
+export const Single: Story<StoryProps> = (args) => {
+  return (
+    <Tag
+      name={args.name}
+      colorIndex={args.colorIndex}
+      onClick={action('Tag clicked')}
+      icon={args.showIcon ? args.icon : undefined}
+    />
+  );
 };

packages/grafana-ui/src/components/Tags/Tag.tsx

@@ -64,13 +64,15 @@ const getTagStyles = (theme: GrafanaTheme, name: string, colorIndex?: number) =>
       font-weight: ${theme.typography.weight.semibold};
       font-size: ${theme.typography.size.sm};
       line-height: ${theme.typography.lineHeight.xs};
-      vertical-align: baseline;
       background-color: ${colors.color};
       color: ${theme.palette.gray98};
       white-space: nowrap;
       text-shadow: none;
       padding: 3px 6px;
       border-radius: ${theme.border.radius.md};
+      display: flex;
+      align-items: center;
+      gap: 3px;
     `,
     hover: css`
       &:hover {