DaddyFrosty/yoga
1
0
Fork 0
Code Issues 96 Pull Requests 31 Actions Packages Projects Releases 33 Wiki Activity

Implement Percentage support for gap styles (#1643)

Browse Source 
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
This commit is contained in:
Soe Lynn
2024-04-15 16:44:16 -07:00
committed by Facebook GitHub Bot
parent d4247d65c0
commit cd4a1b8cf6
18 changed files with 2933 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
gentest/fixtures/YGGapTest.html
View File

@@ -171,3 +171,72 @@
<div style="height: 20px"></div>
<div style="height: 30px"></div>
</div>
<div id="row_gap_percent_wrapping" style="flex-direction: row; width: 300px; height: 700px; padding: 10px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
</div>
<div id="row_gap_percent_determines_parent_height" style="flex-direction: row; width: 300px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
</div>
<div id="row_gap_percent_wrapping_with_both_content_padding_and_item_padding" style="flex-direction: row; width: 300px; height: 700px; padding: 10px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px; padding: 10px;"></div>
<div style="width: 100px; height: 100px; padding: 10px;"></div>
<div style="width: 100px; height: 100px; padding: 10px;"></div>
<div style="width: 100px; height: 100px; padding: 10px;"></div>
<div style="width: 100px; height: 100px; padding: 10px;"></div>
</div>
<div id="row_gap_percent_wrapping_with_both_content_padding" style="flex-direction: row; width: 300px; height: 700px; padding: 10px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
</div>
<div id="row_gap_percent_wrapping_with_content_margin" style="flex-direction: row; width: 300px; height: 700px; margin: 10px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
</div>
<div id="row_gap_percent_wrapping_with_content_margin_and_padding" style="flex-direction: row; width: 300px; height: 700px; margin: 10px; padding: 10px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
</div>
<div id="row_gap_percent_wrapping_with_flexible_content" style="flex-direction: row; width: 300px; height: 300px; gap: 10%;">
<div style="flex: 1;"></div>
<div style="flex: 1;"></div>
<div style="flex: 1;"></div>
</div>
<div id="row_gap_percent_wrapping_with_mixed_flexible_content" style="flex-direction: row; width: 300px; height: 300px; gap: 10%;">
<div style="width: 10px;"></div>
<div style="flex: 1;"></div>
<div style="width: 10%;"></div>
</div>
<!-- TODO: Existing bug that Yoga is not inline with Chromium for calculation with min-width -->
<div id="row_gap_percent_wrapping_with_min_width" data-disabled="true" style="flex-direction: row; min-width: 300px; gap: 10%; flex-wrap: wrap;">
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
<div style="width: 100px; height: 100px;"></div>
</div>