+)) => {
+ const theme = useTheme();
+
+ return (
+ <>
+ {'StartIcon' in props &&
+ (onClick ? (
+
+ ) : (
+
+
+
+ ))}
+
+ {'StartAvatar' in props && (
+ {props.StartAvatar}
+ )}
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderWithDropdownMenu.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderWithDropdownMenu.tsx
new file mode 100644
index 000000000..d7b530f9b
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderWithDropdownMenu.tsx
@@ -0,0 +1,34 @@
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+import { IconComponent, IconDotsVertical, LightIconButton } from 'twenty-ui';
+import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
+import { Placement } from '@floating-ui/react';
+import { ReactNode } from 'react';
+
+export type DropdownMenuHeaderWithDropdownMenuProps = {
+ EndIcon?: IconComponent;
+ dropdownPlacement?: Placement;
+ dropdownComponents: ReactNode;
+ dropdownId: string;
+};
+
+export const DropdownMenuHeaderWithDropdownMenu = (
+ props: DropdownMenuHeaderWithDropdownMenuProps,
+) => {
+ return (
+
+
+ }
+ dropdownPlacement={props.dropdownPlacement ?? 'bottom-end'}
+ dropdownComponents={props.dropdownComponents}
+ dropdownId={props.dropdownId}
+ dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}
+ />
+
+ );
+};
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx
index e24ef3556..28b04e72c 100644
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenu.stories.tsx
@@ -7,6 +7,7 @@ import {
Avatar,
Button,
ComponentDecorator,
+ IconChevronLeft,
MenuItem,
MenuItemMultiSelectAvatar,
MenuItemSelectAvatar,
@@ -15,7 +16,7 @@ import {
import { DropdownMenuSkeletonItem } from '@/ui/input/relation-picker/components/skeletons/DropdownMenuSkeletonItem';
import { Dropdown } from '../Dropdown';
-import { DropdownMenuHeader } from '../DropdownMenuHeader';
+import { DropdownMenuHeader } from '../DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuInput } from '../DropdownMenuInput';
import { DropdownMenuItemsContainer } from '../DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '../DropdownMenuSearchInput';
@@ -218,8 +219,9 @@ export const WithHeaders: Story = {
args: {
dropdownComponents: (
<>
- Header
-
+
+ Header
+
Subheader 1
<>
diff --git a/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenuHeader.stories.tsx b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenuHeader.stories.tsx
new file mode 100644
index 000000000..57ad19a78
--- /dev/null
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/__stories__/DropdownMenuHeader.stories.tsx
@@ -0,0 +1,81 @@
+import { Meta, StoryObj } from '@storybook/react';
+import {
+ Avatar,
+ AVATAR_URL_MOCK,
+ ComponentDecorator,
+ IconChevronLeft,
+ IconChevronRight,
+ IconPlus,
+ MenuItem,
+} from 'twenty-ui';
+
+import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
+import { SelectHotkeyScope } from '@/ui/input/types/SelectHotkeyScope';
+import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
+import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
+
+const meta: Meta = {
+ title: 'UI/Layout/Dropdown/DropdownMenuHeader',
+ component: DropdownMenuHeader,
+ decorators: [ComponentDecorator],
+ args: {},
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Text: Story = {
+ args: {
+ children: 'Text only',
+ },
+};
+export const StartIcon: Story = {
+ args: {
+ StartIcon: IconChevronLeft,
+ children: 'Start Icon',
+ },
+};
+
+export const EndIcon: Story = {
+ args: {
+ EndIcon: IconChevronRight,
+ children: 'End Icon',
+ },
+};
+
+export const StartAndEndIcon: Story = {
+ args: {
+ StartIcon: IconChevronLeft,
+ EndIcon: IconChevronRight,
+ children: 'Start and End Icon',
+ },
+};
+
+export const StartAvatar: Story = {
+ args: {
+ StartAvatar: (
+
+ ),
+ children: 'Avatar',
+ },
+};
+
+export const ContextDropdownAndAvatar: Story = {
+ args: {
+ children: 'Context Dropdown',
+ StartAvatar: (
+
+ ),
+ DropdownOnEndIcon: (
+
+
+
+ }
+ />
+ ),
+ },
+};
diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx
index e145b4c6f..1584113fa 100644
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentCreateMode.tsx
@@ -6,7 +6,7 @@ import { useObjectMetadataItemById } from '@/object-metadata/hooks/useObjectMeta
import { IconPicker } from '@/ui/input/components/IconPicker';
import { Select } from '@/ui/input/components/Select';
import { TextInputV2 } from '@/ui/input/components/TextInputV2';
-import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
+import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
@@ -130,7 +130,7 @@ export const ViewPickerContentCreateMode = () => {
return (
<>
-
+
{t`Create view`}
diff --git a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEditMode.tsx b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEditMode.tsx
index 41dc8b6da..91e7e349c 100644
--- a/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEditMode.tsx
+++ b/packages/twenty-front/src/modules/views/view-picker/components/ViewPickerContentEditMode.tsx
@@ -3,7 +3,7 @@ import { IconChevronLeft } from 'twenty-ui';
import { IconPicker } from '@/ui/input/components/IconPicker';
import { TextInputV2 } from '@/ui/input/components/TextInputV2';
-import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
+import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
@@ -67,7 +67,10 @@ export const ViewPickerContentEditMode = () => {
return (
<>
-
+
Edit view
diff --git a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx
index 5e0e92383..dc880657b 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownFieldItems.tsx
@@ -1,4 +1,4 @@
-import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
+import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
@@ -117,7 +117,7 @@ export const WorkflowVariablesDropdownFieldItems = ({
<>
-
+
diff --git a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownWorkflowStepItems.tsx b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownWorkflowStepItems.tsx
index 10ba87812..0fd7d8ffc 100644
--- a/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownWorkflowStepItems.tsx
+++ b/packages/twenty-front/src/modules/workflow/workflow-variables/components/WorkflowVariablesDropdownWorkflowStepItems.tsx
@@ -1,4 +1,4 @@
-import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
+import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSearchInput } from '@/ui/layout/dropdown/components/DropdownMenuSearchInput';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
@@ -37,7 +37,7 @@ export const WorkflowVariablesDropdownWorkflowStepItems = ({
return (
<>
-
+
theme.font.family};
font-weight: ${({ theme }) => theme.font.weight.regular};
gap: ${({ theme }) => theme.spacing(1)};
- height: ${({ size }) => (size === 'small' ? '24px' : '32px')};
+ height: ${({ size, theme }) =>
+ size === 'small' ? theme.spacing(6) : theme.spacing(8)};
justify-content: center;
padding: ${({ theme }) => theme.spacing(1)};
transition: background 0.1s ease;
white-space: nowrap;
- width: ${({ size }) => (size === 'small' ? '24px' : '32px')};
- min-width: ${({ size }) => (size === 'small' ? '24px' : '32px')};
+ width: ${({ size, theme }) =>
+ size === 'small' ? theme.spacing(6) : theme.spacing(8)};
+ min-width: ${({ size, theme }) =>
+ size === 'small' ? theme.spacing(6) : theme.spacing(8)};
&:hover {
background: ${({ theme, disabled }) =>