Change slide toggle to have a simple variant (slide_toggle) and an advanced variant (content_slide_toggle)

This makes the API consistent with button and checkbox.

Author: wwwillchen

docs/components/slide_toggle.md

@@ -11,4 +11,5 @@ Slide Toggle allows the user to toggle on and off and is based on the [Angular M
 ## API
 
 ::: mesop.components.slide_toggle.slide_toggle.slide_toggle
+::: mesop.components.slide_toggle.slide_toggle.content_slide_toggle
 ::: mesop.components.slide_toggle.slide_toggle.SlideToggleChangeEvent

mesop/__init__.py

@@ -86,6 +86,9 @@
 from mesop.components.slide_toggle.slide_toggle import (
   SlideToggleChangeEvent as SlideToggleChangeEvent,
 )
+from mesop.components.slide_toggle.slide_toggle import (
+  content_slide_toggle as content_slide_toggle,
+)
 from mesop.components.slide_toggle.slide_toggle import (
   slide_toggle as slide_toggle,
 )

mesop/components/slide_toggle/e2e/slide_toggle_app.py

@@ -13,6 +13,8 @@ def on_change(event: me.SlideToggleChangeEvent):
 
 @me.page(path="/components/slide_toggle/e2e/slide_toggle_app")
 def app():
-  me.slide_toggle(on_change=on_change)
+  me.slide_toggle(label="hi", on_change=on_change)
+  with me.content_slide_toggle(on_change=on_change):
+    me.text("content_slide_toggle")
   s = me.state(State)
   me.text(text=f"Toggled: {s.toggled}")

mesop/components/slide_toggle/slide_toggle.py

@@ -3,11 +3,13 @@
 
 import mesop.components.slide_toggle.slide_toggle_pb2 as slide_toggle_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
 
 
@@ -30,8 +32,53 @@ class SlideToggleChangeEvent(MesopEvent):
 )
 
 
-@register_native_component
+@component()
 def slide_toggle(
+  label: str | None = None,
+  *,
+  key: str | None = None,
+  label_position: Literal["before", "after"] = "after",
+  required: bool = False,
+  color: Literal["primary", "accent", "warn"] | None = None,
+  disabled: bool = False,
+  disable_ripple: bool = False,
+  tab_index: int = 0,
+  checked: bool = False,
+  hide_icon: bool = False,
+  on_change: Callable[[SlideToggleChangeEvent], Any] | None = None,
+):
+  """Creates a simple Slide toggle component with a text label.
+
+  Args:
+    label: Text label for slide toggle
+    on_change: An event will be dispatched each time the slide-toggle changes its value.
+    label_position: Whether the label should appear after or before the slide-toggle. Defaults to 'after'.
+    required: Whether the slide-toggle is required.
+    color: Palette color of slide toggle.
+    disabled: Whether the slide toggle is disabled.
+    disable_ripple: Whether the slide toggle has a ripple.
+    tab_index: Tabindex of slide toggle.
+    checked: Whether the slide-toggle element is checked or not.
+    hide_icon: Whether to hide the icon inside of the slide toggle.
+    key: Unique identifier for this component instance.
+  """
+  with content_slide_toggle(
+    key=key,
+    label_position=label_position,
+    required=required,
+    color=color,
+    disabled=disabled,
+    disable_ripple=disable_ripple,
+    tab_index=tab_index,
+    checked=checked,
+    hide_icon=hide_icon,
+    on_change=on_change,
+  ):
+    text(label)
+
+
+@register_native_component
+def content_slide_toggle(
   *,
   key: str | None = None,
   label_position: Literal["before", "after"] = "after",
@@ -44,7 +91,10 @@ def slide_toggle(
   hide_icon: bool = False,
   on_change: Callable[[SlideToggleChangeEvent], Any] | None = None,
 ):
-  """Creates a Slide toggle component.
+  """Creates a Slide toggle 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: An event will be dispatched each time the slide-toggle changes its value.
@@ -60,7 +110,7 @@ def slide_toggle(
   """
   return insert_composite_component(
     key=key,
-    type_name="slide_toggle",
+    type_name="content_slide_toggle",
     proto=slide_toggle_pb.SlideToggleType(
       label_position=label_position,
       required=required,

mesop/web/src/component_renderer/type_to_component.ts

@@ -57,7 +57,7 @@ export const typeToComponent = {
   'slider': SliderComponent,
   'select': SelectComponent,
   'radio': RadioComponent,
-  'slide_toggle': SlideToggleComponent,
+  'content_slide_toggle': SlideToggleComponent,
   'progress_spinner': ProgressSpinnerComponent,
   'progress_bar': ProgressBarComponent,
   'icon': IconComponent,