fix: add new class instead has selector

taskany-inc · Feb 2, 2024 · b5e8579 · b5e8579
1 parent ea3bea3
commit b5e8579
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 11 deletions.
diff --git 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
@@ -22,25 +22,30 @@ export const TagsList = () => {
             </div>
             <div style={{ display: 'flex', gap: 4 }}>
                 {tags.map((tag) => (
-                    <Tag key={tag}>
+                    <Tag key={tag} action={<TagCleanButton />}>
                         {tag}
-                        <TagCleanButton />
                     </Tag>
                 ))}
             </div>
             <div style={{ display: 'flex', gap: 4 }}>
                 {tags.map((tag) => (
-                    <Tag key={tag} onClick={tag.length <= 5 ? () => {} : undefined}>
+                    <Tag
+                        key={tag}
+                        onClick={tag.length <= 5 ? () => {} : undefined}
+                        action={tag.length <= 5 && <TagCleanButton />}
+                    >
                         {tag}
-                        {tag.length <= 5 && <TagCleanButton />}
                     </Tag>
                 ))}
             </div>
             <div style={{ display: 'flex', gap: 4, maxWidth: 200, flexWrap: 'wrap' }}>
                 {tags.map((tag) => (
-                    <Tag key={tag} onClick={tag.length <= 5 ? () => {} : undefined}>
+                    <Tag
+                        key={tag}
+                        onClick={tag.length <= 5 ? () => {} : undefined}
+                        action={tag.length <= 5 && <TagCleanButton />}
+                    >
                         {tag}
-                        {tag.length <= 5 && <TagCleanButton />}
                     </Tag>
                 ))}
             </div>

diff --git 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<HTMLDivElement> {}
+interface TagProps extends HTMLAttributes<HTMLDivElement> {
+    action?: ReactNode;
+}
 
-export const Tag = ({ className, children, ...props }: TagProps) => {
+export const Tag = ({ className, children, action, ...props }: TagProps) => {
     return (
-        <div className={cn(s.Tag, { [s.Tag_hovered]: Boolean(props.onClick) }, className)} {...props}>
+        <div
+            className={cn(s.Tag, { [s.Tag_hovered]: !!props.onClick, [s.Tag_interactive]: !action }, className)}
+            {...props}
+        >
             {children}
+            {action}
         </div>
     );
 };