Toast docs

basicmachines-co · Oct 29, 2024 · 6b37bcd · 6b37bcd
1 parent 0de1e1c
commit 6b37bcd
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 15 deletions.
diff --git a/components/ui/Toast.jinja b/components/ui/Toast.jinja
@@ -1,5 +1,5 @@
-{#def
-    id: str = "",
+{# def
+    id: str,
     className: str = "",
     duration: int = 30000,  # duration in milliseconds
 #}

diff --git a/components/ui/ToastContent.jinja b/components/ui/ToastContent.jinja
@@ -1,4 +1,4 @@
-{#def
+{# def
     type: str = "default",
     title: str = "",
     description: str = "",

diff --git a/components/ui/ToastTrigger.jinja b/components/ui/ToastTrigger.jinja
@@ -1,7 +1,7 @@
-{#def
+{# def
   className: str = "",
   variant: str = "default",
-  toast_target: str = "",
+  toast_target: str,
 #}
 
 {% set click_action="$dispatch('show-toast', '" + toast_target + "')" %}

diff --git a/documentation/backend/templates/toast_destructive.html b/documentation/backend/templates/toast_destructive.html
@@ -1,6 +1,6 @@
 <ToastTrigger variant="outline" toast_target="toast-warning">Show Toast</ToastTrigger>
 
-<Toast id="toast-warning" show="false" duration="4000">
+<Toast id="toast-warning">
   <ToastContent
       type="destructive"
       title="Uh oh! Something went wrong."

diff --git a/documentation/backend/templates/toast_error.html b/documentation/backend/templates/toast_error.html
@@ -1,6 +1,6 @@
 <ToastTrigger variant="outline" toast_target="toast-error">Show Error Toast</ToastTrigger>
 
-<Toast id="toast-error" show="false" duration="4000">
+<Toast id="toast-error">
   <ToastContent
       type="error"
       title="Error!"

diff --git a/documentation/backend/templates/toast_success.html b/documentation/backend/templates/toast_success.html
@@ -1,6 +1,6 @@
 <ToastTrigger variant="outline" toast_target="toast-success">Show Success Toast</ToastTrigger>
 
-<Toast id="toast-success" show="false" duration="4000">
+<Toast id="toast-success">
   <ToastContent
       type="success"
       title="Success!"

diff --git a/documentation/backend/templates/toast_warning.html b/documentation/backend/templates/toast_warning.html
@@ -1,6 +1,6 @@
 <ToastTrigger variant="outline" toast_target="toast-warning">Show Warning Toast</ToastTrigger>
 
-<Toast id="toast-warning" show="false" duration="4000">
+<Toast id="toast-warning">
   <ToastContent
       type="warning"
       title="Warning!"

diff --git a/documentation/docs/components/toast.md b/documentation/docs/components/toast.md
@@ -11,12 +11,19 @@ style="width: 100%; height: 200px; border: none;">
 
 ## Props
 
-| Prop          | Type   | Default | Description                                 |
-|---------------|--------|---------|---------------------------------------------|
-| `className`   | String | `""`    | Additional CSS classes for customization.   |
-| `value`       | String | `""`    | The value of the textarea                   |
-| `placeholder` | String | `""`    | Placeholder text displayed in the textarea. |
-| `disabled`    | bool   | `""`    | Disables the textarea                       |
+| Component    | Prop           | Type   | Default     | Description                                                                                             |
+|--------------|----------------|--------|-------------|---------------------------------------------------------------------------------------------------------|
+| Toast        | `id`           | String |             | The css id for the Toast.                                                                               |
+| Toast        | `className`    | String | `""`        | Additional CSS classes for the toast container.                                                         |
+| Toast        | `duration`     | Number | `30000`     | Duration in milliseconds before toast auto-dismisses.                                                   |
+| ToastContent | `type`         | String | `"default"` | Style variant of the toast. Options: `"default"`, `"success"`, `"error"`, `"warning"`, `"destructive"`. |
+| ToastContent | `title`        | String | `""`        | The title text displayed in the toast.                                                                  |
+| ToastContent | `description`  | String | `""`        | The description text displayed below the title.                                                         |
+| ToastTrigger | `className`    | String | `""`        | Additional CSS classes for the trigger button.                                                          |
+| ToastTrigger | `variant`      | String | `"default"` | The Button component variant to use.                                                                    |
+| ToastTrigger | `toast_target` | String |             | The target toast identifier to trigger.                                                                 |
+
+Toast components require an `id` so that the dispatch event can call the component to display it. 
 
 ## Components