feat: Support individual vertical gaps but shared horizontal gaps (#476)

* feat: Add support for individual vertical gaps but same horizontal

* docs

* typo

* improvement

book/src/guides/layout.md

@@ -170,7 +170,7 @@ fn app(cx: Scope) -> Element {
 
 ### padding
 
-Specify the inner paddings of an element. You can do so by three different ways, just like in CSS.
+Specify the inner paddings of an element. You can do so by three different ways.
 
 ```rust, no_run
 fn app(cx: Scope) -> Element {
@@ -209,7 +209,7 @@ fn app(cx: Scope) -> Element {
 
 ### margin
 
-Specify the margin of an element. You can do so by three different ways, just like in CSS.
+Specify the margin of an element. You can do so by three different ways.
 
 ```rust, no_run
 fn app(cx: Scope) -> Element {

crates/elements/src/_docs/attributes/margin.md

@@ -1,5 +1,5 @@
 Specify the margin of an element.
-You can do so by three different ways, just like in CSS.
+You can do so by four different ways, just like in CSS.
 
 ### Example
 
@@ -10,6 +10,7 @@ fn app(cx: Scope) -> Element {
         rect {
             margin: "25", // 25 in all sides
             margin: "100 50", // 100 in top and bottom, and 50 in left and right
+            margin: "2 15 25", // 2 in top, 15 in left and right, and 25 in bottom
             margin: "5 7 3 9" // 5 in top, 7 in right, 3 in bottom and 9 in left
         }
     )

crates/elements/src/_docs/attributes/padding.md

@@ -1,4 +1,4 @@
-Specify the inner paddings of an element. You can do so by three different ways, just like in CSS.
+Specify the inner paddings of an element. You can do so by four different ways, just like in CSS.
 
 ### Example
 
@@ -9,6 +9,7 @@ fn app(cx: Scope) -> Element {
         rect {
             padding: "25", // 25 in all sides
             padding: "100 50", // 100 in top and bottom, and 50 in left and right
+            padding: "2 15 25", // 2 in top, 15 in left and right, and 25 in bottom
             padding: "5 7 3 9" // 5 in top, 7 in right, 3 in bottom and 9 in left
         }
     )

crates/state/src/values/gaps.rs

@@ -43,6 +43,25 @@ impl Parse for Gaps {
                         .map_err(|_| ParseGapError)?,
                 )
             }
+            // Individual vertical but same horizontal
+            3 => {
+                let top = values
+                    .next()
+                    .ok_or(ParseGapError)?
+                    .parse::<f32>()
+                    .map_err(|_| ParseGapError)?;
+                let left_and_right = values
+                    .next()
+                    .ok_or(ParseGapError)?
+                    .parse::<f32>()
+                    .map_err(|_| ParseGapError)?;
+                let bottom = values
+                    .next()
+                    .ok_or(ParseGapError)?
+                    .parse::<f32>()
+                    .map_err(|_| ParseGapError)?;
+                paddings = Gaps::new(top, left_and_right, bottom, left_and_right);
+            }
             // Each directions
             4 => {
                 paddings = Gaps::new(

crates/state/tests/parse_gaps.rs

@@ -18,3 +18,9 @@ fn parse_sides_gaps() {
     let gaps = Gaps::parse("1 2 3 4");
     assert_eq!(gaps, Ok(Gaps::new(1.0, 2.0, 3.0, 4.0)));
 }
+
+#[test]
+fn parse_horizontal_axis_and_vertical_sides() {
+    let gaps = Gaps::parse("5 50 30");
+    assert_eq!(gaps, Ok(Gaps::new(5.0, 50.0, 30.0, 50.0)));
+}

examples/paddings.rs

@@ -13,7 +13,7 @@ fn app(cx: Scope) -> Element {
     render!(
         rect {
             overflow: "clip",
-            height: "33%",
+            height: "25%",
             width: "100%",
             padding: "15",
             background: "black",
@@ -25,7 +25,7 @@ fn app(cx: Scope) -> Element {
         }
         rect {
             overflow: "clip",
-            height: "33%",
+            height: "25%",
             width: "100%",
             padding: "10 30 50 70",
             background: "gray",
@@ -37,10 +37,22 @@ fn app(cx: Scope) -> Element {
         }
         rect {
             overflow: "clip",
-            height: "33%",
+            height: "25%",
             width: "100%",
             padding: "25 125",
-            background: "white",
+            background: "black",
+            rect {
+                height: "100%",
+                width: "100%",
+                background: "yellow"
+            }
+        }
+        rect {
+            overflow: "clip",
+            height: "25%",
+            width: "100%",
+            padding: "30 50 10",
+            background: "gray",
             rect {
                 height: "100%",
                 width: "100%",