diff --git a/src/components/CardSecondary/CardSecondary.tsx b/src/components/CardSecondary/CardSecondary.tsx
index 516bb2d1..b6bc13d1 100644
--- a/src/components/CardSecondary/CardSecondary.tsx
+++ b/src/components/CardSecondary/CardSecondary.tsx
@@ -127,7 +127,7 @@ export const CardSecondary = ({
{title}
diff --git a/src/components/ContextMenu/ContextMenu.stories.tsx b/src/components/ContextMenu/ContextMenu.stories.tsx
index 2a89360d..06c2d66d 100644
--- 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) => {
Content0
- Content1 long text content
+ Content1 long text content
Hover over
@@ -47,7 +47,12 @@ const ContextMenuExample = ({ showArrow, disabled, side, ...props }: Props) => {
SubContent1
- Content2
+
+ Content2
+
Content3
diff --git a/src/components/ContextMenu/ContextMenu.tsx b/src/components/ContextMenu/ContextMenu.tsx
index 9177102a..b6589cca 100644
--- 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) => (
);
-const ContextMenuTrigger = (props: RightMenu.ContextMenuTriggerProps) => {
+const ContextMenuTrigger = ({
+ disabled,
+ ...props
+}: RightMenu.ContextMenuTriggerProps) => {
return (
+ disabled={disabled}
+ >
+
+
);
};
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 (
- {children}
+
+ {children}
+
@@ -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 (
+ >
+
+ {children}
+
+
);
};
diff --git a/src/components/Dropdown/Dropdown.stories.tsx b/src/components/Dropdown/Dropdown.stories.tsx
index f8a462da..673bf7b8 100644
--- 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) => {
Content0
- Content1 long text content
+ Content1 long text content
Hover over
@@ -37,7 +37,12 @@ const DropdownExample = ({ showArrow, disabled, side, ...props }: Props) => {
SubContent1
- Content2
+
+ Content2
+
Content3
diff --git a/src/components/Dropdown/Dropdown.tsx b/src/components/Dropdown/Dropdown.tsx
index ab588212..d66018dc 100644
--- a/src/components/Dropdown/Dropdown.tsx
+++ b/src/components/Dropdown/Dropdown.tsx
@@ -1,8 +1,9 @@
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) => (
@@ -10,6 +11,7 @@ export const Dropdown = (props: DropdownMenu.DropdownMenuProps) => (
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 (
- {children}
+
+ {children}
+
@@ -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 (
+ >
+
+ {children}
+
+
);
};