Add Yoga 3.2 Release notes (#1761)

Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1761

Whips up some release notes for what is new since Yoga 3.1.

https://github.com/facebook/yoga/compare/v3.1.0...v3.2.0

The relevant packages have already been published.

Reviewed By: joevilches

Differential Revision: D66679637

fbshipit-source-id: dd94e2a52f2bdc80541c331d1fb39de82669cc7a

website/src/components/FlexStyle.ts

@@ -63,7 +63,7 @@ export type FlexStyle = {
   bottom?: number | `${number}%`;
   boxSizing?: 'border-box' | 'content-box';
   direction?: 'ltr' | 'rtl';
-  display?: 'none' | 'flex';
+  display?: 'none' | 'flex' | 'contents';
   end?: number | `${number}%`;
   flex?: number;
   flexBasis?: number | 'auto' | `${number}%`;
@@ -360,12 +360,14 @@ function direction(str?: 'ltr' | 'rtl'): Direction {
   throw new Error(`"${str}" is not a valid value for direction`);
 }
 
-function display(str?: 'none' | 'flex'): Display {
+function display(str?: 'none' | 'flex' | 'contents'): Display {
   switch (str) {
     case 'none':
       return Display.None;
     case 'flex':
       return Display.Flex;
+    case 'contents':
+      return Display.Contents;
   }
   throw new Error(`"${str}" is not a valid value for display`);
 }

website/src/components/LayoutBox.tsx

@@ -16,6 +16,7 @@ export type LayoutMetrics = {
   width: number;
   height: number;
   overflow?: 'visible' | 'hidden' | 'scroll';
+  display?: 'flex' | 'none' | 'contents';
   children?: LayoutMetrics[];
 };
 
@@ -49,7 +50,11 @@ export default function LayoutBox({metrics, depth, className}: Props) {
         position: depth === 0 ? 'relative' : 'absolute',
       }}>
       {children?.map((child, i) => (
-        <LayoutBox key={i} metrics={child} depth={depth + 1} />
+        <LayoutBox
+          key={i}
+          metrics={child}
+          depth={style.display === 'contents' ? depth : depth + 1}
+        />
       ))}
     </div>
   );

website/src/components/YogaViewer.tsx

@@ -8,7 +8,12 @@
  */
 
 import {useMemo} from 'react';
-import Yoga, {Direction, Overflow, Node as YogaNode} from 'yoga-layout';
+import Yoga, {
+  Direction,
+  Display,
+  Overflow,
+  Node as YogaNode,
+} from 'yoga-layout';
 import {FlexStyle, applyStyle} from './FlexStyle';
 import LayoutBox from './LayoutBox';
 
@@ -109,6 +114,16 @@ function metricsFromYogaNode(node: YogaNode): LayoutMetrics {
           return 'visible';
       }
     })(),
+    display: (() => {
+      switch (node.getDisplay()) {
+        case Display.Flex:
+          return 'flex';
+        case Display.None:
+          return 'none';
+        case Display.Contents:
+          return 'contents';
+      }
+    })(),
     children,
   };
 }