Problem/Motivation

I think this is a good candidate for further simplifying the dialog.
The library is already in the core.
The truth is still marked as internal.
But it may also appear here https://www.drupal.org/project/drupal/issues/3197758

Proposed resolution

floating-ui, in addition to very flexible positioning tools, has two interesting features:

1. https://floating-ui.com/docs/autoUpdate which allows you to turn off other listeners
2. https://floating-ui.com/docs/virtual-elements What allows you to use the virtual element created by Drupal.displace

Remaining tasks

Now basically everything works in this MR.
Minor changes are needed to fully support all previous positionOptions.

I'll send a review request. But mainly to listen to feedback.

User interface changes

API changes

Data model changes

Release notes snippet

CommentFileSizeAuthor
#24 3446818-24.png184.71 KBanruether

Issue fork drupal-3446818

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

Comments

finnsky created an issue. See original summary.

finnsky changed the visibility of the branch 3446818-dialog-posit to hidden.

finnsky changed the visibility of the branch 3446818-replace-dialog-position to hidden.

finnsky’s picture

Version: 11.0.x-dev » 11.x-dev
Issue tags: -JavaScript +JavaScript
finnsky’s picture

Version: 11.x-dev » 11.0.x-dev
Issue tags: -JavaScript +JavaScript

finnsky changed the visibility of the branch 3446818-dialog-posit to active.

finnsky changed the visibility of the branch 3446818-dialog-posit to hidden.

nod_’s picture

Status: Active » Needs work
nod_’s picture

haven't tested it yet but code looks good, I'm +1 on using floating ui for that

finnsky’s picture

Cool. Gonna continue then.

catch’s picture

I think this is a good idea, and I think it's fine if core uses internal libraries more than once.

larowlan’s picture

Should we also consider anchor position with a polyfill now it's in chrome and Firefox has also signalled intent to ship? There's a polyfill from oddbird

nod_’s picture

Since we use jQuery UI we have to use some js for positioning. If we had native dialogs it would be easier to go with css-onlu for positioning.

finnsky’s picture

I like CSS-only positioning. But what about

1. my/at/flip in https://api.jqueryui.com/position/ ?
2. also not clean how to set maxWidth etc.
3. https://git.drupalcode.org/project/drupal/-/blob/11.x/core/misc/dialog/o... off-canvas.

Floating UI seems allows to keep all previous features.

finnsky’s picture

Version: 11.0.x-dev » 11.x-dev

finnsky changed the visibility of the branch 3446818-dialog-floating to hidden.

finnsky’s picture

Status: Needs work » Needs review
smustgrave’s picture

Status: Needs review » Needs work
Issue tags: -Drupal 11 beta should-have, -beta target

MR appears to have some failures

Removing the beta targets since we missed that boat.

Version: 11.x-dev » main

Drupal core is now using the main branch as the primary development branch. New developments and disruptive changes should now be targeted to the main branch.

Read more in the announcement.

anruether’s picture

StatusFileSize
new184.71 KB

I tried the MR on a site where I have issues with dynamically loaded content (webform_booking widget) in the modal, which jquery_ui does not account for. With the MR this issue is resolved but I ran into another one on iOS 26/Safari: On focus the positioning breaks, see screenshot.

anybody’s picture

Please note that this still seems to be based on the legacy jQuery UI dialog which hopefully soon will be replaced by native HTML5 dialog + HTMX: #2158943: PP-1 Add a native dialog element using HTMX to deprecate the jQuery UI dialog

Unsure if it makes sense to proceed here then.