Skip to content

Commit

Permalink
Add Yoga 3.2 Release notes (#1761)
Browse files Browse the repository at this point in the history
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
  • Loading branch information
NickGerleman authored and facebook-github-bot committed Dec 3, 2024
1 parent e177477 commit 733ba24
Show file tree
Hide file tree
Showing 5 changed files with 221 additions and 367 deletions.
83 changes: 83 additions & 0 deletions website/blog/2024-12-02-announcing-yoga-3.2.md
Original file line number Diff line number Diff line change
@@ -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!
6 changes: 4 additions & 2 deletions website/src/components/FlexStyle.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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}%`;
Expand Down Expand Up @@ -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`);
}
Expand Down
7 changes: 6 additions & 1 deletion website/src/components/LayoutBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@ export type LayoutMetrics = {
width: number;
height: number;
overflow?: 'visible' | 'hidden' | 'scroll';
display?: 'flex' | 'none' | 'contents';
children?: LayoutMetrics[];
};

Expand Down Expand Up @@ -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>
);
Expand Down
17 changes: 16 additions & 1 deletion website/src/components/YogaViewer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down Expand Up @@ -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,
};
}
Loading

0 comments on commit 733ba24

Please sign in to comment.