add icons on the dropdown

Author: gitstart-twenty

packages/twenty-front/src/modules/object-record/object-filter-dropdown/utils/getSourceEnumOptions.ts

@@ -1,33 +1,56 @@
 import { SelectableItem } from '@/object-record/select/types/SelectableItem';
+import {
+  IconApi,
+  IconCsv,
+  IconGmail,
+  IconGoogleCalendar,
+  IconSettingsAutomation,
+  IconUserCircle,
+} from 'twenty-ui';
 
 export const getSourceEnumOptions = (
   selectedItemIds: string[],
 ): SelectableItem[] => {
   return [
     {
       id: 'MANUAL',
-      name: 'MANUAL',
+      name: 'User',
       isSelected: selectedItemIds.includes('MANUAL'),
+      AvatarIcon: IconUserCircle,
+      isIconInverted: true,
     },
     {
       id: 'IMPORT',
-      name: 'IMPORT',
+      name: 'Import',
       isSelected: selectedItemIds.includes('IMPORT'),
+      AvatarIcon: IconCsv,
+      isIconInverted: true,
     },
     {
       id: 'API',
-      name: 'API',
+      name: 'Api',
       isSelected: selectedItemIds.includes('API'),
+      AvatarIcon: IconApi,
+      isIconInverted: true,
     },
     {
       id: 'EMAIL',
-      name: 'EMAIL',
+      name: 'Email',
       isSelected: selectedItemIds.includes('EMAIL'),
+      AvatarIcon: IconGmail,
     },
     {
       id: 'CALENDAR',
-      name: 'CALENDAR',
+      name: 'Calendar',
       isSelected: selectedItemIds.includes('CALENDAR'),
+      AvatarIcon: IconGoogleCalendar,
+    },
+    {
+      id: 'WORKFLOW',
+      name: 'Workflow',
+      isSelected: selectedItemIds.includes('WORKFLOW'),
+      AvatarIcon: IconSettingsAutomation,
+      isIconInverted: true,
     },
   ];
 };

packages/twenty-front/src/modules/object-record/object-filter-dropdown/utils/getSubMenuOptions.ts

@@ -11,7 +11,7 @@ export const getSubMenuOptions = (subMenu: FilterType | null) => {
         },
         {
           name: 'Creator Name',
-          icon: 'IconUserCircle',
+          icon: 'IconId',
           type: 'ACTOR',
         },
       ];

packages/twenty-front/src/modules/object-record/select/components/MultipleSelectDropdown.tsx

@@ -1,7 +1,8 @@
+import styled from '@emotion/styled';
 import { useEffect, useState } from 'react';
 import { useRecoilValue } from 'recoil';
 import { Key } from 'ts-key-enum';
-import { Avatar } from 'twenty-ui';
+import { AvatarChip } from 'twenty-ui';
 
 import { SelectableItem } from '@/object-record/select/types/SelectableItem';
 import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
@@ -14,6 +15,16 @@ import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemMultiSelectAvatar } from '@/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar';
 import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
 
+const StyledAvatarChip = styled(AvatarChip)`
+  &.avatar-icon-container {
+    color: ${({ theme }) => theme.font.color.secondary};
+    gap: ${({ theme }) => theme.spacing(2)};
+    padding-left: 0px;
+    padding-right: 0px;
+    font-size: ${({ theme }) => theme.font.size.md};
+  }
+`;
+
 export const MultipleSelectDropdown = ({
   selectableListId,
   hotkeyScope,
@@ -120,15 +131,16 @@ export const MultipleSelectDropdown = ({
                 handleItemSelectChange(item, newCheckedValue);
               }}
               avatar={
-                <Avatar
+                <StyledAvatarChip
+                  className="avatar-icon-container"
+                  name={item.name}
                   avatarUrl={item.avatarUrl}
+                  LeftIcon={item.AvatarIcon}
+                  avatarType={item.avatarType}
+                  isIconInverted={item.isIconInverted}
                   placeholderColorSeed={item.id}
-                  placeholder={item.name}
-                  size="md"
-                  type={item.avatarType ?? 'rounded'}
                 />
               }
-              text={item.name}
             />
           );
         })}

packages/twenty-front/src/modules/object-record/select/types/SelectableItem.ts

@@ -1,9 +1,11 @@
-import { AvatarType } from 'twenty-ui';
+import { AvatarType, IconComponent } from 'twenty-ui';
 
 export type SelectableItem<T = object> = T & {
   id: string;
   name: string;
   avatarUrl?: string;
   avatarType?: AvatarType;
+  AvatarIcon?: IconComponent;
   isSelected: boolean;
+  isIconInverted?: boolean;
 };

packages/twenty-front/src/modules/ui/navigation/menu-item/components/MenuItemMultiSelectAvatar.tsx

@@ -22,7 +22,7 @@ type MenuItemMultiSelectAvatarProps = {
   avatar?: ReactNode;
   selected: boolean;
   isKeySelected?: boolean;
-  text: string;
+  text?: string;
   className?: string;
   onSelectChange?: (selected: boolean) => void;
 };

packages/twenty-ui/src/display/chip/components/Chip.tsx

@@ -127,6 +127,7 @@ export const Chip = ({
   rightComponent,
   accent = ChipAccent.TextPrimary,
   onClick,
+  className,
 }: ChipProps) => {
   return (
     <StyledContainer
@@ -137,6 +138,7 @@ export const Chip = ({
       size={size}
       variant={variant}
       onClick={onClick}
+      className={className}
     >
       {leftComponent}
       <OverflowingTextWithTooltip