feat: pick select field option colors (#2748)

Closes #2433

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

front/src/modules/ui/display/color/components/ColorSample.tsx

@@ -0,0 +1,39 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+
+import { ThemeColor } from '@/ui/theme/constants/colors';
+
+export type ColorSampleVariant = 'default' | 'pipeline';
+
+const StyledColorSample = styled.div<{
+  colorName: ThemeColor;
+  variant?: ColorSampleVariant;
+}>`
+  background-color: ${({ theme, colorName }) =>
+    theme.tag.background[colorName]};
+  border: 1px solid ${({ theme, colorName }) => theme.tag.text[colorName]};
+  border-radius: 60px;
+  height: ${({ theme }) => theme.spacing(4)};
+  width: ${({ theme }) => theme.spacing(3)};
+
+  ${({ colorName, theme, variant }) => {
+    if (variant === 'pipeline')
+      return css`
+        align-items: center;
+        border: 0;
+        display: flex;
+        justify-content: center;
+
+        &:after {
+          background-color: ${theme.tag.text[colorName]};
+          border-radius: ${theme.border.radius.rounded};
+          content: '';
+          display: block;
+          height: ${theme.spacing(1)};
+          width: ${theme.spacing(1)};
+        }
+      `;
+  }}
+`;
+
+export { StyledColorSample as ColorSample };

front/src/modules/ui/display/color/components/__stories__/ColorSample.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
+
+import { ColorSample } from '../ColorSample';
+
+const meta: Meta<typeof ColorSample> = {
+  title: 'UI/Display/Color/ColorSample',
+  component: ColorSample,
+  decorators: [ComponentDecorator],
+  args: { colorName: 'green' },
+  argTypes: {
+    as: { control: false },
+    theme: { control: false },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof ColorSample>;
+
+export const Default: Story = {};
+
+export const Pipeline: Story = {
+  args: { variant: 'pipeline' },
+};

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: {

front/src/modules/ui/object/field/types/guards/isFieldSelectValue.ts

@@ -1,10 +1,9 @@
 import { z } from 'zod';
 
-import { mainColors, ThemeColor } from '@/ui/theme/constants/colors';
+import { themeColorSchema } from '@/ui/theme/utils/themeColorSchema';
 
-const selectColors = Object.keys(mainColors) as [ThemeColor, ...ThemeColor[]];
 const selectValueSchema = z.object({
-  color: z.enum(selectColors),
+  color: themeColorSchema,
   label: z.string(),
 });
 

front/src/modules/ui/object/record-board/components/RecordBoardColumnEditTitleMenu.tsx

@@ -7,7 +7,7 @@ import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/Drop
 import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
 import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
 import { MenuItemSelectColor } from '@/ui/navigation/menu-item/components/MenuItemSelectColor';
-import { ThemeColor } from '@/ui/theme/constants/colors';
+import { mainColorNames, ThemeColor } from '@/ui/theme/constants/colors';
 import { textInputStyle } from '@/ui/theme/constants/effects';
 import { debounce } from '~/utils/debounce';
 
@@ -49,24 +49,6 @@ type RecordBoardColumnEditTitleMenuProps = {
   stageId: string;
 };
 
-type ColumnColorOption = {
-  name: string;
-  id: ThemeColor;
-};
-
-export const COLUMN_COLOR_OPTIONS: ColumnColorOption[] = [
-  { name: 'Green', id: 'green' },
-  { name: 'Turquoise', id: 'turquoise' },
-  { name: 'Sky', id: 'sky' },
-  { name: 'Blue', id: 'blue' },
-  { name: 'Purple', id: 'purple' },
-  { name: 'Pink', id: 'pink' },
-  { name: 'Red', id: 'red' },
-  { name: 'Orange', id: 'orange' },
-  { name: 'Yellow', id: 'yellow' },
-  { name: 'Gray', id: 'gray' },
-];
-
 export const RecordBoardColumnEditTitleMenu = ({
   onClose,
   onDelete,
@@ -124,15 +106,13 @@ export const RecordBoardColumnEditTitleMenu = ({
         />
       </StyledEditTitleContainer>
       <DropdownMenuSeparator />
-      {COLUMN_COLOR_OPTIONS.map((colorOption) => (
+      {mainColorNames.map((colorName) => (
         <MenuItemSelectColor
-          key={colorOption.name}
-          onClick={() => {
-            handleColorChange(colorOption.id);
-          }}
-          color={colorOption.id}
-          selected={colorOption.id === color}
-          text={colorOption.name}
+          key={colorName}
+          onClick={() => handleColorChange(colorName)}
+          color={colorName}
+          selected={colorName === color}
+          variant="pipeline"
         />
       ))}
       <DropdownMenuSeparator />

front/src/modules/ui/object/record-board/components/__stories__/RecordBoardColumnEditTitleMenu.stories.tsx

@@ -2,21 +2,12 @@ import { Meta, StoryObj } from '@storybook/react';
 
 import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
 
-import {
-  COLUMN_COLOR_OPTIONS,
-  RecordBoardColumnEditTitleMenu,
-} from '../RecordBoardColumnEditTitleMenu';
+import { RecordBoardColumnEditTitleMenu } from '../RecordBoardColumnEditTitleMenu';
 
 const meta: Meta<typeof RecordBoardColumnEditTitleMenu> = {
   title: 'UI/Layout/Board/BoardColumnMenu',
   component: RecordBoardColumnEditTitleMenu,
   decorators: [ComponentDecorator],
-  argTypes: {
-    color: {
-      control: 'select',
-      options: COLUMN_COLOR_OPTIONS.map(({ id }) => id),
-    },
-  },
   args: { color: 'green', title: 'Column title' },
 };
 

front/src/modules/ui/theme/constants/colors.ts

@@ -24,7 +24,6 @@ export const grayScale = {
 };
 
 export const mainColors = {
-  yellow: '#ffd338',
   green: '#55ef3c',
   turquoise: '#15de8f',
   sky: '#00e0ff',
@@ -33,11 +32,14 @@ export const mainColors = {
   pink: '#f54bd0',
   red: '#f83e3e',
   orange: '#ff7222',
+  yellow: '#ffd338',
   gray: grayScale.gray30,
 };
 
 export type ThemeColor = keyof typeof mainColors;
 
+export const mainColorNames = Object.keys(mainColors) as ThemeColor[];
+
 export const secondaryColors = {
   yellow80: '#2e2a1a',
   yellow70: '#453d1e',

front/src/modules/ui/theme/utils/castStringAsThemeColor.ts

@@ -1,6 +0,0 @@
-import { mainColors, ThemeColor } from '../constants/colors';
-
-export const COLORS = Object.keys(mainColors);
-
-export const isThemeColor = (color: string): color is ThemeColor =>
-  COLORS.includes(color);

front/src/modules/ui/theme/utils/themeColorSchema.ts

@@ -0,0 +1,7 @@
+import { z } from 'zod';
+
+import { mainColorNames, ThemeColor } from '../constants/colors';
+
+export const themeColorSchema = z.enum(
+  mainColorNames as [ThemeColor, ...ThemeColor[]],
+);