Add support for space-between and space-around on align-content

Summary: Adds the two missing alignments ```space-between``` and ```space-around``` for ```align-content``` . Those values are a noop on ```align-items``` in order to prevent a breaking changes for an additional enum. Fix #229 Closes #364 Reviewed By: gkassabli Differential Revision: D4528561 Pulled By: emilsjolander fbshipit-source-id: ea6291b6dd22cef05d9eec03893250d50371236e
facebook · Feb 11, 2017 · 6a7ad21 · 6a7ad21
1 parent 247aa26
commit 6a7ad21
Show file tree

Hide file tree

Showing 16 changed files with 1,143 additions and 273 deletions.
diff --git a/csharp/Facebook.Yoga/YogaAlign.cs b/csharp/Facebook.Yoga/YogaAlign.cs
@@ -17,5 +17,7 @@ public enum YogaAlign
         FlexEnd,
         Stretch,
         Baseline,
+        SpaceBetween,
+        SpaceAround,
     }
 }
diff --git a/csharp/tests/Facebook.Yoga/YGAlignContentTest.cs b/csharp/tests/Facebook.Yoga/YGAlignContentTest.cs
diff --git a/enums.py b/enums.py
@@ -47,6 +47,8 @@
         'FlexEnd',
         'Stretch',
         'Baseline',
+        'SpaceBetween',
+        'SpaceAround',
     ],
     'PositionType': [
         'Relative',

diff --git a/gentest/fixtures/YGAlignContentTest.html b/gentest/fixtures/YGAlignContentTest.html
@@ -1,31 +1,47 @@
-<div id="align_content_flex_start" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: flex-start;">
+<div id="align_content_flex_start" style="width: 130px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: flex-start;">
   <div style="width: 50px; height: 10px;"></div>
   <div style="width: 50px; height: 10px;"></div>
   <div style="width: 50px; height: 10px;"></div>
   <div style="width: 50px; height: 10px;"></div>
   <div style="width: 50px; height: 10px;"></div>
 </div>
 
-<div id="align_content_flex_end" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: flex-end;">
+<div id="align_content_flex_end" style="width: 130px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: flex-end;">
   <div style="width: 50px; height: 10px;"></div>
   <div style="width: 50px; height: 10px;"></div>
   <div style="width: 50px; height: 10px;"></div>
   <div style="width: 50px; height: 10px;"></div>
   <div style="width: 50px; height: 10px;"></div>
 </div>
 
-<div id="align_content_center" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: center;">
+<div id="align_content_center" style="width: 130px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: center;">
   <div style="width: 50px; height: 10px;"></div>
   <div style="width: 50px; height: 10px;"></div>
   <div style="width: 50px; height: 10px;"></div>
   <div style="width: 50px; height: 10px;"></div>
   <div style="width: 50px; height: 10px;"></div>
 </div>
 
-<div id="align_content_stretch" style="width: 100px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: stretch;">
+<div id="align_content_stretch" style="width: 150px; height: 100px; flex-wrap: wrap; flex-direction: column; align-content: stretch;">
   <div style="width: 50px;"></div>
   <div style="width: 50px;"></div>
   <div style="width: 50px;"></div>
   <div style="width: 50px;"></div>
   <div style="width: 50px;"></div>
 </div>
+
+<div id="align_content_spacebetween" style="width: 130px; height: 100px; flex-wrap: wrap; flex-direction: row; align-content: space-between;">
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+</div>
+
+<div id="align_content_spacearound" style="width: 140px; height: 120px; flex-wrap: wrap; flex-direction: row; align-content: space-around;">
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+  <div style="width: 50px; height: 10px;"></div>
+</div>
diff --git a/gentest/gentest-cpp.js b/gentest/gentest-cpp.js
@@ -82,7 +82,8 @@ CPPEmitter.prototype = Object.create(Emitter.prototype, {
   YGAlignFlexEnd:{value:'YGAlignFlexEnd'},
   YGAlignFlexStart:{value:'YGAlignFlexStart'},
   YGAlignStretch:{value:'YGAlignStretch'},
-
+  YGAlignSpaceBetween:{value:'YGAlignSpaceBetween'},
+  YGAlignSpaceAround:{value:'YGAlignSpaceAround'},
   YGAlignBaseline:{value:'YGAlignBaseline'},
 
   YGDirectionInherit:{value:'YGDirectionInherit'},

diff --git a/gentest/gentest-cs.js b/gentest/gentest-cs.js
@@ -96,6 +96,8 @@ CSEmitter.prototype = Object.create(Emitter.prototype, {
   YGAlignFlexEnd:{value:'YogaAlign.FlexEnd'},
   YGAlignFlexStart:{value:'YogaAlign.FlexStart'},
   YGAlignStretch:{value:'YogaAlign.Stretch'},
+  YGAlignSpaceBetween:{value:'YogaAlign.SpaceBetween'},
+  YGAlignSpaceAround:{value:'YogaAlign.SpaceAround'},
   YGAlignBaseline:{value:'YogaAlign.Baseline'},
 
   YGDirectionInherit:{value:'YogaDirection.Inherit'},

diff --git a/gentest/gentest-java.js b/gentest/gentest-java.js
@@ -100,6 +100,8 @@ JavaEmitter.prototype = Object.create(Emitter.prototype, {
   YGAlignFlexEnd:{value:'YogaAlign.FLEX_END'},
   YGAlignFlexStart:{value:'YogaAlign.FLEX_START'},
   YGAlignStretch:{value:'YogaAlign.STRETCH'},
+  YGAlignSpaceBetween:{value:'YogaAlign.SPACE_BETWEEN'},
+  YGAlignSpaceAround:{value:'YogaAlign.SPACE_AROUND'},
   YGAlignBaseline:{value:'YogaAlign.BASELINE'},
 
   YGDirectionInherit:{value:'YogaDirection.INHERIT'},

diff --git a/gentest/gentest-javascript.js b/gentest/gentest-javascript.js
@@ -90,6 +90,8 @@ JavascriptEmitter.prototype = Object.create(Emitter.prototype, {
   YGAlignFlexEnd:{value:'Yoga.ALIGN_FLEX_END'},
   YGAlignFlexStart:{value:'Yoga.ALIGN_FLEX_START'},
   YGAlignStretch:{value:'Yoga.ALIGN_STRETCH'},
+  YGAlignSpaceBetween:{value:'Yoga.ALIGN_SPACE_BETWEEN'},
+  YGAlignSpaceAround:{value:'Yoga.ALIGN_SPACE_AROUND'},
   YGAlignBaseline:{value:'Yoga.ALIGN_BASELINE'},
 
   YGDirectionInherit:{value:'Yoga.DIRECTION_INHERIT'},

diff --git a/gentest/gentest.js b/gentest/gentest.js
@@ -381,6 +381,8 @@ function alignValue(e, value) {
     case 'stretch': return e.YGAlignStretch;
     case 'flex-start': return e.YGAlignFlexStart;
     case 'flex-end': return e.YGAlignFlexEnd;
+    case 'space-between': return e.YGAlignSpaceBetween;
+    case 'space-around': return e.YGAlignSpaceAround;
     case 'baseline': return e.YGAlignBaseline;
   }
 }

diff --git a/java/com/facebook/yoga/YogaAlign.java b/java/com/facebook/yoga/YogaAlign.java
@@ -18,7 +18,9 @@ public enum YogaAlign {
   CENTER(2),
   FLEX_END(3),
   STRETCH(4),
-  BASELINE(5);
+  BASELINE(5),
+  SPACE_BETWEEN(6),
+  SPACE_AROUND(7);
 
   private int mIntValue;
 
@@ -38,6 +40,8 @@ public static YogaAlign fromInt(int value) {
       case 3: return FLEX_END;
       case 4: return STRETCH;
       case 5: return BASELINE;
+      case 6: return SPACE_BETWEEN;
+      case 7: return SPACE_AROUND;
       default: throw new IllegalArgumentException("Unknown enum value: " + value);
     }
   }