Add some new style properties to the Style class (#300)

New properties

 - visibility
 - opacity
 - top / left / right / bottom
 - Add remaining grid properties:
   - grid_auto_columns
   - grid_auto_flow
   - grid_auto_rows
   - grid_column
   - grid_row
   - Exception: left out grid_template property

Also update animations using opacity and position properties

Also some minor style property fixes

- Allow string values for:
  - grid_column_start
  - grid_column_end
  - grid_row_start
  - grid_row_end
- Fix potential bug with direct str conversions
  - If the value is not set, setting str(property) would yield 'None'
  - That seems undesirable, so add _int_str and _float_str wrappers

demo/basic_animation.py

@@ -1,14 +1,15 @@
 import time
+from dataclasses import field
 
 import mesop as me
 
 
 @me.stateclass
 class State:
-  ex1_rgba: list[int]
-  ex2_rgba: list[int | float]
+  ex1_rgba: list[int] = field(default_factory=lambda: [255, 0, 0, 1])
+  ex2_opacity: float = 1.0
   ex3_width: int
-  ex4_margin: int
+  ex4_left: int
 
 
 DEFAULT_MARGIN = me.Style(margin=me.Margin.all(30))
@@ -19,11 +20,6 @@ class State:
 def app():
   state = me.state(State)
 
-  # Initialize default values
-  if not state.ex1_rgba:
-    state.ex1_rgba = [255, 0, 0, 1]
-    state.ex2_rgba = [255, 0, 0, 1]
-
   with me.box(style=DEFAULT_MARGIN):
     me.text("Transform color", type="headline-5")
     me.text(
@@ -56,7 +52,8 @@ def app():
     )
     with me.box(
       style=me.Style(
-        background=f"rgba({','.join(map(str, state.ex2_rgba))})",
+        background="red",
+        opacity=state.ex2_opacity,
         width=100,
         height=100,
         margin=me.Margin.all(10),
@@ -95,15 +92,17 @@ def app():
     me.button(
       "Transform", type="flat", on_click=transform_margin, style=BUTTON_MARGIN
     )
-    with me.box(
-      style=me.Style(
-        background="rgba(255, 0, 0, 1)",
-        margin=me.Margin(left=state.ex4_margin, top=20),
-        width=30,
-        height=30,
-      )
-    ):
-      me.text("")
+    with me.box():
+      with me.box(
+        style=me.Style(
+          position="relative",
+          background="rgba(255, 0, 0, 1)",
+          left=state.ex4_left,
+          width=30,
+          height=30,
+        )
+      ):
+        me.text("")
 
 
 def transform_red_yellow(e: me.ClickEvent):
@@ -127,25 +126,21 @@ def transform_red_yellow(e: me.ClickEvent):
 
 
 def transform_fade_in_out(e: me.ClickEvent):
-  """Update alpha of the rgba.
-
-  The better option would be to use opacity, but Mesop does not have that property
-  available yet.
-  """
+  """Update opacity"""
   state = me.state(State)
-  if state.ex2_rgba[3] == 0:
-    while state.ex2_rgba[3] < 1:
-      state.ex2_rgba[3] += 0.05
+  if state.ex2_opacity == 0:
+    while state.ex2_opacity < 1:
+      state.ex2_opacity += 0.05
       yield
       time.sleep(0.1)
-    state.ex2_rgba[3] = 1
+    state.ex2_opacity = 1.0
     yield
   else:
-    while state.ex2_rgba[3] > 0:
-      state.ex2_rgba[3] -= 0.05
+    while state.ex2_opacity > 0:
+      state.ex2_opacity -= 0.05
       yield
       time.sleep(0.1)
-    state.ex2_rgba[3] = 0
+    state.ex2_opacity = 0
     yield
 
 
@@ -169,23 +164,19 @@ def transform_width(e: me.ClickEvent):
 
 
 def transform_margin(e: me.ClickEvent):
-  """Update the margin to create sense of movement.
-
-  Mesop does not yet have the top/bottom/left/right properties available,
-  so just modifying the margin for this example.
-  """
+  """Update the position to create sense of movement."""
   state = me.state(State)
-  if state.ex4_margin == 0:
-    while state.ex4_margin < 200:
-      state.ex4_margin += 10
+  if state.ex4_left == 0:
+    while state.ex4_left < 200:
+      state.ex4_left += 10
       yield
       time.sleep(0.1)
-    state.ex4_margin = 200
+    state.ex4_left = 200
     yield
   else:
-    while state.ex4_margin > 0:
-      state.ex4_margin -= 10
+    while state.ex4_left > 0:
+      state.ex4_left -= 10
       yield
       time.sleep(0.1)
-    state.ex4_margin = 0
+    state.ex4_left = 0
     yield

mesop/component_helpers/style.py

@@ -212,6 +212,7 @@ class Style:
       background: Sets the background color or image of the component. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/background).
       border: Defines the border properties for each side of the component. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/border).
       border_radius: Defines the border radius. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius).
+      bottom: Helps set vertical position of a positioned element. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/bottom).
       box_shadow: Defines the box shadow. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow).
       box_sizing: Defines the box sizing. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing).
       color: Sets the color of the text inside the component. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/color).
@@ -230,28 +231,38 @@ class Style:
       font_weight: Sets the weight (or boldness) of the font. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/font-weight).
       gap: Sets the gap. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/gap).
       grid_area: Sets the grid area. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-area).
+      grid_auto_columns: CSS property specifies the size of an implicitly-created grid column track or pattern of tracks. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-columns).
+      grid_auto_flow: CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow).
+      grid_auto_rows: CSS property specifies the size of an implicitly-created grid row track or pattern of tracks. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-rows).
+      grid_column: CSS shorthand property specifies a grid item's size and location within a grid column. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column).
       grid_column_start: Sets the grid column start. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-start).
       grid_column_end: Sets the grid column end. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-column-end).
+      grid_row: CSS shorthand property specifies a grid item's size and location within a grid row. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row).
       grid_row_start: Sets the grid row start. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-start).
       grid_row_end: Sets the grid row end. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-row-end).
       grid_template_areas: Sets the grid template areas; each element is a row. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-areas).
       grid_template_columns: Sets the grid template columns. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns).
       grid_template_rows: Sets the grid template rows. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows).
       height: Sets the height of the component. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/height).
       justify_content: Aligns the flexible container's items on the main-axis. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content).
+      left: Helps set horizontal position of a positioned element. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/left).
       letter_spacing: Increases or decreases the space between characters in text. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/letter-spacing).
       line height: Set the line height (relative to the font size). See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/line-height).
       margin: Sets the margin space required on each side of an element. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/margin).
+      opacity: Sets the opacity property. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity).
       outline: Sets the outline property. Note: `input` component has default browser stylings. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/outline).
       overflow_wrap: Specifies how long text can be broken up by new lines to prevent overflowing. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-wrap).
       overflow_x: Specifies the handling of overflow in the horizontal direction. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-x).
       overflow_y: Specifies the handling of overflow in the vertical direction. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/overflow-y).
       padding: Sets the padding space required on each side of an element. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/padding).
       position: Specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky). See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/position).
+      right: Helps set horizontal position of a positioned element. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/right).
       row_gap: Sets the gap between rows. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap).
       text_align: Specifies the horizontal alignment of text in an element. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/text-align).
       text_decoration: Specifies the decoration added to text. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration).
       text_overflow: Specifies how overflowed content that is not displayed should be signaled to the user. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/text-overflow).
+      top: Helps set vertical position of a positioned element. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/top).
+      visibility: Sets the visibility property. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/visibility).
       white_space: Specifies how white space inside an element is handled. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/white-space).
       width: Sets the width of the component. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/width).
       z-index: Sets the z-index of the component. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index).
@@ -266,6 +277,7 @@ class Style:
   background: str | None = None
   border: Border | None = None
   border_radius: int | str | None = None
+  bottom: int | str | None = None
   box_shadow: str | None = None
   box_sizing: str | None = None
   color: str | None = None
@@ -322,19 +334,26 @@ class Style:
   ) = None
   gap: int | str | None = None
   grid_area: str | None = None
-  grid_column_start: int | None = None
-  grid_column_end: int | None = None
-  grid_row_start: int | None = None
-  grid_row_end: int | None = None
+  grid_auto_columns: str | None = None
+  grid_auto_flow: str | None = None
+  grid_auto_rows: str | None = None
+  grid_column: str | None = None
+  grid_column_start: int | str | None = None
+  grid_column_end: int | str | None = None
+  grid_row: str | None = None
+  grid_row_start: int | str | None = None
+  grid_row_end: int | str | None = None
   grid_template_areas: list[str] | None = None
   grid_template_columns: str | None = None
   grid_template_rows: str | None = None
   height: int | str | None = None
   justify_content: ContentAlignmentValues | None = None
   justify_items: ItemAlignmentValues | None = None
+  left: int | str | None = None
   letter_spacing: int | str | None = None
   line_height: str | None = None
   margin: Margin | None = None
+  opacity: float | str | None = None
   outline: str | None = None
   overflow_wrap: OverflowWrapValues | None = None
   overflow_x: OverflowValues | None = None
@@ -350,6 +369,7 @@ class Style:
     ]
     | None
   ) = None
+  right: int | str | None = None
   row_gap: int | str | None = None
   text_align: (
     Literal[
@@ -363,6 +383,20 @@ class Style:
   ) = None
   text_decoration: Literal["underline", "none"] | None = None
   text_overflow: Literal["ellipsis", "clip"] | None = None
+  top: int | str | None = None
+  visibility: (
+    Literal[
+      "visible",
+      "hidden",
+      "collapse",
+      "inherit",
+      "initial",
+      "revert",
+      "revert-layer",
+      "unset",
+    ]
+    | None
+  ) = None
   white_space: (
     Literal[
       "normal",
@@ -386,47 +420,58 @@ def to_style_proto(s: Style) -> pb.Style:
     background=s.background,
     border=_map_border(s.border),
     border_radius=_px_str(s.border_radius),
+    bottom=_px_str(s.bottom),
     box_shadow=s.box_shadow,
     box_sizing=s.box_sizing,
     color=s.color,
     column_gap=_px_str(s.column_gap),
-    columns=str(s.columns),
+    columns=_int_str(s.columns),
     cursor=s.cursor,
     display=s.display,
     flex_basis=s.flex_basis,
     flex_direction=s.flex_direction,
     flex_grow=s.flex_grow,
-    flex_shrink=str(s.flex_shrink),
+    flex_shrink=_int_str(s.flex_shrink),
     flex_wrap=s.flex_wrap,
     font_family=s.font_family,
     font_size=_px_str(s.font_size),
     font_style=s.font_style,
     font_weight=_map_font_weight(s.font_weight),
     gap=_px_str(s.gap),
     grid_area=s.grid_area,
-    grid_column_start=s.grid_column_start,
-    grid_column_end=s.grid_column_end,
-    grid_row_start=s.grid_row_start,
-    grid_row_end=s.grid_row_end,
+    grid_auto_columns=s.grid_auto_columns,
+    grid_auto_flow=s.grid_auto_flow,
+    grid_auto_rows=s.grid_auto_rows,
+    grid_column=s.grid_column,
+    grid_column_start=_int_str(s.grid_column_start),
+    grid_column_end=_int_str(s.grid_column_end),
+    grid_row=s.grid_row,
+    grid_row_start=_int_str(s.grid_row_start),
+    grid_row_end=_int_str(s.grid_row_end),
     grid_template_areas=s.grid_template_areas,
     grid_template_columns=s.grid_template_columns,
     grid_template_rows=s.grid_template_rows,
     height=_px_str(s.height),
     justify_content=s.justify_content,
     justify_items=s.justify_items,
+    left=_px_str(s.left),
     letter_spacing=_px_str(s.letter_spacing),
     line_height=str(s.line_height),
     margin=_map_edge_insets(s.margin),
+    opacity=_float_str(s.opacity),
     outline=s.outline,
     overflow_wrap=s.overflow_wrap,
     overflow_x=s.overflow_x,
     overflow_y=s.overflow_y,
     padding=_map_edge_insets(s.padding),
     position=s.position,
+    right=_px_str(s.right),
     row_gap=_px_str(s.row_gap),
     text_align=s.text_align,
     text_decoration=s.text_decoration,
     text_overflow=s.text_overflow,
+    top=_px_str(s.top),
+    visibility=s.visibility,
     white_space=s.white_space,
     width=_px_str(s.width),
     z_index=s.z_index,
@@ -471,3 +516,17 @@ def _px_str(int_or_str: int | str | None) -> str | None:
   if isinstance(int_or_str, int):
     return str(int_or_str) + "px"
   return int_or_str
+
+
+def _int_str(int_or_str: int | str | None) -> str | None:
+  if isinstance(int_or_str, int):
+    return str(int_or_str)
+  return int_or_str
+
+
+def _float_str(float_or_str: float | str | None) -> str | None:
+  # Int is included to fix type check warning:
+  # Expression of type "int | str | None" cannot be assigned to return type "str | None"
+  if isinstance(float_or_str, (float, int)):
+    return str(float_or_str)
+  return float_or_str

mesop/editor/component_configs.py

@@ -62,13 +62,24 @@ def get_fields(
       field_type = pb.FieldType(int_type=pb.IntType(default_value=0))
     elif param_type is float:
       field_type = pb.FieldType(float_type=pb.FloatType(default_value=0))
-    elif param_type is str or (
-      # special case, for int|str|None (used for styles, e.g. pixel value), use str
-      args
-      and len(args) == 3
-      and args[0] is int
-      and args[1] is str
-      and args[2] is NoneType
+    elif (
+      param_type is str
+      or (
+        # special case, for int|str|None (used for styles, e.g. pixel value), use str
+        args
+        and len(args) == 3
+        and args[0] is int
+        and args[1] is str
+        and args[2] is NoneType
+      )
+      or (
+        # special case, for float|str|None (used for styles, e.g. opacity), use str
+        args
+        and len(args) == 3
+        and args[0] is float
+        and args[1] is str
+        and args[2] is NoneType
+      )
     ):
       field_type = pb.FieldType(string_type=pb.StringType())
     elif getattr(param_type, "__origin__", None) is Literal: