IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Chore: Improve TagList story (#52012)

Browse Source 
* Chore: Improve TagList story

* Chore: fix moreTagsLabel in the TagList component
This commit is contained in:
Sonja Feitsch 2022-07-12 08:06:31 +02:00 committed by GitHub
parent 3003a48dc6
commit ef77c93934
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 26 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
packages/grafana-ui/src/components/Tags/TagList.story.tsx
View File

@ -1,9 +1,10 @@
import { action } from '@storybook/addon-actions'; import { action } from '@storybook/addon-actions';
import { Story } from '@storybook/react';
import React from 'react'; import React from 'react';
import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
import { TagList } from './TagList'; import { TagList, Props as TagListProps } from './TagList';
import mdx from './TagList.mdx'; import mdx from './TagList.mdx';
export default { export default {
@ -14,15 +15,31 @@ export default {
docs: { docs: {
page: mdx, 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 ( return (
<div style={{ width: 300 }}> <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> </div>
); );
}; };

7
packages/grafana-ui/src/components/Tags/TagList.tsx
View File

@ -9,8 +9,11 @@ import { IconName } from '../../types/icon';
import { OnTagClick, Tag } from './Tag'; import { OnTagClick, Tag } from './Tag';
export interface Props { export interface Props {
/** Maximum number of the tags to display */
displayMax?: number; displayMax?: number;
/** Names of the tags to display */
tags: string[]; tags: string[];
/** Callback when the tag is clicked */
onClick?: OnTagClick; onClick?: OnTagClick;
/** Custom styles for the wrapper component */ /** Custom styles for the wrapper component */
className?: string; 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} /> <Tag name={tag} icon={icon} onClick={onClick} aria-label={getAriaLabel?.(tag, i)} data-tag-id={i} />
</li> </li>
))} ))}
{displayMax && displayMax > 0 && numTags - 1 > 0 && ( {displayMax && displayMax > 0 && numTags - displayMax > 0 && (
<span className={styles.moreTagsLabel}>+ {numTags - 1}</span> <span className={styles.moreTagsLabel}>+ {numTags - displayMax}</span>
)} )}
</ul> </ul>
); );