Merge pull request #126 from bcdev/clarasb-xxx-typography_component

Add text and color parameter to Typography component

Author: clarasb

chartlets.js/CHANGES.md

@@ -7,7 +7,11 @@
 * Omitted multiple VegaTheme options. While using `react-vega` v7 the 
   vegaTheme needs to be restricted to: "dark" | "excel" | "ggplot2" | 
   "quartz" | "vox" | "default" | "system" | undefined .
-  
+
+* 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/CHANGES.md

@@ -1,3 +1,8 @@
+## Version 0.1.7 (in development)
+
+* Updated dependencies
+	- `altair>=5.5.0,<6.0.0`
+
 ## Version 0.1.6 (from 2025/06/18)
 
 * **Chore:**: Version bump in `chartlets.py` to align with `chartlets.js` release.

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!"

chartlets.py/environment.yml

@@ -5,7 +5,7 @@ dependencies:
   # Library Dependencies
   - python >=3.10,<3.14
   # Optional Dependencies
-  - altair
+  - altair>=5.5.0,<6.0.0
   # Demo Dependencies
   - pandas
   - pyaml

chartlets.py/pyproject.toml

@@ -47,10 +47,10 @@ exclude = [
 
 [project.optional-dependencies]
 opt = [
-  "altair",
+  "altair>=5.5.0,<6.0.0",
 ]
 dev = [
-  "altair",
+  "altair>=5.5.0,<6.0.0",
   "black",
   "flake8",
   "pytest",
@@ -67,7 +67,7 @@ doc = [
   "mkdocstrings-python"
 ]
 demo = [
-  "altair",
+  "altair>=5.5.0,<6.0.0",
   "pyaml",
   "pandas",
   "tornado",