feat: add position API to Dialog (#6782)

Co-authored-by: Sascha Ißbrücker <sissbruecker@vaadin.com>
vaadin · Nov 5, 2024 · 2cba345 · 2cba345
1 parent 7a78e53
commit 2cba345
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 1 deletion.
diff --git a/...ntegration-tests/src/main/java/com/vaadin/flow/component/dialog/tests/DialogTestPage.java b/...ntegration-tests/src/main/java/com/vaadin/flow/component/dialog/tests/DialogTestPage.java
@@ -214,6 +214,13 @@ private void createResizableDraggableDialog() {
                 e -> dialog.open());
         openDialog.setId("dialog-resizable-draggable-open-button");
 
+        NativeButton setPosition = new NativeButton("set custom position",
+                e -> {
+                    dialog.setTop("100px");
+                    dialog.setLeft("200px");
+                });
+        setPosition.setId("dialog-resizable-draggable-set-position-button");
+
         NativeButton sizeRestrictions = new NativeButton(
                 "set resizing restrictions", e -> {
                     dialog.setMinWidth("175px");
@@ -223,7 +230,7 @@ private void createResizableDraggableDialog() {
                 });
         sizeRestrictions.setId("dialog-resizing-restrictions-button");
 
-        add(openDialog, message, sizeRestrictions);
+        add(openDialog, setPosition, message, sizeRestrictions);
     }
 
     private void changeDialogDimensions() {

diff --git a/...egration-tests/src/test/java/com/vaadin/flow/component/dialog/tests/DialogTestPageIT.java b/...egration-tests/src/test/java/com/vaadin/flow/component/dialog/tests/DialogTestPageIT.java
@@ -440,6 +440,18 @@ public void draggableDialog_shouldAllowDraggingFromDivContainer() {
         Assert.assertNotEquals(overlayTop, overlay.getCssValue("top"));
     }
 
+    @Test
+    public void setDialogPosition() {
+        findElement(By.id("dialog-resizable-draggable-set-position-button"))
+                .click();
+        findElement(By.id("dialog-resizable-draggable-open-button")).click();
+
+        TestBenchElement dialogOverlay = $("*").id("overlay");
+        TestBenchElement overlay = dialogOverlay.$("*").id("overlay");
+        Assert.assertEquals("100px", overlay.getCssValue("top"));
+        Assert.assertEquals("200px", overlay.getCssValue("left"));
+    }
+
     /**
      * Get the number for a css value with px suffix
      *

diff --git a/...flow-parent/vaadin-dialog-flow/src/main/java/com/vaadin/flow/component/dialog/Dialog.java b/...flow-parent/vaadin-dialog-flow/src/main/java/com/vaadin/flow/component/dialog/Dialog.java
@@ -138,6 +138,54 @@ public DialogCloseActionEvent(Dialog source, boolean fromClient) {
         }
     }
 
+    /**
+     * Gets the top position of the overlay.
+     *
+     * @return the top position of the overlay
+     */
+    public String getTop() {
+        return getElement().getProperty("top");
+    }
+
+    /**
+     * Sets the top position of the overlay. If a unitless number is provided,
+     * pixels are assumed.
+     * <p>
+     * Note that the overlay top edge may not be the same as the viewport top
+     * edge (e.g. the "Lumo" theme defines some spacing to prevent the overlay
+     * from stretching all the way to the top of the viewport).
+     *
+     * @param top
+     *            the top position of the overlay
+     */
+    public void setTop(String top) {
+        getElement().setProperty("top", top);
+    }
+
+    /**
+     * Gets the left position of the overlay.
+     *
+     * @return the left position of the overlay
+     */
+    public String getLeft() {
+        return getElement().getProperty("left");
+    }
+
+    /**
+     * Sets the distance of the overlay from the left of its container. If a
+     * unitless number is provided, pixels are assumed.
+     * <p>
+     * Note that the overlay left edge may not be the same as the viewport left
+     * edge (e.g. the "Lumo" theme defines some spacing to prevent the overlay
+     * from stretching all the way to the left of the viewport).
+     *
+     * @param left
+     *            the left position of the overlay
+     */
+    public void setLeft(String left) {
+        getElement().setProperty("left", left);
+    }
+
     /**
      * `resize` event is sent when the user finishes resizing the overlay.
      */

diff --git a/...-parent/vaadin-dialog-flow/src/test/java/com/vaadin/flow/component/dialog/DialogTest.java b/...-parent/vaadin-dialog-flow/src/test/java/com/vaadin/flow/component/dialog/DialogTest.java
@@ -382,6 +382,16 @@ public void open_close_notAutoAttachedInBeforeClientResponse() {
         Assert.assertNull(dialog.getElement().getParent());
     }
 
+    @Test
+    public void position_setTopLeft_positionIsDefined() {
+        Dialog dialog = new Dialog();
+        dialog.setTop("10px");
+        dialog.setLeft("20px");
+
+        Assert.assertEquals("10px", dialog.getTop());
+        Assert.assertEquals("20px", dialog.getLeft());
+    }
+
     private void fakeClientResponse() {
         ui.getInternals().getStateTree().runExecutionsBeforeClientResponse();
         ui.getInternals().getStateTree().collectChanges(ignore -> {