diff --git a/docs/ux/error-handling-loading-empty-states.md b/docs/ux/error-handling-loading-empty-states.md index 3b27ec229a..3db5b0d67d 100644 --- a/docs/ux/error-handling-loading-empty-states.md +++ b/docs/ux/error-handling-loading-empty-states.md @@ -74,7 +74,7 @@ A user has initiated an action, such as creating, updating, or deleting an item ### What To Do - Render as much as possible, keep app as a whole functional and responsive. -- Give user feedback with as much detail as possible using Messages (use Notifications once NotificationManager is implemented). +- Give user feedback with as much detail as possible using Messages or Notifications. - Do not interfere with or block other, potentially later initiated user actions. - Provide shortcuts/links to retry where and if possible. @@ -82,8 +82,6 @@ A user has initiated an action, such as creating, updating, or deleting an item > **TODO:** If async/transient state persists, show busy state ("Creating"). If too long, timeout, or positive result not to expect, change to static error state. -> **TODO:** Concept and implement NotificationsManager. - ## Validation Errors ### Examples diff --git a/docs/ux/glossary.md b/docs/ux/glossary.md index a120dd7ee4..502b8cd872 100644 --- a/docs/ux/glossary.md +++ b/docs/ux/glossary.md @@ -55,7 +55,7 @@ A dialog overlay that interrupts the current workflow to focus the user's attent A variant within a theme defining its visual appearance for a specific context or preference — such as light, dark, or high contrast. See also: Theme. **Notification** -A transient, dynamic message that appears independently of the page layout — typically as a "toast" — to inform users of events occurring outside their current focus. Not yet available; requires the NotificationsManager component. See also: Message. +A transient, dynamic message that appears independently of the page layout — typically as a "toast" — to inform users of events occurring outside their current focus. See also: Message. **Overflow Menu** A contextual menu triggered by a three-dot icon (⋮), used to surface additional actions for a specific item when displaying them inline would cause clutter or make them appear more important or often used than they actually are. diff --git a/docs/ux/messages-and-notifications.md b/docs/ux/messages-and-notifications.md index b8996943b5..fff8b4abc9 100644 --- a/docs/ux/messages-and-notifications.md +++ b/docs/ux/messages-and-notifications.md @@ -60,15 +60,47 @@ disappears. ## Notifications -> [!NOTE] -> Toast Notifications are not yet available. The NotificationsManager component -> required to display them is not yet implemented. Use Messages in the meantime. - Notifications are transient, dynamic messages that appear independently of the page layout — typically as "toasts" in a fixed position on screen. Unlike Messages, they are not tied to a specific location in the UI and dismiss automatically or on user interaction. -Notifications are suited for communicating events that occur asynchronously or -outside the user's current focus — for example, the result of a background -operation. +Use Notifications to: + +- Confirm the result of a background or asynchronous operation +- Communicate events that occur outside the user's current focus +- Provide low-interruption feedback that does not require user action + +Do not use Notifications for persistent errors or warnings that require user +attention or action. Use a [Message](#messages) placed close to the relevant +content instead. + +### Toast and NotificationManager + +Juno provides two components for notifications: + +**`NotificationManager`** handles all notification lifecycle — timers, +auto-dismiss, queuing, and screen position. Place it once near the root of your +application. + +**`Toast`** is the presentational component rendered by `NotificationManager`. +Do not use `Toast` directly — trigger notifications via the `toast()` API +instead. + +Notifications use the same semantic variants as Messages: `info`, `success`, +`warning`, `error`, and `danger`. + +### Auto-Dismiss + +Notifications auto-dismiss after a default timeout. Do not rely on auto-dismiss +alone for `error` or `warning` notifications that require user action — these should stay until acknowledged or actively dismissed. For these cases, a [Message](#messages) may be the better choice. + +### Dismissible + +By default, notifications include a close button. Dismissibility can be +configured globally on `NotificationManager` or overridden per notification. + +### Multiple Notifications + +`NotificationManager` supports displaying multiple notifications simultaneously. +Additional notifications queue and appear as others close. diff --git a/docs/ux/modals.md b/docs/ux/modals.md index 2033a714fd..020c19b299 100644 --- a/docs/ux/modals.md +++ b/docs/ux/modals.md @@ -26,7 +26,7 @@ A Modal is likely not the most suitable solution if the task… - can easily be completed at any time inline in the natural flow of the current page or view - contains excessively large or long content that would be better handled on a separate page or view - is triggered by a parent task that already runs in a Modal (never stack Modals) -- is not a task but a simple, non-essential notification or message — use Message or Notification (TBD) instead +- is not a task but a simple, non-essential notification or message — use Message or Notification instead - requires many different action buttons at the bottom. Consider using a menu of options and then using a Modal only to confirm the selected action. ## Modal Anatomy