Add icons to Dropdown and ContextMenu (#154)

ClickHouse · Sep 27, 2023 · a6fed2d · a6fed2d · vercel · Sep 27, 2023
1 parent 5631186
commit a6fed2d
Show file tree

Hide file tree

Showing 5 changed files with 76 additions and 25 deletions.
diff --git a/src/components/CardSecondary/CardSecondary.tsx b/src/components/CardSecondary/CardSecondary.tsx
@@ -127,7 +127,7 @@ export const CardSecondary = ({
           <Icon
             name={icon}
             size="lg"
-            area-hidden
+            area-hidden=""
           />
           <Title type="h3">{title}</Title>
         </HeaderLeft>

diff --git a/src/components/ContextMenu/ContextMenu.stories.tsx b/src/components/ContextMenu/ContextMenu.stories.tsx
@@ -31,7 +31,7 @@ const ContextMenuExample = ({ showArrow, disabled, side, ...props }: Props) => {
           <ContextMenu.Group>
             <ContextMenu.Item>Content0</ContextMenu.Item>
           </ContextMenu.Group>
-          <ContextMenu.Item>Content1 long text content</ContextMenu.Item>
+          <ContextMenu.Item icon="activity">Content1 long text content</ContextMenu.Item>
           <ContextMenu.Sub>
             <ContextMenu.SubTrigger>Hover over</ContextMenu.SubTrigger>
             <ContextMenu.Content sub>
@@ -47,7 +47,12 @@ const ContextMenuExample = ({ showArrow, disabled, side, ...props }: Props) => {
               <ContextMenu.Item>SubContent1</ContextMenu.Item>
             </ContextMenu.Content>
           </ContextMenu.Sub>
-          <ContextMenu.Item>Content2</ContextMenu.Item>
+          <ContextMenu.Item
+            icon="activity"
+            iconDir="end"
+          >
+            Content2
+          </ContextMenu.Item>
           <ContextMenu.Item disabled>Content3</ContextMenu.Item>
         </ContextMenu.Content>
       </ContextMenu>

diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx
@@ -1,35 +1,52 @@
 import * as RightMenu from "@radix-ui/react-context-menu";
 import styled from "styled-components";
-import { Icon } from "@/components";
+import { HorizontalDirection, Icon, IconName } from "@/components";
 import { Arrow, GenericMenuItem, GenericMenuPanel } from "../GenericMenu";
 import PopoverArrow from "../icons/PopoverArrow";
+import IconWrapper from "../IconWrapper/IconWrapper";
 
 export const ContextMenu = (props: RightMenu.ContextMenuProps) => (
   <RightMenu.Root {...props} />
 );
 
-const ContextMenuTrigger = (props: RightMenu.ContextMenuTriggerProps) => {
+const ContextMenuTrigger = ({
+  disabled,
+  ...props
+}: RightMenu.ContextMenuTriggerProps) => {
   return (
     <RightMenu.Trigger
       asChild
-      {...props}
-    />
+      disabled={disabled}
+    >
+      <div {...props} />
+    </RightMenu.Trigger>
   );
 };
 
 ContextMenuTrigger.displayName = "ContextMenuTrigger";
 ContextMenu.Trigger = ContextMenuTrigger;
 
+interface ContextMenuSubTriggerProps extends RightMenu.ContextMenuSubTriggerProps {
+  icon?: IconName;
+  iconDir?: HorizontalDirection;
+}
 const ContextMenuSubTrigger = ({
+  icon,
+  iconDir,
   children,
   ...props
-}: RightMenu.ContextMenuSubTriggerProps) => {
+}: ContextMenuSubTriggerProps) => {
   return (
     <GenericMenuItem
       as={RightMenu.SubTrigger}
       {...props}
     >
-      {children}
+      <IconWrapper
+        icon={icon}
+        iconDir={iconDir}
+      >
+        {children}
+      </IconWrapper>
       <div className="dropdown-arrow">
         <Icon name="chevron-right" />
       </div>
@@ -139,13 +156,24 @@ const ContextMenuSub = ({ ...props }: RightMenu.ContextMenuGroupProps) => {
 
 ContextMenuSub.displayName = "ContextMenuSub";
 ContextMenu.Sub = ContextMenuSub;
+interface ContextMenuItemProps extends RightMenu.ContextMenuItemProps {
+  icon?: IconName;
+  iconDir?: HorizontalDirection;
+}
 
-const ContextMenuItem = ({ ...props }: RightMenu.ContextMenuItemProps) => {
+const ContextMenuItem = ({ icon, iconDir, children, ...props }: ContextMenuItemProps) => {
   return (
     <GenericMenuItem
       as={RightMenu.Item}
       {...props}
-    />
+    >
+      <IconWrapper
+        icon={icon}
+        iconDir={iconDir}
+      >
+        {children}
+      </IconWrapper>
+    </GenericMenuItem>
   );
 };
 

diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
@@ -21,7 +21,7 @@ const DropdownExample = ({ showArrow, disabled, side, ...props }: Props) => {
           <Dropdown.Group>
             <Dropdown.Item>Content0</Dropdown.Item>
           </Dropdown.Group>
-          <Dropdown.Item>Content1 long text content</Dropdown.Item>
+          <Dropdown.Item icon="activity">Content1 long text content</Dropdown.Item>
           <Dropdown.Sub>
             <Dropdown.Trigger sub>Hover over</Dropdown.Trigger>
             <Dropdown.Content sub>
@@ -37,7 +37,12 @@ const DropdownExample = ({ showArrow, disabled, side, ...props }: Props) => {
               <Dropdown.Item>SubContent1</Dropdown.Item>
             </Dropdown.Content>
           </Dropdown.Sub>
-          <Dropdown.Item>Content2</Dropdown.Item>
+          <Dropdown.Item
+            icon="activity"
+            iconDir="end"
+          >
+            Content2
+          </Dropdown.Item>
           <Dropdown.Item disabled>Content3</Dropdown.Item>
         </Dropdown.Content>
       </Dropdown>

diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
@@ -1,15 +1,17 @@
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
 import styled from "styled-components";
-import { Icon } from "@/components";
+import { HorizontalDirection, Icon, IconName } from "@/components";
 import { Arrow, GenericMenuItem, GenericMenuPanel } from "../GenericMenu";
 import PopoverArrow from "../icons/PopoverArrow";
+import IconWrapper from "../IconWrapper/IconWrapper";
 
 export const Dropdown = (props: DropdownMenu.DropdownMenuProps) => (
   <DropdownMenu.Root {...props} />
 );
 
 const DropdownMenuItem = styled(GenericMenuItem)`
   position: relative;
+  display: flex;
   &:hover .dropdown-arrow,
   &[data-state="open"] .dropdown-arrow {
     position: relative;
@@ -19,6 +21,8 @@ const DropdownMenuItem = styled(GenericMenuItem)`
 
 interface SubDropdownProps {
   sub?: true;
+  icon?: IconName;
+  iconDir?: HorizontalDirection;
 }
 
 interface MainDropdownProps {
@@ -34,25 +38,23 @@ const Trigger = styled(DropdownMenu.Trigger)`
   width: fit-content;
 `;
 
-const DropdownSubTriggerContent = styled.span`
-  display: flex;
-  font: inherit;
-  gap: inherit;
-  color: inherit;
-  width: inherit;
-`;
 const DropdownTrigger = ({
   sub,
   ...props
 }: DropdownSubTriggerProps | DropdownTriggerProps) => {
   if (sub) {
-    const { children, ...menuProps } = props as DropdownSubTriggerProps;
+    const { children, icon, iconDir, ...menuProps } = props as DropdownSubTriggerProps;
     return (
       <DropdownMenuItem
         as={DropdownMenu.SubTrigger}
         {...menuProps}
       >
-        <DropdownSubTriggerContent>{children}</DropdownSubTriggerContent>
+        <IconWrapper
+          icon={icon}
+          iconDir={iconDir}
+        >
+          {children}
+        </IconWrapper>
         <div className="dropdown-arrow">
           <Icon name="chevron-right" />
         </div>
@@ -144,12 +146,23 @@ const DropdownSub = ({ ...props }: DropdownMenu.DropdownMenuGroupProps) => {
 DropdownSub.displayName = "DropdownSub";
 Dropdown.Sub = DropdownSub;
 
-const DropdownItem = (props: DropdownMenu.DropdownMenuItemProps) => {
+interface DropdownItemProps extends DropdownMenu.DropdownMenuItemProps {
+  icon?: IconName;
+  iconDir?: HorizontalDirection;
+}
+const DropdownItem = ({ icon, iconDir, children, ...props }: DropdownItemProps) => {
   return (
     <DropdownMenuItem
       as={DropdownMenu.Item}
       {...props}
-    />
+    >
+      <IconWrapper
+        icon={icon}
+        iconDir={iconDir}
+      >
+        {children}
+      </IconWrapper>
+    </DropdownMenuItem>
   );
 };