Change border function to take a record type

src/UI/Style.re

@@ -324,30 +324,58 @@ type styleProps = [
   | `Cursor(option(MouseCursors.t))
 ];
 
+let right = f => `Right(f);
+let bottom = f => `Bottom(f);
+let left = f => `Left(f);
+let top = f => `Top(f);
+
+let fontSize = f => `FontSize(f);
 let fontFamily = f => `FontFamily(f);
+
 let height = h => `Height(h);
 let width = w => `Width(w);
+
 let position = p => `Position(p);
+
 let margin = m => `Margin(m);
 let marginLeft = m => `MarginLeft(m);
 let marginRight = m => `MarginRight(m);
 let marginTop = m => `MarginTop(m);
 let marginBottom = m => `MarginBottom(m);
-let border = b => `Border(b);
-let borderLeft = b => `BorderLeft(b);
-let borderRight = b => `BorderRight(b);
-let borderTop = b => `BorderTop(b);
-let borderBottom = b => `BorderBottom(b);
 
-let getflexDirection = d =>
+let border = (b: Border.t) =>
+  Border.make(~color=b.color, ~width=b.width, ()) |> (b => `Border(b));
+let borderLeft = (b: Border.t) =>
+  Border.make(~color=b.color, ~width=b.width, ()) |> (b => `BorderLeft(b));
+let borderRight = (b: Border.t) =>
+  Border.make(~color=b.color, ~width=b.width, ()) |> (b => `BorderRight(b));
+let borderTop = (b: Border.t) =>
+  Border.make(~color=b.color, ~width=b.width, ()) |> (b => `BorderTop(b));
+let borderBottom = (b: Border.t) =>
+  Border.make(~color=b.color, ~width=b.width, ()) |> (b => `BorderBottom(b));
+let borderHorizontal = (b: Border.t) =>
+  Border.make(~color=b.color, ~width=b.width, ())
+  |> (b => `BorderHorizontal(b));
+let borderVertical = (b: Border.t) =>
+  Border.make(~color=b.color, ~width=b.width, ())
+  |> (b => `BorderVertical(b));
+
+let opacity = o => `Opacity(o);
+let transform = t => `Transform(t);
+let boxShadow = b => `BoxShadow(b);
+let overflow = o => `Overflow(o);
+let color = o => `Color(o);
+let backgroundColor = o => `BackgroundColor(o);
+
+let flexDirection = d =>
   switch (d) {
   | `Column => LayoutTypes.Column
   | `ColumnReverse => LayoutTypes.ColumnReverse
   | `RowReverse => LayoutTypes.RowReverse
   | `Row => LayoutTypes.Row
   };
 
-let getAlignment = a =>
+let alignment = a =>
   switch (a) {
   | `Center => LayoutTypes.AlignCenter
   | `Stretch => LayoutTypes.AlignStretch
@@ -356,7 +384,7 @@ let getAlignment = a =>
   | `FlexEnd => LayoutTypes.AlignFlexEnd
   };
 
-let getJustification = j =>
+let justify = j =>
   switch (j) {
   | `FlexStart => LayoutTypes.JustifyFlexStart
   | `Center => LayoutTypes.JustifyCenter

test/UI/StyleTest.re

@@ -38,20 +38,16 @@ test("Style API tests", () => {
   });
 
   test("it correctly sets a border", () => {
-    let borderStyle = Border.make(~color=black, ~width=2, ());
-    let borderLeftStyle = Border.make(~color=rebeccaPurple, ~width=2, ());
-    let borderTopStyle = Border.make(~color=red, ~width=2, ());
-    let borderRightStyle = Border.make(~color=blue, ~width=2, ());
-    let borderBottomStyle = Border.make(~color=orange, ~width=2, ());
-
     let styles =
       create(
         ~userStyles=[
-          border(borderStyle),
-          borderLeft(borderLeftStyle),
-          borderTop(borderTopStyle),
-          borderRight(borderRightStyle),
-          borderBottom(borderBottomStyle),
+          border({color: black, width: 2}),
+          borderLeft({color: rebeccaPurple, width: 2}),
+          borderTop({color: red, width: 2}),
+          borderRight({color: blue, width: 2}),
+          borderBottom({color: orange, width: 2}),
+          borderHorizontal({color: paleVioletRed, width: 12}),
+          borderVertical({color: paleTurquoise, width: 18}),
         ],
         (),
       );
@@ -60,5 +56,10 @@ test("Style API tests", () => {
     expect(styles.borderTop).toEqual({color: red, width: 2});
     expect(styles.borderRight).toEqual({color: blue, width: 2});
     expect(styles.borderLeft).toEqual({color: rebeccaPurple, width: 2});
+    expect(styles.borderHorizontal).toEqual({
+      color: paleVioletRed,
+      width: 12,
+    });
+    expect(styles.borderVertical).toEqual({color: paleTurquoise, width: 18});
   });
 });