Commit Graph

6 Commits

Author SHA1 Message Date
Soe Lynn
cd4a1b8cf6 Implement Percentage support for gap styles (#1643)
Summary:
X-link: https://github.com/facebook/react-native/pull/44067

X-link: https://github.com/facebook/litho/pull/980

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

Changelog [Internal]:
- Added percentage value for flex layout gap
- Wired up to pass proper available width and height to implement this feature

Reviewed By: NickGerleman

Differential Revision: D56002340

fbshipit-source-id: c0bc86ac70a1391f115c87da99c2ef411535f68b
2024-04-15 16:44:16 -07:00
jlmip
07cabca526 Fixed issue with first line element gap handling. (#1408)
Summary:
If the first element of a line is not contributing (e.g. position absolute), an additional gap will be added to the line, because the first gap element of the line is never identified (wrong start index).
Fix: raise the index of the first line element until we find an element that is contributing to the line.

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

Reviewed By: yungsters

Differential Revision: D49722065

Pulled By: NickGerleman

fbshipit-source-id: 1068cb0b11ae4b04ec8d063e70540cce06181d5a
2023-10-03 06:24:48 -07:00
Nishan
ba27f9d1ec fix: remove gap if its last element in line (fix flex gap extra spacing when children determine parents main axis size) (#1188)
Summary:
Fixes - https://github.com/facebook/react-native/issues/35553

## Approach
We're using `betweenMainDim` to add [gap between](bbeede82d3/yoga/Yoga.cpp (L2495)) items in main axis. This is resulting in increased [main axis](bbeede82d3/yoga/Yoga.cpp (L2598)) dimension of the container as it gets added even for the last element. One solution is to keep using it and subtract the gap when last element is reached.

## Aside
Mutating this value feels weird, but I think `betweenMainDim` gets initialized for every line so should be fine? I did some manual tests to verify. I tried running tests but I'll have to downgrade the java version. Let me know if anything fails. Thanks! 🙏

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

Test Plan: Added fixtures which previously failed but now pass.

Reviewed By: necolas

Differential Revision: D42078162

Pulled By: NickGerleman

fbshipit-source-id: 0e535618350422e001141a8786a83fc81651afe9
2022-12-15 16:30:37 -08:00
Nick Gerleman
5a257aac85 Add tests for gap interaction with child margins
Summary:
Adds a couple test fixtures to validate the interaction of flex gap with children with margins. In both Yoga, and web browsers, these are additive vs collapsing.

Fixes a couple misspellings as well that weren't caught during review.

Changelog:
[Internal]

Reviewed By: lunaleaps

Differential Revision: D41343407

fbshipit-source-id: 427f94faf248901517feff24d334f17ccb85266b
2022-11-16 14:02:31 -08:00
Nick Gerleman
8166c81135 Incorporate gap space into main axis overflow flag (#1173)
Summary:
Pull Request resolved: https://github.com/facebook/yoga/pull/1173

In https://github.com/facebook/react-native/issues/35351 we see incorrect child item height when the flex-wrap is enabled, the cross-axis is to be stretched, and main-axis overflow is caused by gap.

In YGDistributeFreeSpaceSecondPass, if we do not have overflow (determined by flexBasisOverflows), we have stretch cross-alignment, and we reason that nothing can add to main axis dimensions, we know we're a single line and want to take full cross dimensions. and can set YGMeasureModeExactly which uses parent dimensions. Guessing an optimization?

If we do have overflow, then we set YGMeasureModeAtMost to find minimum possible cross-axis dimensions instead.

`flexBasisOverflows` incorporates both computed flex basis, and margin, so it is more generally a flag for whether we will wrap. So we should incorporate gap spacing into it. E.g. it is also used for whether we should the match main axis parent dimension of the overall container. This change does just that, and renames the flag to `mainAxisOverflows`.

We will want to cherry-pick the fix for this into RN 0.71 since we have not yet introduced the community to the incorrect behavior, and we expect a lot of usage of flex-gap.

Changelog:
[General][Fixed] - Fix incorrect height when gap causes main axis to overflow and cross-axis is stretched

Reviewed By: yungsters

Differential Revision: D41311424

fbshipit-source-id: bd0c3b5aac478a56878703b6da84fc3993cc14da
2022-11-15 19:51:48 -08:00
Nick Gerleman
c2a0ccf0d4 Add tests for row-gap and column-gap
Summary:
This adds the fixtures from https://github.com/facebook/yoga/pull/1116 and generates tests.

This adds a good amount of coverage, but I plan to follow up with a diff adding a bit more, e.g. for interactions with flex direction of column when we should no-op, etc. I also discovered the current fixtures do not allow testing shorthand props like "gap" without changes.

This also updates the `webdrivers` gem to respond to a break with chromedriver on m1 macs from 4 days ago https://github.com/titusfortner/webdrivers/pull/239.

Reviewed By: yungsters

Differential Revision: D39922413

fbshipit-source-id: dfc7bda894be8dfcb24e25c19a4df0b09a72ce7e
2022-10-13 08:18:49 -07:00