backnotprop__plannotator/packages/ui/.migration/dropdown-menu.md at fix/pi-plan-toggle-stale-context

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

4.0 KiB

Raw Permalink Blame History

2026-07-07, transformation engine. Verdict: DropdownMenu → Base UI Menu with the canonical Portal>Positioner>Popup restructure; 2 consumers swept in the same commit; several flagged deltas on the published surface.

Changed

packages/ui/components/ui/dropdown-menu.tsx — @radix-ui/react-dropdown-menu → @base-ui/react/menu. Every export name preserved.
- Content/SubContent → Portal > Positioner > Popup; side/sideOffset/ align/alignOffset declared→destructured→forwarded to Positioner (the FORWARD rule); Positioner className="isolate z-50 outline-none".
- SubContent gets the load-bearing submenu defaults align="start" alignOffset={-3} side="right" sideOffset={0} (Radix SubContent implied side + start-align).
- Part renames: Label → GroupLabel, ItemIndicator → CheckboxItemIndicator/RadioItemIndicator, Sub → SubmenuRoot, SubTrigger → SubmenuTrigger.
- Class rewrites: data-[state=open]:animate-in …slide-in-from-* keyframes → origin-[var(--transform-origin)] transition-[opacity,scale] duration-150
  - data-[starting-style]/data-[ending-style] opacity/scale; item focus:bg-accent → data-[highlighted]:bg-accent (Base UI highlight model), SubTrigger data-[state=open]:* → data-[popup-open]:*.
- Root/Portal/Sub wrappers no longer stamp data-slot (Base UI roots render no element and reject unknown props).
packages/ui/components/OpenInAppButton.tsx (consumer sweep) — onCloseAutoFocus={e => e.preventDefault()} → finalFocus={false} on Content (same intent: don't snap focus back to the trigger); onSelect + preventDefault → closeOnClick={false} + onClick (component already closes via its controlled menuOpen state); Trigger asChild><button> → Trigger render={<button …/>} with children hoisted onto the trigger.
packages/editor/components/AnnotateAgentTerminalPanel.tsx (consumer sweep) — Trigger asChild → render; onSelect → onClick (default closeOnClick keeps Radix's close-on-select for plain items); data-[state=open]:* trigger classes → data-[popup-open]:*; min-w-[var(--radix-dropdown-menu-trigger-width)] → min-w-[var(--anchor-width)].

Leftover scan clean on all three files: grep -n "radix-ui\|@radix-ui" — no matches.

Left alone

DropdownMenuShortcut — plain <span>, no primitive.
packages/review-editor's own @radix-ui/react-dropdown-menu import (DiffTypePicker) — sibling agent's scope.

Behavior changes

Item selection API (published surface): onSelect(event) no longer exists — Base UI uses onClick + closeOnClick. In-repo call sites swept; external consumers must rename. HANDOFF item.
CheckboxItem/RadioItem no longer close on click by default (closeOnClick defaults false there, true on plain Item — Radix closed on select for all). No in-repo call sites use these items; flagged, not patched. HANDOFF item.
GroupLabel must sit inside a Group (it wires aria-labelledby); Radix Label could float freely. No in-repo call sites; HANDOFF item.
checked="indeterminate" no longer valid on CheckboxItem (boolean only).
Root loop prop moved to loopFocus and the default flips to looping.
Enter/exit animation now transition-based (opacity+scale from --transform-origin); the 2px slide-in-from-* nudge of the Radix keyframe set is gone — matches the shadcn base registry look.

Verify by hand

Plan app header menu + Approve dropdown: open on click, items highlight on hover AND arrow keys, Enter activates, Escape closes, focus returns to trigger.
OpenInAppButton (review app file rows): pick an app → menu closes (via controlled state) and the app opens; Copy path works; closing the menu does NOT paint a focus ring on the chevron (finalFocus={false}).
Agent terminal panel (annotate mode): agent select opens, popup is at least trigger-width, picking an agent closes the menu.
Typeahead: type a menu item's first letters — highlight jumps.

4.0 KiB Raw Permalink Blame History

dropdown-menu

Changed

Left alone

Behavior changes

Verify by hand

4.0 KiB

Raw Permalink Blame History