Python part of Divider

Author: forman

chartlets.js/CHANGES.md

@@ -38,6 +38,7 @@
   - using `return` object with `schema` property for callback return values
 
 * New (MUI) components
+  - `Divider`
   - `LinearProgress`
   - `RadioGroup` and `Radio`
   - `Switch`

chartlets.py/CHANGES.md

@@ -19,11 +19,12 @@
 * Added `tooltip` property to interactive components.
 
 * New components
-  - `Switch`
+  - `Divider`
   - `RadioGroup` and `Radio`
-  - `Tabs`
+  - `Switch`
   - `Slider`
-
+  - `Tabs` and `Tab`
+ 
 ## Version 0.0.29 (from 2024/11/26)
 
 * Fixed a bug that prevents using annotations of type `dict` or `dict[str, T]`.

chartlets.py/chartlets/components/__init__.py

@@ -3,6 +3,7 @@
 from .button import IconButton
 from .checkbox import Checkbox
 from .charts.vega import VegaChart
+from .divider import Divider
 from .progress import CircularProgress
 from .progress import CircularProgressWithLabel
 from .progress import LinearProgress

chartlets.py/chartlets/components/divider.py

@@ -0,0 +1,29 @@
+from dataclasses import dataclass
+
+from chartlets import Container
+
+
+@dataclass(frozen=True)
+class Divider(Container):
+    """The Divider component provides a thin,
+    unobtrusive line for grouping elements to reinforce visual hierarchy.
+    """
+
+    label: str | None = None
+    """The text label."""
+
+    orientation: str | None = None
+    """The orientation. Can be `horizontal` (default) or `vertical`."""
+
+    variant: str | None = None
+    """The variant. One of `fullWidth ` (default), `inset`, and `middle`."""
+
+    flexItem: bool | None = None
+    """Use the `flexItem` prop to display the divider when it's being 
+    used in a flex container.
+    """
+
+    textAlign: str | None = None
+    """Use the `textAlign` prop to align elements that are 
+    wrapped by the divider. One of `center` (default), `left`, and `right`.
+    """

chartlets.py/demo/my_extension/my_panel_3.py

@@ -1,5 +1,5 @@
 from chartlets import Component, Input, State, Output
-from chartlets.components import Box, Select, Checkbox, Typography
+from chartlets.components import Box, Divider, Select, Checkbox, Typography
 
 from server.context import Context
 from server.panel import Panel
@@ -50,7 +50,7 @@ def render_panel(
             "height": "100%",
             "gap": "6px",
         },
-        children=[opaque_checkbox, color_select, info_text],
+        children=[opaque_checkbox, color_select, Divider(), info_text],
     )
 
 

chartlets.py/tests/components/divider_test.py

@@ -0,0 +1,22 @@
+from chartlets.components import Divider
+from tests.component_test import make_base
+
+
+class DividerTest(make_base(Divider)):
+
+    def test_is_json_serializable(self):
+        self.assert_is_json_serializable(
+            self.cls(
+                textAlign="center",
+                variant="middle",
+                flexItem=True,
+                children=["Options"],
+            ),
+            {
+                "type": "Divider",
+                "textAlign": "center",
+                "variant": "middle",
+                "flexItem": True,
+                "children": ["Options"],
+            },
+        )