Merge pull request facebook#112 from reasonml-community/new-styles-api-fix-pct-margin-padding

Support % for margin

Author: wokalski

lib/js/src/style.js

@@ -12,13 +12,15 @@ let encode_pt_pct = (value) =>
   | Pct(pct) => Encode.pct(pct)
   };
 
-type pt_auto =
+type pt_pct_auto =
   | Pt(float)
+  | Pct(float)
   | Auto;
 
-let encode_pt_auto = (value) =>
+let encode_pt_pct_auto = (value) =>
   switch value {
-  | Pt(value) => Encode.float(value)
+  | Pt(pt) => Encode.float(pt)
+  | Pct(pct) => Encode.pct(pct)
   | Auto => Encode.string("auto")
   };
 
@@ -221,19 +223,19 @@ let justifyContent = (v) =>
     }
   );
 
-let margin = (value) => ("margin", encode_pt_auto(value));
+let margin = (value) => ("margin", encode_pt_pct_auto(value));
 
-let marginBottom = (value) => ("marginBottom", encode_pt_auto(value));
+let marginBottom = (value) => ("marginBottom", encode_pt_pct_auto(value));
 
-let marginHorizontal = (value) => ("marginHorizontal", encode_pt_auto(value));
+let marginHorizontal = (value) => ("marginHorizontal", encode_pt_pct_auto(value));
 
-let marginLeft = (value) => ("marginLeft", encode_pt_auto(value));
+let marginLeft = (value) => ("marginLeft", encode_pt_pct_auto(value));
 
-let marginRight = (value) => ("marginRight", encode_pt_auto(value));
+let marginRight = (value) => ("marginRight", encode_pt_pct_auto(value));
 
-let marginTop = (value) => ("marginTop", encode_pt_auto(value));
+let marginTop = (value) => ("marginTop", encode_pt_pct_auto(value));
 
-let marginVertical = (value) => ("marginVertical", encode_pt_auto(value));
+let marginVertical = (value) => ("marginVertical", encode_pt_pct_auto(value));
 
 let maxHeight = (value) => ("maxHeight", encode_pt_pct(value));
 

src/style.re

@@ -6,8 +6,9 @@ type pt_pct =
   | Pt(float)
   | Pct(float);
 
-type pt_auto =
+type pt_pct_auto =
   | Pt(float)
+  | Pct(float)
   | Auto;
 
 type pt_pct_animated_interpolated =
@@ -119,19 +120,19 @@ type justifyContent =
 
 let justifyContent: justifyContent => styleElement;
 
-let margin: pt_auto => styleElement;
+let margin: pt_pct_auto => styleElement;
 
-let marginBottom: pt_auto => styleElement;
+let marginBottom: pt_pct_auto => styleElement;
 
-let marginHorizontal: pt_auto => styleElement;
+let marginHorizontal: pt_pct_auto => styleElement;
 
-let marginLeft: pt_auto => styleElement;
+let marginLeft: pt_pct_auto => styleElement;
 
-let marginRight: pt_auto => styleElement;
+let marginRight: pt_pct_auto => styleElement;
 
-let marginTop: pt_auto => styleElement;
+let marginTop: pt_pct_auto => styleElement;
 
-let marginVertical: pt_auto => styleElement;
+let marginVertical: pt_pct_auto => styleElement;
 
 let maxHeight: pt_pct => styleElement;
 

src/style.rei

@@ -10,7 +10,7 @@ module Replacements = {
       ("padding", ["", "Horizontal", "Vertical", "Left", "Right", "Bottom", "Top"])
     ]);
   let pt_pct_animated_interpolated = ["height", "width", "top", "bottom", "left", "right"];
-  let pt_auto =
+  let pt_pct_auto =
     combine([("margin", ["", "Bottom", "Top", "Right", "Left", "Horizontal", "Vertical"])]);
   let variantReplacements = [
     ("flexStart", "FlexStart"),
@@ -57,7 +57,7 @@ module Replacements = {
     ("nowrap", "Nowrap")
   ];
   let suffix_pt =
-    pt_auto @ pt_pct @ pt_pct_animated_interpolated |> List.map((prefix) => (prefix, prefix));
+    pt_pct_auto @ pt_pct @ pt_pct_animated_interpolated |> List.map((prefix) => (prefix, prefix));
   let suffix_pct =
     pt_pct @ pt_pct_animated_interpolated |> List.map((prefix) => (prefix ++ "Pct", prefix));
   let suffix_animated =