add text and color parameter to Typography component

Author: clarasb

chartlets.js/CHANGES.md

@@ -1,3 +1,9 @@
+## Version 0.1.7 (in development)
+
+* Typology component now allows color and text arguments. 
+  If a user uses text and children, the text argument replaces the 
+  children.
+
 ## Version 0.1.6 (from 2025/06/18)
 
 * Implemented dynamic resizing for Vega Charts when the side panel's 

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

@@ -9,6 +9,8 @@ interface TypographyState extends ComponentState {
   gutterBottom?: boolean;
   noWrap?: boolean;
   variant?: TypographyVariant;
+  text?: string;
+  color?: string;
 }
 
 interface TypographyProps extends ComponentProps, TypographyState {}
@@ -20,9 +22,13 @@ export const Typography = ({
   gutterBottom,
   noWrap,
   variant,
+  text,
+  color,
   children: nodes,
   onChange,
 }: TypographyProps) => {
+  nodes = text ? [text] : nodes;
+
   return (
     <MuiTypography
       id={id}
@@ -31,6 +37,7 @@ export const Typography = ({
       gutterBottom={gutterBottom}
       noWrap={noWrap}
       variant={variant}
+      color={color}
     >
       <Children nodes={nodes} onChange={onChange} />
     </MuiTypography>

chartlets.py/demo/my_extension/my_panel_5.py

@@ -39,7 +39,7 @@ def render_panel(
         ariaDescribedBy="dialog-description",
     )
 
-    info_text = Typography(id="info_text")
+    info_text = Typography(id="info_text", color="grey")
 
     return Box(
         style={
@@ -63,17 +63,17 @@ def dialog_on_open(ctx: Context, button) -> bool:
 @panel.callback(
     Input("okay_button", "clicked"),
     Output("dialog", "open"),
-    Output("info_text", "children"),
+    Output("info_text", "text"),
 )
-def dialog_on_close(ctx: Context, button) -> tuple[bool, list[str]]:
-    return False, ["Okay button was clicked!"]
+def dialog_on_close(ctx: Context, button) -> tuple[bool, str]:
+    return False, "Okay button was clicked!"
 
 
 # noinspection PyUnusedLocal
 @panel.callback(
     Input("not_okay_button", "clicked"),
     Output("dialog", "open"),
-    Output("info_text", "children"),
+    Output("info_text", "text"),
 )
-def dialog_on_close(ctx: Context, button) -> tuple[bool, list[str]]:
-    return False, ["Not okay button was clicked!"]
+def dialog_on_close(ctx: Context, button) -> tuple[bool, str]:
+    return False, "Not okay button was clicked!"