Rename DialogPane to ModalBox due to style class name conflict

base/src/main/java/atlantafx/base/layout/ModalBox.java

@@ -15,13 +15,13 @@ import javafx.scene.layout.StackPane;
 import org.jetbrains.annotations.Nullable;
 
 /**
- * The DialogPane is a specialized control or layout designed to hold the
+ * The ModalBox is a specialized control or layout designed to hold the
  * {@link ModalPane} dialog content. It includes the close button out-of-the-box
- * and allows for the addition of arbitrary children. The DialogPane is derived
+ * and allows for the addition of arbitrary children. The ModalBox is derived
  * from the {@link AnchorPane}, so it inherits the same API. Just be sure that
  * you haven't removed the close button while using it.
  */
-public class DialogPane extends AnchorPane {
+public class ModalBox extends AnchorPane {
 
     protected final StackPane closeButton = new StackPane();
     protected final StackPane closeButtonIcon = new StackPane();
@@ -29,23 +29,23 @@ public class DialogPane extends AnchorPane {
     protected @Nullable ModalPane modalPane;
 
     /**
-     * Creates an DialogPane layout.
+     * Creates a ModalBox layout.
      */
-    public DialogPane() {
+    public ModalBox() {
         this((String) null);
     }
 
     /**
-     * Creates an DialogPane layout with the given children.
+     * Creates a ModalBox layout with the given children.
      *
      * @param children the initial set of children for this pane
      */
-    public DialogPane(Node... children) {
+    public ModalBox(Node... children) {
         this((String) null, children);
     }
 
     /**
-     * Creates a DialogPane layout with the given children and binds
+     * Creates a ModalBox layout with the given children and binds
      * the close handler to a ModalPane via CSS selector. When user clicks
      * on the close button, it performs a ModalPane lookup via the specified
      * selector and calls the {@link ModalPane#hide()} method automatically.
@@ -53,7 +53,7 @@ public class DialogPane extends AnchorPane {
      * @param selector the ModalPane pane CSS selector
      * @param children the initial set of children for this pane
      */
-    public DialogPane(@Nullable @NamedArg("selector") String selector, Node... children) {
+    public ModalBox(@Nullable @NamedArg("selector") String selector, Node... children) {
         super(children);
 
         this.selector = selector;
@@ -63,14 +63,14 @@ public class DialogPane extends AnchorPane {
     }
 
     /**
-     * Creates a DialogPane layout with the given children and binds
+     * Creates a ModalBox layout with the given children and binds
      * the close handler to a ModalPane. When user clicks on the close button,
      * it calls the {@link ModalPane#hide()} method automatically.
      *
      * @param modalPane the ModalPane pane CSS selector
      * @param children  the initial set of children for this pane
      */
-    public DialogPane(@Nullable ModalPane modalPane, Node... children) {
+    public ModalBox(@Nullable ModalPane modalPane, Node... children) {
         super(children);
 
         this.selector = null;
@@ -80,9 +80,9 @@ public class DialogPane extends AnchorPane {
     }
 
     /**
-     * Adds (prepends) specified node to the DialogPane before the close button.
+     * Adds (prepends) specified node to the ModalBox before the close button.
      *
-     * <p>Otherwise, if the added node takes up the full size of the DialogPane
+     * <p>Otherwise, if the added node takes up the full size of the ModalBox
      * and {@link Node#isMouseTransparent()} is false, then the close button
      * will not receive mouse events and therefore will not be clickable.
      *
@@ -94,7 +94,7 @@ public class DialogPane extends AnchorPane {
     }
 
     /**
-     * Manually closes the DialogPane in case one needs to use their
+     * Manually closes the ModalBox in case one needs to use their
      * own close button.
      */
     public void close() {
@@ -108,7 +108,7 @@ public class DialogPane extends AnchorPane {
 
         closeButtonIcon.getStyleClass().add("icon");
 
-        getStyleClass().add("dialog-pane");
+        getStyleClass().add("modal-box");
         getChildren().add(closeButton);
         setCloseButtonPosition();
     }

sampler/src/main/java/atlantafx/sampler/layout/ModalDialog.java

@@ -6,7 +6,7 @@ import atlantafx.base.controls.Card;
 import atlantafx.base.controls.ModalPane;
 import atlantafx.base.controls.Spacer;
 import atlantafx.base.controls.Tile;
-import atlantafx.base.layout.DialogPane;
+import atlantafx.base.layout.ModalBox;
 import javafx.geometry.Pos;
 import javafx.scene.Scene;
 import javafx.scene.control.Button;
@@ -15,7 +15,7 @@ import javafx.scene.layout.HBox;
 import javafx.scene.layout.Priority;
 import javafx.scene.layout.VBox;
 
-public abstract class ModalDialog extends DialogPane {
+public abstract class ModalDialog extends ModalBox {
 
     protected final Card content = new Card();
     protected final Tile header = new Tile();

sampler/src/main/java/atlantafx/sampler/page/components/ModalPanePage.java

@@ -4,7 +4,7 @@ package atlantafx.sampler.page.components;
 
 import atlantafx.base.controls.ModalPane;
 import atlantafx.base.controls.Tile;
-import atlantafx.base.layout.DialogPane;
+import atlantafx.base.layout.ModalBox;
 import atlantafx.base.util.BBCodeParser;
 import atlantafx.sampler.Resources;
 import atlantafx.sampler.page.ExampleBox;
@@ -70,7 +70,7 @@ public final class ModalPanePage extends OutlinePage {
         addSection("Nesting", nestingExample());
         addSection("Maximized", maximizedExample());
         addSection("Overflowed", overflowedExample());
-        addSection("DialogPane", dialogPaneExample());
+        addSection("ModalBox", modalBoxExample());
         addSection("Lightbox", lightboxExample());
     }
 
@@ -323,13 +323,13 @@ public final class ModalPanePage extends OutlinePage {
         return example;
     }
 
-    private ExampleBox dialogPaneExample() {
+    private ExampleBox modalBoxExample() {
         //snippet_8:start
         // you can use a selector
-        var dialog = new DialogPane("#modalPane");
+        var dialog = new ModalBox("#modalPane");
 
         // ... or your pass a ModalPane instance directly
-        //var dialog = new DialogPane(modalPane);
+        //var dialog = new ModalBox(modalPane);
 
         // ... or you can set your own close handler
         //dialog.setOnClose(/* whatever */);
@@ -361,7 +361,7 @@ public final class ModalPanePage extends OutlinePage {
         box.setAlignment(Pos.CENTER);
 
         var description = BBCodeParser.createFormattedText("""
-            The [i]DialogPane[/i] is a specialized control (or layout) designed to hold the \
+            The [i]ModalBox[/i] is a specialized control (or layout) designed to hold the \
             [i]ModalPane[/i] dialog content. It includes the close button out-of-the-box \
             and allows for the addition of arbitrary children."""
         );

sampler/src/main/resources/atlantafx/sampler/assets/styles/scss/layout/_root.scss

@@ -69,6 +69,8 @@
 
   .modal-dialog {
     -fx-background-color: transparent;
+    -fx-border-width: 2;
+    -fx-border-color: -color-border-default;
 
     .card {
       -fx-border-width: 0;

sampler/src/main/resources/atlantafx/sampler/assets/styles/scss/theme/_contrast-checker.scss

@@ -113,17 +113,19 @@
 }
 
 .contrast-checker-dialog {
-  -color-dialog-bg: white;
+  -color-modal-box-bg: -color-contrast-checker-bg;
-  -color-dialog-fg: black;
+  -color-modal-box-close-fg: -color-contrast-checker-fg;
-
+  -color-modal-box-close-bg-hover: derive(-color-contrast-checker-bg, 30%);
-  -color-dialog-pane-bg: -color-contrast-checker-bg;
-  -color-dialog-pane-close-fg: -color-contrast-checker-fg;
-  -color-dialog-pane-close-bg-hover: derive(-color-contrast-checker-bg, 30%);
 
   -fx-background-color: transparent;
 
+  &.modal-dialog {
+    -fx-border-width: 0;
+  }
+
   .card {
     -fx-background-color: -color-contrast-checker-bg;
+    -fx-border-width: 0;
 
     .title {
       -fx-text-fill: -color-contrast-checker-fg;

styles/src/components/_modal-pane.scss

@@ -19,13 +19,13 @@ $close-button-icon-size: 0.3em !default;
   }
 }
 
-// DialogPane is directly related to the ModalPane
+// ModalBox is directly related to the ModalPane
-.dialog-pane {
+.modal-box {
-  -color-dialog-pane-bg: $color-dialog-bg;
+  -color-modal-box-bg: $color-dialog-bg;
-  -color-dialog-pane-close-fg: $color-dialog-close-fg;
+  -color-modal-box-close-fg: $color-dialog-close-fg;
-  -color-dialog-pane-close-bg-hover: $color-dialog-close-bg-hover;
+  -color-modal-box-close-bg-hover: $color-dialog-close-bg-hover;
 
-  -fx-background-color: -color-dialog-pane-bg;
+  -fx-background-color: -color-modal-box-bg;
 
   >.close-button {
     -fx-background-radius: $close-button-radius;
@@ -33,12 +33,12 @@ $close-button-icon-size: 0.3em !default;
 
     >.icon {
       @include icons.get("close", true);
-      -fx-background-color: -color-dialog-pane-close-fg;
+      -fx-background-color: -color-modal-box-close-fg;
       -fx-padding: $close-button-icon-size;
     }
 
     &:hover {
-      -fx-background-color: -color-dialog-pane-close-bg-hover;
+      -fx-background-color: -color-modal-box-close-bg-hover;
     }
   }