Merge pull request facebook#112 from reasonml-community/new-styles-ap…

…i-fix-pct-margin-padding Support % for margin
jfrolich · Dec 12, 2017 · 4ca27df · 4ca27df
2 parents e0688cc + a24d32a
commit 4ca27df
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 31 deletions.
diff --git a/lib/js/src/style.js b/lib/js/src/style.js
diff --git a/src/style.re b/src/style.re
@@ -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));
 

diff --git a/src/style.rei b/src/style.rei
@@ -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;
 

diff --git a/upgrade_scripts/styles_v1_to_v2/styles_v1_to_v2.re b/upgrade_scripts/styles_v1_to_v2/styles_v1_to_v2.re
@@ -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 =