feat: Add Fabric implementation of inset logical properties #35692
Conversation
facebook-github-bot
added
the
CLA Signed
Base commit: 9f78517 |
Base commit: 9f78517 |
|
PR build artifact for d833603 is ready. |
| } | ||
| if (!props.insetBlockEnd.isUndefined()) { | ||
| result.position()[YGEdgeBottom] = props.insetBlockEnd; | ||
| } |
There was a problem hiding this comment.
We should give top/bottom precedence over BlockStart/BlockEnd, to match the resolution Yoga will do when given Start/End vs Left/Right. I.e. cardinal direction wins over flow relative direction. The group below this one can be matched for props which lose precedence to ones already set.
I think all the other values should be fine as is. E.g. “insetInlineStart” is the standard conformant name, so it should clobber RN’s “start”. Horizontal/Vertical and All don’t have existing props, so precedence doesn’t matter for them.
There was a problem hiding this comment.
got it @NickGerleman, I've just pushed a commit fixing this
|
@ryancat has imported this pull request. If you are a Meta employee, you can view this diff on Phabricator. |
|
PR build artifact for b4cd397 is ready. |
|
@gabrieldonadel would you be able to make a PR to https://github.com/facebook/react-native-deprecated-modules/tree/main/deprecated-react-native-prop-types with these changes as well? Same for the last PR once that is merged. There's a non-ideal situation where we deprecated RN's provided prop-types and moved them to a different repo, but we recently un-deprecated it after feedback we removed it too quickly. It is bundled (and enforced) as part of RN again, but we haven't yet brought the code back to the repo. In the meantime, prop changes end up touching three different repos (react-native, react-native-deprecated-modules, react-native-website). Though the issue will be better once prop-types are removed in a couple releases, or if we can copy the package back to the RN monorepo before then (FYI @hoxyq). |
|
Sure thing @NickGerleman, here is the PR -> facebook/react-native-deprecated-modules#12 |
…acebook#35692)" This reverts commit 9669c10.
…#35692) Summary: This PR implements `inset` logical properties as requested on facebook#34425. This implementation includes the addition of the following style properties - `inset`, equivalent to `top`, `bottom`, `right` and `left`. - `insetBlock`, equivalent to `top` and `bottom`. - `insetBlockEnd`, equivalent to `bottom`. - `insetBlockStart`, equivalent to `top`. - `insetInline`, equivalent to `right` and `left`. - `insetInlineEnd`, equivalent to `right` or `left`. - `insetInlineStart`, equivalent to `right` or `left`. ## Changelog [GENERAL] [ADDED] - Add Fabric implementation of inset logical properties Pull Request resolved: facebook#35692 Test Plan: 1. Open the RNTester app and navigate to the `View` page 2. Test the new style properties through the `Insets` section <table> <tr> <td>Android</td> <td>iOS</td> </tr> <tr> <td><img src="https://user-images.githubusercontent.com/11707729/208821212-fbbac6ed-09a4-43f4-ba98-dfd2cbabf044.png" alt="1" width="360px" /> </td> <td> <img src="https://user-images.githubusercontent.com/11707729/208816997-ef044140-8824-4b1b-a77b-085f18ea9e0e.png" alt="2" width="360px" /> </td> </tr> </table> Reviewed By: NickGerleman Differential Revision: D42193661 Pulled By: ryancat fbshipit-source-id: 3db8bcd2c4db0ef4886b9ec49a46424d57362620
Summary
This PR implements
insetlogical properties as requested on #34425. This implementation includes the addition of the following style propertiesinset, equivalent totop,bottom,rightandleft.insetBlock, equivalent totopandbottom.insetBlockEnd, equivalent tobottom.insetBlockStart, equivalent totop.insetInline, equivalent torightandleft.insetInlineEnd, equivalent torightorleft.insetInlineStart, equivalent torightorleft.Changelog
[GENERAL] [ADDED] - Add Fabric implementation of inset logical properties
Test Plan
ViewpageInsetssection