mukeshs/twenty_crm
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: pick select field option colors (#2748)

Browse Source 
Closes #2433

Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
Thaïs
2023-11-29 12:49:41 +01:00
committed by GitHub
parent aa4bd0146b
commit 3617abb0e6
14 changed files with 186 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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(),
});

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

@ -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 />

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

@ -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' },
};