Add tooltip to button dropdown (#277)

feat(dropwdown): add tooltip support to dropdown + fix
* Don't show tooltip if mainText is undefined

don't show tooltip if mainText is undefined or empty

* fix(list item): fix disabling action for onClick when disabled

Author: ehsan-github

src/components/dropdown/dropdown.stories.tsx

@@ -23,6 +23,7 @@ Default.args = {
       value: 'project_1',
       metadata: {},
       onClick: action('onClick'),
+      tooltipProps: { mainText: 'tooltip', secondaryText: 'tooltip' },
     },
     {
       value: 'project_2',

src/components/dropdown/index.tsx

@@ -10,6 +10,8 @@ import { DropdownItem } from './types';
 import { GetIcon } from '../icon';
 import Spinner from '../spinner';
 import { Flex } from 'rebass';
+import Tooltip from '../tooltip';
+import TooltipPositions from '../tooltip/positions';
 
 export interface DropdownProps extends Omit<ListProps, 'css' | 'children'> {
   items: DropdownItem[];
@@ -33,36 +35,46 @@ const Dropdown: FC<DropdownProps> = ({
   return (
     <List {...props} ref={containerRef}>
       {items?.map((item) => {
-        const { value, id, icon, hasDivider, onClick, isLoading, disabled } =
-          item;
+        const {
+          value,
+          id,
+          icon,
+          hasDivider,
+          onClick,
+          isLoading,
+          disabled,
+          tooltipProps,
+        } = item;
 
         return (
-          <ListItem
-            hasDivider={hasDivider}
-            key={id || value}
-            onClick={() => onClick(item)}
-            disabled={disabled}
-          >
-            <Flex width="100%">
-              <Flex flexGrow={1}>
-                {icon && (
-                  <GetIcon
-                    color={disabled ? 'gray' : 'black'}
-                    icon={icon}
-                    size="sm"
+          <Tooltip position={TooltipPositions.right} {...tooltipProps}>
+            <ListItem
+              hasDivider={hasDivider}
+              key={id || value}
+              onClick={() => onClick(item)}
+              disabled={disabled}
+            >
+              <Flex width="100%">
+                <Flex flexGrow={1}>
+                  {icon && (
+                    <GetIcon
+                      color={disabled ? 'gray' : 'black'}
+                      icon={icon}
+                      size="sm"
+                    />
+                  )}
+                  {value}
+                </Flex>
+                {isLoading && (
+                  <Spinner
+                    size={16}
+                    ml="15px"
+                    color={disabled ? 'gray' : 'primary'}
                   />
                 )}
-                {value}
               </Flex>
-              {isLoading && (
-                <Spinner
-                  size={16}
-                  ml="15px"
-                  color={disabled ? 'gray' : 'primary'}
-                />
-              )}
-            </Flex>
-          </ListItem>
+            </ListItem>
+          </Tooltip>
         );
       })}
     </List>

src/components/dropdown/types.ts

@@ -1,4 +1,5 @@
 import { IconName } from '../icon';
+import { TooltipProps } from '../tooltip';
 
 export interface DropdownItem<Metadata = {}> {
   value: string | number;
@@ -9,4 +10,5 @@ export interface DropdownItem<Metadata = {}> {
   onClick: (item: DropdownItem) => void;
   isLoading?: boolean;
   disabled?: boolean;
+  tooltipProps?: Omit<TooltipProps, 'children'>;
 }

src/components/list/item/index.tsx

@@ -23,6 +23,7 @@ const ListItem: FC<ListItemProps> = ({
   isActive = false,
   isRightAlignment,
   disabled,
+  onClick,
   ...props
 }: ListItemProps) => {
   const [actionTitle, actionCallback] = action || [];
@@ -33,6 +34,7 @@ const ListItem: FC<ListItemProps> = ({
       as="li"
       tx="variants.list.item"
       variant={variant}
+      onClick={disabled ? undefined : onClick}
       {...props}
       sx={styles(isActive, disabled)}
       css={!hasDivider ? withoutBorder : undefined}

src/components/tooltip/index.tsx

@@ -135,7 +135,7 @@ const Tooltip: FC<TooltipProps> = ({
     >
       {children}
 
-      {visible && !disabled && (
+      {visible && !disabled && mainText && (
         <Portal>
           <Box
             sx={{