new Divider component

Author: forman

chartlets.js/packages/lib/src/plugins/mui/Divider.test.tsx

@@ -0,0 +1,22 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import type { ComponentChangeHandler } from "@/types/state/event";
+import { Divider } from "./Divider";
+
+describe("Divider", () => {
+  it("should render the Box component", () => {
+    const onChange: ComponentChangeHandler = () => {};
+    render(
+      <Divider
+        id="dv"
+        type={"Divider"}
+        flexItem
+        children={["Section 1"]}
+        onChange={onChange}
+      />,
+    );
+    // to inspect rendered component, do:
+    // expect(document.querySelector("#bx")).toEqual({});
+    expect(screen.getByText("Section 1")).not.toBeUndefined();
+  });
+});

chartlets.js/packages/lib/src/plugins/mui/Divider.tsx

@@ -0,0 +1,39 @@
+import type { ElementType } from "react";
+import MuiDivider from "@mui/material/Divider";
+
+import type { ComponentState, ComponentProps } from "@/index";
+import { Children } from "@/index";
+
+interface DividerState extends ComponentState {
+  orientation?: "horizontal" | "vertical";
+  variant?: "fullWidth" | "inset" | "middle";
+  flexItem?: boolean;
+  textAlign?: "left" | "center" | "right";
+  component?: ElementType<Element>;
+}
+
+interface DividerProps extends ComponentProps, DividerState {}
+
+export const Divider = ({
+  id,
+  style,
+  orientation,
+  variant,
+  flexItem,
+  textAlign,
+  children: nodes,
+  onChange,
+}: DividerProps) => {
+  return (
+    <MuiDivider
+      id={id}
+      style={style}
+      orientation={orientation}
+      variant={variant}
+      flexItem={flexItem}
+      textAlign={textAlign}
+    >
+      <Children nodes={nodes} onChange={onChange} />
+    </MuiDivider>
+  );
+};

chartlets.js/packages/lib/src/plugins/mui/index.ts

@@ -3,6 +3,7 @@ import { Box } from "./Box";
 import { Button } from "./Button";
 import { Checkbox } from "./Checkbox";
 import { CircularProgress } from "./CircularProgress";
+import { Divider } from "./Divider";
 import { IconButton } from "./IconButton";
 import { RadioGroup } from "./RadioGroup";
 import { Select } from "./Select";
@@ -18,6 +19,7 @@ export default function mui(): Plugin {
       ["Button", Button],
       ["Checkbox", Checkbox],
       ["CircularProgress", CircularProgress],
+      ["Divider", Divider],
       ["IconButton", IconButton],
       ["RadioGroup", RadioGroup],
       ["Select", Select],

chartlets.py/chartlets/components/divider.py

@@ -9,9 +9,6 @@ class Divider(Container):
     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`."""
 

chartlets.py/demo/my_extension/my_panel_3.py

@@ -42,6 +42,8 @@ def render_panel(
         id="info_text", children=update_info_text(ctx, dataset_id, opaque, color)
     )
 
+    divider = Divider(style={"paddingTop": "10px", "paddingBottom": "10px"})
+
     return Box(
         style={
             "display": "flex",
@@ -50,7 +52,7 @@ def render_panel(
             "height": "100%",
             "gap": "6px",
         },
-        children=[opaque_checkbox, color_select, Divider(), info_text],
+        children=[opaque_checkbox, color_select, divider, info_text],
     )