Make button a simpler, high-level API which uses a lower-level API content_button

Author: wwwillchen

docs/components/button.md

@@ -1,6 +1,6 @@
 ## Overview
 
-Button is based on the [Angular Material button component](https://material.angular.io/components/button/overview). Button is a [composite component](../guides/components.md#composite-components) and frequently used as a parent of the [Text](./text.md) component.
+Button is based on the [Angular Material button component](https://material.angular.io/components/button/overview).
 
 ## Examples
 
@@ -11,4 +11,5 @@ Button is based on the [Angular Material button component](https://material.angu
 ## API
 
 ::: mesop.components.button.button.button
+::: mesop.components.button.button.content_button
 ::: mesop.events.ClickEvent

mesop/__init__.py

@@ -31,7 +31,12 @@
 
 # REF(//scripts/scaffold_component.py):insert_component_import_export
 from mesop.components.box.box import box as box
-from mesop.components.button.button import button as button
+from mesop.components.button.button import (
+  button as button,
+)
+from mesop.components.button.button import (
+  content_button as content_button,
+)
 from mesop.components.checkbox.checkbox import (
   CheckboxChangeEvent as CheckboxChangeEvent,
 )

mesop/component_helpers/helper.py

@@ -100,15 +100,14 @@ def wrapper(*args: Any, **kw_args: Any):
       source_code_location = get_caller_source_code_location(levels=2)
     component.MergeFrom(
       create_component(
-        component_name=pb.ComponentName(
-          fn_name=fn.__name__, module_path=fn.__module__
-        ),
+        component_name=get_component_name(fn),
         proto=pb.UserDefinedType(
           args=[
             pb.UserDefinedType.Arg(
               arg_name=kw_arg, code_value=map_code_value(value)
             )
             for kw_arg, value in kw_args.items()
+            if map_code_value(value) is not None
           ]
         ),
         source_code_location=source_code_location,
@@ -123,7 +122,13 @@ def wrapper(*args: Any, **kw_args: Any):
   return cast(C, wrapper)
 
 
-def map_code_value(value: Any) -> pb.CodeValue:
+def get_component_name(fn: Callable[..., Any]) -> pb.ComponentName:
+  if "mesop.components" in fn.__module__:
+    return pb.ComponentName(core_module=True, fn_name=fn.__name__)
+  return pb.ComponentName(fn_name=fn.__name__, module_path=fn.__module__)
+
+
+def map_code_value(value: Any) -> pb.CodeValue | None:
   if isinstance(value, str):
     return pb.CodeValue(string_value=value)
   if isinstance(value, int):
@@ -132,7 +137,7 @@ def map_code_value(value: Any) -> pb.CodeValue:
     return pb.CodeValue(double_value=value)
   if isinstance(value, bool):
     return pb.CodeValue(bool_value=value)
-  raise Exception("Unhandled value", value)
+  return None
 
 
 def create_component(

mesop/components/button/button.py

@@ -2,15 +2,50 @@
 
 import mesop.components.button.button_pb2 as button_pb
 from mesop.component_helpers import (
+  component,
   insert_composite_component,
   register_event_handler,
   register_native_component,
 )
+from mesop.components.text.text import text
 from mesop.events import ClickEvent
 
 
-@register_native_component
+@component
 def button(
+  label: str | None = None,
+  *,
+  on_click: Callable[[ClickEvent], Any] | None = None,
+  type: Literal["raised", "flat", "stroked"] | None = None,
+  color: Literal["primary", "accent", "warn"] | None = None,
+  disable_ripple: bool = False,
+  disabled: bool = False,
+  key: str | None = None,
+):
+  """Creates a simple text Button component.
+
+  Args:
+    label: Text label for button
+    on_click: [click](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click_event) is a native browser event.
+    type: Type of button style to use
+    color: Theme color palette of the button
+    disable_ripple: Whether the ripple effect is disabled or not.
+    disabled: Whether the button is disabled.
+    key: Unique identifier for this component instance.
+  """
+  with content_button(
+    on_click=on_click,
+    type=type,
+    color=color,
+    disable_ripple=disable_ripple,
+    disabled=disabled,
+    key=key,
+  ):
+    text(label)
+
+
+@register_native_component
+def content_button(
   *,
   on_click: Callable[[ClickEvent], Any] | None = None,
   type: Literal["raised", "flat", "stroked", "icon"] | None = None,
@@ -19,8 +54,9 @@ def button(
   disabled: bool = False,
   key: str | None = None,
 ):
-  """Creates a Button component.
-  Button is a composite component.
+  """Creates a button 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_click: [click](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click_event) is a native browser event.
@@ -32,7 +68,7 @@ def button(
   """
   return insert_composite_component(
     key=key,
-    type_name="button",
+    type_name="content_button",
     proto=button_pb.ButtonType(
       color=color,
       disable_ripple=disable_ripple,

mesop/editor/editor_codemod.py

@@ -146,6 +146,8 @@ def leave_Call(  # type: ignore (erroneously forbids return type with `None`)
       "icon"
     ]:
       first_positional_arg = "icon"
+    if component_name.fn_name in ["button"]:
+      first_positional_arg = "label"
     return self._update_call(
       updated_node,
       self.input.arg_path.segments,

mesop/editor/editor_codemod_test.py

@@ -160,6 +160,21 @@ def test_simple_callsite(self) -> None:
       ),
     )
 
+  def test_button_callsite(self) -> None:
+    self.assertEditorUpdate(
+      "button_callsite",
+      pb.EditorUpdateCallsite(
+        component_name=me_name("button"),
+        arg_path=pb.ArgPath(
+          segments=[pb.ArgPathSegment(keyword_argument="type")]
+        ),
+        replacement=pb.CodeReplacement(
+          new_code=pb.CodeValue(string_value="flat"),
+        ),
+        source_code_location=pb.SourceCodeLocation(line=5),
+      ),
+    )
+
   def test_multi_callsite(self) -> None:
     self.assertEditorUpdate(
       "multi_callsite",

mesop/editor/testdata/button_callsite/after.py

@@ -0,0 +1,5 @@
+import mesop as me
+
+
+def app():
+  me.button(type="flat")

mesop/editor/testdata/button_callsite/before.py

@@ -0,0 +1,5 @@
+import mesop as me
+
+
+def app():
+  me.button(type="stroked")

mesop/examples/buttons.py

@@ -14,18 +14,19 @@ def button_click(event: me.ClickEvent):
 @me.page(path="/buttons")
 def main():
   state = me.state(State)
-  with me.button(
-    on_click=button_click, type="flat", color="primary", disabled=False
-  ):
-    me.text(text="primary color button")
 
-  with me.button(on_click=button_click, type="flat"):
-    me.text(text="flat button")
+  me.button(
+    "primary color button",
+    on_click=button_click,
+    type="flat",
+    color="primary",
+    disabled=False,
+  )
 
-  with me.button(on_click=button_click, type="raised"):
-    me.text(text="raised button")
+  me.button("flat button", on_click=button_click, type="flat")
 
-  with me.button(on_click=button_click, type="stroked"):
-    me.text(text="stroked button")
+  me.button("raised button", on_click=button_click, type="raised")
+
+  me.button("stroked button", on_click=button_click, type="stroked")
 
   me.text(text=f"{state.count_clicks} clicks")

mesop/examples/docs/counter.py

@@ -15,5 +15,4 @@ def button_click(event: me.ClickEvent):
 def main():
   state = me.state(State)
   me.text(f"Clicks: {state.clicks}")
-  with me.button(on_click=button_click):
-    me.text("Increment")
+  me.button("Increment", on_click=button_click)