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
18 changes: 18 additions & 0 deletions .changeset/6250-toast-demo-shapes.md
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
---
---

Docs and fixtures only: the seven `components-feedback-toast/*` and seven
`components-feedback-sonner/*` `SchemaExample` fixtures hung an action object off
`onClick` (`{"type":"button", …, "onClick":{"action":"toast", …}}`) — a shape
`ButtonSchema` declares as a FUNCTION and no dispatcher reads, so all fourteen were a
RED `safeParse` on the envelope and clicking the rendered demo raised no toast
(objectui#6250). They now author the registered spellings the engine already executes,
`type: 'toast'` and `type: 'sonner'`, whose renderers draw their own trigger button and
call sonner's `toast()` from it. `feedback/toast.mdx` and `feedback/sonner.mdx` follow,
including two keys sonner's page taught that neither `SonnerSchema` declares nor its
renderer reads (`duration`, `action`).

No package source or behaviour change; fixtures, docs and pins only. Two things the
fixture correction deliberately does NOT do, both left to the maintainer: declare an
action union on `ButtonSchema.onClick` and build a dispatcher for it, and give the toast
renderers the in-toast action button and promise form the removed demos implied.
23 changes: 14 additions & 9 deletions content/docs/components/feedback/sonner.mdx
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,6 +9,11 @@ The Sonner component provides beautiful toast notifications with a rich API.

## Basic Usage

A `sonner` node renders its own trigger button. Clicking the button raises the toast the
node declares, so the whole demo is one schema node with no handler to wire up.
`buttonLabel` and `buttonVariant` style that trigger; `message`, `description` and
`variant` describe the toast it raises.

<SchemaExample id="components-feedback-sonner/basic-sonner-toast" />

## Toast Types
Expand All@@ -20,7 +25,9 @@ The Sonner component provides beautiful toast notifications with a rich API.
<SchemaExample id="components-feedback-sonner/info" />
</DemoGrid>

## With Action
## With Description

`description` adds a secondary line under the message.

<SchemaExample id="components-feedback-sonner/toast-with-action" />

Expand All@@ -29,21 +36,19 @@ The Sonner component provides beautiful toast notifications with a rich API.
```plaintext
interface SonnerSchema {
type: 'sonner';
message: string; // Toast message
message?: string; // Toast message
title?: string; // Alias for message
description?: string; // Additional description
variant?: 'default' | 'success' | 'error' | 'warning' | 'info';
duration?: number; // Auto-close duration (ms)

// Action
action?: {
label: string;
onClick: string | ActionConfig;
};
// Trigger button
buttonLabel?: string; // Trigger button text (default: 'Show Toast')
buttonVariant?: 'default' | 'secondary' | 'destructive' | 'outline' | 'ghost' | 'link';
}
```

## Examples

### Promise Toast
### Custom Trigger Button

<SchemaExample id="components-feedback-sonner/promise-based-toast" />
18 changes: 10 additions & 8 deletions content/docs/components/feedback/toast.mdx
Original file line numberDiff line numberDiff line change
Expand Up@@ -9,19 +9,25 @@ The Toast component displays brief notifications to users that appear temporaril

## Basic Usage

A `toast` node renders its own trigger button. Clicking the button raises the toast the
node declares — the title, description, variant and duration are all read off the node
itself, so the whole demo is one schema node with no handler to wire up.

<SchemaExample id="components-feedback-toast/basic-toast" />

## Variants

`variant` selects the toast style. `ToastSchema` declares exactly five members —
`default`, `success`, `warning`, `error` and `info`; the four below plus `success`,
which the Success Message example uses.

<DemoGrid>
<SchemaExample id="components-feedback-toast/default" />
<SchemaExample id="components-feedback-toast/destructive" />
<SchemaExample id="components-feedback-toast/toast-with-action" />
<SchemaExample id="components-feedback-toast/toast-with-undo" />
</DemoGrid>

## With Action

<SchemaExample id="components-feedback-toast/toast-with-action" />

## Schema

```plaintext
Expand DownExpand Up@@ -51,7 +57,3 @@ interface ToastSchema {
### Error Message

<SchemaExample id="components-feedback-toast/error-toast" />

### With Undo Action

<SchemaExample id="components-feedback-toast/toast-with-undo" />
45 changes: 45 additions & 0 deletions examples/schema-catalog/src/catalog-meta.json
Original file line numberDiff line numberDiff line change
Expand Up@@ -36,6 +36,51 @@
"verification"
]
},
"components-feedback-sonner/promise-based-toast": {
"title": "Custom Trigger Button",
"description": "A success toast whose trigger button is styled through buttonVariant.",
"tags": [
"toast",
"sonner",
"button"
]
},
"components-feedback-sonner/toast-with-action": {
"title": "Message With Description",
"description": "A sonner toast carrying both a message and a secondary description line.",
"tags": [
"toast",
"sonner",
"description"
]
},
"components-feedback-toast/destructive": {
"title": "Error Variant",
"description": "The 'error' toast variant. 'destructive' is a button variant, not a toast variant.",
"tags": [
"toast",
"variant",
"error"
]
},
"components-feedback-toast/toast-with-action": {
"title": "Info Variant",
"description": "The 'info' toast variant, used here for an update notice.",
"tags": [
"toast",
"variant",
"info"
]
},
"components-feedback-toast/toast-with-undo": {
"title": "Warning Variant",
"description": "The 'warning' toast variant, used here for a deletion notice.",
"tags": [
"toast",
"variant",
"warning"
]
},
"components-form-form/basic-form": {
"title": "Basic Form",
"description": "A hand-built `form` node from `@object-ui/components`: name, email, country and newsletter fields declared inline, with no object behind them. For a form generated from an object's own metadata, see the `plugin-form` examples.",
Expand Down
25 changes: 15 additions & 10 deletions examples/schema-catalog/src/index.ts
Original file line numberDiff line numberDiff line change
Expand Up@@ -1658,9 +1658,10 @@ const REGISTRY: Record<string, Example> = {
'components-feedback-sonner/promise-based-toast': {
id: 'components-feedback-sonner/promise-based-toast',
meta: {
title: "Promise Based Toast",
description: "",
title: "Custom Trigger Button",
description: "A success toast whose trigger button is styled through buttonVariant.",
category: 'components-feedback-sonner',
tags: ["toast", "sonner", "button"],
},
schema: components_feedback_sonner_promise_based_toast,
},
Expand All@@ -1676,9 +1677,10 @@ const REGISTRY: Record<string, Example> = {
'components-feedback-sonner/toast-with-action': {
id: 'components-feedback-sonner/toast-with-action',
meta: {
title: "Toast With Action",
description: "",
title: "Message With Description",
description: "A sonner toast carrying both a message and a secondary description line.",
category: 'components-feedback-sonner',
tags: ["toast", "sonner", "description"],
},
schema: components_feedback_sonner_toast_with_action,
},
Expand DownExpand Up@@ -1766,9 +1768,10 @@ const REGISTRY: Record<string, Example> = {
'components-feedback-toast/destructive': {
id: 'components-feedback-toast/destructive',
meta: {
title: "Destructive",
description: "",
title: "Error Variant",
description: "The 'error' toast variant. 'destructive' is a button variant, not a toast variant.",
category: 'components-feedback-toast',
tags: ["toast", "variant", "error"],
},
schema: components_feedback_toast_destructive,
},
Expand All@@ -1793,18 +1796,20 @@ const REGISTRY: Record<string, Example> = {
'components-feedback-toast/toast-with-action': {
id: 'components-feedback-toast/toast-with-action',
meta: {
title: "Toast With Action",
description: "",
title: "Info Variant",
description: "The 'info' toast variant, used here for an update notice.",
category: 'components-feedback-toast',
tags: ["toast", "variant", "info"],
},
schema: components_feedback_toast_toast_with_action,
},
'components-feedback-toast/toast-with-undo': {
id: 'components-feedback-toast/toast-with-undo',
meta: {
title: "Toast With Undo",
description: "",
title: "Warning Variant",
description: "The 'warning' toast variant, used here for a deletion notice.",
category: 'components-feedback-toast',
tags: ["toast", "variant", "warning"],
},
schema: components_feedback_toast_toast_with_undo,
},
Expand Down
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,5 @@
{
"type": "button",
"label": "Show Sonner Toast",
"onClick": {
"action": "sonner",
"message": "Event has been created"
}
"type": "sonner",
"message": "Event has been created",
"buttonLabel": "Show Sonner Toast"
}
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,7 @@
{
"type": "button",
"label": "Error",
"variant": "destructive",
"onClick": {
"action": "sonner",
"type": "error",
"message": "Something went wrong"
}
"type": "sonner",
"variant": "error",
"message": "Something went wrong",
"buttonLabel": "Error",
"buttonVariant": "destructive"
}
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
{
"type": "button",
"label": "Info",
"onClick": {
"action": "sonner",
"type": "info",
"message": "New update available"
}
"type": "sonner",
"variant": "info",
"message": "New update available",
"buttonLabel": "Info"
}
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,7 @@
{
"type": "button",
"label": "Save Changes",
"onClick": {
"action": "sonner",
"type": "promise",
"loading": "Saving changes...",
"success": "Changes saved!",
"error": "Failed to save changes"
}
"type": "sonner",
"variant": "success",
"message": "Changes saved!",
"buttonLabel": "Save Changes",
"buttonVariant": "outline"
}
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
{
"type": "button",
"label": "Success",
"onClick": {
"action": "sonner",
"type": "success",
"message": "Operation completed successfully"
}
"type": "sonner",
"variant": "success",
"message": "Operation completed successfully",
"buttonLabel": "Success"
}
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,7 @@
{
"type": "button",
"label": "Show with Action",
"onClick": {
"action": {
"label": "View",
"onClick": "viewFile"
},
"message": "File uploaded",
"description": "Your file has been uploaded successfully"
}
"type": "sonner",
"variant": "success",
"message": "File uploaded",
"description": "Your file has been uploaded successfully",
"buttonLabel": "Upload File"
}
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
{
"type": "button",
"label": "Warning",
"onClick": {
"action": "sonner",
"type": "warning",
"message": "Please review your input"
}
"type": "sonner",
"variant": "warning",
"message": "Please review your input",
"buttonLabel": "Warning"
}
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,5 @@
{
"type": "button",
"label": "Show Toast",
"onClick": {
"action": "toast",
"title": "Success",
"description": "Your changes have been saved."
}
"type": "toast",
"title": "Success",
"description": "Your changes have been saved."
}
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
{
"type": "button",
"label": "Default Toast",
"onClick": {
"action": "toast",
"title": "Notification",
"description": "This is a default toast message."
}
"type": "toast",
"variant": "default",
"title": "Notification",
"description": "This is a default toast message."
}
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
{
"type": "button",
"label": "Destructive Toast",
"variant": "destructive",
"onClick": {
"action": "toast",
"variant": "error",
"title": "Error",
"description": "Something went wrong."
}
"type": "toast",
"variant": "error",
"title": "Error",
"description": "Something went wrong."
}
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
{
"type": "button",
"label": "Submit",
"variant": "destructive",
"onClick": {
"action": "toast",
"variant": "error",
"title": "Submission Failed",
"description": "Please check your input and try again."
}
"type": "toast",
"variant": "error",
"title": "Submission Failed",
"description": "Please check your input and try again."
}
Loading
Loading