Allow portals to have independent layout constraints and scale factor #14315
Conversation
This file contains hidden or 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
jonthysell
approved these changes
Jan 29, 2025
| constraints.MinimumSize = {0, 0}; | ||
| // Constrain the size of the modal to 90% of the screen size | ||
| constraints.MaximumSize = { | ||
| static_cast<float>((workArea.Width / scale) * 0.9), static_cast<float>((workArea.Height / scale) * 0.9)}; |
There was a problem hiding this comment.
nit: why 90%? define a const?
There was a problem hiding this comment.
Does the Modal component take typical style props e.g. width height maxWidth maxHeight? If so I'd tend towards suggesting any UX failure here is treated as a user bug instead of build-in a concern with respect to layout negotiation, but it would be reasonable for percentage-based *width/*height values to reference the work area.
There was a problem hiding this comment.
All of the work here to allow for a separate layout within the portal - is this mean to be reusable by other potential future components who need independent yoga layout, or is the impl modal specific? Are we documenting Portals anywhere?
There was a problem hiding this comment.
Yes future components can use it. -- I'm doing this mostly to unblock our Callout implementation in Office.
--Yeah, more docs needed. At some point we need to do a proper set of documentation on writing custom native components in general.
acoates-ms
added a commit
to acoates-ms/react-native-windows
that referenced
this pull request
Jan 29, 2025
…microsoft#14315) * Allow portals to have independent layout constraints and scale factor * format * change files * fix
acoates-ms
added a commit
that referenced
this pull request
Jan 31, 2025
… factor (#14318) * Fix crash when currently focused element gets marked as enableFocusRing=false (#14306) * Fix crash when currently focused element gets marked as enableFocusRing=false * Change files * [Fabric] Use PopupWindowSiteBridge for Modal when USE_EXPERIMENTAL_WINUI3 is true (#14284) * add modal implementation with PopupWindowSiteBridge * Change files * add conditional * feedback * Initial support for UIA and tab navigation for a child Island (#14305) * Basic support for stitching the UIA tree for a ContentIslandComponentView's child * Updated comment * Change files * Support shift+tab, and move Automation event handlers to ContentIslandComponentView * Allow portals to have independent layout constraints and scale factor (#14315) * Allow portals to have independent layout constraints and scale factor * format * change files * fix * Round Focus visuals by default, fix nudge rendering (#14312) * Round Focus visuals by default, fix nudge rendering * Change files * change files * fix * fix * fix --------- Co-authored-by: Tatiana Kapos <[email protected]> Co-authored-by: JesseCol <[email protected]>
acoates-ms
added a commit
to acoates-ms/react-native-windows
that referenced
this pull request
Mar 11, 2025
…microsoft#14315) * Allow portals to have independent layout constraints and scale factor * format * change files * fix
acoates-ms
added a commit
that referenced
this pull request
Mar 12, 2025
* Update Guardrails on Provider Instantiation (#13961) * Update Provider Guardrails * Change files * Format * Update Snapshots * Use WebSocket factory in PkgInspectorConnection (#14202) * Use WebSocket resource factory for pkgr inspector * Change files * clang format * Implement ISelectionProvider and ISelectionItemProvider (#14019) Adds support for ISelectionProvider interface Adds support for ISelectionItemProvider interface Adds support for accessibilityState:selected Adjusts AccessibilityState native type on Windows to be std::optional instead of bool Adjusts AccessibilityState native type on Windows to include multiselectable and required fields of type std::optional Adds multiselectable and required fields to AccessibilityState type in JS with type boolean | undefined Adds support for aria-multiselectable and aria-required. Adds support for the following accessibilityActions: addToSelection, removeFromSelection, select Fixes crash in AccessibilityInsights. * [Fabric] Implement IRangeValueProvider and Adjust IValueProvider Implementation (#14212) * IRangeValue Provider * Adjust ReadOnly to Use Prop Value * Complete IRangeValueProvider Implementation * Change files * Update Snapshots * std::aligned_storage is deprecated (#14253) * std::aligned_storage is deprecated * Change files * format --------- Co-authored-by: Andrew Coates <[email protected]> * Update WinUI3ExperimentalVersion from 1.6.240701003-experimental2 to 1.7.250109001-experimental2 (#14270) * Update WinUI3ExperimentalVersion from 1.6.240701003-experimental2 to 1.7.250109001-experimental2 * Change files * Update some type and method names that have changed in WinAppSDK 1.7 --------- Co-authored-by: Jon Thysell <[email protected]> * Rework modal to be implemented entirely using public APIs (#14256) * Rework modal implementation to use public APIs * shutdown fix * Change files * format * remove dead code * format * fixes * fix * UIA tree for root component should be kept distinct from main UIA tree * input offset fix for sub rootviews * Split modal into two componentview's so that we dont have multiple roots in our componentview tree * format * Ensure rootview removes itself from the island, before a new one adds itself on instance reload * defork some modal test pages * remove override * Enable basic XamlIsland in rntester within playground app when UseExperimentalWinUI3 is true (#14272) * Enable basic XamlIsland in rntester within playground app when UseExperimentalWinUI3 is true * Change files * Fix build break due to unreferenced parameter * lint * Move the implementation of CalendarView to sample-custom-component, and use codegen * Enable CalendarView only when UseExperimentalWinUI3 is true, and add CalendarView.g.h to git * clang format * Update snapshots and remove some unused variables * Update snapshotPages.test.js.snap * Remove new page from the visitAllPages test * Remove Paper-only code from Fabric builds of Microsoft.ReactNative (#14289) Removes most of the Paper-only code from Fabric builds of Microsoft.ReactNative. This is only a first pass - there may be more that needs to be removed (or stuff that needs to be put back in). - Bug fix (non-breaking change which fixes an issue) - Breaking change (fix or feature that would cause existing functionality to not work as expected) Besides nearly doubling the size of the binary files, all of the Paper-only code is functionally useless in Fabric builds, which at worse is dead weight, and at best is confusing to developers. Resolves #13405 Updated project files to not load/compile paper-only modules. Updated modules that are used by both to correctly only include the Paper or Fabric code they need. None, but here are some preliminary binary size numbers for x64 release: | File | Paper | Fabric (Before) | Fabric (After) | |:-|:-:|:-:|:-:| | Microsoft.ReactNative.dll | 4.02 MB | 8.32 MB | 6.47 MB (🔻1.85 MB / 22% ) | | Microsoft.ReactNative.winmd | 64.0 KB | 121.0 KB | 92.0KB (🔻29 KB / 24%) | Verified all existing tests still pass and fabric apps work. Should this change be included in the release notes: _yes_ Remove Paper-only code from Fabric builds of Microsoft.ReactNative * RNIsland UIA fragment root should report parents fragment root (#14302) * Fix crash running on server 2016 * RNIsland UIA fragment root should report parents fragment root * Change files * fix * use react tag for runtime id * fix * fix * fix * Fix crash when currently focused element gets marked as enableFocusRing=false (#14306) * Fix crash when currently focused element gets marked as enableFocusRing=false * Change files * [Fabric] Add Functional Tests for Switch Component (#14297) * Add Functional Tests for Switch * Fix Tests * Update Snapshots * [Fabric] Use PopupWindowSiteBridge for Modal when USE_EXPERIMENTAL_WINUI3 is true (#14284) * add modal implementation with PopupWindowSiteBridge * Change files * add conditional * feedback * Initial support for UIA and tab navigation for a child Island (#14305) * Basic support for stitching the UIA tree for a ContentIslandComponentView's child * Updated comment * Change files * Support shift+tab, and move Automation event handlers to ContentIslandComponentView * Allow portals to have independent layout constraints and scale factor (#14315) * Allow portals to have independent layout constraints and scale factor * format * change files * fix * Round Focus visuals by default, fix nudge rendering (#14312) * Round Focus visuals by default, fix nudge rendering * Change files * Only build OfficeReact.Win32 with UseFabric enabled (#14319) This PR changes our build system to only build the version of `OfficeReact.Win32` with Fabric enabled. - Breaking change (fix or feature that would cause existing functionality to not work as expected) We are building both versions of Desktop in our CI, but the `-Fabric` version is in fact a strict superset of functionality and the only one that Office uses now. Changed the default so that Desktop always builds with `RnwNewArch` (and therefore `UseFabric`) enabled. Removed the matrix configurations for DesktopFabric from all CI. Fixed the affected nuspec file. Also fixed Desktop publish to include ARM64EC for Fabric and the an issue caused by #14311. N/A. Verified the build works. Should this change be included in the release notes: _no_ * Fix react devtools hitting an assert on launch (#14320) * ignore unsupported methods * delete Super::DispatchCommand call * Change files * [Fabric] Fix PlatformColor (#14325) * Fix platform color * Change files * Add missing theme colors * snapshots * TurboModule spec checking should accept hstring for string arguments (#14322) * TurboModule spec checking should accept hstring for string arguments * Change files * example * [Fabric] Add Support for ITextProvider, ITextProvider2, and ITextRangeProvider (#14332) * Partial Implementation * Add More Implementation * More Implementation * More Implementation * Add Support for Bounding Rectangles * Complete Initial Implementation * Change files * Code Cleanup * Code Cleanup * Update Snapshots + Code Cleanup * Update Snapshots * Address Feedback * Address Feedback * Update Snapshots * Fix Tests --------- Co-authored-by: Jon Thysell <[email protected]> * [Fabric] Fix modal height (#14343) * fix modal height * Change files * reverse change * add override * Fix stale focus rects left in UI when last focusable component is removed (#14359) * Fix stale focus rects left in UI when last focusable component is removed * Change files --------- Co-authored-by: Tatiana Kapos <[email protected]> * Fix issue when calling arrange on an RN Island during load (#14362) * Fix issue when calling arrange on an RN Island during load * Change files --------- Co-authored-by: Tatiana Kapos <[email protected]> * Fix tooltips in high dpi (#14397) * Fix tooltips in high dpi * Change files * format * tooltips dont respect textscalefactor * Fix build issue building component codegen using clang (#14393) * Fix build issue building component codegen using clang * Change files * Components do not lose hover state if pointer leaves window before it leaves the component (#14375) * Components do not lost hover state if pointer leaves window before it leaves the component * format * Change files --------- Co-authored-by: Tatiana Kapos <[email protected]> * Property updates switching between PlatformColors would no-op (#14398) * Property updates switching between PlatformColors would no-op * Change files * format * [Fabric] Add Support for Role Prop (#14352) * Add Support for Role Prop * Change files * Format * Update Tests --------- Co-authored-by: Tatiana Kapos <[email protected]> * Fix bool operator on transparent colors returning false (#14413) * Fix crash loading logbox * Fix bool operator on transparent colors returning false * Change files * format * change files * codegen updates * update overrides * snapshots --------- Co-authored-by: Chiara Mooney <[email protected]> Co-authored-by: Julio César Rocha <[email protected]> Co-authored-by: Tiago <[email protected]> Co-authored-by: JesseCol <[email protected]> Co-authored-by: Jon Thysell <[email protected]> Co-authored-by: Tatiana Kapos <[email protected]>
Yajur-Grover
pushed a commit
to Yajur-Grover/react-native-windows
that referenced
this pull request
Apr 4, 2025
…microsoft#14315) * Allow portals to have independent layout constraints and scale factor * format * change files * fix
Yajur-Grover
pushed a commit
to Yajur-Grover/react-native-windows
that referenced
this pull request
Apr 7, 2025
…microsoft#14315) * Allow portals to have independent layout constraints and scale factor * format * change files * fix
Yajur-Grover
added a commit
that referenced
this pull request
Apr 8, 2025
* Rework modal to be implemented entirely using public APIs (#14256) * Rework modal implementation to use public APIs * shutdown fix * Change files * format * remove dead code * format * fixes * fix * UIA tree for root component should be kept distinct from main UIA tree * input offset fix for sub rootviews * Split modal into two componentview's so that we dont have multiple roots in our componentview tree * format * Ensure rootview removes itself from the island, before a new one adds itself on instance reload * defork some modal test pages * remove override * Allow portals to have independent layout constraints and scale factor (#14315) * Allow portals to have independent layout constraints and scale factor * format * change files * fix * Change files * fix bad merge * [Fabric] Fix modal height (#14343) * fix modal height * Change files * reverse change * add override * remove old change file * fix linting --------- Co-authored-by: Andrew Coates <[email protected]> Co-authored-by: Tatiana Kapos <[email protected]>
Yajur-Grover
added a commit
that referenced
this pull request
Apr 9, 2025
* Allow portals to have independent layout constraints and scale factor (#14315) * Allow portals to have independent layout constraints and scale factor * format * change files * fix * Change files * [Fabric] Fix modal height (#14343) * fix modal height * Change files * reverse change * add override * remove old change file * fix formatting * [Fabric] Use PopupWindowSiteBridge for Modal when USE_EXPERIMENTAL_WINUI3 is true (#14284) * add modal implementation with PopupWindowSiteBridge * Change files * add conditional * feedback * remove old change file --------- Co-authored-by: Andrew Coates <[email protected]> Co-authored-by: Tatiana Kapos <[email protected]>
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.
Description
The previous implementation of portals used a continuous yoga tree from the parent of the portal through the portal. This limited the ability of the native portal container to impose native layout constraints. And meant that the portal had to have the same scale factor as the parent nodes.
With this change I'm introducing a new PortalShadowNode which handles its children as a separate layout, which allows it to use its own layout constraints and scale factor.
I updated modal to constrain the size of the modal to 90% of the size of the screen - and to forward the scale factor and layout direction from the portals ContentIsland into the PortalShodowNode.
Microsoft Reviewers: Open in CodeFlow