docs: DOC-219: Update List tag description and examples (#5954)

Update the List tag description and add an example. 

Affects:
- [X] Enterprise docs
- [X] Community docs

---------

Co-authored-by: caitlinwheeless <caitlin@humansignal.com>
Co-authored-by: robot-ci-heartex <robot-ci-heartex@users.noreply.github.com>
Co-authored-by: hlomzik <hlomzik@gmail.com>

docs/source/tags/list.md

@@ -6,9 +6,11 @@ meta_title: List Tag displays items of the same type, like articles, search resu
 meta_description: Customize Label Studio by displaying similar items from task data for machine learning and data science projects.
 ---
 
-The `List` tag is used to display a list of similar items like articles, search results, etc. Task data referred in `value` parameter should be an array of objects with `id`, `title`, and `body` fields.
-It's much more lightweight than group of other tags like Text. And you can attach classification to provide additional data about this list.
-Can be used with `Ranker` tag to rank items or pick relevant items from a list.
+The `List` tag is used to display a list of similar items like articles, search results, etc. Task data in the `value` parameter should be an array of objects with `id`, `title`, `body`, and `html` fields.
+
+It's much more lightweight to use `List` than to group other tags like Text. Also, you can attach classifications to provide additional data about this list.
+
+The `List` tag can be used with the `Ranker` tag to rank items or pick relevant items from a list.
 Items can be styled in `Style` tag by using `.htx-ranker-item` class.
 
 ### Parameters
@@ -45,3 +47,15 @@ Example data for List tag
   ]
 }
 ```
+### Example
+
+Example data for List tag
+
+```json
+{
+  "items": [
+     { "id": "blog", "title": "Image 1", "html": "<img src='http://example.com/1.jpg'>" },
+     { "id": "mdn", "title": "Image 2", "html": "<img src='http://example.com/2.jpg'>" }
+   ]
+}
+```

web/dist/apps/labelstudio/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "Merge branch 'develop' into 'fb-leap-1110/cs-polishing'",
-  "commit": "1b40b6e27da40b37dcf909caa1e0e5d358916112",
-  "date": "2024-06-05T17:17:11.000Z",
-  "branch": "fb-leap-1110/cs-polishing"
+  "message": "Fix linting",
+  "commit": "2393938080d4e2f830d0578af5977f7436892c1b",
+  "date": "2024-06-07T16:53:17.000Z",
+  "branch": "docs/doc-219-list-tag"
 }

web/dist/libs/datamanager/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "Merge branch 'develop' into 'fb-leap-1110/cs-polishing'",
-  "commit": "1b40b6e27da40b37dcf909caa1e0e5d358916112",
-  "date": "2024-06-05T17:17:11.000Z",
-  "branch": "fb-leap-1110/cs-polishing"
+  "message": "Fix linting",
+  "commit": "2393938080d4e2f830d0578af5977f7436892c1b",
+  "date": "2024-06-07T16:53:17.000Z",
+  "branch": "docs/doc-219-list-tag"
 }

web/dist/libs/editor/version.json

@@ -1,6 +1,6 @@
 {
-  "message": "Merge branch 'develop' into 'fb-leap-1110/cs-polishing'",
-  "commit": "1b40b6e27da40b37dcf909caa1e0e5d358916112",
-  "date": "2024-06-05T17:17:11.000Z",
-  "branch": "fb-leap-1110/cs-polishing"
+  "message": "Fix linting",
+  "commit": "2393938080d4e2f830d0578af5977f7436892c1b",
+  "date": "2024-06-07T16:53:17.000Z",
+  "branch": "docs/doc-219-list-tag"
 }

web/libs/editor/src/tags/object/List.jsx

@@ -10,9 +10,11 @@ import { parseValue } from "../../utils/data";
 import Base from "./Base";
 
 /**
- * The `List` tag is used to display a list of similar items like articles, search results, etc. Task data referred in `value` parameter should be an array of objects with `id`, `title`, and `body` fields.
- * It's much more lightweight than group of other tags like Text. And you can attach classification to provide additional data about this list.
- * Can be used with `Ranker` tag to rank items or pick relevant items from a list.
+ * The `List` tag is used to display a list of similar items like articles, search results, etc. Task data in the `value` parameter should be an array of objects with `id`, `title`, `body`, and `html` fields.
+ *
+ * It's much more lightweight to use `List` than to group other tags like Text. Also, you can attach classifications to provide additional data about this list.
+ *
+ * The `List` tag can be used with the `Ranker` tag to rank items or pick relevant items from a list.
  * Items can be styled in `Style` tag by using `.htx-ranker-item` class.
  * @example
  * <!-- Visual appearance can be changed via Style tag with these classnames -->
@@ -32,6 +34,14 @@ import Base from "./Base";
  *     { "id": "wiki", "title": "Arrow (computer science)", "body": "In computer science, arrows or bolts are a type class..." }
  *   ]
  * }
+ * @example
+ * <!-- Example data for List tag -->
+ * {
+ *   "items": [
+ *      { "id": "blog", "title": "Image 1", "html": "<img src='http://example.com/1.jpg'>" },
+ *      { "id": "mdn", "title": "Image 2", "html": "<img src='http://example.com/2.jpg'>" }
+ *    ]
+ * }
  * @name List
  * @meta_title List Tag displays items of the same type, like articles, search results, etc.
  * @meta_description Customize Label Studio by displaying similar items from task data for machine learning and data science projects.