From c1f9a76e1ed0ea7a9181bb8b5117224dcd8389a1 Mon Sep 17 00:00:00 2001
From: mkpaz <quizynox@gmail.com>
Date: Mon, 29 May 2023 20:58:51 +0400
Subject: [PATCH] Add Notification control

---
 .../java/atlantafx/base/controls/Message.java |   5 +-
 .../atlantafx/base/controls/MessageSkin.java  |   4 +-
 .../atlantafx/base/controls/Notification.java | 168 +++++++++++++
 .../base/controls/NotificationSkin.java       | 176 ++++++++++++++
 .../atlantafx/base/controls/TileSkin.java     |   2 +-
 .../atlantafx/base/controls/TileSkinBase.java |  16 +-
 .../atlantafx/sampler/layout/MainModel.java   |   5 +-
 .../java/atlantafx/sampler/layout/Nav.java    |   2 +
 .../page/components/NotificationPage.java     | 227 ++++++++++++++++++
 .../atlantafx/sampler/images/info_32.png      | Bin 0 -> 1104 bytes
 .../atlantafx/sampler/images/warning_32.png   | Bin 0 -> 1969 bytes
 styles/src/components/_index.scss             |   1 +
 styles/src/components/_message.scss           |  10 +-
 styles/src/components/_modal-pane.scss        |   7 +-
 styles/src/components/_notification.scss      | 159 ++++++++++++
 styles/src/nord-dark.scss                     |  12 +
 styles/src/nord-light.scss                    |  12 +
 17 files changed, 782 insertions(+), 24 deletions(-)
 create mode 100644 base/src/main/java/atlantafx/base/controls/Notification.java
 create mode 100644 base/src/main/java/atlantafx/base/controls/NotificationSkin.java
 create mode 100644 sampler/src/main/java/atlantafx/sampler/page/components/NotificationPage.java
 create mode 100644 sampler/src/main/resources/atlantafx/sampler/images/info_32.png
 create mode 100644 sampler/src/main/resources/atlantafx/sampler/images/warning_32.png
 create mode 100644 styles/src/components/_notification.scss

diff --git a/base/src/main/java/atlantafx/base/controls/Message.java b/base/src/main/java/atlantafx/base/controls/Message.java
index 4af7c12..d5f3cdd 100644
--- a/base/src/main/java/atlantafx/base/controls/Message.java
+++ b/base/src/main/java/atlantafx/base/controls/Message.java
@@ -72,10 +72,7 @@ public class Message extends TileBase {
     }
 
     /**
-     * The property representing the user specified close handler. Note that
-     * if you have also specified the ModalPane instance or CSS selector, this
-     * handler will be executed after the default close handler. Therefore, you
-     * can use it to perform arbitrary actions on dialog close.
+     * The property representing the user specified close handler.
      */
     protected final ObjectProperty<EventHandler<? super Event>> onClose =
         new SimpleObjectProperty<>(this, "onClose");
diff --git a/base/src/main/java/atlantafx/base/controls/MessageSkin.java b/base/src/main/java/atlantafx/base/controls/MessageSkin.java
index 186f47d..c3c05c7 100644
--- a/base/src/main/java/atlantafx/base/controls/MessageSkin.java
+++ b/base/src/main/java/atlantafx/base/controls/MessageSkin.java
@@ -27,7 +27,7 @@ public class MessageSkin extends TileSkinBase<Message> {
             o -> pseudoClassStateChanged(Styles.STATE_INTERACTIVE, getSkinnable().getActionHandler() != null)
         );
 
-        root.setOnMouseClicked(e -> {
+        container.setOnMouseClicked(e -> {
             if (getSkinnable().getActionHandler() != null) {
                 getSkinnable().getActionHandler().run();
             }
@@ -65,7 +65,7 @@ public class MessageSkin extends TileSkinBase<Message> {
             layoutInArea(closeButton, w - lb.getWidth() - 5, 5, lb.getWidth(), lb.getHeight(), -1, HPos.RIGHT,
                 VPos.TOP);
         }
-        layoutInArea(root, x, y, w, h, -1, HPos.CENTER, VPos.CENTER);
+        layoutInArea(container, x, y, w, h, -1, HPos.CENTER, VPos.CENTER);
     }
 
     @Override
diff --git a/base/src/main/java/atlantafx/base/controls/Notification.java b/base/src/main/java/atlantafx/base/controls/Notification.java
new file mode 100644
index 0000000..0f6dd61
--- /dev/null
+++ b/base/src/main/java/atlantafx/base/controls/Notification.java
@@ -0,0 +1,168 @@
+/* SPDX-License-Identifier: MIT */
+
+package atlantafx.base.controls;
+
+import javafx.beans.NamedArg;
+import javafx.beans.property.ObjectProperty;
+import javafx.beans.property.ReadOnlyObjectProperty;
+import javafx.beans.property.ReadOnlyObjectWrapper;
+import javafx.beans.property.SimpleObjectProperty;
+import javafx.beans.property.SimpleStringProperty;
+import javafx.beans.property.StringProperty;
+import javafx.collections.FXCollections;
+import javafx.collections.ObservableList;
+import javafx.event.Event;
+import javafx.event.EventHandler;
+import javafx.scene.Node;
+import javafx.scene.control.Button;
+import javafx.scene.control.Control;
+import javafx.scene.control.MenuItem;
+import javafx.scene.control.Skin;
+import javafx.scene.layout.Region;
+import org.jetbrains.annotations.Nullable;
+
+/**
+ * The Notification control is intended for displaying alerts and messages
+ * to users as pop-ups. It's customizable with different colors and icons,
+ * can contain a graphic or image, along with the message and additional actions
+ * for users to take. The purpose of this control is to immediately notify users
+ * of significant events and provide them with quick access to related actions without
+ * interrupting their workflow.
+ */
+public class Notification extends Control {
+
+    public Notification() {
+        this(null, null);
+    }
+
+    public Notification(@Nullable @NamedArg("message") String message) {
+        this(message, null);
+    }
+
+    public Notification(@Nullable @NamedArg("message") String message,
+                        @Nullable @NamedArg("graphic") Node graphic) {
+        super();
+
+        setMessage(message);
+        setGraphic(graphic);
+
+        // set reasonable default width
+        setPrefWidth(400);
+        setMaxWidth(Region.USE_PREF_SIZE);
+
+        getStyleClass().add("notification");
+    }
+
+    @Override
+    protected Skin<?> createDefaultSkin() {
+        return new NotificationSkin(this);
+    }
+
+    ///////////////////////////////////////////////////////////////////////////
+    // Properties                                                            //
+    ///////////////////////////////////////////////////////////////////////////
+
+    /**
+     * Represents an optional graphical component that can be displayed alongside
+     * the notification message.
+     */
+    private final ObjectProperty<Node> graphic = new SimpleObjectProperty<>(this, "graphic");
+
+    public Node getGraphic() {
+        return graphic.get();
+    }
+
+    public ObjectProperty<Node> graphicProperty() {
+        return graphic;
+    }
+
+    public void setGraphic(Node graphic) {
+        this.graphic.set(graphic);
+    }
+
+    /**
+     * Stores a short text message that will be displayed to users when the
+     * notification appears. This property doesn't support the formatted text.
+     */
+    private final StringProperty message = new SimpleStringProperty(this, "message");
+
+    public String getMessage() {
+        return message.get();
+    }
+
+    public StringProperty messageProperty() {
+        return message;
+    }
+
+    public void setMessage(String message) {
+        this.message.set(message);
+    }
+
+    /**
+     * Specifies the primary actions associated with this notification.
+     *
+     * <p>This property is used to store one or more action buttons that will
+     * be displayed at the bottom of the notification when it appears.
+     */
+    private final ReadOnlyObjectWrapper<ObservableList<Button>> primaryActions =
+        new ReadOnlyObjectWrapper<>(this, "primaryActions", FXCollections.observableArrayList());
+
+    public ObservableList<Button> getPrimaryActions() {
+        return primaryActions.get();
+    }
+
+    public ReadOnlyObjectProperty<ObservableList<Button>> primaryActionsProperty() {
+        return primaryActions.getReadOnlyProperty();
+    }
+
+    public void setPrimaryActions(ObservableList<Button> buttons) {
+        this.primaryActions.set(buttons);
+    }
+
+    public void setPrimaryActions(Button... buttons) {
+        getPrimaryActions().setAll(buttons);
+    }
+
+    /**
+     * Specifies the secondary actions associated with this notification.
+     *
+     * <p>This property is used to store one or more menu items that will be displayed
+     * as a dropdown menu at the top corner of the notification when it appears.
+     */
+    private final ReadOnlyObjectWrapper<ObservableList<MenuItem>> secondaryActions =
+        new ReadOnlyObjectWrapper<>(this, "secondaryActions", FXCollections.observableArrayList());
+
+    public ObservableList<MenuItem> getSecondaryActions() {
+        return secondaryActions.get();
+    }
+
+    public ReadOnlyObjectProperty<ObservableList<MenuItem>> secondaryActionsProperty() {
+        return secondaryActions.getReadOnlyProperty();
+    }
+
+    public void setSecondaryActions(ObservableList<MenuItem> items) {
+        this.secondaryActions.set(items);
+    }
+
+    public void setSecondaryActions(MenuItem... items) {
+        getSecondaryActions().setAll(items);
+    }
+
+    /**
+     * Specifies the close handler used to dismiss this notification.
+     */
+    protected final ObjectProperty<EventHandler<? super Event>> onClose =
+        new SimpleObjectProperty<>(this, "onClose");
+
+    public EventHandler<? super Event> getOnClose() {
+        return onClose.get();
+    }
+
+    public ObjectProperty<EventHandler<? super Event>> onCloseProperty() {
+        return onClose;
+    }
+
+    public void setOnClose(EventHandler<? super Event> onClose) {
+        this.onClose.set(onClose);
+    }
+}
diff --git a/base/src/main/java/atlantafx/base/controls/NotificationSkin.java b/base/src/main/java/atlantafx/base/controls/NotificationSkin.java
new file mode 100644
index 0000000..d4edf7b
--- /dev/null
+++ b/base/src/main/java/atlantafx/base/controls/NotificationSkin.java
@@ -0,0 +1,176 @@
+/* SPDX-License-Identifier: MIT */
+
+package atlantafx.base.controls;
+
+import javafx.beans.binding.Bindings;
+import javafx.beans.value.ChangeListener;
+import javafx.event.Event;
+import javafx.geometry.Insets;
+import javafx.geometry.Pos;
+import javafx.scene.Node;
+import javafx.scene.control.ButtonBar;
+import javafx.scene.control.ContextMenu;
+import javafx.scene.control.SkinBase;
+import javafx.scene.layout.HBox;
+import javafx.scene.layout.Priority;
+import javafx.scene.layout.Region;
+import javafx.scene.layout.StackPane;
+import javafx.scene.layout.VBox;
+import javafx.scene.text.Text;
+import javafx.scene.text.TextFlow;
+
+public class NotificationSkin extends SkinBase<Notification> {
+
+    protected final VBox container = new VBox();
+    protected final HBox header = new HBox();
+
+    protected final StackPane graphicSlot = new StackPane();
+    protected final ChangeListener<Node> graphicSlotListener = new SlotListener(graphicSlot);
+    protected final TextFlow messageText = new TextFlow();
+
+    protected final StackPane closeButton = new StackPane();
+    protected final StackPane closeButtonIcon = new StackPane();
+    protected final StackPane menuButton = new StackPane();
+    protected final StackPane menuButtonIcon = new StackPane();
+    protected final ContextMenu actionsMenu = new ContextMenu();
+    protected final HBox actionsBox = new HBox();
+
+    protected final ButtonBar buttonBar = new ButtonBar();
+
+    protected NotificationSkin(Notification control) {
+        super(control);
+
+        // == GRAPHIC ==
+
+        graphicSlot.getStyleClass().add("graphic");
+        control.graphicProperty().addListener(graphicSlotListener);
+        graphicSlotListener.changed(control.graphicProperty(), null, control.getGraphic());
+
+        // == MESSAGE ==
+
+        messageText.getStyleClass().add("message");
+        HBox.setHgrow(messageText, Priority.ALWAYS);
+
+        setMessageText();
+        registerChangeListener(control.messageProperty(), o -> setMessageText());
+
+        // text wrapping won't work without this
+        messageText.setMaxWidth(Region.USE_PREF_SIZE);
+        messageText.setMinHeight(Region.USE_PREF_SIZE);
+
+        // == TOP BUTTONS ==
+
+        menuButton.getStyleClass().add("secondary-menu-button");
+        menuButton.getChildren().setAll(menuButtonIcon);
+        menuButton.setOnMouseClicked(e -> actionsMenu.show(
+            menuButton,
+            menuButton.localToScreen(menuButton.getLayoutBounds()).getMinX(),
+            menuButton.localToScreen(menuButton.getLayoutBounds()).getMaxY()
+        ));
+        menuButton.setVisible(!getSkinnable().getSecondaryActions().isEmpty());
+        menuButton.setManaged(!getSkinnable().getSecondaryActions().isEmpty());
+        menuButtonIcon.getStyleClass().add("icon");
+
+        Bindings.bindContent(actionsMenu.getItems(), getSkinnable().getSecondaryActions());
+        registerListChangeListener(actionsMenu.getItems(), o -> {
+            menuButton.setVisible(!getSkinnable().getSecondaryActions().isEmpty());
+            menuButton.setManaged(!getSkinnable().getSecondaryActions().isEmpty());
+        });
+
+        closeButton.getStyleClass().add("close-button");
+        closeButton.getChildren().setAll(closeButtonIcon);
+        closeButton.setOnMouseClicked(e -> handleClose());
+        closeButton.setVisible(control.getOnClose() != null);
+        closeButton.setManaged(control.getOnClose() != null);
+        closeButtonIcon.getStyleClass().add("icon");
+
+        registerChangeListener(control.onCloseProperty(), o -> {
+            closeButton.setVisible(getSkinnable().getOnClose() != null);
+            closeButton.setManaged(getSkinnable().getOnClose() != null);
+        });
+
+        actionsBox.getStyleClass().add("actions");
+        actionsBox.getChildren().setAll(menuButton, closeButton);
+        actionsBox.setFillHeight(false);
+        HBox.setMargin(actionsBox, new Insets(-8, -8, 0, 0));
+
+        // == HEADER ==
+
+        // use pref size for slots, or they will be resized
+        // to the bare minimum due to Priority.ALWAYS
+        graphicSlot.setMinWidth(Region.USE_PREF_SIZE);
+        actionsBox.setMinWidth(Region.USE_PREF_SIZE);
+
+        // do not resize children or container won't restore
+        // to its original size after expanding
+        header.setFillHeight(false);
+        header.getStyleClass().add("header");
+        header.getChildren().setAll(graphicSlot, messageText, actionsBox);
+        header.setAlignment(Pos.TOP_LEFT);
+
+        // == BUTTON BAR ==
+
+        buttonBar.getStyleClass().add("button-bar");
+        buttonBar.setVisible(!getSkinnable().getPrimaryActions().isEmpty());
+        buttonBar.setManaged(!getSkinnable().getPrimaryActions().isEmpty());
+
+        Bindings.bindContent(buttonBar.getButtons(), getSkinnable().getPrimaryActions());
+        registerListChangeListener(buttonBar.getButtons(), o -> {
+            buttonBar.setVisible(!getSkinnable().getPrimaryActions().isEmpty());
+            buttonBar.setManaged(!getSkinnable().getPrimaryActions().isEmpty());
+        });
+
+        // == CONTAINER ==
+
+        container.getChildren().setAll(header, buttonBar);
+        container.getStyleClass().add("container");
+        getChildren().setAll(container);
+    }
+
+    protected void setMessageText() {
+        if (!messageText.getChildren().isEmpty()) {
+            messageText.getChildren().clear();
+        }
+        if (getSkinnable().getMessage() != null && !getSkinnable().getMessage().isBlank()) {
+            messageText.getChildren().setAll(new Text(getSkinnable().getMessage()));
+        }
+    }
+
+    protected void handleClose() {
+        if (getSkinnable().getOnClose() != null) {
+            getSkinnable().getOnClose().handle(new Event(Event.ANY));
+        }
+    }
+
+    protected double calcHeight() {
+        var messageHeight = messageText.getBoundsInLocal().getHeight();
+
+        return Math.max(Math.max(graphicSlot.getHeight(), actionsBox.getHeight()), messageHeight)
+            + (buttonBar.isManaged() ? buttonBar.getHeight() + container.getSpacing() : 0)
+            + header.getPadding().getTop()
+            + header.getPadding().getBottom()
+            + container.getPadding().getTop()
+            + container.getPadding().getBottom();
+    }
+
+    @Override
+    protected double computeMinHeight(double width, double topInset, double rightInset,
+                                      double bottomInset, double leftInset) {
+        return calcHeight();
+    }
+
+    @Override
+    public void dispose() {
+        Bindings.unbindContent(actionsMenu.getItems(), getSkinnable().getSecondaryActions());
+        unregisterListChangeListeners(actionsMenu.getItems());
+
+        Bindings.unbindContent(buttonBar.getButtons(), getSkinnable().getPrimaryActions());
+        unregisterListChangeListeners(buttonBar.getButtons());
+
+        getSkinnable().graphicProperty().removeListener(graphicSlotListener);
+        unregisterChangeListeners(getSkinnable().messageProperty());
+        unregisterChangeListeners(getSkinnable().onCloseProperty());
+
+        super.dispose();
+    }
+}
diff --git a/base/src/main/java/atlantafx/base/controls/TileSkin.java b/base/src/main/java/atlantafx/base/controls/TileSkin.java
index e2aa1a3..223d095 100644
--- a/base/src/main/java/atlantafx/base/controls/TileSkin.java
+++ b/base/src/main/java/atlantafx/base/controls/TileSkin.java
@@ -18,7 +18,7 @@ public class TileSkin extends TileSkinBase<Tile> {
             o -> pseudoClassStateChanged(Styles.STATE_INTERACTIVE, getSkinnable().getActionHandler() != null)
         );
 
-        root.setOnMouseClicked(e -> {
+        container.setOnMouseClicked(e -> {
             if (getSkinnable().getActionHandler() != null) {
                 getSkinnable().getActionHandler().run();
             }
diff --git a/base/src/main/java/atlantafx/base/controls/TileSkinBase.java b/base/src/main/java/atlantafx/base/controls/TileSkinBase.java
index 27ba0ba..e068b17 100644
--- a/base/src/main/java/atlantafx/base/controls/TileSkinBase.java
+++ b/base/src/main/java/atlantafx/base/controls/TileSkinBase.java
@@ -22,7 +22,7 @@ public abstract class TileSkinBase<T extends TileBase> extends SkinBase<T> {
     protected static final PseudoClass HAS_DESCRIPTION = PseudoClass.getPseudoClass("has-description");
     protected static final PseudoClass HAS_ACTION = PseudoClass.getPseudoClass("has-action");
 
-    protected final HBox root = new HBox();
+    protected final HBox container = new HBox();
     protected final StackPane graphicSlot;
     protected final ChangeListener<Node> graphicSlotListener;
     protected final VBox headerBox;
@@ -90,17 +90,17 @@ public abstract class TileSkinBase<T extends TileBase> extends SkinBase<T> {
         graphicSlot.setMinWidth(Region.USE_PREF_SIZE);
         actionSlot.setMinWidth(Region.USE_PREF_SIZE);
 
-        // label text wrapping inside VBox won't work without this
+        // text wrapping inside VBox won't work without this
         descriptionText.setMaxWidth(Region.USE_PREF_SIZE);
         descriptionText.setMinHeight(Region.USE_PREF_SIZE);
 
         // do not resize children or container won't restore
         // to its original size after expanding
-        root.setFillHeight(false);
+        container.setFillHeight(false);
 
-        root.getChildren().setAll(graphicSlot, headerBox, actionSlot);
-        root.getStyleClass().add("container");
-        getChildren().setAll(root);
+        container.getChildren().setAll(graphicSlot, headerBox, actionSlot);
+        container.getStyleClass().add("container");
+        getChildren().setAll(container);
     }
 
     protected void setDescriptionText() {
@@ -120,8 +120,8 @@ public abstract class TileSkinBase<T extends TileBase> extends SkinBase<T> {
             + (descriptionText.isManaged() ? descriptionText.getBoundsInLocal().getHeight() : 0);
 
         return Math.max(Math.max(graphicSlot.getHeight(), actionSlot.getHeight()), headerHeight)
-            + root.getPadding().getTop()
-            + root.getPadding().getBottom();
+            + container.getPadding().getTop()
+            + container.getPadding().getBottom();
     }
 
     @Override
diff --git a/sampler/src/main/java/atlantafx/sampler/layout/MainModel.java b/sampler/src/main/java/atlantafx/sampler/layout/MainModel.java
index e463ba8..d33080f 100644
--- a/sampler/src/main/java/atlantafx/sampler/layout/MainModel.java
+++ b/sampler/src/main/java/atlantafx/sampler/layout/MainModel.java
@@ -9,7 +9,6 @@ import atlantafx.sampler.event.DefaultEventBus;
 import atlantafx.sampler.event.NavEvent;
 import atlantafx.sampler.page.Page;
 import atlantafx.sampler.page.components.AccordionPage;
-import atlantafx.sampler.page.general.AnimationsPage;
 import atlantafx.sampler.page.components.BreadcrumbsPage;
 import atlantafx.sampler.page.components.ButtonPage;
 import atlantafx.sampler.page.components.CalendarPage;
@@ -31,6 +30,7 @@ import atlantafx.sampler.page.components.MenuBarPage;
 import atlantafx.sampler.page.components.MenuButtonPage;
 import atlantafx.sampler.page.components.MessagePage;
 import atlantafx.sampler.page.components.ModalPanePage;
+import atlantafx.sampler.page.components.NotificationPage;
 import atlantafx.sampler.page.components.PaginationPage;
 import atlantafx.sampler.page.components.PopoverPage;
 import atlantafx.sampler.page.components.ProgressIndicatorPage;
@@ -52,6 +52,7 @@ import atlantafx.sampler.page.components.ToolBarPage;
 import atlantafx.sampler.page.components.TooltipPage;
 import atlantafx.sampler.page.components.TreeTableViewPage;
 import atlantafx.sampler.page.components.TreeViewPage;
+import atlantafx.sampler.page.general.AnimationsPage;
 import atlantafx.sampler.page.general.BBCodePage;
 import atlantafx.sampler.page.general.IconsPage;
 import atlantafx.sampler.page.general.ThemePage;
@@ -161,6 +162,7 @@ public class MainModel {
         feedback.getChildren().setAll(
             NAV_TREE.get(DialogPage.class),
             NAV_TREE.get(MessagePage.class),
+            NAV_TREE.get(NotificationPage.class),
             NAV_TREE.get(ProgressIndicatorPage.class),
             NAV_TREE.get(TooltipPage.class)
         );
@@ -268,6 +270,7 @@ public class MainModel {
         );
         map.put(MessagePage.class, NavTree.Item.page(MessagePage.NAME, MessagePage.class));
         map.put(ModalPanePage.class, NavTree.Item.page(ModalPanePage.NAME, ModalPanePage.class));
+        map.put(NotificationPage.class, NavTree.Item.page(NotificationPage.NAME, NotificationPage.class));
         map.put(PaginationPage.class, NavTree.Item.page(PaginationPage.NAME, PaginationPage.class));
         map.put(PopoverPage.class, NavTree.Item.page(PopoverPage.NAME, PopoverPage.class));
         map.put(ProgressIndicatorPage.class, NavTree.Item.page(
diff --git a/sampler/src/main/java/atlantafx/sampler/layout/Nav.java b/sampler/src/main/java/atlantafx/sampler/layout/Nav.java
index 10cdeb4..95c7b7c 100644
--- a/sampler/src/main/java/atlantafx/sampler/layout/Nav.java
+++ b/sampler/src/main/java/atlantafx/sampler/layout/Nav.java
@@ -11,6 +11,7 @@ import atlantafx.sampler.page.components.DeckPanePage;
 import atlantafx.sampler.page.components.InputGroupPage;
 import atlantafx.sampler.page.components.MessagePage;
 import atlantafx.sampler.page.components.ModalPanePage;
+import atlantafx.sampler.page.components.NotificationPage;
 import atlantafx.sampler.page.components.PopoverPage;
 import atlantafx.sampler.page.components.TilePage;
 import atlantafx.sampler.page.components.ToggleSwitchPage;
@@ -39,6 +40,7 @@ record Nav(String title,
         InputGroupPage.class,
         MessagePage.class,
         ModalPanePage.class,
+        NotificationPage.class,
         PopoverPage.class,
         TilePage.class,
         ToggleSwitchPage.class
diff --git a/sampler/src/main/java/atlantafx/sampler/page/components/NotificationPage.java b/sampler/src/main/java/atlantafx/sampler/page/components/NotificationPage.java
new file mode 100644
index 0000000..f5d7c20
--- /dev/null
+++ b/sampler/src/main/java/atlantafx/sampler/page/components/NotificationPage.java
@@ -0,0 +1,227 @@
+/* SPDX-License-Identifier: MIT */
+
+package atlantafx.sampler.page.components;
+
+import atlantafx.base.controls.Notification;
+import atlantafx.base.theme.Styles;
+import atlantafx.base.util.Animations;
+import atlantafx.base.util.BBCodeParser;
+import atlantafx.sampler.Resources;
+import atlantafx.sampler.page.ExampleBox;
+import atlantafx.sampler.page.OutlinePage;
+import atlantafx.sampler.page.Snippet;
+import java.net.URI;
+import javafx.geometry.Insets;
+import javafx.geometry.Pos;
+import javafx.scene.Node;
+import javafx.scene.control.Button;
+import javafx.scene.control.MenuItem;
+import javafx.scene.image.Image;
+import javafx.scene.image.ImageView;
+import javafx.scene.layout.Region;
+import javafx.scene.layout.StackPane;
+import javafx.scene.layout.VBox;
+import javafx.util.Duration;
+import org.kordamp.ikonli.javafx.FontIcon;
+import org.kordamp.ikonli.material2.Material2OutlinedAL;
+
+public class NotificationPage extends OutlinePage {
+
+    public static final String NAME = "Notification";
+
+    @Override
+    public String getName() {
+        return NAME;
+    }
+
+    @Override
+    public URI getJavadocUri() {
+        return URI.create(String.format(AFX_JAVADOC_URI_TEMPLATE, "controls/" + getName()));
+    }
+
+    public NotificationPage() {
+        super();
+
+        addPageHeader();
+        addFormattedText("""
+            The [i]Notification[/i] control is intended for displaying alerts and messages \
+            to users as pop-ups. It's customizable with different colors and icons, can contain \
+            a graphic or image, along with the message and additional actions for users to take."""
+        );
+        addSection("Usage", usageExample());
+        addSection("Actions", actionsExample());
+        addSection("Intent", intentExample());
+        addSection("Popup", popupExample());
+        addSection("Elevation", elevationExample());
+    }
+
+    private Node usageExample() {
+        //snippet_1:start
+        var ntf1 = new Notification(
+            FAKER.lorem().sentence(15)
+        );
+        ntf1.getStyleClass().add(Styles.ELEVATED_1);
+        var icon1 = new ImageView(new Image(
+            Resources.getResourceAsStream("images/warning_32.png")
+        ));
+        ntf1.setGraphic(icon1);
+
+        var ntf2 = new Notification(FAKER.lorem().sentence(15));
+        ntf2.getStyleClass().add(Styles.ELEVATED_1);
+        ntf2.setOnClose(e -> Animations.flash(ntf2).playFromStart());
+        //snippet_1:end
+
+        var box = new VBox(VGAP_20, ntf1, ntf2);
+        var description = BBCodeParser.createFormattedText("""
+            The [i]Notification[/i] has no mandatory properties, but it wouldn't make \
+            sense without a message. Optionally, you can use a graphic and also make the \
+            [i]Notification[/i] closeable by providing an appropriate dismiss handler."""
+        );
+
+        return new ExampleBox(box, new Snippet(getClass(), 1), description);
+    }
+
+    private Node actionsExample() {
+        //snippet_2:start
+        var ntf = new Notification(
+            FAKER.lorem().sentence(15),
+            new FontIcon(Material2OutlinedAL.HELP_OUTLINE)
+        );
+        ntf.getStyleClass().add(Styles.ELEVATED_1);
+        ntf.setOnClose(e -> Animations.flash(ntf).playFromStart());
+
+        var yesBtn = new Button("Yes");
+        yesBtn.setDefaultButton(true);
+
+        var noBtn = new Button("No");
+
+        ntf.setPrimaryActions(yesBtn, noBtn);
+        ntf.setSecondaryActions(
+            new MenuItem("Item 1"),
+            new MenuItem("Item 2")
+        );
+        //snippet_2:end
+
+        var box = new VBox(ntf);
+        var description = BBCodeParser.createFormattedText("""
+            The notification has two slots for setting custom actions. The primary action \
+            slot appears like a [i]ButtonBar[/i] (check the Javadoc for its features, by the way) \
+            at the bottom of the notification. The secondary actions slot is the dropdown menu \
+            at the top right corner. Both slots are completely optional."""
+        );
+
+        return new ExampleBox(box, new Snippet(getClass(), 2), description);
+    }
+
+    private Node intentExample() {
+        //snippet_3:start
+        var info = new Notification(
+            FAKER.lorem().sentence(15),
+            new FontIcon(Material2OutlinedAL.HELP_OUTLINE)
+        );
+        info.getStyleClass().add(Styles.ELEVATED_1);
+        info.getStyleClass().add(Styles.ACCENT);
+        info.setOnClose(e -> Animations.flash(info).playFromStart());
+
+        var success = new Notification(
+            FAKER.lorem().sentence(15),
+            new FontIcon(Material2OutlinedAL.HELP_OUTLINE)
+        );
+        success.getStyleClass().add(Styles.ELEVATED_1);
+        success.getStyleClass().add(Styles.SUCCESS);
+        success.setOnClose(e -> Animations.flash(success).playFromStart());
+
+        var warning = new Notification(
+            FAKER.lorem().sentence(15),
+            new FontIcon(Material2OutlinedAL.HELP_OUTLINE)
+        );
+        warning.getStyleClass().add(Styles.ELEVATED_1);
+        warning.getStyleClass().add(Styles.WARNING);
+        warning.setOnClose(e -> Animations.flash(warning).playFromStart());
+
+        var danger = new Notification(
+            FAKER.lorem().sentence(15),
+            new FontIcon(Material2OutlinedAL.HELP_OUTLINE)
+        );
+        danger.getStyleClass().add(Styles.ELEVATED_1);
+        danger.getStyleClass().add(Styles.DANGER);
+        danger.setOnClose(e -> Animations.flash(danger).playFromStart());
+        //snippet_3:end
+
+        var box = new VBox(VGAP_20, info, success, warning, danger);
+        var description = BBCodeParser.createFormattedText("""
+            The [i]Notification[/i] supports colors (or intents). To set them, \
+            use the corresponding style class modifier."""
+        );
+
+        return new ExampleBox(box, new Snippet(getClass(), 3), description);
+    }
+
+    private ExampleBox popupExample() {
+        //snippet_4:start
+        final var msg = new Notification(
+            FAKER.lorem().sentence(15),
+            new FontIcon(Material2OutlinedAL.HELP_OUTLINE)
+        );
+        msg.getStyleClass().addAll(
+            Styles.ACCENT, Styles.ELEVATED_1
+        );
+        msg.setPrefHeight(Region.USE_PREF_SIZE);
+        msg.setMaxHeight(Region.USE_PREF_SIZE);
+        StackPane.setAlignment(msg, Pos.TOP_RIGHT);
+        StackPane.setMargin(msg, new Insets(10, 10, 0, 0));
+
+        var btn = new Button("Show");
+
+        msg.setOnClose(e -> {
+            var out = Animations.slideOutUp(msg, Duration.millis(250));
+            out.setOnFinished(f -> getChildren().remove(msg));
+            out.playFromStart();
+        });
+        btn.setOnAction(e -> {
+            var in = Animations.slideInDown(msg, Duration.millis(250));
+            if (!getChildren().contains(msg)) {
+                getChildren().add(msg);
+            }
+            in.playFromStart();
+        });
+        //snippet_4:end
+
+        var box = new VBox(VGAP_20, btn);
+        box.setPadding(new Insets(0, 0, 10, 0));
+        var description = BBCodeParser.createFormattedText("""
+            There isn't any special support for popup notifications, but \
+            you can easily implement it by using the [i]StackPane[/i] layout."""
+        );
+
+        return new ExampleBox(box, new Snippet(getClass(), 4), description);
+    }
+
+    private Node elevationExample() {
+        //snippet_5:start
+        var ntf1 = new Notification(
+            FAKER.lorem().sentence(15),
+            new FontIcon(Material2OutlinedAL.HELP_OUTLINE)
+        );
+        ntf1.getStyleClass().add(Styles.ELEVATED_2);
+        ntf1.setOnClose(e -> Animations.flash(ntf1).playFromStart());
+
+        var ntf2 = new Notification(
+            FAKER.lorem().sentence(15),
+            new FontIcon(Material2OutlinedAL.HELP_OUTLINE)
+        );
+        ntf2.getStyleClass().add(Styles.INTERACTIVE);
+        ntf2.setOnClose(e -> Animations.flash(ntf2).playFromStart());
+
+        //snippet_5:end
+
+        var box = new VBox(VGAP_20, ntf1, ntf2);
+        box.setPadding(new Insets(0, 0, 10, 0));
+        var description = BBCodeParser.createFormattedText("""
+            To add the raised effect to the [i]Notification[/i], use the [code]Styles.ELEVATED_N[/code] \
+            or [code]Styles.INTERACTIVE[/code] style classes."""
+        );
+
+        return new ExampleBox(box, new Snippet(getClass(), 5), description);
+    }
+}
diff --git a/sampler/src/main/resources/atlantafx/sampler/images/info_32.png b/sampler/src/main/resources/atlantafx/sampler/images/info_32.png
new file mode 100644
index 0000000000000000000000000000000000000000..69ec167b56c46afd7770d36102d2b082465f8128
GIT binary patch
literal 1104
zcmV-W1h4yvP)<h;3K|Lk000e1NJLTq001BW001Be1^@s6b9#F800004b3#c}2nYxW
zd<bNS000CBNkl<ZScUDE+fN*27{-6!?93immg6cdD-;bH3YL<zi9k|NF*X=AmWxVy
zQN2)m)p*}~{U1!c(0D_mL5-)>v>GshXxc<XOB-s0whM()PRpKW=JR5lo$a#BE`)fa
zPcq5#&V1kdJoBCA9r&+9?6yPXt#2ROOlA)mQiO#mf&fyHagUHIRRL{2`r%7=_tilC
z*{>p734Pcw<clWq8Pk;2ZtWFCY$!tf;!(t<V2$tMY6(L-8mM{myOww?`F>V6PXnG(
zMt6X&d6ds8g6f5hPhS12Yy*MeFHWUW`o~fd$~6?wc%X*J!5YGKK`Mhjyj~T6Oh#ub
zo@Qk=PIPgdg?sBrnI|IH^80;flOwNuUebVn`0Ep?Wa<i_0W>@k;zUm?o$V2V6~3}w
zJDx~0eSLxP$yt`}$L!nLP{2PB8+rLBR|Cq>=#*)god7TNw{h~h!zhYUmT)0V)8x{R
zGh80K0f6dJru5OFu7~vUgUT~s_Sxb`+8Y@h=-9J3fTAc24s>v&JpzDkm`5wmeABn1
zfppp!vUz{+Q?AJy0`PX5bu|RsjXc}?q@$6^oZ8WVf!PmG5%AK|ROgzss~$pL>*}g^
zH*lz_j*1GerD4)v)WETKu4>W{9RN*{T7+;vA{G+Gc`*nfXlksr0@Hl@*aufN`<ZH!
z`P9<mQc4Zr(Qv3R$2Lr_!b-~GizN)$Id9%t!jw|GJ-ONf%tGD>Y$c6@Hm|NKF{wDh
z<%k#NjHOeJHqVWKsuCt+@rr<k8(OPiuo*N3*3xkCPe|zQ2J&;N5Vm=41f&ptn`@f;
z$@@f=B@R&QgGkU_96(c@ocUUN+T=ek!+gw%%lV|r{J?N%&VZ0IW%F#-zzrK2YZ2}S
zy6)r@ildb?pu>vI6UprEvX_DUoVxC4<qU*;{so(FY$o^J!1|`MT|z-eD`%j&r*2LW
zA`7s*62lDw2>YEl>@U3z?yqcFeTB$2_ted8GjQ$P@hl$k2f*EhHKde<IdbSd0No8v
z+}&W^+X<$W+=;GP1{8k3cJ6p?J|5Zy9>f?xJdt7k&MsG(3+8V>Ad$2V8IPij<v&yN
z1E0@3n$?r<0*p<}($ZY~D>HEq7UIrXkTqe>W!A<fW^>%HYNPo}eB0EiL!-ayhItfV
zps$US&mYFK$C|(}O}_tOhRfqtL85q+DYKv;Q42c-yx#M%e@e0|<2RU|iPG2IN@vIJ
zO0wUsM;V{I#d2Or=Jk5drwZEcp(w4UzOIr`K~Wlur+KitMRakaSWz1D`_(s+Bd?V%
zN^MwWdFs8aZk(pbNR<g)Q<YDHp}>Xpj|S(8H7M`LBx$~G=*G!^^~Yo<?DwzP|M(kQ
W0GNBgq4#?L0000<MNUMnLSTYsX&<xz

literal 0
HcmV?d00001

diff --git a/sampler/src/main/resources/atlantafx/sampler/images/warning_32.png b/sampler/src/main/resources/atlantafx/sampler/images/warning_32.png
new file mode 100644
index 0000000000000000000000000000000000000000..0e38b8437e36fbefdc5b3c97c40cb1e9f230de4c
GIT binary patch
literal 1969
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
DCy2eT

literal 0
HcmV?d00001

diff --git a/styles/src/components/_index.scss b/styles/src/components/_index.scss
index f1dd020..1492b9d 100755
--- a/styles/src/components/_index.scss
+++ b/styles/src/components/_index.scss
@@ -19,6 +19,7 @@
 @use "menu-button";
 @use "message";
 @use "modal-pane";
+@use "notification";
 @use "pagination";
 @use "popover";
 @use "progress";
diff --git a/styles/src/components/_message.scss b/styles/src/components/_message.scss
index 7a321f5..9558472 100644
--- a/styles/src/components/_message.scss
+++ b/styles/src/components/_message.scss
@@ -38,9 +38,8 @@ $color-border-danger:           -color-danger-muted     !default;
 $color-border-danger-hover:     -color-danger-emphasis  !default;
 $color-button-danger-bg-hover:  -color-danger-muted     !default;
 
-$close-button-radius:         100px !default;
-$close-button-padding:        0.6em !default;
-$close-button-icon-size:      0.3em !default;
+$close-button-radius:   100px !default;
+$close-button-padding:  0.5em; // private variable
 
 .message {
 
@@ -147,11 +146,12 @@ $close-button-icon-size:      0.3em !default;
     >.icon {
       @include icons.get("close", true);
       -fx-background-color: -color-message-fg-primary;
-      -fx-padding: $close-button-icon-size;
+      -fx-padding: 0.3em;
     }
 
     &:hover {
-      -fx-background-color: -color-message-button-hover;
+      -fx-background-color: -color-message-border, -color-message-button-hover;
+      -fx-background-insets: 0, 1;
     }
   }
 
diff --git a/styles/src/components/_modal-pane.scss b/styles/src/components/_modal-pane.scss
index 172f2c2..f00b683 100644
--- a/styles/src/components/_modal-pane.scss
+++ b/styles/src/components/_modal-pane.scss
@@ -7,8 +7,8 @@ $color-modal-bg:  rgba(0, 0, 0, 0.25) !default;
 $color-dialog-bg:             -color-bg-default !default;
 $color-dialog-close-fg:       -color-fg-default !default;
 $color-dialog-close-bg-hover: -color-bg-subtle  !default;
-$close-button-radius:    100px !default;
-$close-button-padding:   0.6em !default;
+$close-button-radius:    100px  !default;
+$close-button-padding:   0.6em  !default;
 $close-button-icon-size: 0.3em !default;
 
 .modal-pane {
@@ -38,7 +38,8 @@ $close-button-icon-size: 0.3em !default;
     }
 
     &:hover {
-      -fx-background-color: -color-modal-box-close-bg-hover;
+      -fx-background-color: -color-border-muted, -color-modal-box-close-bg-hover;
+      -fx-background-insets: 0, 1;
     }
   }
 
diff --git a/styles/src/components/_notification.scss b/styles/src/components/_notification.scss
new file mode 100644
index 0000000..88988fb
--- /dev/null
+++ b/styles/src/components/_notification.scss
@@ -0,0 +1,159 @@
+// SPDX-License-Identifier: MIT
+
+@use "../settings/config" as cfg;
+@use "../settings/effects";
+@use "../settings/icons";
+
+$color-bg:            -color-bg-subtle  !default;
+$color-fg:            -color-fg-default !default;
+$color-bg-hover:      -color-bg-default !default;
+$color-fg-hover:      -color-fg-default !default;
+$color-border:        -color-border-default  !default;
+$color-border-intent: -color-accent-emphasis !default;
+
+$padding-x:            1em    !default;
+$padding-y:            1em    !default;
+$graphic-text-gap:     0.75em !default;
+$intent-border-width:  5px    !default;
+$action-button-radius: 100px  !default;
+
+@mixin colored($color-intent) {
+  -color-notify-border-intent: $color-intent;
+
+  &>.container {
+    -fx-background-color: -color-notify-border,
+                          -color-notify-bg,
+                          -color-notify-border-intent -color-notify-bg -color-notify-bg -color-notify-bg,
+                          -color-notify-bg;
+    -fx-background-insets: 0, 1, 1, 1 1 1 (1 + $intent-border-width);
+    -fx-background-radius: cfg.$border-radius;
+
+    >.header {
+      >.graphic {
+        #{cfg.$font-icon-selector} {
+          -fx-fill: $color-intent;
+          -fx-icon-color: $color-intent;
+        }
+      }
+    }
+  }
+}
+
+.notification {
+  -color-notify-bg: $color-bg;
+  -color-notify-fg: $color-fg;
+  -color-notify-bg-hover: $color-bg-hover;
+  -color-notify-fg-hover: $color-fg-hover;
+  -color-notify-border: $color-border;
+  -color-notify-border-intent: $color-border-intent;
+
+  >.container {
+    -fx-background-color: -color-notify-border, -color-notify-bg;
+    -fx-background-insets: 0, cfg.$border-width;
+    -fx-background-radius: cfg.$border-radius;
+    -fx-spacing: $padding-y;
+    -fx-padding: 0 0 $padding-y 0;
+
+    >.header {
+      -fx-padding: $padding-y $padding-x 0 $padding-x;
+      -fx-spacing: $graphic-text-gap;
+
+      >.graphic {
+        #{cfg.$font-icon-selector} {
+          -fx-icon-size: cfg.$icon-size-larger;
+        }
+      }
+
+      >.message {
+        Text {
+          -fx-fill: -color-notify-fg;
+        }
+      }
+
+      >.actions {
+        -fx-alignment: CENTER_RIGHT;
+        -fx-spacing: 5px;
+
+        >.secondary-menu-button {
+          -fx-background-radius: $action-button-radius;
+          -fx-padding: 0.5em 0.75em 0.5em 0.75em;
+
+          >.icon {
+            @include icons.get("more-vert", true);
+            -fx-background-color: -color-notify-fg;
+            -fx-background-insets: 0;
+            -fx-padding: 0.3em 0.1em 0.3em 0.1em;
+          }
+
+          &:hover {
+            -fx-background-color: -color-border-default, -color-notify-bg-hover;
+            -fx-background-insets: 0, 1;
+
+            >.icon {
+              -fx-background-color: -color-notify-fg-hover;
+            }
+          }
+        }
+
+        >.close-button {
+          -fx-background-radius: $action-button-radius;
+          -fx-padding: 0.5em;
+
+          >.icon {
+            @include icons.get("close", true);
+            -fx-background-color: -color-notify-fg;
+            -fx-padding: 0.3em;
+          }
+
+          &:hover {
+            -fx-background-color: -color-border-default, -color-notify-bg-hover;
+            -fx-background-insets: 0, 1;
+
+            >.icon {
+              -fx-background-color: -color-notify-fg-hover;
+            }
+          }
+        }
+      }
+
+      &:disabled {
+        -fx-opacity: cfg.$opacity-disabled;
+      }
+
+    }
+
+    >.button-bar {
+      -fx-padding: 0 $padding-x 0 $padding-x;
+    }
+
+    @each $level, $radius in cfg.$elevation {
+      &.elevated-#{$level} {
+        >.container {
+          @include effects.shadow(cfg.$elevation-color, $radius);
+        }
+      }
+    }
+
+    &.interactive:hover {
+      >.container {
+        @include effects.shadow(cfg.$elevation-color, cfg.$elevation-interactive);
+      }
+    }
+  }
+
+  &.accent {
+    @include colored(-color-accent-emphasis);
+  }
+
+  &.success {
+    @include colored(-color-success-emphasis);
+  }
+
+  &.warning {
+    @include colored(-color-warning-emphasis);
+  }
+
+  &.danger {
+    @include colored(-color-danger-emphasis);
+  }
+}
diff --git a/styles/src/nord-dark.scss b/styles/src/nord-dark.scss
index 725003c..c7d6c89 100755
--- a/styles/src/nord-dark.scss
+++ b/styles/src/nord-dark.scss
@@ -153,6 +153,18 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
   $color-menubar-bg-hover: -color-base-7
 );
 
+@forward "components/message" as message-* with (
+  $close-button-radius: 0
+);
+
+@forward "components/modal-pane" as modal-pane-* with (
+  $close-button-radius: 0
+);
+
+@forward "components/notification" as notification-* with (
+  $action-button-radius: 0
+);
+
 @forward "components/pagination" as pagination-* with (
   $button-radius: 1
 );
diff --git a/styles/src/nord-light.scss b/styles/src/nord-light.scss
index ad52ff6..1041673 100755
--- a/styles/src/nord-light.scss
+++ b/styles/src/nord-light.scss
@@ -139,6 +139,18 @@ $nord16: #B48EAD; // hsl(311, 20.2, 63.1)
 
 @use "general";
 
+@forward "components/message" as message-* with (
+  $close-button-radius: 0
+);
+
+@forward "components/modal-pane" as modal-pane-* with (
+  $close-button-radius: 0
+);
+
+@forward "components/notification" as notification-* with (
+  $action-button-radius: 0
+);
+
 @forward "components/pagination" as pagination-* with (
   $button-radius: 1
 );