docs: added documentation for toast component changes (#7141)

* docs: added documentation for toast component changes

* added redirect from use-toast docs to upgrade guide

* remove unused file

* content linting fixes

* update UI package version

* updated ui preset

* fix upgrade guides main page
This commit is contained in:
Shahed Nasser
2024-05-01 18:12:10 +03:00
committed by GitHub
parent 8387d03370
commit b6083ce104
24 changed files with 559 additions and 343 deletions

View File

@@ -1,6 +0,0 @@
{
"description": "",
"methods": [],
"displayName": "Toast.Viewport",
"props": {}
}

View File

@@ -1,67 +1,103 @@
{
"description": "This component is based on the [Radix UI Toast](https://www.radix-ui.com/primitives/docs/components/toast) primitives.",
"description": "This component is based on the [Sonner](https://sonner.emilkowal.ski/toast) toast library.",
"methods": [],
"displayName": "Toast",
"props": {
"variant": {
"required": false,
"id": {
"required": true,
"tsType": {
"name": "union",
"raw": "\"info\" | \"success\" | \"warning\" | \"error\" | \"loading\"",
"raw": "string | number",
"elements": [
{
"name": "literal",
"value": "\"info\""
"name": "string"
},
{
"name": "literal",
"value": "\"success\""
},
{
"name": "literal",
"value": "\"warning\""
},
{
"name": "literal",
"value": "\"error\""
},
{
"name": "literal",
"value": "\"loading\""
"name": "number"
}
]
},
"description": "The toast's style."
},
"title": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The toast's title."
"description": "Optional ID of the toast."
},
"description": {
"required": false,
"tsType": {
"name": "string"
},
"description": "The toast's content."
"description": "The toast's text."
},
"action": {
"required": false,
"tsType": {
"name": "ActionProps"
"name": "signature",
"type": "object",
"raw": "{ altText: string ; label: string ; onClick: () => void \\| Promise<void> ; variant?: ToastActionVariant }",
"signature": {
"properties": [
{
"key": "altText",
"value": {
"name": "string"
},
"description": "The button's alt text."
},
{
"key": "label",
"value": {
"name": "string"
},
"description": "The button's text."
},
{
"key": "onClick",
"value": {
"name": "signature",
"type": "function",
"raw": "() => void \\| Promise<void>",
"signature": {
"arguments": [],
"return": {
"name": "void \\| Promise<void>"
}
}
},
"description": "The function to execute when the button is clicked."
},
{
"key": "variant",
"value": {
"name": "ToastActionVariant",
"elements": [
{
"name": "union",
"raw": "\"default\" \\| \"destructive\"",
"elements": [
{
"name": "\"default\""
},
{
"name": "\"destructive\""
}
]
}
],
"raw": "ToastActionVariant"
},
"description": "The button's variant."
}
]
}
},
"description": "The actions to show in the toast as buttons."
"description": "The toast's action buttons."
},
"disableDismiss": {
"dismissLabel": {
"required": false,
"tsType": {
"name": "boolean"
"name": "string"
},
"description": "Whether to hide the Close button.",
"description": "The label of the dismiss button, if available.",
"defaultValue": {
"value": "false",
"value": "\"Close\"",
"computed": false
}
}

View File

@@ -1,6 +0,0 @@
{
"description": "",
"methods": [],
"displayName": "ToastProvider",
"props": {}
}

View File

@@ -1,6 +1,95 @@
{
"description": "",
"description": "This component is based on the [Toaster component of the Sonner library](https://sonner.emilkowal.ski/toaster).",
"methods": [],
"displayName": "Toaster",
"props": {}
"props": {
"position": {
"defaultValue": {
"value": "\"bottom-right\"",
"computed": false
},
"description": "The position of the created toasts.",
"tsType": {
"name": "Position",
"elements": [
{
"name": "union",
"raw": "\"top-left\" \\| \"top-right\" \\| \"bottom-left\" \\| \"bottom-right\" \\| \"top-center\" \\| \"bottom-center\"",
"elements": [
{
"name": "literal",
"value": "\"top-left\""
},
{
"name": "literal",
"value": "\"top-right\""
},
{
"name": "literal",
"value": "\"bottom-left\""
},
{
"name": "literal",
"value": "\"bottom-right\""
},
{
"name": "literal",
"value": "\"top-center\""
},
{
"name": "literal",
"value": "\"bottom-center\""
}
]
}
],
"raw": "Position"
},
"required": false
},
"gap": {
"defaultValue": {
"value": "12",
"computed": false
},
"description": "The gap between the toast components.",
"tsType": {
"name": "number"
},
"required": false
},
"offset": {
"defaultValue": {
"value": "24",
"computed": false
},
"description": "The space from the edges of the screen.",
"tsType": {
"name": "union",
"raw": "string \\| number",
"elements": [
{
"name": "string"
},
{
"name": "number"
}
]
},
"required": false
},
"duration": {
"description": "The time in milliseconds that a toast is shown before it's\nautomatically dismissed.\n\n",
"tsType": {
"name": "number"
},
"defaultValue": {
"value": "4000",
"computed": false
}
}
},
"composes": [
"Omit"
]
}