feat(twenty-front): improve dropdown menu header (#10672)

2025-03-17 16:10:52 +01:00
parent c4efb45f04
commit 8db8d9ad00
27 changed files with 294 additions and 110 deletions
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/Dropdown.tsx
@ -28,7 +28,7 @@ const StyledDropdownFallbackAnchor = styled.div`
  top: 0;
 `;

-type DropdownProps = {
+export type DropdownProps = {
  className?: string;
  clickableComponent?: ReactNode;
  dropdownComponents: ReactNode;
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/DropdownMenuHeader.tsx
@ -1,8 +1,13 @@
-import { useTheme } from '@emotion/react';
 import styled from '@emotion/styled';
-import { ComponentProps, MouseEvent } from 'react';
+import { ComponentProps, MouseEvent, ReactElement } from 'react';
+import { Avatar, AvatarProps, IconComponent } from 'twenty-ui';
+import { DropdownMenuHeaderStartIcon } from '@/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderStartIcon';
 import { isDefined } from 'twenty-shared';
-import { IconComponent, LightIconButton } from 'twenty-ui';
+import { useTheme } from '@emotion/react';
+import {
+  Dropdown,
+  DropdownProps,
+} from '@/ui/layout/dropdown/components/Dropdown';

 const StyledHeader = styled.li`
  align-items: center;
@ -26,6 +31,13 @@ const StyledHeader = styled.li`
  }
 `;

+const StyledChildrenWrapper = styled.span`
+  overflow: hidden;
+  padding: 0 ${({ theme }) => theme.spacing(1)};
+  white-space: nowrap;
+  text-overflow: ellipsis;
+`;
+
 const StyledEndIcon = styled.div`
  display: inline-flex;
  color: ${({ theme }) => theme.font.color.tertiary};
@ -39,83 +51,53 @@ const StyledEndIcon = styled.div`
  }
 `;

-const StyledChildrenWrapper = styled.span`
-  overflow: hidden;
-  padding: 0 ${({ theme }) => theme.spacing(1)};
-  white-space: nowrap;
-  text-overflow: ellipsis;
-`;
-
-const StyledNonClickableStartIcon = styled.div`
-  align-items: center;
-  background: transparent;
-  border: none;
-
-  display: flex;
-  flex-direction: row;
-
-  font-family: ${({ theme }) => theme.font.family};
-  font-weight: ${({ theme }) => theme.font.weight.regular};
-  gap: ${({ theme }) => theme.spacing(1)};
-  justify-content: center;
-
-  white-space: nowrap;
-  height: 24px;
-  width: 24px;
-`;
-
 type DropdownMenuHeaderProps = ComponentProps<'li'> & {
-  StartIcon?: IconComponent;
  EndIcon?: IconComponent;
-  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+  onClick?: (event: MouseEvent<HTMLLIElement>) => void;
+  onStartIconClick?: (event: MouseEvent<HTMLButtonElement>) => void;
  testId?: string;
  className?: string;
-};
-
+  DropdownOnEndIcon?: ReactElement<DropdownProps, typeof Dropdown>;
+} & (
+    | { StartIcon?: IconComponent }
+    | { StartAvatar?: ReactElement<AvatarProps, typeof Avatar> }
+  );
 export const DropdownMenuHeader = ({
  children,
-  StartIcon,
  EndIcon,
+  onStartIconClick,
  onClick,
  testId,
  className,
+  ...props
 }: DropdownMenuHeaderProps) => {
  const theme = useTheme();
+
  return (
-    <>
-      {EndIcon && (
-        <StyledHeader
-          data-testid={testId}
-          onClick={onClick}
-          className={className}
-        >
-          <StyledChildrenWrapper>{children}</StyledChildrenWrapper>
-          <StyledEndIcon>
-            <EndIcon size={theme.icon.size.md} />
-          </StyledEndIcon>
-        </StyledHeader>
+    <StyledHeader data-testid={testId} className={className} onClick={onClick}>
+      {'StartIcon' in props && isDefined(props.StartIcon) && (
+        <DropdownMenuHeaderStartIcon
+          onClick={onStartIconClick}
+          StartIcon={props.StartIcon}
+        />
      )}
-      {StartIcon && (
-        <StyledHeader data-testid={testId} className={className}>
-          {isDefined(onClick) ? (
-            <LightIconButton
-              testId="dropdown-menu-header-end-icon"
-              Icon={StartIcon}
-              accent="tertiary"
-              size="small"
-              onClick={onClick}
-            />
-          ) : (
-            <StyledNonClickableStartIcon>
-              <StartIcon
-                size={theme.icon.size.sm}
-                color={theme.font.color.tertiary}
-              />
-            </StyledNonClickableStartIcon>
-          )}
-          <StyledChildrenWrapper>{children}</StyledChildrenWrapper>
-        </StyledHeader>
+      {!('StartIcon' in props) &&
+        'StartAvatar' in props &&
+        isDefined(props.StartAvatar) && (
+          <DropdownMenuHeaderStartIcon
+            onClick={onStartIconClick}
+            StartAvatar={props.StartAvatar}
+          />
+        )}
+      <StyledChildrenWrapper>{children}</StyledChildrenWrapper>
+      {'DropdownOnEndIcon' in props && (
+        <StyledEndIcon>{props.DropdownOnEndIcon}</StyledEndIcon>
      )}
-    </>
+      {!('DropdownOnEndIcon' in props) && EndIcon && (
+        <StyledEndIcon>
+          <EndIcon size={theme.icon.size.md} />
+        </StyledEndIcon>
+      )}
+    </StyledHeader>
  );
 };
--- a/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderStartIcon.tsx
+++ b/packages/twenty-front/src/modules/ui/layout/dropdown/components/DropdownMenuHeader/internal/DropdownMenuHeaderStartIcon.tsx
@ -0,0 +1,64 @@
+import { Avatar, AvatarProps, IconComponent, LightIconButton } from 'twenty-ui';
+import { MouseEvent, ReactElement } from 'react';
+import styled from '@emotion/styled';
+import { useTheme } from '@emotion/react';
+
+const StyledNonClickableStartIcon = styled.div`
+  align-items: center;
+  background: transparent;
+  border: none;
+
+  display: flex;
+  flex-direction: row;
+
+  font-family: ${({ theme }) => theme.font.family};
+  font-weight: ${({ theme }) => theme.font.weight.regular};
+  gap: ${({ theme }) => theme.spacing(1)};
+  justify-content: center;
+
+  white-space: nowrap;
+  height: ${({ theme }) => theme.spacing(6)};
+  width: ${({ theme }) => theme.spacing(6)};
+`;
+
+const StyledAvatarWrapper = styled.div`
+  padding: ${({ theme }) => theme.spacing(1)};
+`;
+
+export const DropdownMenuHeaderStartIcon = ({
+  onClick,
+  ...props
+}: { onClick?: (event: MouseEvent<HTMLButtonElement>) => void } & (
+  | { StartIcon: IconComponent }
+  | {
+      StartAvatar: ReactElement<AvatarProps, typeof Avatar>;
+    }
+  | Record<never, never>
+)) => {
+  const theme = useTheme();
+
+  return (
+    <>
+      {'StartIcon' in props &&
+        (onClick ? (
+          <LightIconButton
+            Icon={props.StartIcon}
+            accent="tertiary"
+            size="small"
+            onClick={onClick}
+          />
+        ) : (
+          <StyledNonClickableStartIcon>
+            <props.StartIcon
+              size={theme.icon.size.sm}
+              color={theme.font.color.tertiary}
+            />
+          </StyledNonClickableStartIcon>
+        ))}
+
+      {'StartAvatar' in props && (
+        <StyledAvatarWrapper>{props.StartAvatar}</StyledAvatarWrapper>
+      )}
+    </>
+  );
+};
--- 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
@ -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 (
+    <div className="hoverable-buttons">
+      <Dropdown
+        clickableComponent={
+          <LightIconButton
+            Icon={props.EndIcon ?? IconDotsVertical}
+            size="small"
+            accent="tertiary"
+          />
+        }
+        dropdownPlacement={props.dropdownPlacement ?? 'bottom-end'}
+        dropdownComponents={props.dropdownComponents}
+        dropdownId={props.dropdownId}
+        dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}
+      />
+    </div>
+  );
+};
--- 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: (
      <>
-        <DropdownMenuHeader>Header</DropdownMenuHeader>
-        <DropdownMenuSeparator />
+        <DropdownMenuHeader StartIcon={IconChevronLeft}>
+          Header
+        </DropdownMenuHeader>
        <StyledDropdownMenuSubheader>Subheader 1</StyledDropdownMenuSubheader>
        <DropdownMenuItemsContainer hasMaxHeight>
          <>
--- 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
@ -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<typeof DropdownMenuHeader> = {
+  title: 'UI/Layout/Dropdown/DropdownMenuHeader',
+  component: DropdownMenuHeader,
+  decorators: [ComponentDecorator],
+  args: {},
+};
+
+export default meta;
+type Story = StoryObj<typeof DropdownMenuHeader>;
+
+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: (
+      <Avatar placeholder="placeholder" avatarUrl={AVATAR_URL_MOCK} />
+    ),
+    children: 'Avatar',
+  },
+};
+
+export const ContextDropdownAndAvatar: Story = {
+  args: {
+    children: 'Context Dropdown',
+    StartAvatar: (
+      <Avatar placeholder="placeholder" avatarUrl={AVATAR_URL_MOCK} />
+    ),
+    DropdownOnEndIcon: (
+      <Dropdown
+        dropdownId={'story-dropdown-id-context-menu'}
+        dropdownHotkeyScope={{ scope: SelectHotkeyScope.Select }}
+        dropdownComponents={
+          <DropdownMenuItemsContainer>
+            <MenuItem LeftIcon={IconPlus} text={`Create Workspace`} />
+          </DropdownMenuItemsContainer>
+        }
+      />
+    ),
+  },
+};