From a7ddb312a3a15bc61f8a44208542a1887c0b4e97 Mon Sep 17 00:00:00 2001
From: Will Chen <willchen90@gmail.com>
Date: Sun, 28 Jan 2024 22:39:36 -0800
Subject: [PATCH] Add line height as a style prop

---
 mesop/component_helpers/style.py | 3 +++
 mesop/protos/ui.proto            | 3 ++-
 mesop/web/src/utils/styles.ts    | 3 +++
 3 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/mesop/component_helpers/style.py b/mesop/component_helpers/style.py
index e6244302d..fec65e344 100644
--- a/mesop/component_helpers/style.py
+++ b/mesop/component_helpers/style.py
@@ -112,6 +112,7 @@ class Style:
       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).
       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).
       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).
@@ -194,6 +195,7 @@ class Style:
     "stretch",
   ] | None = None
   letter_spacing: int | str | None = None
+  line_height: int | str | None = None
   margin: Margin | None = None
   overflow_x: OverflowValues | None = None
   overflow_y: OverflowValues | None = None
@@ -247,6 +249,7 @@ def to_style_proto(s: Style) -> pb.Style:
     height=_px_str(s.height),
     justify_content=s.justify_content,
     letter_spacing=_px_str(s.letter_spacing),
+    line_height=str(s.line_height),
     margin=_map_edge_insets(s.margin),
     overflow_x=s.overflow_x,
     overflow_y=s.overflow_y,
diff --git a/mesop/protos/ui.proto b/mesop/protos/ui.proto
index eed799aef..e48354623 100644
--- a/mesop/protos/ui.proto
+++ b/mesop/protos/ui.proto
@@ -217,7 +217,7 @@ message UserDefinedType {
     repeated Arg args = 1;
 }
 
-// Next id: 31
+// Next id: 32
 message Style {
     optional string align_items = 1;
     optional string background = 2;
@@ -239,6 +239,7 @@ message Style {
     optional string height = 15;
     optional string justify_content = 16;
     optional string letter_spacing = 17;
+    optional string line_height = 31;
     optional EdgeInsets margin = 18;
     optional string overflow_x = 19;
     optional string overflow_y = 20;
diff --git a/mesop/web/src/utils/styles.ts b/mesop/web/src/utils/styles.ts
index eb774a0b0..517c3ddb7 100644
--- a/mesop/web/src/utils/styles.ts
+++ b/mesop/web/src/utils/styles.ts
@@ -82,6 +82,9 @@ export function formatStyle(styleObj: Style): string {
   if (styleObj.getLetterSpacing()) {
     style += `letter-spacing: ${styleObj.getLetterSpacing()};`;
   }
+  if (styleObj.getLineHeight()) {
+    style += `line-height: ${styleObj.getLineHeight()};`;
+  }
   if (styleObj.getMargin()) {
     const margin = styleObj.getMargin()!;
     style += `margin: ${margin.getTop() || 0} ${margin.getRight() || 0} ${