xiiui → Update Visual Editor popover/modal action buttons by formfcw · Pull Request #27186 · directus/directus · GitHub
Skip to content

xiiui → Update Visual Editor popover/modal action buttons#27186

Open
formfcw wants to merge 4 commits intoflorian/cms-1945-update-visual-editor-header-bar-buttonsfrom
florian/cms-1924-update-visual-editor-popover-modal-action-buttons
Open

xiiui → Update Visual Editor popover/modal action buttons#27186
formfcw wants to merge 4 commits intoflorian/cms-1945-update-visual-editor-header-bar-buttonsfrom
florian/cms-1924-update-visual-editor-popover-modal-action-buttons

Conversation

@formfcw
Copy link
Copy Markdown
Contributor

@formfcw formfcw commented Apr 22, 2026

Scope

What's changed:

  • Popover action buttons now render at the bottom as labelled buttons (no longer floating icon-only buttons at the top).
  • Action order unified as cancel → slot → save; drawer mode uses the ghost PrivateViewHeaderBarActionButton for "navigate to item".
  • Button heights extracted into global --button-height-* CSS variables (pure refactor).
  • Popover width is now measured dynamically instead of hardcoded; OverlayItem's popoverProps becomes a callback receiving { popoverWidth } and returning Partial<VMenuProps>.
  • Align the Visual Editor popover with the modal: action buttons move to the bottom, separated by a border instead of a shadow when scrollbar appears.

Potential Risks / Drawbacks

  • popoverProps on OverlayItem changes shape (object → callback). However, editing-layer.vue is the only consumer.

Tested Scenarios

  • Visual Editor popover, modal, and drawer editing flows.
  • meta+s save and esc cancel shortcuts and tooltips in the Visual Editor.

Review Notes / Questions

  • To test, spin up the Visual Editor test website (required to access popover, modal, and drawer editing flows end-to-end).

Checklist

  • Added or updated tests
  • Documentation PR created here or not required — internal component rework, no user-facing docs
  • OpenAPI package PR created here or not required — app-only change

Addresses CMS-1924

formfcw added 4 commits April 22, 2026 14:24
Add --button-height-xs/sm/default/lg/xl to global variables and use
them in v-button.vue. Group variables by section.
Move popover action buttons from top to bottom, matching the modal
layout. Replace the action bar shadow with a border and hide it with
a cover when content does not overflow.

Measure popover width dynamically via useElementSize; popoverProps
is now a callback receiving { popoverWidth } and returning partial
VMenuProps, replacing the hardcoded 648px width in editing-layer.

Reorder actions: cancel first, slot, save. Simplify getTooltip into
getSaveShortcut. In drawer mode, use PrivateViewHeaderBarActionButton
with ghost variant for the "navigate to item" action.

Export VMenuProps from v-menu.vue to type the new popoverProps
callback.
@formfcw formfcw requested a review from AlexGaillard as a code owner April 22, 2026 13:38
@linear
Copy link
Copy Markdown

linear Bot commented Apr 22, 2026

Copy link
Copy Markdown
Contributor

@robluton robluton left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM! 🎸

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants