commonscomputer/cal.diy
4
0
Fork 0
Code Issues Pull Requests Actions 2.2k Packages Projects Releases Wiki Activity

fix: styling of dropdown component (#6440)

Browse Source 
* fix: styling of dropdown component

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* Apply suggestions from code review

* fix: use dropdown item in all pages

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

* chore: undo

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>

Signed-off-by: Udit Takkar <udit.07814802719@cse.mait.ac.in>
Co-authored-by: Peer Richelsen <peeroke@gmail.com>
This commit is contained in:
Udit Takkar
2023-01-15 11:40:40 +00:00
committed by GitHub
co-authored by Peer Richelsen
parent 34a61214d3
commit 636e88d467
17 changed files with 189 additions and 183 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/web/components/eventtype/EventTypeSingleLayout.tsx
+20 -15
View File
@@ -16,10 +16,11 @@ import {
ButtonGroup,
ConfirmationDialogContent,
Dialog,
Divider,
DropdownMenuSeparator,
Dropdown,
DropdownMenuContent,
DropdownMenuItem,
DropdownItem,
DropdownMenuTrigger,
HorizontalTabs,
Icon,
@@ -246,32 +247,36 @@ function EventTypeSingleLayout({
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem className="focus:ring-gray-100">
<Button
color="minimal"
StartIcon={Icon.FiExternalLink}
<DropdownItem
target="_blank"
type="button"
StartIcon={Icon.FiExternalLink}
href={permalink}
rel="noreferrer"
className="min-w-full">
rel="noreferrer">
{t("preview")}
</Button>
</DropdownItem>
</DropdownMenuItem>
<DropdownMenuItem className="focus:ring-gray-100">
<Button color="minimal" StartIcon={Icon.FiLink}>
<DropdownItem
type="button"
StartIcon={Icon.FiLink}
onClick={() => {
navigator.clipboard.writeText(permalink);
showToast("Link copied!", "success");
}}>
{t("copy_link")}
</Button>
</DropdownItem>
</DropdownMenuItem>
<DropdownMenuItem className="focus:ring-gray-100">
<Button
color="minimal"
<DropdownItem
type="button"
StartIcon={Icon.FiTrash}
disabled={!hasPermsToDelete}
onClick={() => setDeleteDialogOpen(true)}
className="min-w-full">
onClick={() => setDeleteDialogOpen(true)}>
{t("delete")}
</Button>
</DropdownItem>
</DropdownMenuItem>
<Divider />
<DropdownMenuSeparator className="block sm:hidden" />
<div className="flex items-center rounded-md py-1.5 px-4 sm:hidden sm:hover:bg-gray-100">
<Skeleton
as={Label}
apps/web/pages/event-types/index.tsx
+3 -2
View File
@@ -370,11 +370,12 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
{t("embed")}
</EmbedButton>
</DropdownMenuItem>
<DropdownMenuSeparator className="h-px bg-gray-200" />
<DropdownMenuSeparator />
{/* readonly is only set when we are on a team - if we are on a user event type null will be the value. */}
{(group.metadata?.readOnly === false || group.metadata.readOnly === null) && (
<DropdownMenuItem>
<DropdownItem
color="destructive"
onClick={() => {
setDeleteDialogOpen(true);
setDeleteDialogTypeId(type.id);
@@ -466,7 +467,7 @@ export const EventTypeList = ({ group, groupIndex, readOnly, types }: EventTypeL
{t("duplicate")}
</Button>
</DropdownMenuItem>
<DropdownMenuSeparator className="h-px bg-gray-200" />
<DropdownMenuSeparator />
<DropdownMenuItem className="outline-none">
<Button
onClick={() => {
apps/web/pages/settings/my-account/conferencing.tsx
+5 -3
View File
@@ -13,6 +13,7 @@ import {
Dropdown,
DropdownMenuContent,
DropdownMenuItem,
DropdownItem,
DropdownMenuTrigger,
Icon,
List,
@@ -94,16 +95,17 @@ const ConferencingLayout = () => {
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<Button
<DropdownItem
type="button"
color="destructive"
StartIcon={Icon.FiTrash}
disabled={app.isGlobal}
StartIcon={Icon.FiTrash}
onClick={() => {
setDeleteCredentialId(app.credentialIds[0]);
setDeleteAppModal(true);
}}>
{t("remove_app")}
</Button>
</DropdownItem>
</DropdownMenuItem>
</DropdownMenuContent>
</Dropdown>
packages/app-store/ee/routing-forms/components/SingleForm.tsx
+1 -1
View File
@@ -109,7 +109,7 @@ const Actions = ({
StartIcon={Icon.FiCode}
tooltip={t("embed")}
/>
<DropdownMenuSeparator className="h-px bg-gray-200" />
<DropdownMenuSeparator />
<FormAction
routingForm={form}
action="_delete"
packages/app-store/ee/routing-forms/pages/forms/[...appPages].tsx
+1 -1
View File
@@ -144,7 +144,7 @@ export default function RoutingForms({
{t("Copy Typeform Redirect Url")}
</FormAction>
) : null}
<DropdownMenuSeparator className="h-px bg-gray-200" />
<DropdownMenuSeparator />
<FormAction
action="_delete"
routingForm={form}
packages/features/ee/teams/components/MemberListItem.tsx
+6 -7
View File
@@ -165,21 +165,20 @@ export default function MemberListItem(props: Props) {
type="button"
onClick={() => setShowChangeMemberRoleModal(true)}
StartIcon={Icon.FiEdit2}>
{t("edit") as string}
{t("edit")}
</DropdownItem>
</DropdownMenuItem>
{impersonationMode && (
<>
<DropdownMenuItem>
<Button
<DropdownItem
type="button"
onClick={() => setShowImpersonateModal(true)}
color="minimal"
StartIcon={Icon.FiLock}
className="w-full flex-shrink-0 font-normal">
StartIcon={Icon.FiLock}>
{t("impersonate")}
</Button>
</DropdownItem>
</DropdownMenuItem>
<DropdownMenuSeparator className="h-px bg-gray-200" />
<DropdownMenuSeparator />
</>
)}
<DropdownMenuItem>
packages/features/ee/teams/components/TeamInviteListItem.tsx
+6 -9
View File
@@ -10,6 +10,7 @@ import {
Dropdown,
DropdownMenuContent,
DropdownMenuItem,
DropdownItem,
DropdownMenuTrigger,
Icon,
} from "@calcom/ui";
@@ -110,22 +111,18 @@ export default function TeamInviteListItem(props: Props) {
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<Button
color="destructive"
className="w-full rounded-none font-medium"
StartIcon={Icon.FiCheck}
onClick={acceptInvite}>
<DropdownItem type="button" StartIcon={Icon.FiCheck} onClick={acceptInvite}>
{t("accept")}
</Button>
</DropdownItem>
</DropdownMenuItem>
<DropdownMenuItem>
<Button
<DropdownItem
color="destructive"
className="w-full rounded-none font-medium"
type="button"
StartIcon={Icon.FiX}
onClick={declineInvite}>
{t("reject")}
</Button>
</DropdownItem>
</DropdownMenuItem>
</DropdownMenuContent>
</Dropdown>
packages/features/ee/teams/components/TeamListItem.tsx
+12 -16
View File
@@ -119,22 +119,18 @@ export default function TeamListItem(props: Props) {
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<Button
color="minimal"
className="w-full rounded-none font-medium"
StartIcon={Icon.FiCheck}
onClick={acceptInvite}>
<DropdownItem type="button" StartIcon={Icon.FiCheck} onClick={acceptInvite}>
{t("accept")}
</Button>
</DropdownItem>
</DropdownMenuItem>
<DropdownMenuItem>
<Button
<DropdownItem
color="destructive"
className="w-full rounded-none font-medium"
type="button"
StartIcon={Icon.FiX}
onClick={declineInvite}>
{t("reject")}
</Button>
</DropdownItem>
</DropdownMenuItem>
</DropdownMenuContent>
</Dropdown>
@@ -186,20 +182,20 @@ export default function TeamListItem(props: Props) {
</DropdownItem>
</DropdownMenuItem>
)}
<DropdownMenuSeparator className="h-px bg-gray-200" />
<DropdownMenuSeparator />
{isOwner && (
<DropdownMenuItem>
<Dialog open={hideDropdown} onOpenChange={setHideDropdown}>
<DialogTrigger asChild>
<Button
<DropdownItem
color="destructive"
type="button"
StartIcon={Icon.FiTrash}
onClick={(e) => {
e.stopPropagation();
}}
color="destructive"
className="rounded-none px-3 font-normal"
StartIcon={Icon.FiTrash}>
}}>
{t("disband_team")}
</Button>
</DropdownItem>
</DialogTrigger>
<ConfirmationDialogContent
variety="danger"
packages/features/ee/workflows/components/TimeTimeUnitInput.tsx
+12 -2
View File
@@ -6,6 +6,7 @@ import {
Dropdown,
DropdownMenuContent,
DropdownMenuItem,
DropdownItem,
DropdownMenuTrigger,
Icon,
TextField,
@@ -54,7 +55,7 @@ export const TimeTimeUnitInput = (props: Props) => {
<DropdownMenuContent>
{timeUnitOptions.map((option, index) => (
<DropdownMenuItem key={index} className="outline-none">
<button
{/* <button
key={index}
type="button"
className="h-8 w-20 justify-start pl-3 text-left text-sm"
@@ -63,7 +64,16 @@ export const TimeTimeUnitInput = (props: Props) => {
form.setValue("timeUnit", option.value);
}}>
{option.label}
</button>
</button> */}
<DropdownItem
key={index}
type="button"
onClick={() => {
setTimeUnit(option.value);
form.setValue("timeUnit", option.value);
}}>
{option.label}
</DropdownItem>
</DropdownMenuItem>
))}
</DropdownMenuContent>
packages/features/ee/workflows/components/WorkflowListPage.tsx
+9 -8
View File
@@ -13,6 +13,7 @@ import {
Dropdown,
DropdownMenuContent,
DropdownMenuItem,
DropdownItem,
DropdownMenuTrigger,
Icon,
showToast,
@@ -172,24 +173,24 @@ export default function WorkflowListPage({ workflows }: Props) {
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<Button
<DropdownItem
type="button"
color="minimal"
StartIcon={Icon.FiEdit2}
onClick={async () => await router.replace("/workflows/" + workflow.id)}>
{t("edit")}
</Button>
</DropdownItem>
</DropdownMenuItem>
<DropdownMenuItem>
<Button
<DropdownItem
type="button"
color="destructive"
StartIcon={Icon.FiTrash2}
onClick={() => {
setDeleteDialogOpen(true);
setwWorkflowToDeleteId(workflow.id);
}}
color="minimal"
StartIcon={Icon.FiTrash2}>
}}>
{t("delete")}
</Button>
</DropdownItem>
</DropdownMenuItem>
</DropdownMenuContent>
</Dropdown>
packages/features/ee/workflows/components/WorkflowStepContainer.tsx
+7 -7
View File
@@ -25,6 +25,7 @@ import {
Dropdown,
DropdownMenuContent,
DropdownMenuItem,
DropdownItem,
DropdownMenuTrigger,
EmailField,
Icon,
@@ -298,7 +299,10 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>
<Button
<DropdownItem
type="button"
StartIcon={Icon.FiTrash2}
color="destructive"
onClick={() => {
const steps = form.getValues("steps");
const updatedSteps = steps
@@ -314,13 +318,9 @@ export default function WorkflowStepContainer(props: WorkflowStepProps) {
if (setReload) {
setReload(!reload);
}
}}
color="secondary"
size="base"
StartIcon={Icon.FiTrash2}
className="w-full rounded-none">
}}>
{t("delete")}
</Button>
</DropdownItem>
</DropdownMenuItem>
</DropdownMenuContent>
</Dropdown>
packages/features/eventtypes/components/CreateEventTypeButton.tsx
+17 -13
View File
@@ -24,6 +24,7 @@ import {
Dropdown,
DropdownMenuContent,
DropdownMenuItem,
DropdownItem,
DropdownMenuLabel,
DropdownMenuSeparator,
DropdownMenuTrigger,
@@ -304,19 +305,22 @@ export default function CreateEventTypeButton(props: CreateEventTypeBtnProps) {
<DropdownMenuLabel>
<div className="max-w-48">{t("new_event_subtitle")}</div>
</DropdownMenuLabel>
<DropdownMenuSeparator className="h-px bg-gray-200" />
<DropdownMenuSeparator />
{props.options.map((option) => (
<DropdownMenuItem
key={option.slug}
className="flex cursor-pointer items-center px-3 py-2 hover:bg-neutral-100 focus:outline-none"
onSelect={() => openModal(option)}>
<Avatar
alt={option.name || ""}
imageSrc={option.image || `${WEBAPP_URL}/${option.slug}/avatar.png`} // if no image, use default avatar
size="sm"
className="inline ltr:mr-4 rtl:ml-4"
/>
<span className="px-4">{option.name ? option.name : option.slug}</span>
<DropdownMenuItem key={option.slug}>
<DropdownItem
type="button"
StartIcon={(props: any) => (
<Avatar
alt={option.name || ""}
imageSrc={option.image || `${WEBAPP_URL}/${option.slug}/avatar.png`} // if no image, use default avatar
size="sm"
{...props}
/>
)}
onClick={() => openModal(option)}>
<span>{option.name ? option.name : option.slug}</span>
</DropdownItem>
</DropdownMenuItem>
))}
</DropdownMenuContent>
@@ -359,7 +363,7 @@ export function CreateEventTypeTrigger(props: CreateEventTypeTrigger) {
</DropdownMenuTrigger>
<DropdownMenuContent align="end">
<DropdownMenuLabel>{t("new_event_subtitle")}</DropdownMenuLabel>
<DropdownMenuSeparator className="h-px bg-gray-200" />
<DropdownMenuSeparator />
{props.options.map((option) => (
<CreateEventTeamsItem
key={option.slug}
packages/features/schedules/components/ScheduleListItem.tsx
+8 -17
View File
@@ -2,18 +2,16 @@ import Link from "next/link";
import { Fragment } from "react";
import { availabilityAsString } from "@calcom/lib/availability";
import classNames from "@calcom/lib/classNames";
import { useLocale } from "@calcom/lib/hooks/useLocale";
import { Availability } from "@calcom/prisma/client";
import { RouterOutputs } from "@calcom/trpc/react";
import { trpc } from "@calcom/trpc/react";
import { Schedule } from "@calcom/types/schedule";
import {
Badge,
Button,
Dropdown,
DropdownMenuContent,
DropdownMenuItem,
DropdownItem,
DropdownMenuTrigger,
Icon,
} from "@calcom/ui";
@@ -81,11 +79,8 @@ export function ScheduleListItem({
<DropdownMenuContent>
<DropdownMenuItem className="min-w-40 focus:ring-gray-100">
{!schedule.isDefault && (
<Button
<DropdownItem
type="button"
color="minimal"
className="w-full rounded-b-none border-none font-normal"
disabled={schedule.isDefault}
onClick={() => {
updateDefault({
scheduleId: schedule.id,
@@ -93,24 +88,20 @@ export function ScheduleListItem({
});
}}>
{t("set_as_default")}
</Button>
</DropdownItem>
)}
</DropdownMenuItem>
<DropdownMenuItem className="min-w-40 focus:ring-gray-100">
<Button
<DropdownItem
type="button"
color="destructive"
onClick={() => {
deleteFunction({
scheduleId: schedule.id,
});
}}
type="button"
color="destructive"
className={classNames(
"w-full border-none font-normal",
!schedule.isDefault && "rounded-t-none"
)}>
}}>
{t("delete")}
</Button>
</DropdownItem>
</DropdownMenuItem>
</DropdownMenuContent>
)}
packages/features/shell/Shell.tsx
+50 -67
View File
@@ -30,6 +30,7 @@ import {
Dropdown,
DropdownMenuContent,
DropdownMenuItem,
DropdownItem,
DropdownMenuPortal,
DropdownMenuSeparator,
DropdownMenuTrigger,
@@ -295,114 +296,96 @@ function UserDropdown({ small }: { small?: boolean }) {
) : (
<>
<DropdownMenuItem>
<button
<DropdownItem
type="button"
StartIcon={(props) => (
<Icon.FiMoon
className={classNames(
user.away
? "text-purple-500 group-hover:text-purple-700"
: "text-gray-500 group-hover:text-gray-700",
props.className
)}
aria-hidden="true"
/>
)}
onClick={() => {
mutation.mutate({ away: !user?.away });
utils.viewer.me.invalidate();
}}
className="flex w-full min-w-max cursor-pointer items-center px-4 py-2 text-sm ltr:flex-row rtl:flex-row-reverse">
<Icon.FiMoon
className={classNames(
user.away
? "text-purple-500 group-hover:text-purple-700"
: "text-gray-500 group-hover:text-gray-700",
"h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-2"
)}
aria-hidden="true"
/>
}}>
{user.away ? t("set_as_free") : t("set_as_away")}
</button>
</DropdownItem>
</DropdownMenuItem>
<DropdownMenuSeparator className="h-px bg-gray-200" />
<DropdownMenuSeparator />
{user.username && (
<>
<DropdownMenuItem>
<a
<DropdownItem
target="_blank"
rel="noopener noreferrer"
href={`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user.username}`}
className="flex items-center px-4 py-2 text-sm text-gray-700 ltr:flex-row rtl:flex-row-reverse">
<Icon.FiExternalLink className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" />{" "}
StartIcon={Icon.FiExternalLink}>
{t("view_public_page")}
</a>
</DropdownItem>
</DropdownMenuItem>
<DropdownMenuItem>
<a
href="#"
<DropdownItem
type="button"
StartIcon={Icon.FiLink}
onClick={(e) => {
e.preventDefault();
navigator.clipboard.writeText(
`${process.env.NEXT_PUBLIC_WEBSITE_URL}/${user.username}`
);
showToast(t("link_copied"), "success");
}}
className="flex items-center px-4 py-2 text-sm text-gray-700 ltr:flex-row rtl:flex-row-reverse">
<Icon.FiLink className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" />{" "}
}}>
{t("copy_public_page_link")}
</a>
</DropdownItem>
</DropdownMenuItem>
</>
)}
<DropdownMenuSeparator className="h-px bg-gray-200" />
<DropdownMenuSeparator />
<DropdownMenuItem>
<a
href={JOIN_SLACK}
<DropdownItem
StartIcon={(props) => <Icon.FiSlack strokeWidth={1.5} {...props} />}
target="_blank"
rel="noreferrer"
className="flex items-center px-4 py-2 text-sm text-gray-700 ltr:flex-row rtl:flex-row-reverse">
<Icon.FiSlack strokeWidth={1.5} className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" />{" "}
href={JOIN_SLACK}>
{t("join_our_slack")}
</a>
</DropdownItem>
</DropdownMenuItem>
<DropdownMenuItem>
<a
target="_blank"
rel="noopener noreferrer"
href={ROADMAP}
className="flex items-center px-4 py-2 text-sm text-gray-700 ltr:flex-row rtl:flex-row-reverse">
<Icon.FiMap className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" /> {t("visit_roadmap")}
</a>
<DropdownItem StartIcon={Icon.FiMap} target="_blank" href={ROADMAP}>
{t("visit_roadmap")}
</DropdownItem>
</DropdownMenuItem>
<DropdownMenuItem>
<button
onClick={() => setHelpOpen(true)}
className="flex w-full items-center px-4 py-2 text-sm text-gray-700 ltr:flex-row rtl:flex-row-reverse">
<Icon.FiHelpCircle
className={classNames(
"text-gray-500 group-hover:text-gray-500",
"h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-2"
)}
aria-hidden="true"
/>
<DropdownItem
type="button"
StartIcon={(props) => <Icon.FiHelpCircle aria-hidden="true" {...props} />}
onClick={() => setHelpOpen(true)}>
{t("help")}
</button>
</DropdownItem>
</DropdownMenuItem>
<DropdownMenuItem>
<a
<DropdownItem
StartIcon={Icon.FiDownload}
target="_blank"
rel="noopener noreferrer"
href={DESKTOP_APP_LINK}
className="desktop-hidden hidden items-center px-4 py-2 text-sm text-gray-700 ltr:flex-row rtl:flex-row-reverse lg:flex">
<Icon.FiDownload className="h-4 w-4 text-gray-500 ltr:mr-2 rtl:ml-2" />{" "}
rel="noreferrer"
className="desktop-hidden hidden lg:flex"
href={DESKTOP_APP_LINK}>
{t("download_desktop_app")}
</a>
</DropdownItem>
</DropdownMenuItem>
<DropdownMenuSeparator className="h-px bg-gray-200" />
<DropdownMenuSeparator />
<DropdownMenuItem>
<a
onClick={() => signOut({ callbackUrl: "/auth/logout" })}
className="flex cursor-pointer items-center px-4 py-2 text-sm hover:bg-gray-100 hover:text-gray-900 ltr:flex-row rtl:flex-row-reverse">
<Icon.FiLogOut
className={classNames(
"text-gray-500 group-hover:text-gray-700",
"h-4 w-4 flex-shrink-0 ltr:mr-2 rtl:ml-2"
)}
aria-hidden="true"
/>
<DropdownItem
type="button"
StartIcon={(props) => <Icon.FiLogOut aria-hidden="true" {...props} />}
onClick={() => signOut({ callbackUrl: "/auth/logout" })}>
{t("sign_out")}
</a>
</DropdownItem>
</DropdownMenuItem>
</>
)}
packages/ui/components/editor/plugins/ToolbarPlugin.tsx
+2 -1
View File
@@ -34,6 +34,7 @@ import {
Dropdown,
DropdownMenuTrigger,
DropdownMenuItem,
DropdownItem,
DropdownMenuContent,
Button,
} from "@calcom/ui";
@@ -393,7 +394,7 @@ export default function ToolbarPlugin(props: TextEditorProps) {
editor.dispatchCommand(TOGGLE_LINK_COMMAND, null);
}
}, [editor, isLink]);
console.log("TEST", blockTypeToBlockName[blockType]);
return (
<div className="toolbar flex" ref={toolbarRef}>
<>
packages/ui/components/form/dropdown/Dropdown.tsx
+23 -7
View File
@@ -5,6 +5,7 @@ import { ComponentProps, forwardRef } from "react";
import { classNames } from "@calcom/lib";
import { SVGComponent } from "@calcom/types/SVGComponent";
import { ButtonProps } from "@calcom/ui";
export const Dropdown = DropdownMenuPrimitive.Root;
@@ -36,7 +37,10 @@ export const DropdownMenuContent = forwardRef<HTMLDivElement, DropdownMenuConten
align={align}
{...props}
sideOffset={sideOffset}
className="shadow-dropdown w-50 relative z-10 origin-top-right rounded-md border border-gray-200 bg-white text-sm"
className={classNames(
"shadow-dropdown w-50 relative z-10 origin-top-right rounded-md border border-gray-200 bg-white text-sm",
"[&>*:first-child]:mt-1 [&>*:last-child]:mb-1"
)}
ref={forwardedRef}>
{children}
</DropdownMenuPrimitive.Content>
@@ -98,7 +102,7 @@ DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
type DropdownItemProps = {
children: React.ReactNode;
color?: "destructive";
color?: ButtonProps["color"];
StartIcon?: SVGComponent;
EndIcon?: SVGComponent;
href?: string;
@@ -131,17 +135,29 @@ export const DropdownItem = (props: DropdownItemProps) => {
{...props}
className={classNames(
"inline-flex w-full items-center px-3 py-2 text-gray-700 hover:text-gray-900",
props.color === "destructive" ? "hover:bg-red-100 hover:text-red-700" : " hover:bg-gray-100"
props.color === "destructive" ? "hover:bg-red-100 hover:text-red-700" : "hover:bg-gray-100"
)}>
<>
{StartIcon && <StartIcon />}
<div className="mx-2">{props.children}</div>
{EndIcon && <EndIcon />}
{StartIcon && <StartIcon className="h-4 w-4" />}
<div className="mx-3 text-sm font-medium leading-5">{props.children}</div>
{EndIcon && <EndIcon className="h-4 w-4" />}
</>
</ButtonOrLink>
);
};
export const DropdownMenuSeparator = DropdownMenuPrimitive.Separator;
type DropdownMenuSeparatorProps = ComponentProps<typeof DropdownMenuPrimitive["Separator"]>;
export const DropdownMenuSeparator = forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(
({ className = "", ...props }, forwardedRef) => {
return (
<DropdownMenuPrimitive.Separator
className={classNames("my-1 h-px bg-gray-200", className)}
{...props}
ref={forwardedRef}
/>
);
}
);
DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
export default Dropdown;
packages/ui/components/table/TableActions.tsx
+7 -7
View File
@@ -6,6 +6,7 @@ import {
Dropdown,
DropdownMenuContent,
DropdownMenuItem,
DropdownItem,
DropdownMenuPortal,
DropdownMenuTrigger,
ButtonBaseProps,
@@ -53,16 +54,15 @@ export const DropdownActions = ({
<DropdownMenuContent>
{actions.map((action) => (
<DropdownMenuItem key={action.id}>
<Button
<DropdownItem
type="button"
color={action.color || "minimal"}
className="w-full rounded-none font-normal"
href={action.href}
color={action.color}
data-testid={action.id}
StartIcon={action.icon}
onClick={action.onClick || defaultAction}
data-testid={action.id}>
href={action.href}
onClick={action.onClick || defaultAction}>
{action.label}
</Button>
</DropdownItem>
</DropdownMenuItem>
))}
</DropdownMenuContent>