mirror of https://github.com/backnotprop/plannotator.git synced 2026-09-14 14:17:26 +08:00

Files

T

Michael Ramos ca34a8bbf7 Migrate @plannotator/ui to Base UI (0.23.0) (#1013 )

* 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.

2026-07-07 12:32:51 -07:00

1.8 KiB

Raw Permalink Blame History

button

2026-07-07, transformation engine. Verdict: migrated to the REAL @base-ui/react/button primitive (per skill rule — not a useRender wrapper); API change asChild → render.

Changed

packages/ui/components/ui/button.tsx — Slot/Slottable from @radix-ui/react-slot → <ButtonPrimitive> from @base-ui/react/button. Slottable wrapper around children dropped: Base UI render composes children inside the rendered element natively, so iconLeft/iconRight siblings need no slot machinery. Props type: ButtonPrimitive.Props & VariantProps<typeof buttonVariants> & { iconLeft?; iconRight? }. cva classes byte-identical. Leftover scan clean: grep -n "radix-ui\|@radix-ui" — no matches.

Left alone

Consumers AnnotationPanel.tsx, ToolbarButtons.tsx — pass only variant/size/onClick/className; no asChild call sites anywhere in the repo; compile unchanged.

Behavior changes

Public API: asChild removed → render. No in-repo call sites. HANDOFF item.
Base UI Button forwards its ref as HTMLElement (Radix path was HTMLButtonElement). No in-repo refs typed against it; strict gate green.
Disabled buttons: Base UI additionally manages aria-disabled/focus semantics (focusableWhenDisabled default false = native-like). Visual disabled:* classes unchanged.
Default type is now "button" (Base UI sets it; a plain <button> was implicitly type="submit"). Explicit type="submit" still overrides. No <form> exists in packages/ui or packages/editor — consumer-only delta, listed in HANDOFF item 12.

Verify by hand

Click Approve (success variant) and Feedback (outline) in the plan app — styles and click behavior identical.
Disabled state: opacity-50 + no pointer events.
Keyboard: Tab focuses, Enter/Space activates; focus ring visible.

1.8 KiB Raw Permalink Blame History