diff --git a/src/harmony/Tag/Tag.module.css b/src/harmony/Tag/Tag.module.css index bbb41cbe..8c2b7af6 100644 --- a/src/harmony/Tag/Tag.module.css +++ b/src/harmony/Tag/Tag.module.css @@ -13,7 +13,7 @@ transition: color 200ms ease-in; } -.Tag:not(:has(.Button)) { +.Tag_interactive { padding-right: var(--gap-sm); } diff --git a/src/harmony/Tag/Tag.stories.tsx b/src/harmony/Tag/Tag.stories.tsx index bd3b9d64..9abf1804 100644 --- a/src/harmony/Tag/Tag.stories.tsx +++ b/src/harmony/Tag/Tag.stories.tsx @@ -22,25 +22,30 @@ export const TagsList = () => {
{tags.map((tag) => ( - + }> {tag} - ))}
{tags.map((tag) => ( - {} : undefined}> + {} : undefined} + action={tag.length <= 5 && } + > {tag} - {tag.length <= 5 && } ))}
{tags.map((tag) => ( - {} : undefined}> + {} : undefined} + action={tag.length <= 5 && } + > {tag} - {tag.length <= 5 && } ))}
diff --git a/src/harmony/Tag/Tag.tsx b/src/harmony/Tag/Tag.tsx index 46ff2be8..4eb2e0ea 100644 --- a/src/harmony/Tag/Tag.tsx +++ b/src/harmony/Tag/Tag.tsx @@ -1,4 +1,4 @@ -import React, { ComponentProps, HTMLAttributes, MouseEvent, useCallback } from 'react'; +import React, { ComponentProps, HTMLAttributes, MouseEvent, ReactNode, useCallback } from 'react'; import cn from 'classnames'; import { IconXSmallOutline } from '@taskany/icons'; @@ -33,12 +33,18 @@ export const TagCleanButton = ({ ); }; -interface TagProps extends HTMLAttributes {} +interface TagProps extends HTMLAttributes { + action?: ReactNode; +} -export const Tag = ({ className, children, ...props }: TagProps) => { +export const Tag = ({ className, children, action, ...props }: TagProps) => { return ( -
+
{children} + {action}
); };