feat: pick select field option colors (#2748)

Closes #2433

Co-authored-by: Charles Bochet <charles@twenty.com>

front/src/modules/ui/navigation/menu-item/components/MenuItemSelectColor.tsx

@@ -1,6 +1,9 @@
 import { useTheme } from '@emotion/react';
-import styled from '@emotion/styled';
 
+import {
+  ColorSample,
+  ColorSampleVariant,
+} from '@/ui/display/color/components/ColorSample';
 import { IconCheck } from '@/ui/display/icon';
 import { ThemeColor } from '@/ui/theme/constants/colors';
 
@@ -11,33 +14,37 @@ import {
 
 import { StyledMenuItemSelect } from './MenuItemSelect';
 
-const StyledColorSample = styled.div<{ colorName: ThemeColor }>`
-  background-color: ${({ theme, colorName }) =>
-    theme.tag.background[colorName]};
-  border: 1px solid ${({ theme, colorName }) => theme.color[colorName]};
-  border-radius: ${({ theme }) => theme.border.radius.sm};
-  height: 12px;
-  width: 12px;
-`;
-
 type MenuItemSelectColorProps = {
   selected: boolean;
-  text: string;
   className?: string;
   onClick?: () => void;
   disabled?: boolean;
   hovered?: boolean;
   color: ThemeColor;
+  variant?: ColorSampleVariant;
+};
+
+export const colorLabels: Record<ThemeColor, string> = {
+  green: 'Green',
+  turquoise: 'Turquoise',
+  sky: 'Sky',
+  blue: 'Blue',
+  purple: 'Purple',
+  pink: 'Pink',
+  red: 'Red',
+  orange: 'Orange',
+  yellow: 'Yellow',
+  gray: 'Gray',
 };
 
 export const MenuItemSelectColor = ({
   color,
-  text,
   selected,
   className,
   onClick,
   disabled,
   hovered,
+  variant = 'default',
 }: MenuItemSelectColorProps) => {
   const theme = useTheme();
 
@@ -50,8 +57,10 @@ export const MenuItemSelectColor = ({
       hovered={hovered}
     >
       <StyledMenuItemLeftContent>
-        <StyledColorSample colorName={color} />
-        <StyledMenuItemLabel hasLeftIcon={true}>{text}</StyledMenuItemLabel>
+        <ColorSample colorName={color} variant={variant} />
+        <StyledMenuItemLabel hasLeftIcon={true}>
+          {colorLabels[color]}
+        </StyledMenuItemLabel>
       </StyledMenuItemLeftContent>
       {selected && <IconCheck size={theme.icon.size.sm} />}
     </StyledMenuItemSelect>

front/src/modules/ui/navigation/menu-item/components/__stories__/MenuItemSelectColor.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
-import { tagLight } from '@/ui/theme/constants/tag';
+import { ColorSampleVariant } from '@/ui/display/color/components/ColorSample';
+import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
 import {
   CatalogDecorator,
   CatalogDimension,
@@ -21,32 +22,22 @@ export default meta;
 type Story = StoryObj<typeof MenuItemSelectColor>;
 
 export const Default: Story = {
-  args: {
-    text: 'First option',
-    color: 'green',
-  },
-  argTypes: {
-    className: { control: false },
-  },
+  args: { color: 'green' },
+  argTypes: { className: { control: false } },
   decorators: [ComponentDecorator],
 };
 
 export const Catalog: CatalogStory<Story, typeof MenuItemSelectColor> = {
-  args: { text: 'Menu item' },
-  argTypes: {
-    className: { control: false },
-  },
+  argTypes: { className: { control: false } },
   parameters: {
     pseudo: { hover: ['.hover'], active: ['.pressed'], focus: ['.focus'] },
     catalog: {
       dimensions: [
         {
           name: 'color',
-          values: Object.keys(tagLight.background),
-          props: (color: string) => ({
-            color: color,
-          }),
-          labels: (color: string) => color,
+          values: mainColorNames,
+          props: (color: ThemeColor) => ({ color }),
+          labels: (color: ThemeColor) => color,
         },
         {
           name: 'states',
@@ -75,6 +66,12 @@ export const Catalog: CatalogStory<Story, typeof MenuItemSelectColor> = {
             }
           },
         },
+        {
+          name: 'variant',
+          values: ['default', 'pipeline'],
+          props: (variant: ColorSampleVariant) => ({ variant }),
+          labels: (variant: ColorSampleVariant) => variant,
+        },
       ] as CatalogDimension[],
       options: {
         elementContainer: {