Allow None Type for Element Properties in _api_generator.py

taipy/gui/builder/_api_generator.py

@@ -136,12 +136,18 @@ def create_element_api(
         properties: t.Dict[str, str],
         ElementBaseClass: t.Union[t.Type[_Block], t.Type[_Control]],
     ):
+        # Adjust properties to allow None as a type
+        adjusted_properties = {
+            k: "none" if v is None else v  # If type is None, set it to "none"
+            for k, v in properties.items()
+        }
+
         return type(
             classname,
             (ElementBaseClass,),
             {
                 "_ELEMENT_NAME": element_name,
                 "_DEFAULT_PROPERTY": default_property,
-                "_TYPES": {f"{parts[0]}__" if len(parts := k.split("[")) > 1 else k: v for k, v in properties.items()},
+                "_TYPES": {f"{parts[0]}__" if len(parts := k.split("[")) > 1 else k: v for k, v in adjusted_properties.items()},
             },
         )

taipy_gui_css_units.py

@@ -0,0 +1,35 @@
+from taipy.gui import Gui
+
+def create_metric(value, width=None, height=None):
+    """
+    Create a Taipy GUI metric component with optional width and height.
+
+    Parameters:
+    value (str): The value to be displayed in the metric.
+    width (int or str, optional): The width of the metric. Can be an integer (treated as pixels) or a string with a CSS unit (e.g., "150px", "10rem").
+    height (int or str, optional): The height of the metric. Can be an integer (treated as pixels) or a string with a CSS unit (e.g., "300px", "20rem").
+
+    Returns:
+    str: The HTML markup for the metric component with the specified width and height.
+    """
+    if width is not None:
+        if isinstance(width, int):
+            width = f"{width}px"
+    if height is not None:
+        if isinstance(height, int):
+            height = f"{height}px"
+    return f"<|{value}|metric|width={width}|height={height}|>"
+
+# Demonstration of the issue and solution
+value = 50
+
+page = """
+{create_metric(value)}           ## Works
+{create_metric(value, width=300, height=300)}  ## Height working, Width working
+{create_metric(value, width="150px", height="300px")}
+{create_metric(value, width="300px", height="300px")}  ## Height working, Width working
+{create_metric(value, width="150rem", height="150rem")}
+{create_metric(value, width="300rem", height="150rem")}
+"""
+
+Gui(page).run()

taipy_gui_default_metric_height.py

@@ -0,0 +1,33 @@
+from taipy.gui import Gui
+import taipy.gui.builder as tgb
+
+def create_metric(value, width=None, height=None):
+    """
+    Create a Taipy GUI metric component with optional width and height.
+
+    Parameters:
+    value (str): The value to be displayed in the metric.
+    width (int or str, optional): The width of the metric. Can be an integer (treated as pixels) or a string with a CSS unit (e.g., "150px", "10rem").
+    height (int or str, optional): The height of the metric. Can be an integer (treated as pixels) or a string with a CSS unit (e.g., "300px", "20rem").
+
+    Returns:
+    tgb.Metric: The Taipy GUI metric component with the specified width and height.
+    """
+    metric_props = {}
+    if width is not None:
+        if isinstance(width, int):
+            width = f"{width}px"
+        metric_props["width"] = width
+    if height is not None:
+        if isinstance(height, int):
+            height = f"{height}px"
+        metric_props["height"] = height
+    return tgb.metric("{value}", type="none", **metric_props) # type: ignore
+
+# Demonstration of the issue and solution
+value = 50
+
+with tgb.Page() as page:
+    create_metric(value, width=200, height=100)
+
+Gui(page).run(title="Frontend Demo")