Add box-sizing and z-index to Style

Author: wwwillchen

mesop/component_helpers/style.py

@@ -118,6 +118,7 @@ class Style:
       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).
       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).
       column_gap: Sets the gap between columns. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/column-gap).
       columns: Specifies the number of columns in a multi-column element. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/columns).
@@ -157,6 +158,7 @@ class Style:
       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).
       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).
   """
 
   # For literal properties, make the most commonly used option the first literal
@@ -168,6 +170,7 @@ class Style:
   border: Border | None = None
   border_radius: int | str | None = None
   box_shadow: str | None = None
+  box_sizing: str | None = None
   color: str | None = None
   column_gap: int | str | None = None
   columns: int | None = None
@@ -256,6 +259,7 @@ class Style:
     "break-spaces",
   ] | None = None
   width: int | str | None = None
+  z_index: int | None = None
 
 
 def to_style_proto(s: Style) -> pb.Style:
@@ -266,6 +270,7 @@ def to_style_proto(s: Style) -> pb.Style:
     border=_map_border(s.border),
     border_radius=_px_str(s.border_radius),
     box_shadow=s.box_shadow,
+    box_sizing=s.box_sizing,
     color=s.color,
     column_gap=_px_str(s.column_gap),
     columns=s.columns,
@@ -306,6 +311,7 @@ def to_style_proto(s: Style) -> pb.Style:
     text_overflow=s.text_overflow,
     white_space=s.white_space,
     width=_px_str(s.width),
+    z_index=s.z_index,
   )
 
 

mesop/protos/ui.proto

@@ -217,14 +217,15 @@ message UserDefinedType {
     repeated Arg args = 1;
 }
 
-// Next id: 47
+// Next id: 49
 message Style {
     optional string align_content = 32;
     optional string align_items = 1;
     optional string background = 2;
     optional Border border = 3;
     optional string border_radius = 28;
     optional string box_shadow = 29;
+    optional string box_sizing = 47;
     optional string color = 4;
     optional string column_gap = 33;
     optional int32 columns = 5;
@@ -265,6 +266,7 @@ message Style {
     optional string text_overflow = 25;
     optional string white_space = 26;
     optional string width = 27;
+    optional int32 z_index = 48;
 }
 
 message EdgeInsets {

mesop/web/src/utils/styles.ts

@@ -40,6 +40,9 @@ export function formatStyle(styleObj: Style): string {
   if (styleObj.getBoxShadow()) {
     style += `box-shadow: ${styleObj.getBoxShadow()};`;
   }
+  if (styleObj.getBoxSizing()) {
+    style += `box-sizing: ${styleObj.getBoxSizing()};`;
+  }
   if (styleObj.getColor()) {
     style += `color: ${styleObj.getColor()};`;
   }
@@ -169,5 +172,8 @@ export function formatStyle(styleObj: Style): string {
   if (styleObj.getWidth()) {
     style += `width: ${styleObj.getWidth()};`;
   }
+  if (styleObj.getZIndex()) {
+    style += `z-index: ${styleObj.getZIndex()};`;
+  }
   return style;
 }