Simplify checkbox API which uses lower-level content_checkbox component

Author: wwwillchen

docs/components/checkbox.md

@@ -11,5 +11,6 @@ Checkbox is a multi-selection form control and is based on the [Angular Material
 ## API
 
 ::: mesop.components.checkbox.checkbox.checkbox
+::: mesop.components.checkbox.checkbox.content_checkbox
 ::: mesop.components.checkbox.checkbox.CheckboxChangeEvent
 ::: mesop.components.checkbox.checkbox.CheckboxIndeterminateChangeEvent

mesop/__init__.py

@@ -46,6 +46,9 @@
 from mesop.components.checkbox.checkbox import (
   checkbox as checkbox,
 )
+from mesop.components.checkbox.checkbox import (
+  content_checkbox as content_checkbox,
+)
 from mesop.components.divider.divider import divider as divider
 from mesop.components.icon.icon import icon as icon
 from mesop.components.image.image import image as image

mesop/components/checkbox/BUILD

@@ -6,4 +6,5 @@ package(
 
 mesop_component(
     name = "checkbox",
+    py_deps = ["//mesop/components/text:py"],
 )

mesop/components/checkbox/checkbox.py

@@ -3,11 +3,13 @@
 
 import mesop.components.checkbox.checkbox_pb2 as checkbox_pb
 from mesop.component_helpers import (
+  component,
   insert_composite_component,
   register_event_handler,
   register_event_mapper,
   register_native_component,
 )
+from mesop.components.text.text import text
 from mesop.events import MesopEvent
 
 
@@ -53,8 +55,54 @@ class CheckboxIndeterminateChangeEvent(MesopEvent):
 )
 
 
-@register_native_component
+@component
 def checkbox(
+  label: str | None = None,
+  *,
+  on_change: Callable[[CheckboxChangeEvent], Any] | None = None,
+  on_indeterminate_change: Callable[[CheckboxIndeterminateChangeEvent], Any]
+  | None = None,
+  label_position: Literal["before", "after"] = "after",
+  disable_ripple: bool = False,
+  tab_index: int = 0,
+  color: Literal["primary", "accent", "warn"] | None = None,
+  checked: bool = False,
+  disabled: bool = False,
+  indeterminate: bool = False,
+  key: str | None = None,
+):
+  """Creates a simple Checkbox component with a text label.
+
+  Args:
+    label: Text label for checkbox
+    on_change: Event emitted when the checkbox's `checked` value changes.
+    on_indeterminate_change: Event emitted when the checkbox's `indeterminate` value changes.
+    label_position: Whether the label should appear after or before the checkbox. Defaults to 'after'
+    disable_ripple: Whether the checkbox has a ripple.
+    tab_index: Tabindex for the checkbox.
+    color: Palette color of the checkbox.
+    checked: Whether the checkbox is checked.
+    disabled: Whether the checkbox is disabled.
+    indeterminate: Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to represent a checkbox with three states, e.g. a checkbox that represents a nested list of checkable items. Note that whenever checkbox is manually clicked, indeterminate is immediately set to false.
+    key: Unique identifier for this component instance.
+  """
+  with content_checkbox(
+    on_change=on_change,
+    on_indeterminate_change=on_indeterminate_change,
+    label_position=label_position,
+    disable_ripple=disable_ripple,
+    tab_index=tab_index,
+    color=color,
+    checked=checked,
+    disabled=disabled,
+    indeterminate=indeterminate,
+    key=key,
+  ):
+    text(label)
+
+
+@register_native_component
+def content_checkbox(
   *,
   on_change: Callable[[CheckboxChangeEvent], Any] | None = None,
   on_indeterminate_change: Callable[[CheckboxIndeterminateChangeEvent], Any]
@@ -68,8 +116,9 @@ def checkbox(
   indeterminate: bool = False,
   key: str | None = None,
 ):
-  """Creates a Checkbox component.
-  Checkbox is a composite component.
+  """Creates a Checkbox component which is a composite component. Typically, you would use a text or icon component as a child.
+
+  Intended for advanced use cases.
 
   Args:
     on_change: Event emitted when the checkbox's `checked` value changes.
@@ -85,7 +134,7 @@ def checkbox(
   """
   return insert_composite_component(
     key=key,
-    type_name="checkbox",
+    type_name="content_checkbox",
     proto=checkbox_pb.CheckboxType(
       label_position=label_position,
       disable_ripple=disable_ripple,

mesop/components/checkbox/e2e/checkbox_app.py

@@ -15,11 +15,13 @@ def on_update(event: me.CheckboxChangeEvent):
 @me.page(path="/components/checkbox/e2e/checkbox_app")
 def app():
   state = me.state(State)
-  with me.checkbox(
+  me.checkbox(
+    "label",
     on_change=on_update,
     checked=state.checked,
-  ):
-    me.text(text="label")
+    disable_ripple=False,
+    indeterminate=False,
+  )
 
   if state.checked:
     me.text(text="is checked")

mesop/examples/simple.py

@@ -36,11 +36,11 @@ def main():
   me.text(text=f"{state.count} clicks")
   me.text(text=f"Selected keys: {state.keys}")
   for i in range(1000):
-    with me.checkbox(
+    me.checkbox(
+      "check",
       on_change=checkbox_update,
       key=f"check={i}",
-    ):
-      me.text(text="check")
+    )
   me.text(text=state.string)
 
 

mesop/examples/testing/conditional_event_handler.py

@@ -19,11 +19,9 @@ def inner_on_change(event: me.CheckboxChangeEvent):
     state.second = event.checked
 
   me.text("Make sure tracing discovers event handlers that are conditional")
-  with me.checkbox(on_change=outer_on_change):
-    me.text("first checkbox")
+  me.checkbox("first checkbox", on_change=outer_on_change)
   state = me.state(State)
   if state.first:
-    with me.checkbox(on_change=inner_on_change):
-      me.text("second checkbox")
+    me.checkbox("second checkbox", on_change=inner_on_change)
   if state.second:
     me.text("second checkbox has been checked")

mesop/web/src/component_renderer/type_to_component.ts

@@ -68,7 +68,8 @@ export const typeToComponent = {
   'textarea': InputComponent,
   'button': UserDefinedComponent,
   'content_button': ButtonComponent,
-  'checkbox': CheckboxComponent,
+  'checkbox': UserDefinedComponent,
+  'content_checkbox': CheckboxComponent,
   'text': TextComponent,
   'markdown': MarkdownComponent,
 } as TypeToComponent;

mesop/web/src/dev_tools/services/logger.ts

@@ -90,7 +90,10 @@ export function mapComponentToObject(
 
   if (
     component.getType()?.getName()?.getCoreModule() === false ||
-    component.getType()?.getName()?.getFnName() === 'button'
+    // These are core module components which are implemented as user defined components.
+    ['button', 'checkbox'].includes(
+      component.getType()?.getName()?.getFnName()!,
+    )
   ) {
     const value: Record<string, any> = {};
     // Deserialize type