Fix 4363 modify kanban menu (#5337)

**Changes:**

- Changed -/+ to eye and eye off icons
- Changed menu width to 200px
- Created separate menu for hidden fields
- Added Edit Fields option to hidden fields menu
- Added test file MenuItemSelectTag (wasn't included in the issue)

As this is my first pr, feedback is very welcome!
**Note:** 
These changes cover most of #4363 . I left out the implementation of the
RightIcon in the "Hidden Fields" menu item.

---------

Co-authored-by: kiridarivaki <k.darivaki03@gmail.com>
Co-authored-by: Félix Malfait <felix.malfait@gmail.com>
This commit is contained in:
Kyriaki Darivaki
2024-06-03 23:17:37 +03:00
committed by GitHub
parent dcd769f20f
commit 59c7bcd705
4 changed files with 141 additions and 6 deletions

View File

@ -0,0 +1,94 @@
import { Meta, StoryObj } from '@storybook/react';
import {
CatalogDecorator,
CatalogDimension,
CatalogOptions,
CatalogStory,
ComponentDecorator,
ThemeColor,
} from 'twenty-ui';
import { MenuItemSelectTag } from '../MenuItemSelectTag';
const meta: Meta<typeof MenuItemSelectTag> = {
title: 'UI/Navigation/MenuItem/MenuItemSelectTag',
component: MenuItemSelectTag,
};
export default meta;
type Story = StoryObj<typeof MenuItemSelectTag>;
export const Default: Story = {
args: {
selected: false,
onClick: undefined,
text: 'Item A',
},
argTypes: {
selected: {
control: 'boolean',
defaultValue: false,
},
onClick: {
control: false,
},
},
decorators: [ComponentDecorator],
};
export const Catalog: CatalogStory<Story, typeof MenuItemSelectTag> = {
args: {
text: 'Item A',
},
parameters: {
pseudo: {
hover: ['.hover'],
active: ['.pressed'],
focus: ['.focus'],
},
catalog: {
dimensions: [
{
name: 'color',
values: [
'green',
'turquoise',
'sky',
'blue',
'purple',
'pink',
'red',
'orange',
'yellow',
'gray',
],
props: (color: ThemeColor) => ({ color }),
},
{
name: 'states',
values: ['default', 'hover', 'selected', 'hover+selected'],
props: (state: string) => {
switch (state) {
case 'default':
return {};
case 'hover':
return { className: 'hover' };
case 'selected':
return { selected: true };
case 'hover+selected':
return { className: 'hover', selected: true };
default:
return {};
}
},
labels: (state: string) => `State: ${state}`,
},
] as CatalogDimension[],
options: {
elementContainer: { width: 200 },
} as CatalogOptions,
},
},
decorators: [CatalogDecorator],
};