Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 030032c

Browse files
BrunoQuaresmaBrunoQuaresma
committed
Apply review comments
1 parent b776a4e commit 030032c

File tree

2 files changed

+81
-70
lines changed

2 files changed

+81
-70
lines changed

‎site/src/components/DropdownMenu/DropdownMenu.stories.tsx

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,3 @@
1-
/**
2-
* Copied from shadc/ui on 12/19/2024
3-
* @see {@link https://ui.shadcn.com/docs/components/dropdown-menu}
4-
*
5-
* This component was updated to match the styles from the Figma design:
6-
* @see {@link https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=656-2354&t=CiGt5le3yJEwMH4M-0}
7-
*/
81
import type { Meta, StoryObj } from "@storybook/react";
92
import { userEvent, within } from "@storybook/test";
103
import { Button } from "components/Button/Button";

‎site/src/components/DropdownMenu/DropdownMenu.tsx

Lines changed: 81 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,47 @@
1+
/**
2+
* Copied from shadc/ui on 12/19/2024
3+
* @see {@link https://ui.shadcn.com/docs/components/dropdown-menu}
4+
*
5+
* This component was updated to match the styles from the Figma design:
6+
* @see {@link https://www.figma.com/design/WfqIgsTFXN2BscBSSyXWF8/Coder-kit?node-id=656-2354&t=CiGt5le3yJEwMH4M-0}
7+
*/
8+
19
import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
210
import { Check, ChevronRight, Circle } from "lucide-react";
3-
import * as React from "react";
11+
import {
12+
forwardRef,
13+
type ElementRef,
14+
type ComponentPropsWithoutRef,
15+
type HTMLAttributes,
16+
} from "react";
417
import { cn } from "utils/cn";
518

6-
const DropdownMenu = DropdownMenuPrimitive.Root;
19+
export const DropdownMenu = DropdownMenuPrimitive.Root;
720

8-
const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
21+
export const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
922

10-
const DropdownMenuGroup = DropdownMenuPrimitive.Group;
23+
export const DropdownMenuGroup = DropdownMenuPrimitive.Group;
1124

12-
const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
25+
export const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
1326

14-
const DropdownMenuSub = DropdownMenuPrimitive.Sub;
27+
export const DropdownMenuSub = DropdownMenuPrimitive.Sub;
1528

16-
const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
29+
export const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
1730

18-
const DropdownMenuSubTrigger = React.forwardRef<
19-
React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
20-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
31+
export const DropdownMenuSubTrigger = forwardRef<
32+
ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
33+
ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
2134
inset?: boolean;
2235
}
2336
>(({ className, inset, children, ...props }, ref) => (
2437
<DropdownMenuPrimitive.SubTrigger
2538
ref={ref}
2639
className={cn(
27-
"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-surface-secondary data-[state=open]:bg-surface-secondary [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
28-
inset && "pl-8",
40+
[
41+
"flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-surface-secondary",
42+
"data-[state=open]:bg-surface-secondary [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
43+
inset && "pl-8",
44+
],
2945
className,
3046
)}
3147
{...props}
@@ -37,14 +53,20 @@ const DropdownMenuSubTrigger = React.forwardRef<
3753
DropdownMenuSubTrigger.displayName =
3854
DropdownMenuPrimitive.SubTrigger.displayName;
3955

40-
const DropdownMenuSubContent = React.forwardRef<
41-
React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
42-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
56+
export const DropdownMenuSubContent = forwardRef<
57+
ElementRef<typeof DropdownMenuPrimitive.SubContent>,
58+
ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
4359
>(({ className, ...props }, ref) => (
4460
<DropdownMenuPrimitive.SubContent
4561
ref={ref}
4662
className={cn(
47-
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-solid bg-surface-primary p-1 text-content-secondary shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
63+
[
64+
"z-50 min-w-[8rem] overflow-hidden rounded-md border border-solid bg-surface-primary p-1 text-content-secondary shadow-lg",
65+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
66+
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
67+
"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
68+
"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
69+
],
4870
className,
4971
)}
5072
{...props}
@@ -53,17 +75,22 @@ const DropdownMenuSubContent = React.forwardRef<
5375
DropdownMenuSubContent.displayName =
5476
DropdownMenuPrimitive.SubContent.displayName;
5577

56-
const DropdownMenuContent = React.forwardRef<
57-
React.ElementRef<typeof DropdownMenuPrimitive.Content>,
58-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
78+
export const DropdownMenuContent = forwardRef<
79+
ElementRef<typeof DropdownMenuPrimitive.Content>,
80+
ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
5981
>(({ className, sideOffset = 4, ...props }, ref) => (
6082
<DropdownMenuPrimitive.Portal>
6183
<DropdownMenuPrimitive.Content
6284
ref={ref}
6385
sideOffset={sideOffset}
6486
className={cn(
65-
"z-50 min-w-48 overflow-hidden rounded-md border border-solid bg-surface-primary p-2 text-content-secondary shadow-md",
66-
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
87+
[
88+
"z-50 min-w-48 overflow-hidden rounded-md border border-solid bg-surface-primary p-2 text-content-secondary shadow-md",
89+
"data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
90+
"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
91+
"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2",
92+
"data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
93+
],
6794
className,
6895
)}
6996
{...props}
@@ -72,32 +99,39 @@ const DropdownMenuContent = React.forwardRef<
7299
));
73100
DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
74101

75-
const DropdownMenuItem = React.forwardRef<
76-
React.ElementRef<typeof DropdownMenuPrimitive.Item>,
77-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
102+
export const DropdownMenuItem = forwardRef<
103+
ElementRef<typeof DropdownMenuPrimitive.Item>,
104+
ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
78105
inset?: boolean;
79106
}
80107
>(({ className, inset, ...props }, ref) => (
81108
<DropdownMenuPrimitive.Item
82109
ref={ref}
83110
className={cn(
84-
"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-2 text-sm text-content-secondary font-medium outline-none transition-colors focus:bg-surface-secondary focus:text-content-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
85-
inset && "pl-8",
111+
[
112+
"relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-2 text-sm text-content-secondary font-medium outline-none transition-colors",
113+
"focus:bg-surface-secondary focus:text-content-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
114+
"[&>svg]:size-4 [&>svg]:shrink-0",
115+
inset && "pl-8",
116+
],
86117
className,
87118
)}
88119
{...props}
89120
/>
90121
));
91122
DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
92123

93-
const DropdownMenuCheckboxItem = React.forwardRef<
94-
React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
95-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
124+
export const DropdownMenuCheckboxItem = forwardRef<
125+
ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
126+
ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
96127
>(({ className, children, checked, ...props }, ref) => (
97128
<DropdownMenuPrimitive.CheckboxItem
98129
ref={ref}
99130
className={cn(
100-
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-surface-secondary focus:text-content-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
131+
[
132+
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
133+
"focus:bg-surface-secondary focus:text-content-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
134+
],
101135
className,
102136
)}
103137
checked={checked}
@@ -114,14 +148,17 @@ const DropdownMenuCheckboxItem = React.forwardRef<
114148
DropdownMenuCheckboxItem.displayName =
115149
DropdownMenuPrimitive.CheckboxItem.displayName;
116150

117-
const DropdownMenuRadioItem = React.forwardRef<
118-
React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
119-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
151+
export const DropdownMenuRadioItem = forwardRef<
152+
ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
153+
ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
120154
>(({ className, children, ...props }, ref) => (
121155
<DropdownMenuPrimitive.RadioItem
122156
ref={ref}
123157
className={cn(
124-
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-surface-secondary focus:text-content-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
158+
[
159+
"relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors",
160+
"focus:bg-surface-secondary focus:text-content-primary data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
161+
],
125162
className,
126163
)}
127164
{...props}
@@ -136,40 +173,39 @@ const DropdownMenuRadioItem = React.forwardRef<
136173
));
137174
DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
138175

139-
const DropdownMenuLabel = React.forwardRef<
140-
React.ElementRef<typeof DropdownMenuPrimitive.Label>,
141-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
176+
export const DropdownMenuLabel = forwardRef<
177+
ElementRef<typeof DropdownMenuPrimitive.Label>,
178+
ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
142179
inset?: boolean;
143180
}
144181
>(({ className, inset, ...props }, ref) => (
145182
<DropdownMenuPrimitive.Label
146183
ref={ref}
147184
className={cn(
148-
"px-2 py-1.5 text-sm font-semibold",
149-
inset && "pl-8",
185+
["px-2 py-1.5 text-sm font-semibold", inset && "pl-8"],
150186
className,
151187
)}
152188
{...props}
153189
/>
154190
));
155191
DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
156192

157-
const DropdownMenuSeparator = React.forwardRef<
158-
React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
159-
React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
193+
export const DropdownMenuSeparator = forwardRef<
194+
ElementRef<typeof DropdownMenuPrimitive.Separator>,
195+
ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
160196
>(({ className, ...props }, ref) => (
161197
<DropdownMenuPrimitive.Separator
162198
ref={ref}
163-
className={cn("-mx-1 my-1 h-px bg-border", className)}
199+
className={cn(["-mx-1 my-1 h-px bg-border"], className)}
164200
{...props}
165201
/>
166202
));
167203
DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
168204

169-
const DropdownMenuShortcut = ({
205+
export const DropdownMenuShortcut = ({
170206
className,
171207
...props
172-
}: React.HTMLAttributes<HTMLSpanElement>) => {
208+
}: HTMLAttributes<HTMLSpanElement>) => {
173209
return (
174210
<span
175211
className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
@@ -178,21 +214,3 @@ const DropdownMenuShortcut = ({
178214
);
179215
};
180216
DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
181-
182-
export {
183-
DropdownMenu,
184-
DropdownMenuTrigger,
185-
DropdownMenuContent,
186-
DropdownMenuItem,
187-
DropdownMenuCheckboxItem,
188-
DropdownMenuRadioItem,
189-
DropdownMenuLabel,
190-
DropdownMenuSeparator,
191-
DropdownMenuShortcut,
192-
DropdownMenuGroup,
193-
DropdownMenuPortal,
194-
DropdownMenuSub,
195-
DropdownMenuSubContent,
196-
DropdownMenuSubTrigger,
197-
DropdownMenuRadioGroup,
198-
};

0 commit comments

Comments
 (0)