mirror of
https://github.com/backnotprop/plannotator.git
synced 2026-09-14 14:17:26 +08:00
Michael Ramos
ca34a8bbf7
* chore: restore packages/core workspace entry missing from bun.lock #957 merged without its bun.lock update; fresh installs couldn't resolve @plannotator/core workspace links. * chore(ui): install @base-ui/react alongside radix; migration assessment * feat(ui): migrate badge to Base UI (Slot -> useRender, asChild -> render) * feat(ui): migrate button to Base UI Button primitive (asChild -> render) * feat(ui): migrate tabs to Base UI (Trigger->Tab, Content->Panel, data-active) * feat(ui): migrate dialog to Base UI (Overlay->Backdrop, Content->Popup) * feat(ui): migrate dropdown-menu to Base UI Menu + sweep both consumers * feat(ui): migrate Popover wrapper to Base UI (Positioner model; drop PopoverAnchor) * feat(ui): migrate Tooltip wrapper to Base UI, public API preserved * feat(ui): migrate PopoutDialog to Base UI (non-modal + reason-based dismissal guard) * feat(ui): remove all @radix-ui dependencies — package is fully Base UI * chore(ui): 0.23.0 release notes — Base UI engine, drop tailwindcss-animate peer HANDOFF.md documents the engine swap for the Workspaces consumer: dependency changes, 11 breaking/behavior items, what did not change. Version bumped to 0.23.0; publish stays owner-gated. * docs(ui): record browser smoke results in migration report * fix(ui): self-review findings — caret Base UI range, Button type default documented, PopoutDialog focus-out guard hardened - @base-ui/react 1.6.0 -> ^1.6.0: a consumer's own Base UI install must dedupe with ours or portals lose context across copies - HANDOFF item 12 + button report: Button now defaults type="button" (implicit form submit is a consumer-only breaking change) - PopoutDialog: guard both event.target and relatedTarget on focus-out — blur-shaped events carry the annotation toolbar in relatedTarget * docs(ui): record human hand-verification pass in migration report * feat(ui): 150ms exit fade on popovers + prefers-reduced-motion for all Base UI popups Popover enter/exit unified on starting/ending-style transitions (the popover-enter keyframe only existed in review-editor CSS — plan-app popovers had no enter animation at all). Reduced-motion rule in theme.css covers dialogs, menus, popovers, tooltips in both apps.
84 lines
3.0 KiB
TypeScript
84 lines
3.0 KiB
TypeScript
import { Button as ButtonPrimitive } from "@base-ui/react/button";
|
|
import { cva, type VariantProps } from "class-variance-authority";
|
|
import type * as React from "react";
|
|
|
|
import { cn } from "../../lib/utils";
|
|
|
|
/**
|
|
* Button — the canonical action primitive (shared by the frontend shell and the
|
|
* embedded plan/review apps). cva variants + sizes, optional `iconLeft`/`iconRight`
|
|
* slots, and Base UI's `render` prop for polymorphism (e.g. `render={<a href=... />}`).
|
|
*
|
|
* `success` (solid, token-driven green) covers the plan app's Approve action; the
|
|
* Feedback action uses `outline`. (No `accent` variant — `text-accent` on `bg-accent`
|
|
* has no contrast in neutral-accent themes.)
|
|
*/
|
|
const buttonVariants = cva(
|
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-[13px] font-medium transition-[color,background-color,box-shadow] disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
|
|
destructive:
|
|
"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40",
|
|
success: "bg-success text-success-foreground shadow-xs hover:bg-success/90",
|
|
outline:
|
|
"border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground",
|
|
secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
|
|
ghost: "hover:bg-accent hover:text-accent-foreground",
|
|
link: "text-primary underline-offset-4 hover:underline",
|
|
},
|
|
size: {
|
|
default: "h-9 px-4 py-2",
|
|
xxs: "h-6 rounded-md gap-1.5 px-2.5",
|
|
xs: "h-7 rounded-md gap-1.5 px-2.5",
|
|
sm: "h-8 rounded-md gap-1.5 px-3",
|
|
lg: "h-10 rounded-md px-6",
|
|
icon: "size-9",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
size: "default",
|
|
},
|
|
},
|
|
);
|
|
|
|
type ButtonIcon = React.ReactNode;
|
|
|
|
function Button({
|
|
children,
|
|
className,
|
|
variant,
|
|
size,
|
|
iconLeft,
|
|
iconRight,
|
|
...props
|
|
}: ButtonPrimitive.Props &
|
|
VariantProps<typeof buttonVariants> & {
|
|
iconLeft?: ButtonIcon;
|
|
iconRight?: ButtonIcon;
|
|
}) {
|
|
return (
|
|
<ButtonPrimitive
|
|
data-slot="button"
|
|
className={cn(buttonVariants({ variant, size, className }))}
|
|
{...props}
|
|
>
|
|
{iconLeft ? (
|
|
<span data-slot="button-icon" data-side="left" aria-hidden="true" className="shrink-0">
|
|
{iconLeft}
|
|
</span>
|
|
) : null}
|
|
{children}
|
|
{iconRight ? (
|
|
<span data-slot="button-icon" data-side="right" aria-hidden="true" className="shrink-0">
|
|
{iconRight}
|
|
</span>
|
|
) : null}
|
|
</ButtonPrimitive>
|
|
);
|
|
}
|
|
|
|
export { Button, buttonVariants };
|