Edit actor chip icon style & read-only behavior (#18552)

https://github.com/user-attachments/assets/925f4380-e3e2-430d-a8e3-7e1242298900

Removed background color from icons for consistency
Removed chip hover state as chips are not navigable
Updated read-only design (text/secondary on chip hover)

---------

Co-authored-by: Félix Malfait <felix@twenty.com>

packages/twenty-front/src/modules/ui/field/display/components/ActorDisplay.tsx

@@ -1,9 +1,8 @@
 import { type FieldActorValue } from '@/object-record/record-field/ui/types/FieldMetadata';
 
 import { t } from '@lingui/core/macro';
-import { useMemo } from 'react';
 import { ConnectedAccountProvider } from 'twenty-shared/types';
-import { AvatarOrIcon, Chip } from 'twenty-ui/components';
+import { AvatarOrIcon, Chip, ChipVariant } from 'twenty-ui/components';
 import {
   IconApi,
   IconCalendar,
@@ -17,6 +16,7 @@ import {
   IconSettingsAutomation,
   IconUpload,
   IconWebhook,
+  type IconComponent,
 } from 'twenty-ui/display';
 
 type ActorDisplayProps = Partial<FieldActorValue> & {
@@ -43,6 +43,38 @@ const PROVIDERS_ICON_MAPPING = {
   },
 };
 
+const getLeftIcon = ({
+  source,
+  context,
+}: Pick<ActorDisplayProps, 'source' | 'context'>):
+  | IconComponent
+  | undefined => {
+  switch (source) {
+    case 'API':
+      return IconApi;
+    case 'IMPORT':
+      return IconUpload;
+    case 'EMAIL':
+      return PROVIDERS_ICON_MAPPING.EMAIL[context?.provider ?? 'default'];
+    case 'CALENDAR':
+      return (
+        PROVIDERS_ICON_MAPPING.CALENDAR[
+          context?.provider as keyof typeof PROVIDERS_ICON_MAPPING.CALENDAR
+        ] ?? PROVIDERS_ICON_MAPPING.CALENDAR.default
+      );
+    case 'SYSTEM':
+      return IconRobot;
+    case 'WORKFLOW':
+      return IconSettingsAutomation;
+    case 'WEBHOOK':
+      return IconWebhook;
+    case 'APPLICATION':
+      return IconPlug;
+    default:
+      return undefined;
+  }
+};
+
 export const ActorDisplay = ({
   name,
   source,
@@ -50,40 +82,14 @@ export const ActorDisplay = ({
   avatarUrl,
   context,
 }: ActorDisplayProps) => {
-  const LeftIcon = useMemo(() => {
-    switch (source) {
-      case 'API':
-        return IconApi;
-      case 'IMPORT':
-        return IconUpload;
-      case 'EMAIL':
-        return PROVIDERS_ICON_MAPPING.EMAIL[context?.provider ?? 'default'];
-      case 'CALENDAR':
-        return (
-          PROVIDERS_ICON_MAPPING.CALENDAR[
-            context?.provider as keyof typeof PROVIDERS_ICON_MAPPING.CALENDAR
-          ] ?? PROVIDERS_ICON_MAPPING.CALENDAR.default
-        );
-      case 'SYSTEM':
-        return IconRobot;
-      case 'WORKFLOW':
-        return IconSettingsAutomation;
-      case 'WEBHOOK':
-        return IconWebhook;
-      case 'APPLICATION':
-        return IconPlug;
-      default:
-        return undefined;
-    }
-  }, [source, context?.provider]);
-
-  const isIconInverted =
-    source === 'API' || source === 'IMPORT' || source === 'SYSTEM';
+  const LeftIcon = getLeftIcon({ source, context });
 
   return (
     <Chip
       label={name ?? ''}
+      clickable={false}
       emptyLabel={t`Untitled`}
+      variant={ChipVariant.Transparent}
       leftComponent={
         <AvatarOrIcon
           placeholderColorSeed={workspaceMemberId ?? undefined}
@@ -91,7 +97,6 @@ export const ActorDisplay = ({
           placeholder={name}
           Icon={LeftIcon}
           avatarUrl={avatarUrl ?? undefined}
-          isIconInverted={isIconInverted}
         />
       }
     />

packages/twenty-front/src/modules/ui/field/display/components/__stories__/ActorDisplay.stories.tsx

@@ -27,7 +27,17 @@ export const Catalog: Story = {
       dimensions: [
         {
           name: 'source',
-          values: ['API', 'IMPORT', 'EMAIL', 'CALENDAR', 'MANUAL'],
+          values: [
+            'API',
+            'IMPORT',
+            'EMAIL',
+            'CALENDAR',
+            'WORKFLOW',
+            'WEBHOOK',
+            'APPLICATION',
+            'SYSTEM',
+            'MANUAL',
+          ],
           props: (source: string) => ({ source }),
         },
         {

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

@@ -103,8 +103,8 @@ const StyledContainer = styled.div<
       : 'inherit'};
 
   &:hover {
-    background-color: ${({ variant, disabled }) =>
-      variant === ChipVariant.Regular && !disabled
+    background-color: ${({ variant, disabled, clickable }) =>
+      variant === ChipVariant.Regular && !disabled && clickable
         ? themeCssVariables.background.transparent.light
         : variant === ChipVariant.Highlighted
           ? themeCssVariables.background.transparent.medium
@@ -114,8 +114,8 @@ const StyledContainer = styled.div<
   }
 
   &:active {
-    background-color: ${({ disabled, variant }) =>
-      variant === ChipVariant.Regular && !disabled
+    background-color: ${({ disabled, variant, clickable }) =>
+      variant === ChipVariant.Regular && !disabled && clickable
         ? themeCssVariables.background.transparent.medium
         : variant === ChipVariant.Highlighted
           ? themeCssVariables.background.transparent.strong