docs: panel (#964)

Closes #922

Author: ethanalvizo

plugins/ui/docs/components/panel.md

@@ -0,0 +1,40 @@
+# Panel
+
+The `panel` component is a versatile [flex](./flex.md) container designed to group and organize elements within a layout. Panels are presented as individual tabs that can be moved to different positions by dragging the tabs around. By default, the top-level return of a `@ui.component` is automatically wrapped in a panel, so you only need to define a panel explicitly if you want to customize it. Customizations can include setting a custom tab title, background color or customizing the flex layout.
+
+## Example
+
+```python
+from deephaven import ui
+
+
+@ui.component
+def ui_panel():
+    text = ui.text_field()
+
+    return ui.panel(text, title="Text Field")
+
+
+my_panel = ui_panel()
+```
+
+## Nesting
+
+Panels can only be nested within [ui.row](./dashboard.md#row-api-reference), [ui.column](./dashboard.md#column-api-reference), [ui.stack](./dashboard.md#stack-api-reference) or [ui.dashboard](#./dashboard.md).
+
+```python
+from deephaven import ui
+
+my_nested_panel = ui.dashboard([ui.panel("A"), ui.panel("B")])
+```
+
+
+## API Reference
+
+```{eval-rst}
+.. dhautofunction:: deephaven.ui.panel
+```
+
+
+
+

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

@@ -11,8 +11,10 @@
     AlignItems,
     DimensionValue,
     Overflow,
+    CSSProperties,
 )
 from ..elements import Element
+from ..types import Color
 
 
 def panel(
@@ -34,8 +36,10 @@ def panel(
     padding_end: DimensionValue | None = None,
     padding_x: DimensionValue | None = None,
     padding_y: DimensionValue | None = None,
+    background_color: Color | None = None,
+    UNSAFE_class_name: str | None = None,
+    UNSAFE_style: CSSProperties | None = None,
     key: str | None = None,
-    **props: Any,
 ) -> Element:
     """
     A panel is a container that can be used to group elements.
@@ -51,13 +55,17 @@ def panel(
         gap: The space to display between both rows and columns of children.
         column_gap: The space to display between columns of children.
         row_gap: The space to display between rows of children.
+        overflow: Specifies what to do when the elment's content is too long to fit its size.
         padding: The padding to apply around the element.
         padding_top: The padding to apply above the element.
         padding_bottom: The padding to apply below the element.
         padding_start: The padding to apply before the element.
         padding_end: The padding to apply after the element.
         padding_x: The padding to apply to the left and right of the element.
         padding_y: The padding to apply to the top and bottom of the element.
+        background_color: The background color of the element.
+        UNSAFE_class_name: A CSS class to apply to the element.
+        UNSAFE_style: A CSS style to apply to the element.
         key: A unique identifier used by React to render elements in a list.
 
     Returns: