Add Fabric implementation of flow-relative padding and margin #35342
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
facebook-github-bot
added
CLA Signed
|
This pull request was exported from Phabricator. Differential Revision: D41267765 |
1 similar comment
|
This pull request was exported from Phabricator. Differential Revision: D41267765 |
NickGerleman
added a commit
to NickGerleman/react-native
that referenced
this pull request
Nov 14, 2022
…acebook#35342) Summary: Pull Request resolved: facebook#35342 This is a native implementation of the JS shimmed layout-specific properties in facebook#35316. There is an experiment splitting the prop splitting codepath in Fabric, so this change effectively has two implementations depending on whether `enablePropIteratorSetter` is enabled. None of these changes make sense to propagate Yoga. `inlineEnd`, etc are already mapped to `YGEdgeStart` and `YGEdgeEnd`, but RN's mapping used a different name. Then `blockStart`, `blockEnd`, map directly to existing edges in all cases since we don't support a writing mode. On web, the last value in the style which computes the given dimension is given precedence. E.g. if "left" comes after "start" it will be chosen. Yoga stylesheets are unordered, and precedence for edges is given based on specificity (start > left > horizontal > all). The JS change would always give precedence to flow-relative properties, and we emulate the same ordering independence for consistency with current rules for resolution. Changelog: [General][Added] - Add Fabric implementation of flow-relative padding and margin Differential Revision: D41267765 fbshipit-source-id: 79d2161a8e541ec6bada9d2800232e59fd05a33c
NickGerleman
force-pushed
the
export-D41267765
branch
from
f2cdc75 to
3b02eb2
Compare
NickGerleman
added a commit
to NickGerleman/react-native
that referenced
this pull request
Nov 14, 2022
…acebook#35342) Summary: Pull Request resolved: facebook#35342 This is a native implementation of the JS shimmed layout-specific properties in facebook#35316. There is an experiment splitting the prop splitting codepath in Fabric, so this change effectively has two implementations depending on whether `enablePropIteratorSetter` is enabled. None of these changes make sense to propagate Yoga. `inlineEnd`, etc are already mapped to `YGEdgeStart` and `YGEdgeEnd`, but RN's mapping used a different name. Then `blockStart`, `blockEnd`, map directly to existing edges in all cases since we don't support a writing mode. On web, the last value in the style which computes the given dimension is given precedence. E.g. if "left" comes after "start" it will be chosen. Yoga stylesheets are unordered, and precedence for edges is given based on specificity (start > left > horizontal > all). The JS change would always give precedence to flow-relative properties, and we emulate the same ordering independence for consistency with current rules for resolution. Changelog: [General][Added] - Add Fabric implementation of flow-relative padding and margin Differential Revision: D41267765 fbshipit-source-id: 5ed6b96802b7ae67c1bddbdd3d058def6ed62b93
NickGerleman
force-pushed
the
export-D41267765
branch
from
3b02eb2 to
7ae334c
Compare
|
This pull request was exported from Phabricator. Differential Revision: D41267765 |
| @@ -69,9 +69,15 @@ export interface FlexStyle { | |||
| | undefined; | |||
| left?: number | string | undefined; | |||
| margin?: number | string | undefined; | |||
| marginBlock?: number | string | undefined; | |||
There was a problem hiding this comment.
As we know, this type;
number | string | undefinedis a generic type for most of the style attributes.
Should we declare a generic type for this type as well? Ex. BoxDimensionValue or BoxDimensionType etc.
And use the same generic type in below code. This will allow us to DRY the code.
Similarly for ;
number | undefinedWhat do you think?
PS: It looks like decl file is modified manually.
There was a problem hiding this comment.
Contributions welcome to clean up the TS declarations 🙂.
NickGerleman
added a commit
to NickGerleman/react-native
that referenced
this pull request
Nov 16, 2022
…ok#35342) Summary: Pull Request resolved: facebook#35342 This is a native implementation of the JS shimmed layout-specific properties in facebook#35316. There is an experiment splitting the prop splitting codepath in Fabric, so this change effectively has two implementations depending on whether `enablePropIteratorSetter` is enabled. None of these changes make sense to propagate Yoga. `inlineEnd`, etc are already mapped to `YGEdgeStart` and `YGEdgeEnd`, but RN's mapping used a different name. Then `blockStart`, `blockEnd`, map directly to existing edges in all cases since we don't support a writing mode. On web, the last value in the style which computes the given dimension is given precedence. E.g. if "left" comes after "start" it will be chosen. Yoga stylesheets are unordered, and precedence for edges is given based on specificity (left > start > horizontal > all). We give precedence to new renamings (e.g. start to inlineStart), but to preserve consistent behavior, we give precedence to specific edges before overwriting them with flow relative ones (e.g. marginTop has precedence over marginBlockStar). Changelog: [General][Added] - Add Fabric implementation of flow-relative padding and margin Differential Revision: D41267765 fbshipit-source-id: 471e3d6c1a9cbb9e544dda1db2ab5b311b9be820
NickGerleman
force-pushed
the
export-D41267765
branch
from
7ae334c to
e8de242
Compare
|
This pull request was exported from Phabricator. Differential Revision: D41267765 |
Base commit: 5fda72f |
…ok#35342) Summary: Pull Request resolved: facebook#35342 This is a native implementation of the JS shimmed layout-specific properties in facebook#35316. There is an experiment splitting the prop splitting codepath in Fabric, so this change effectively has two implementations depending on whether `enablePropIteratorSetter` is enabled. None of these changes make sense to propagate Yoga. `inlineEnd`, etc are already mapped to `YGEdgeStart` and `YGEdgeEnd`, but RN's mapping used a different name. Then `blockStart`, `blockEnd`, map directly to existing edges in all cases since we don't support a writing mode. On web, the last value in the style which computes the given dimension is given precedence. E.g. if "left" comes after "start" it will be chosen. Yoga stylesheets are unordered, and precedence for edges is given based on specificity (left > start > horizontal > all). We give precedence to new renamings (e.g. start to inlineStart), but to preserve consistent behavior, we give precedence to specific edges before overwriting them with flow relative ones (e.g. marginTop has precedence over marginBlockStar). Changelog: [General][Added] - Add Fabric implementation of flow-relative padding and margin Differential Revision: D41267765 fbshipit-source-id: 2d21c6acb710b04a8577e98bf5cc7d4bb2de1815
|
This pull request was exported from Phabricator. Differential Revision: D41267765 |
NickGerleman
force-pushed
the
export-D41267765
branch
from
e8de242 to
d8c9b1d
Compare
NickGerleman
changed the title
Base commit: 5fda72f |
|
PR build artifact for d8c9b1d is ready. |
|
PR build artifact for d8c9b1d is ready. |
necolas
added a commit
that referenced
this pull request
Nov 16, 2022
necolas
added a commit
that referenced
this pull request
Nov 16, 2022
74 tasks
OlimpiaZurek
pushed a commit
to OlimpiaZurek/react-native
that referenced
this pull request
May 22, 2023
…ok#35342) Summary: Pull Request resolved: facebook#35342 This is a native implementation of the JS shimmed layout-specific properties in facebook#35316. There is an experiment splitting the prop splitting codepath in Fabric, so this change effectively has two implementations depending on whether `enablePropIteratorSetter` is enabled. None of these changes make sense to propagate Yoga. `inlineEnd`, etc are already mapped to `YGEdgeStart` and `YGEdgeEnd`, but RN's mapping used a different name. Then `blockStart`, `blockEnd`, map directly to existing edges in all cases since we don't support a writing mode. On web, the last value in the style which computes the given dimension is given precedence. E.g. if "left" comes after "start" it will be chosen. Yoga stylesheets are unordered, and precedence for edges is given based on specificity (left > start > horizontal > all). We give precedence to new renamings (e.g. start to inlineStart), but to preserve consistent behavior, we give precedence to specific edges before overwriting them with flow relative ones (e.g. marginTop has precedence over marginBlockStar). Changelog: [General][Added] - Add Fabric implementation of flow-relative padding and margin Reviewed By: javache Differential Revision: D41267765 fbshipit-source-id: 896e2ed71fe8bf83aef00b0a9d70fd20b2ce47a7
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Summary:
This is a native implementation of the JS shimmed layout-specific properties in #35316.
There is an experiment splitting the prop setting codepath in Fabric, so this change effectively has two implementations depending on whether
enablePropIteratorSetteris enabled.None of these changes make sense to propagate Yoga.
inlineEnd, etc are already mapped toYGEdgeStartandYGEdgeEnd, but RN's mapping used a different name. ThenblockStart,blockEnd, map directly to existing edges in all cases since we don't support a writing mode.On web, the last value in the style which computes the given dimension is given precedence. E.g. if "left" comes after "start" it will be chosen. Yoga stylesheets are unordered, and precedence for edges is given based on specificity (left > start > horizontal > all). The JS change would always give precedence to flow-relative properties, and we emulate the same ordering independence for consistency with current rules for resolution.
Changelog:
[General][Added] - Add Fabric implementation of flow-relative padding and margin
Differential Revision: D41267765