vynte-infra/calendar
2
0
Fork 0
Code Issues Pull Requests Actions 580 Packages Projects Releases Wiki Activity

fix:z index hover card on routing form responses (#17981)

Browse Source 
* Revert "merge columns (#17938)"

This reverts commit a3ceefc00e.

* fix hovercard on responses
This commit is contained in:
sean-brydon
2024-12-03 19:00:56 +00:00
committed by GitHub
parent 1d8326ed83
commit 145449e7b4
3 changed files with 42 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/features/insights/components/RoutingFormResponsesTable.tsx
+38 -33
View File
@@ -25,6 +25,7 @@ import {
HoverCard,
HoverCardContent,
HoverCardTrigger,
HoverCardPortal,
Table,
TableBody,
TableCell,
@@ -118,15 +119,17 @@ function ResponseValueCell({ value, rowId }: { value: string[]; rowId: number })
<HoverCardTrigger>
<Badge variant="gray">+{value.length - 2}</Badge>
</HoverCardTrigger>
<HoverCardContent side="bottom" align="start" className="w-fit">
<div className="flex flex-col gap-1">
{value.slice(2).map((v: string, i: number) => (
<span key={`${cellId}-overflow-${i}-${rowId}`} className="text-default text-sm">
{v}
</span>
))}
</div>
</HoverCardContent>
<HoverCardPortal>
<HoverCardContent side="bottom" align="start" className="w-fit">
<div className="flex flex-col gap-1">
{value.slice(2).map((v: string, i: number) => (
<span key={`${cellId}-overflow-${i}-${rowId}`} className="text-default text-sm">
{v}
</span>
))}
</div>
</HoverCardContent>
</HoverCardPortal>
</HoverCard>
</>
) : (
@@ -184,32 +187,34 @@ function BookingAtCell({
</Link>
</div>
</HoverCardTrigger>
<HoverCardContent>
<div className="flex flex-col">
<div className="flex items-center gap-2">
<Avatar size="sm" imageSrc={booking.user.avatarUrl ?? ""} alt={booking.user.name ?? ""} />
<div>
<p className="text-sm font-medium">{booking.user.name}</p>
<p className="group/booking_status_email text-subtle flex items-center text-xs">
<span className="truncate">{booking.user.email}</span>
<button
className="invisible ml-2 group-hover/booking_status_email:visible"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
copyToClipboard(booking.user?.email ?? "");
}}>
<Icon name="copy" />
</button>
</p>
<HoverCardPortal>
<HoverCardContent>
<div className="flex flex-col">
<div className="flex items-center gap-2">
<Avatar size="sm" imageSrc={booking.user.avatarUrl ?? ""} alt={booking.user.name ?? ""} />
<div>
<p className="text-sm font-medium">{booking.user.name}</p>
<p className="group/booking_status_email text-subtle flex items-center text-xs">
<span className="truncate">{booking.user.email}</span>
<button
className="invisible ml-2 group-hover/booking_status_email:visible"
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
copyToClipboard(booking.user?.email ?? "");
}}>
<Icon name="copy" />
</button>
</p>
</div>
</div>
<div className="text-emphasis mt-4 flex items-center gap-2 text-xs">
<span>Status:</span>
<BookingStatusBadge booking={booking} />
</div>
</div>
<div className="text-emphasis mt-4 flex items-center gap-2 text-xs">
<span>Status:</span>
<BookingStatusBadge booking={booking} />
</div>
</div>
</HoverCardContent>
</HoverCardContent>
</HoverCardPortal>
</HoverCard>
);
}
packages/ui/components/hover-card/index.tsx
+3 -1
View File
@@ -9,6 +9,8 @@ const HoverCard = HoverCardPrimitive.Root;
const HoverCardTrigger = HoverCardPrimitive.Trigger;
const HoverCardPortal = HoverCardPrimitive.Portal;
const HoverCardContent = React.forwardRef<
React.ElementRef<typeof HoverCardPrimitive.Content>,
React.ComponentPropsWithoutRef<typeof HoverCardPrimitive.Content>
@@ -26,4 +28,4 @@ const HoverCardContent = React.forwardRef<
));
HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
export { HoverCard, HoverCardTrigger, HoverCardContent };
export { HoverCard, HoverCardTrigger, HoverCardContent, HoverCardPortal };
packages/ui/index.ts
+1 -1
View File
@@ -169,7 +169,7 @@ export {
CommandShortcut,
} from "./components/command";
export { HoverCard, HoverCardTrigger, HoverCardContent } from "./components/hover-card";
export { HoverCard, HoverCardTrigger, HoverCardContent, HoverCardPortal } from "./components/hover-card";
export { OrgBanner } from "./components/organization-banner";
export type { OrgBannerProps } from "./components/organization-banner";