docs: fragment (#962)

Closes #885

plugins/ui/docs/components/fragment.md

@@ -0,0 +1,45 @@
+# Fragment
+
+The `fragment` component allows you to group multiple elements without adding extra nodes to the DOM. This is especially useful when you need to return several elements but want to avoid wrapping them in an additional element. By using `fragment`, you can maintain a clean DOM tree and prevent unnecessary nesting.
+
+## Example
+
+```python
+from deephaven import ui
+
+my_fragment = ui.fragment(ui.text("Child 1"), ui.text("Child 2"))
+```
+
+## Rendering a List
+
+When rendering multiple elements in a loop, ensure each fragment has a unique key. This is crucial if array items might be inserted, deleted, or reordered.
+
+```python
+from deephaven import ui
+
+
+@ui.component
+def ui_post_list(items):
+    posts = (
+        ui.fragment(ui.heading(p["title"]), ui.text(p["body"]), key=p["id"])
+        for p in items
+    )
+    return ui.flex(
+        *posts,
+        direction="column",
+    )
+
+
+my_post_list = ui_post_list(
+    [
+        {"id": 1, "title": "About me", "body": "I am a developer"},
+        {"id": 2, "title": "Contact", "body": "I want to hear from you!"},
+    ]
+)
+```
+
+## API Reference
+
+```{eval-rst}
+.. dhautofunction:: deephaven.ui.fragment
+```

plugins/ui/docs/sidebar.json

@@ -65,6 +65,10 @@
             "label": "dialog_trigger",
             "path": "components/dialog_trigger.md"
           },
+          {
+            "label": "fragment",
+            "path": "components/fragment.md"
+          },
           {
             "label": "heading",
             "path": "components/heading.md"

plugins/ui/src/deephaven/ui/components/fragment.py

@@ -2,15 +2,19 @@
 
 from typing import Any
 from .basic import component_element
+from ..elements import Element
 
 
-def fragment(*children: Any, key: str | None = None):
+def fragment(*children: Any, key: str | None = None) -> Element:
     """
     A React.Fragment: https://react.dev/reference/react/Fragment.
     Used to group elements together without a wrapper node.
 
     Args:
         *children: The children in the fragment.
         key: A unique identifier used by React to render elements in a list.
+
+    Returns:
+        The rendered fragment element.
     """
     return component_element("Fragment", children=children, key=key)