odaptos_design_system 2.0.1 → 2.0.2

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.0.1",
+  "version": "2.0.2",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/Atoms/Tag/Tag.tsx

@@ -1,6 +1,6 @@
-import React, { HTMLAttributes } from 'react';
+import React, { HTMLAttributes, useEffect, useState } from 'react';
 import styles from './Tag.modules.scss';
-import { Text } from '../..';
+import { Text, Tooltip } from '../..';
 import { colord, extend } from 'colord';
 import mixPlugin from 'colord/plugins/mix';
 import { getReadableTextColor } from '../../utils/getReadableTextColor';
@@ -82,31 +82,53 @@ export const Tag = ({
     else return 'sm';
   };
 
+  const [isEllipsisActive, setIsEllipsisActive] = useState(false);
+
+  useEffect(() => {
+    const checkEllipsis = () => {
+      const element = document.querySelector('#tag_text') as HTMLElement;
+      if (element) {
+        setIsEllipsisActive(element.scrollWidth > element.clientWidth);
+      }
+    };
+
+    checkEllipsis();
+    window.addEventListener('resize', checkEllipsis);
+    return () => window.removeEventListener('resize', checkEllipsis);
+  }, []);
+
   return (
-    <div
-      {...props}
-      style={{ backgroundColor: customColor }}
-      className={`${styles.tag} ${getTagStatus()} ${getTagSize()} ${
-        className ?? ''
-      } ${canBeRemoved && styles.canBeRemoved}`}
-    >
-      {iconLeft &&
-        React.cloneElement(iconLeft, {
-          style: { fill: getTextColor(), stroke: getTextColor() },
-        })}
-      <Text size={getTextSize()} text={text} color={getTextColor()} />
-      {(amountNumber || amountNumber === 0) && (
+    <Tooltip tooltipDescription={text} arrow isTooltipActive={isEllipsisActive}>
+      <div
+        {...props}
+        style={{ backgroundColor: customColor }}
+        className={`${styles.tag} ${getTagStatus()} ${getTagSize()} ${
+          className ?? ''
+        } ${canBeRemoved && styles.canBeRemoved}`}
+      >
+        {iconLeft &&
+          React.cloneElement(iconLeft, {
+            style: { fill: getTextColor(), stroke: getTextColor() },
+          })}
         <Text
-          text={`${amountNumber}`}
-          weight="bold"
+          id="tag_text"
           size={getTextSize()}
+          text={text}
           color={getTextColor()}
         />
-      )}
-      {iconRight &&
-        React.cloneElement(iconRight, {
-          style: { fill: getTextColor(), stroke: getTextColor() },
-        })}
-    </div>
+        {(amountNumber || amountNumber === 0) && (
+          <Text
+            text={`${amountNumber}`}
+            weight="bold"
+            size={getTextSize()}
+            color={getTextColor()}
+          />
+        )}
+        {iconRight &&
+          React.cloneElement(iconRight, {
+            style: { fill: getTextColor(), stroke: getTextColor() },
+          })}
+      </div>
+    </Tooltip>
   );
 };

package/src/Atoms/Typography/Text.tsx

@@ -11,6 +11,7 @@ interface TextProps extends HTMLAttributes<HTMLParagraphElement> {
   textDecoration?: 'underline' | 'line-through';
   className?: string;
   required?: boolean;
+  id?: string;
 }
 
 /** This text should be use to display basic text
@@ -25,6 +26,7 @@ export const Text = ({
   textDecoration,
   className,
   required,
+  id,
   ...props
 }: TextProps) => {
   const getTextSize = (): string => {
@@ -53,6 +55,7 @@ export const Text = ({
   return (
     <p
       {...props}
+      id={id}
       style={{ color: color }}
       className={`${styles.text} ${
         italic ? styles.text_italic : ''