Add Yoga 3.2 Release notes (#1761)

Summary:
Pull Request resolved: #1761

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

v3.1.0...v3.2.0

The relevant packages have already been published.

Reviewed By: joevilches

Differential Revision: D66679637

fbshipit-source-id: dd94e2a52f2bdc80541c331d1fb39de82669cc7a

website/blog/2024-12-02-announcing-yoga-3.2.md

@@ -0,0 +1,83 @@
+---
+slug: announcing-yoga-3.2
+title: Announcing Yoga 3.2
+authors:
+  - NickGerleman
+---
+
+import Playground from '@site/src/components/Playground';
+
+Yoga 3.2 is a new minor version of Yoga, used by React Native 0.77.
+
+## Highlights
+
+1. Support for `box-sizing`
+2. Support for `display: contents`
+3. Bug fixes and improvements
+
+## `box-sizing`
+
+Yoga [now supports](https://github.com/facebook/yoga/commit/671ae61a39d02091d1e73fe773d6a09f2f93cda4) [`box-sizing`](https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing) on styles, allowing sizing values to influence the content box instead of the border box.
+
+:::warning
+
+To preserve compatibility, Yoga nodes default to `box-sizing: border-box`, even if `UseWebDefaults` is set. We recommend manually setting node defaults instead of using the `UseWebDefaults` API.
+
+:::
+
+<Playground code={`<Layout config={{useWebDefaults: true}}>
+  <Node
+    style={{
+      width: 100,
+      height: 100,
+      padding: 50,
+      boxSizing: "border-box",
+    }}>
+  </Node>
+</Layout>`} />
+
+<Playground code={`<Layout config={{useWebDefaults: true}}>
+    <Node
+    style={{
+      width: 100,
+      height: 100,
+      padding: 50,
+      boxSizing: "content-box",
+    }}>
+  </Node>
+</Layout>`} />
+
+
+
+## `display: contents`
+
+Yoga nodes [may now be set to `display: contents`](https://github.com/facebook/yoga/commit/68bb2343d2b470962065789d09016bba8e785340) to remove them from the layout flow, while preserving and hoisting the node's children. This may be used by the higher level UI framework to allow more easily composing wrapper components (such as those which may need to handle events, without influencing child layout). Thanks [@j-piasecki](https://github.com/j-piasecki) for the contribution!
+
+<Playground code={`<Layout config={{useWebDefaults: false}}>
+  <Node
+    style={{
+      width: 100,
+      height: 100,
+      gap: 10,
+    }}
+  >
+    <Node style={{display: "contents"}}>
+      <Node style={{flexGrow: 1}} />
+      <Node style={{flexGrow: 1}} />
+      <Node style={{flexGrow: 1}} />
+    </Node>
+  </Node>
+</Layout>`} />
+
+
+## Removal of legacy absolute positioning
+
+Yoga 3.0 introduced a new algorithm used for absolute positioning. This algorithm is more correct than the one previously used, but led to observed compatibility issues with existing code, so we left the option to disable it via the `AbsolutePositioningIncorrect` erratum (enabled by default in frameworks like React Native). Yoga 3.2 removes the legacy absolute positioning path, but ports over the main compatibility quirk under a new erratum `AbsolutePositionWithoutInsetsExcludesPadding` (where the previous incorrect behavior would omit padding when a position was not specified on the absolute node). Errata users should see more correct absolute positioning behavior, while preserving compatibility with existing code.
+
+## Fixed non-global YogaConfig in Java bindings
+
+Yoga would previously allow garbage collection of a `YogaConfig` if it was not retained outside of the Yoga tree. This could result in confusing errors caused by use-after free. Yoga nodes [now correctly retain the configs they are using](https://github.com/facebook/yoga/commit/22b018c957e930de950338ad87f4ef8d59e8a169). Thanks [@michaeltroger](https://github.com/michaeltroger) for this fix!
+
+## Fixed behavior when combining `align-items` with `align-content`
+
+A regression [was fixed](https://github.com/facebook/yoga/commit/77c99870127e9c2d46a07264fa372025334d8fd0) in how Yoga handles some combinations of `align-content` and `align-items`. Thanks [@phuccvx12](https://github.com/phuccvx12) for this fix!

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,
   };
 }