Add border radius to style

Author: wwwillchen

mesop/component_helpers/style.py

@@ -95,6 +95,7 @@ class Style:
       align_items: Specifies the default alignment for items inside a flexible container. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items).
       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).
       color: Sets the color of the text inside the component. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/color).
       columns: Specifies the number of columns in a multi-column element. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/columns).
       display: Defines the display type of the component. See [MDN doc](https://developer.mozilla.org/en-US/docs/Web/CSS/display).
@@ -133,6 +134,7 @@ class Style:
   ] | None = None
   background: str | None = None
   border: Border | None = None
+  border_radius: int | str | None = None
   color: str | None = None
   columns: int | None = None
   display: Literal[
@@ -220,6 +222,7 @@ def to_style_proto(s: Style) -> pb.Style:
     align_items=s.align_items,
     background=s.background,
     border=_map_border(s.border),
+    border_radius=_px_str(s.border_radius),
     color=s.color,
     columns=s.columns,
     display=s.display,

mesop/protos/ui.proto

@@ -216,10 +216,12 @@ message UserDefinedType {
     repeated Arg args = 1;
 }
 
+// Next id: 29
 message Style {
     optional string align_items = 1;
     optional string background = 2;
     optional Border border = 3;
+    optional string border_radius = 28;
     optional string color = 4;
     optional int32 columns = 5;
     optional string display = 6;

mesop/web/src/utils/styles.ts

@@ -31,6 +31,9 @@ export function formatStyle(styleObj: Style): string {
       style += `border-right: ${right.getWidth()} ${right.getStyle()} ${right.getColor()};`;
     }
   }
+  if (styleObj.getBorderRadius()) {
+    style += `border-radius: ${styleObj.getBorderRadius()};`;
+  }
   if (styleObj.getColor()) {
     style += `color: ${styleObj.getColor()};`;
   }