odaptos_design_system 2.0.0 → 2.0.2

package/package.json

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

package/src/Atoms/Tag/Tag.modules.scss

@@ -79,3 +79,8 @@
     width: 1rem;
   }
 }
+.canBeRemoved {
+  svg {
+    cursor: pointer;
+  }
+}

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';
@@ -23,6 +23,7 @@ interface TagProps extends HTMLAttributes<HTMLDivElement> {
   amountNumber?: number | undefined;
   customColor?: string;
   className?: string;
+  canBeRemoved?: boolean;
 }
 
 /** Figma link : https://www.figma.com/file/fjnhhbL12HvKccPmJchVnr/Atomic-Library?type=design&node-id=1359-33355&mode=dev  */
@@ -35,6 +36,7 @@ export const Tag = ({
   amountNumber,
   customColor,
   className,
+  canBeRemoved = false,
   ...props
 }: TagProps) => {
   const tagCustomColor = customColor ? colord(customColor) : undefined;
@@ -80,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 ?? ''
-      }`}
-    >
-      {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 : ''

package/src/Organisms/MultiSelect/MultiSelect.tsx

@@ -234,10 +234,11 @@ export const MultiSelect = ({
                   size="sm"
                   status="info"
                   key={`chipt-option-${index}`}
+                  canBeRemoved
                   iconRight={
                     <RemoveCircledIcon
                       fill={colors.blue_700}
-                      style={{ cursor: 'pointer' }}
+                      style={{ cursor: 'pointer !important' }}
                       onClick={() => deleteOption(option)}
                     />
                   }

package/src/Organisms/MultiSelect/MultiSelectWithCategories.tsx

@@ -256,6 +256,7 @@ export const MultiSelectWithCategories = ({
                   size="sm"
                   status="info"
                   key={`chipt-option-${index}`}
+                  canBeRemoved
                   iconRight={
                     <RemoveCircledIcon
                       fill={colors.blue_700}