From d40d238de5d976efe035ee6a9f177f0cf5081aad Mon Sep 17 00:00:00 2001
From: metonym <ericyl.us@gmail.com>
Date: Thu, 28 Apr 2022 07:39:58 -0700
Subject: [PATCH] docs(file-uploader): improve `FileUploaderItem` examples
 (#1269)

---
 docs/src/pages/components/FileUploader.svx | 30 ++++++++++++++++++++--
 1 file changed, 28 insertions(+), 2 deletions(-)

diff --git a/docs/src/pages/components/FileUploader.svx b/docs/src/pages/components/FileUploader.svx
index 8f19f122..bff02a4c 100644
--- a/docs/src/pages/components/FileUploader.svx
+++ b/docs/src/pages/components/FileUploader.svx
@@ -48,9 +48,35 @@ There are two ways to clear files in `FileUploader`:
 
 <FileUploaderItem name="README.md" status="complete" />
 
-### Item (invalid)
+### Item (edit)
 
-<FileUploaderItem invalid name="README.md" status="edit" />
+If the `status` is `"edit"`, clicking the close icon will dispatch a `delete` event.
+
+The event detail contains the item `id`.
+
+<FileUploaderItem id="readme" name="README.md" status="edit" on:delete={(e) => {
+  console.log(e.detail); // "readme"
+}} />
+
+### Item (edit status, invalid state)
+
+An item can also have an edit status with an invalid state.
+
+<FileUploaderItem invalid id="readme" name="README.md" status="edit" on:delete />
+
+### Item (edit status, invalid state with subject, body)
+
+Use the `errorSubject` and `errorBody` props to customize the error message.
+
+<FileUploaderItem
+  invalid
+  id="readme"
+  name="README.md"
+  errorSubject="File size exceeds 500kb limit"
+  errorBody="Please select a new file."
+  status="edit"
+  on:delete
+/>
 
 ### Item sizes