From ef77c93934b5927a29a94469440f4d2ddaa30656 Mon Sep 17 00:00:00 2001
From: Sonja Feitsch <feitsch@e2n.de>
Date: Tue, 12 Jul 2022 08:06:31 +0200
Subject: [PATCH] Chore: Improve TagList story (#52012)

* Chore: Improve TagList story

* Chore: fix moreTagsLabel in the TagList component
---
 .../src/components/Tags/TagList.story.tsx     | 25 ++++++++++++++++---
 .../src/components/Tags/TagList.tsx           |  7 ++++--
 2 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/Tags/TagList.story.tsx b/packages/grafana-ui/src/components/Tags/TagList.story.tsx
index f4281880aef..c40dd9cbaaf 100644
--- a/packages/grafana-ui/src/components/Tags/TagList.story.tsx
+++ b/packages/grafana-ui/src/components/Tags/TagList.story.tsx
@@ -1,9 +1,10 @@
 import { action } from '@storybook/addon-actions';
+import { Story } from '@storybook/react';
 import React from 'react';
 
 import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
 
-import { TagList } from './TagList';
+import { TagList, Props as TagListProps } from './TagList';
 import mdx from './TagList.mdx';
 
 export default {
@@ -14,15 +15,31 @@ export default {
     docs: {
       page: mdx,
     },
+    controls: {
+      exclude: ['className', 'onClick', 'getAriaLabel'],
+    },
+  },
+  args: {
+    displayMax: 3,
+    tags: ['datasource-test', 'gdev', 'mysql', 'mssql'],
+    onClick: action('Tag clicked'),
+    showIcon: false,
   },
 };
 
-const tags = ['datasource-test', 'gdev', 'mysql', 'mssql'];
+interface StoryProps extends TagListProps {
+  showIcon?: boolean;
+}
 
-export const list = () => {
+export const List: Story<StoryProps> = (args) => {
   return (
     <div style={{ width: 300 }}>
-      <TagList tags={tags} onClick={action('Tag clicked')} />
+      <TagList
+        tags={args.tags}
+        onClick={args.onClick}
+        displayMax={args.displayMax}
+        icon={args.showIcon ? args.icon : undefined}
+      />
     </div>
   );
 };
diff --git a/packages/grafana-ui/src/components/Tags/TagList.tsx b/packages/grafana-ui/src/components/Tags/TagList.tsx
index d22be614c5a..20ea4d66fe1 100644
--- a/packages/grafana-ui/src/components/Tags/TagList.tsx
+++ b/packages/grafana-ui/src/components/Tags/TagList.tsx
@@ -9,8 +9,11 @@ import { IconName } from '../../types/icon';
 import { OnTagClick, Tag } from './Tag';
 
 export interface Props {
+  /** Maximum number of the tags to display */
   displayMax?: number;
+  /** Names of the tags to display */
   tags: string[];
+  /** Callback when the tag is clicked */
   onClick?: OnTagClick;
   /** Custom styles for the wrapper component */
   className?: string;
@@ -33,8 +36,8 @@ export const TagList = memo(
             <Tag name={tag} icon={icon} onClick={onClick} aria-label={getAriaLabel?.(tag, i)} data-tag-id={i} />
           </li>
         ))}
-        {displayMax && displayMax > 0 && numTags - 1 > 0 && (
-          <span className={styles.moreTagsLabel}>+ {numTags - 1}</span>
+        {displayMax && displayMax > 0 && numTags - displayMax > 0 && (
+          <span className={styles.moreTagsLabel}>+ {numTags - displayMax}</span>
         )}
       </ul>
     );