Skip to content

Commit

Permalink
Remove row-reverse errata (#1547)
Browse files Browse the repository at this point in the history
Summary:
Pull Request resolved: #1547

X-link: facebook/react-native#42251

Yoga has an odd behavior, where `start`/`end` edges under row-reverse are relative to flex-direction, instead of writing direction.

While Yoga doesn't actually document what this behavior is supposed to be, it goes against CK documentation, historic RN documentation, and the behavior valid on the web. It is also applied inconsistently (e.g. sometimes only on container, sometimes on child). It really is a bug, instead of an intended behavior.

We changed the default behavior for Yoga, but left the existing one behind an errata (so existing fbsource users got old behavior). We have previously seen this behavior show up in product code, including CK when running on FlexLayout.

`row-reverse` is surprisingly uncommon though:
1. Litho has <40 usages
2. RN has ~40 usages in `RKJSModules`,~30 in `arvr/js`, ~6 in `xplat/archon`
3. CK has ~80 usages
4. NT has ~40 usages

There are few enough, mostly simple components, that we can inspect through each of them, looking for signs they will hit the issue (at the potential chance of missing some).

CK accounts for 10/14 usages that I could tell would trigger the issue, since it only exposes start/end edge, and not left/right. It might make sense to make it preserve behavior instead, to reduce risk a bit.

FlexLayout is now separately powering Bloks, which wasn't surveyed, so I didn't touch CK behavior under Bloks.

There could also be other usages in other frameworks/bespoke usages, and this has implications for OSS users. But based on our own usage, of many, many components, this seems rare.

Changelog:
[General][Breaking] - Make `start/end` in styles always refer to writing direction

Reviewed By: pentiumao, joevilches

Differential Revision: D52698130

fbshipit-source-id: 2a9ac47e177469f30dc988d916b6c0ad95d53461
  • Loading branch information
NickGerleman authored and facebook-github-bot committed Jan 12, 2024
1 parent 7e70656 commit 8c3e011
Show file tree
Hide file tree
Showing 10 changed files with 52 additions and 895 deletions.
6 changes: 2 additions & 4 deletions enums.py
Original file line number Diff line number Diff line change
Expand Up @@ -68,13 +68,11 @@
# Allows main-axis flex basis to be stretched without flexGrow being
# set (previously referred to as "UseLegacyStretchBehaviour")
("StretchFlexBasis", 1 << 0),
# Solely uses the flex-direction to determine starting and ending edges
("StartingEndingEdgeFromFlexDirection", 1 << 1),
# Position: static behaves like position: relative within Yoga
("PositionStaticBehavesLikeRelative", 1 << 2),
("PositionStaticBehavesLikeRelative", 1 << 1),
# Positioning of absolute nodes will have various bugs related to
# justification, alignment, and insets
("AbsolutePositioning", 1 << 3),
("AbsolutePositioning", 1 << 2),
# Enable all incorrect behavior (preserve compatibility)
("All", 0x7FFFFFFF),
# Enable all errata except for "StretchFlexBasis" (Defaults behavior
Expand Down
10 changes: 4 additions & 6 deletions java/com/facebook/yoga/YogaErrata.java
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,8 @@
public enum YogaErrata {
NONE(0),
STRETCH_FLEX_BASIS(1),
STARTING_ENDING_EDGE_FROM_FLEX_DIRECTION(2),
POSITION_STATIC_BEHAVES_LIKE_RELATIVE(4),
ABSOLUTE_POSITIONING(8),
POSITION_STATIC_BEHAVES_LIKE_RELATIVE(2),
ABSOLUTE_POSITIONING(4),
ALL(2147483647),
CLASSIC(2147483646);

Expand All @@ -32,9 +31,8 @@ public static YogaErrata fromInt(int value) {
switch (value) {
case 0: return NONE;
case 1: return STRETCH_FLEX_BASIS;
case 2: return STARTING_ENDING_EDGE_FROM_FLEX_DIRECTION;
case 4: return POSITION_STATIC_BEHAVES_LIKE_RELATIVE;
case 8: return ABSOLUTE_POSITIONING;
case 2: return POSITION_STATIC_BEHAVES_LIKE_RELATIVE;
case 4: return ABSOLUTE_POSITIONING;
case 2147483647: return ALL;
case 2147483646: return CLASSIC;
default: throw new IllegalArgumentException("Unknown enum value: " + value);
Expand Down
6 changes: 2 additions & 4 deletions javascript/src/generated/YGEnums.ts
Original file line number Diff line number Diff line change
Expand Up @@ -50,9 +50,8 @@ export enum Edge {
export enum Errata {
None = 0,
StretchFlexBasis = 1,
StartingEndingEdgeFromFlexDirection = 2,
PositionStaticBehavesLikeRelative = 4,
AbsolutePositioning = 8,
PositionStaticBehavesLikeRelative = 2,
AbsolutePositioning = 4,
All = 2147483647,
Classic = 2147483646,
}
Expand Down Expand Up @@ -163,7 +162,6 @@ const constants = {
EDGE_ALL: Edge.All,
ERRATA_NONE: Errata.None,
ERRATA_STRETCH_FLEX_BASIS: Errata.StretchFlexBasis,
ERRATA_STARTING_ENDING_EDGE_FROM_FLEX_DIRECTION: Errata.StartingEndingEdgeFromFlexDirection,
ERRATA_POSITION_STATIC_BEHAVES_LIKE_RELATIVE: Errata.PositionStaticBehavesLikeRelative,
ERRATA_ABSOLUTE_POSITIONING: Errata.AbsolutePositioning,
ERRATA_ALL: Errata.All,
Expand Down
Loading

0 comments on commit 8c3e011

Please sign in to comment.