Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions docs/ux/error-handling-loading-empty-states.md
Original file line number Diff line number Diff line change
Expand Up @@ -74,16 +74,14 @@ 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.

> **TODO:** Resolve open question: avoid blocking UI elements such as modals waiting for async action to complete, vs. keeping modal open with entered data when creation fails.
> **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
Expand Down
2 changes: 1 addition & 1 deletion docs/ux/glossary.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
46 changes: 39 additions & 7 deletions docs/ux/messages-and-notifications.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Comment thread
franzheidl marked this conversation as resolved.
**`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.
Comment thread
franzheidl marked this conversation as resolved.

### 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.
2 changes: 1 addition & 1 deletion docs/ux/modals.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading