From 770117cc24884504b7ed51449d14f4ede3ddd886 Mon Sep 17 00:00:00 2001
From: Ethan Alvizo <ethanalvizo@gmail.com>
Date: Fri, 25 Oct 2024 06:26:03 -0400
Subject: [PATCH 1/4] docs: fragment

---
 plugins/ui/docs/components/fragment.md | 32 ++++++++++++++++++++++++++
 1 file changed, 32 insertions(+)
 create mode 100644 plugins/ui/docs/components/fragment.md

diff --git a/plugins/ui/docs/components/fragment.md b/plugins/ui/docs/components/fragment.md
new file mode 100644
index 000000000..417129d89
--- /dev/null
+++ b/plugins/ui/docs/components/fragment.md
@@ -0,0 +1,32 @@
+# 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_fragment_list():
+    children = []
+
+    for i in range(1, 4):
+        children.append(ui.fragment(ui.text(f"Child {i}"), key=i))
+
+    return ui.column(*children)
+
+
+my_fragment = ui_fragment_list()
+```
\ No newline at end of file

From 746b65f2d307fb40a501a6039ff4a2187fdee173 Mon Sep 17 00:00:00 2001
From: Ethan Alvizo <ethanalvizo@gmail.com>
Date: Fri, 25 Oct 2024 06:41:31 -0400
Subject: [PATCH 2/4] autodoc

---
 plugins/ui/docs/components/fragment.md | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/plugins/ui/docs/components/fragment.md b/plugins/ui/docs/components/fragment.md
index 417129d89..8d6436ba3 100644
--- a/plugins/ui/docs/components/fragment.md
+++ b/plugins/ui/docs/components/fragment.md
@@ -29,4 +29,10 @@ def ui_fragment_list():
 
 
 my_fragment = ui_fragment_list()
+```
+
+## API Reference
+
+```{eval-rst}
+.. dhautofunction:: deephaven.ui.fragment
 ```
\ No newline at end of file

From 70a21f2f90c1047af1188497d8b518c5290be37a Mon Sep 17 00:00:00 2001
From: Ethan Alvizo <ethanalvizo@gmail.com>
Date: Fri, 25 Oct 2024 06:43:50 -0400
Subject: [PATCH 3/4] returns statement

---
 plugins/ui/src/deephaven/ui/components/fragment.py | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/plugins/ui/src/deephaven/ui/components/fragment.py b/plugins/ui/src/deephaven/ui/components/fragment.py
index 1086407a0..aba3cf147 100644
--- a/plugins/ui/src/deephaven/ui/components/fragment.py
+++ b/plugins/ui/src/deephaven/ui/components/fragment.py
@@ -12,5 +12,8 @@ def fragment(*children: Any, key: str | None = None):
     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)

From 75174e4f3f78910556668195ebbd129bc0903453 Mon Sep 17 00:00:00 2001
From: Ethan Alvizo <ethanalvizo@gmail.com>
Date: Sun, 27 Oct 2024 22:23:04 -0400
Subject: [PATCH 4/4] return signature

---
 plugins/ui/src/deephaven/ui/components/fragment.py | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/plugins/ui/src/deephaven/ui/components/fragment.py b/plugins/ui/src/deephaven/ui/components/fragment.py
index aba3cf147..f604c6d11 100644
--- a/plugins/ui/src/deephaven/ui/components/fragment.py
+++ b/plugins/ui/src/deephaven/ui/components/fragment.py
@@ -2,9 +2,10 @@
 
 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.