hotfix(condo): fix tag in services cards (#4416)

open-condo-software · Feb 22, 2024 · bc41773 · bc41773
1 parent 24493a3
commit bc41773
Show file tree

Hide file tree

Showing 3 changed files with 5 additions and 2 deletions.
diff --git a/packages/ui/src/components/Card/header/cardHeader.less b/packages/ui/src/components/Card/header/cardHeader.less
@@ -27,7 +27,7 @@
     }
   }
 
-  & .condo-tag {
+  &-header-tag {
     position: absolute;
     top: @condo-global-spacing-8;
     right: @condo-global-spacing-8;

diff --git a/packages/ui/src/components/Card/header/cardHeader.tsx b/packages/ui/src/components/Card/header/cardHeader.tsx
@@ -72,7 +72,7 @@ const CardHeader: React.FC<CardHeaderProps> = (props) => {
 
     return (
         <>
-            {tag && <Tag {...tag} />}
+            {tag && <Tag {...tag} className={`${CARD_CLASS_PREFIX}-header-tag`} />}
             {headerContent}
         </>
     )

diff --git a/packages/ui/src/components/Tag/tag.tsx b/packages/ui/src/components/Tag/tag.tsx
@@ -13,6 +13,7 @@ export type TagProps = React.HTMLAttributes<HTMLSpanElement> & {
     bgColor?: CSSProperties['backgroundColor']
     icon?: React.ReactNode
     iconPosition?: 'start' | 'end'
+    className?: string
 }
 
 const Tag = React.forwardRef<HTMLSpanElement, TagProps>((props, ref) => {
@@ -22,6 +23,7 @@ const Tag = React.forwardRef<HTMLSpanElement, TagProps>((props, ref) => {
         bgColor = colors.gray['1'],
         iconPosition = 'start',
         icon,
+        className,
     } = props
 
     return (
@@ -47,6 +49,7 @@ const Tag = React.forwardRef<HTMLSpanElement, TagProps>((props, ref) => {
                 color: textColor,
                 background: bgColor,
             }}
+            className={className}
         />
     )
 })