Merge pull request #287 from dd3tech/fix/sidebar-tooltip

Fix(Sidebar-Tooltip): Added the possibility to add tooltip to the sidebar subitem and modified the opacity of the tooltip component
dd3tech · Feb 21, 2025 · 3a202f5 · 3a202f5
2 parents 7e7154d + 2f7d534
commit 3a202f5
Show file tree

Hide file tree

Showing 4 changed files with 68 additions and 66 deletions.
diff --git a/src/components/SideBar/SideBar.tsx b/src/components/SideBar/SideBar.tsx
@@ -38,6 +38,7 @@ export interface SideBarItemPropsBase {
   hidden?: boolean
   subItems?: SideBarItemPropsBase[]
   badge?: TBadge
+  toolTip?: string
 }
 
 export type SidebarDropdownListItem = {

diff --git a/src/components/SideBar/SideBarItem.tsx b/src/components/SideBar/SideBarItem.tsx
@@ -94,48 +94,35 @@ const ListSubItems = ({
           !isSubSubItem && 'pl-10 ml-4'
         )}
       >
-        {subItemsArray?.map(
-          (subItem, index: number) =>
-            !subItem.hidden && (
-              <div key={`sub-item-${subItem.title}-${index}`}>
-                <Flex
-                  alignItems="center"
-                  gap="2"
-                  className={composeClasses(
-                    subItem.disabled ? 'cursor-not-allowed' : 'cursor-pointer',
-                    !subItem.subItems &&
-                      'border-l border-gray-300 text-gray-500 -ml-4 pl-3 hover:opacity-75'
-                  )}
-                  onClick={() => onToggleMenu(subItem, index)}
-                >
-                  {subItem?.subItems && (
-                    <div className="w-4 h-4 -ml-6 text-gray-500">
-                      {subItem.isOpen ? (
-                        <ChevronUpIcon className="w-full" />
-                      ) : (
-                        <ChevronDownIcon className="w-full" />
-                      )}
-                    </div>
-                  )}
-                  {subItem?.title?.length > 25 ? (
-                    <Tooltip
-                      position="right"
-                      content={<Text>{subItem.title}</Text>}
-                    >
-                      <Text
-                        size="sm"
-                        className={composeClasses(
-                          'whitespace-nowrap overflow-hidden overflow-ellipsis my-2',
-                          subItem.disabled ? 'text-gray-300' : 'text-gray-500',
-                          subItem.active &&
-                            !subItem.subItems &&
-                            'font-semibold text-blue-600'
-                        )}
-                      >
-                        {subItem.title}
-                      </Text>
-                    </Tooltip>
-                  ) : (
+        {subItemsArray?.map((subItem, index: number) => {
+          if (subItem.hidden) return null
+
+          const renderSubItem = () => {
+            return (
+              <Flex
+                alignItems="center"
+                gap="2"
+                className={composeClasses(
+                  subItem.disabled ? 'cursor-not-allowed' : 'cursor-pointer',
+                  !subItem.subItems &&
+                    'border-l border-gray-300 text-gray-500 -ml-4 pl-3 hover:opacity-75'
+                )}
+                onClick={() => onToggleMenu(subItem, index)}
+              >
+                {subItem?.subItems && (
+                  <div className="w-4 h-4 -ml-6 text-gray-500">
+                    {subItem.isOpen ? (
+                      <ChevronUpIcon className="w-full" />
+                    ) : (
+                      <ChevronDownIcon className="w-full" />
+                    )}
+                  </div>
+                )}
+                {subItem?.title?.length > 25 ? (
+                  <Tooltip
+                    position="right"
+                    content={<Text>{subItem.title}</Text>}
+                  >
                     <Text
                       size="sm"
                       className={composeClasses(
@@ -148,21 +135,44 @@ const ListSubItems = ({
                     >
                       {subItem.title}
                     </Text>
-                  )}
-                  {subItem?.badge && subItem?.badge}
-                </Flex>
-                {subItem.subItems && (
-                  <ListSubItems
-                    indexItem={indexItem}
-                    isOpen={subItem.isOpen}
-                    subItemsArray={subItem.subItems}
-                    toggleSubMenu={toggleSubMenu}
-                    isSubSubItem
-                  />
+                  </Tooltip>
+                ) : (
+                  <Text
+                    size="sm"
+                    className={composeClasses(
+                      'whitespace-nowrap overflow-hidden overflow-ellipsis my-2',
+                      subItem.disabled ? 'text-gray-300' : 'text-gray-500',
+                      subItem.active &&
+                        !subItem.subItems &&
+                        'font-semibold text-blue-600'
+                    )}
+                  >
+                    {subItem.title}
+                  </Text>
                 )}
-              </div>
+                {subItem?.badge && subItem?.badge}
+              </Flex>
             )
-        )}
+          }
+          return (
+            <div key={`sub-item-${subItem.title}-${index}`}>
+              {subItem.toolTip ? (
+                <Tooltip content={subItem?.toolTip}>{renderSubItem()}</Tooltip>
+              ) : (
+                renderSubItem()
+              )}
+              {subItem.subItems && (
+                <ListSubItems
+                  indexItem={indexItem}
+                  isOpen={subItem.isOpen}
+                  subItemsArray={subItem.subItems}
+                  toggleSubMenu={toggleSubMenu}
+                  isSubSubItem
+                />
+              )}
+            </div>
+          )
+        })}
       </Flex>
     </div>
   )

diff --git a/src/components/Tabs/Tab.tsx b/src/components/Tabs/Tab.tsx
@@ -140,7 +140,6 @@ const Tab = forwardRef<HTMLButtonElement, Props>(
             startAdornment={toolTipProps.startAdornment}
             position={toolTipProps.position ?? 'right'}
             content={toolTipProps.content ?? ''}
-            noOpacity={toolTipProps.noOpacity}
           >
             {renderTab()}
           </Tooltip>

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -37,12 +37,6 @@ export interface TooltipProps {
    * primary by default
    */
   variant?: TooltipVariant
-  /**
-   * If true, the tooltip will use a solid color without any opacity.
-   * This is useful when you need a fully opaque background or text color.
-   * By default, this is set to false, allowing for transparency if defined in the variant styles.
-   */
-  noOpacity?: boolean
 }
 
 const Tooltip: FC<TooltipProps> = ({
@@ -51,8 +45,7 @@ const Tooltip: FC<TooltipProps> = ({
   endAdornment,
   position,
   startAdornment,
-  variant = 'primary',
-  noOpacity = false
+  variant = 'primary'
 }) => {
   const { isVisible, handleMouseEnter, handleMouseLeave, refs } = useTooltip({
     placement: position
@@ -68,9 +61,8 @@ const Tooltip: FC<TooltipProps> = ({
 
   const colorVariants: { [key: string]: string } = {
     primary: composeClasses(
-      !noOpacity && 'opacity-70',
       fontSize.xs,
-      'p-2 text-white rounded-md text-center bg-gray-900'
+      'p-2 text-white rounded-md text-center bg-gray-900 opacity-90'
     )
   }