Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Modal component parity for Fabric #11157

Closed
55 of 79 tasks
Tracked by #11135
, #12042
...
jonthysell opened this issue Jan 31, 2023 · 1 comment
Closed
55 of 79 tasks
Tracked by #11135
, #12042
...

Modal component parity for Fabric #11157

jonthysell opened this issue Jan 31, 2023 · 1 comment
Assignees
@TatianaKapos
Labels
API: Completion Area: Component Views Area: Fabric Support Facebook Fabric Area: Modal Deliverable Major item tracked for top-level planning in ADO enhancement New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Parity: Fabric vs. Paper RNW Fabric does not look or behave like RNW Paper
Milestone
Next

Comments

@jonthysell
Copy link
Contributor

jonthysell commented Jan 31, 2023 •
edited by TatianaKapos
Loading

This task captures the work to reach parity between Paper and Fabric for the native code for the <Modal> component.

ComponentView

  1. Create the ModalHostViewComponentView (MHVCV)
  2. Register the ComponentView in the ComponentViewRegistry
  3. Get a new window to show with a Modal
  4. Add React Native Components within new window
  5. Correctly position new windows
  6. Add onDismiss
  7. Add style properties (transparent, visible, animated ect.)

APIs

See latest spec at https://reactnative.dev/docs/modal.

Modal Props

API Platform RNW Paper RNW Fabric Notes
  • animated
 No Pri 1
  • animationType
 No Pri 1
  • hardwareAccelerated
 Android No No?
  • onDismiss
 iOS No No?
  • onOrientationChange
 iOS No No?
  • onRequestClose
 No Pri 1
  • onShow
 No Pri 1
  • presentationStyle
 iOS No No?
  • statusBarTranslucent
 Android No No?
  • supportedOrientations
 iOS No No?
  • transparent
 No Pri 1
  • visible
 No Pri 1

View Props

API Platform RNW Paper RNW Fabric Notes
  • accessibilityActions
 FEVM Pri 2
  • accessibilityElementsHidden
 iOS No No?
  • accessibilityHint
 FEVM CBCV+CDAP Fabric: #12036
  • accessibilityIgnoresInvertColors
 iOS No No?
  • accessibilityLabel
 FEVM Pri 2
  • accessibilityLanguage
 iOS No No?
  • accessibilityLiveRegion
 Android FEVM Pri 2
  • accessibilityRole
 FEVM Pri 2
  • accessibilityState
 FEVM Pri 2
  • accessibilityValue
 FEVM CBCV+CDAP Fabric: #12287
  • accessibilityViewIsModal
 iOS No No?
  • accessible
 CVM+FEVM CBCV+CDAP Fabric: #11719
  • collapsable
 Android No No?
  • focusable
 Android CVM Pri 1
  • hitSlop
 JS JS
  • importantForAccessibility
 Android No No?
  • nativeID
 No No?
  • needsOffscreenAlphaCompositing
 No No?
  • nextFocusDown
 Android No No?
  • nextFocusForward
 Android No No?
  • nextFocusLeft
 Android No No?
  • nextFocusRight
 Android No No?
  • nextFocusUp
 Android No No?
  • onAccessibilityAction
 VMB Pri 2
  • onAccessibilityEscape
 iOS No No?
  • onAccessibilityTap
 No CDAP Fabric: #11874
  • onLayout
 VMB Pri 1
  • onMagicTap
 iOS No No?
  • onMoveShouldSetResponder
 JS JS
  • onMoveShouldSetResponderCapture
 JS JS
  • onResponderGrant
 JS JS
  • onResponderMove
 JS JS
  • onResponderReject
 JS JS
  • onResponderRelease
 JS JS
  • onResponderTerminate
 JS JS
  • onResponderTerminationRequest
 JS JS
  • onStartShouldSetResponder
 JS JS
  • onStartShouldSetResponderCapture
 JS JS
  • pointerEvents
 VMB Pri 1
  • removeClippedSubviews
 No No?
  • renderToHardwareTextureAndroid
 Android No No?
  • shouldRasterizeIOS
 iOS No No?
  • testID
 FEVM CDAP Fabric: #11412
  • accessibilityPosInSet
 Windows FEVM Pri 2
  • accessibilitySetSize
 Windows FEVM Pri 2
  • enableFocusRing
 Windows JS Pri 1 Fabric: #11323, Focus ring impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • keyDownEvents
 Windows VMB CBCV Fabric: #12146
  • keyUpEvents
 Windows VMB CBCV Fabric: #12146
  • onBlur
 Windows VMB Pri 1 Necessary? Fabric: #11323
  • onFocus
 Windows VMB Pri 1 Necessary? Fabric: #11323
  • onKeyDown
 Windows VMB CBCV+CEH Fabric: #12146
  • onKeyDownCapture
 Windows VMB Pri 1
  • onKeyUp
 Windows VMB CBCV+CEH Fabric: #12146
  • onKeyUpCapture
 Windows VMB Pri 1
  • onMouseEnter
 Windows VMB CEH
  • onMouseLeave
 Windows VMB CEH
  • tabIndex
 Windows CVM Pri 1
  • tooltip
 Windows FEVM Pri 1

Native Component Methods

API Platform RNW Paper RNW Fabric Notes
  • blur()
 Windows VMB CBCV Fabric: #11323, #112377
  • focus()
 Windows VMB CBCV Fabric: #11323, #112377

Glossary

See the Glossary to decode the abbreviations above and/or the RNW Fabric Inventory.xlsx.
@jonthysell jonthysell added the Area: Fabric Support Facebook Fabric label Jan 31, 2023
@microsoft-github-policy-service microsoft-github-policy-service bot added the Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) label Jan 31, 2023
@jonthysell jonthysell mentioned this issue Jan 31, 2023
Closed
9 tasks
@chrisglein chrisglein added enhancement Deliverable Major item tracked for top-level planning in ADO Area: Modal and removed Needs: Triage 🔍 New issue that needs to be reviewed by the issue management team (label applied by bot) labels Jan 31, 2023
@chrisglein chrisglein added this to the Backlog milestone Jan 31, 2023
@chrisglein chrisglein mentioned this issue Jul 21, 2023
Open
15 tasks
@jonthysell jonthysell mentioned this issue Jul 26, 2023
Closed
11 tasks
@chrisglein chrisglein mentioned this issue Aug 17, 2023
Open
@chrisglein chrisglein modified the milestones: Backlog, Next Nov 7, 2023
@TatianaKapos TatianaKapos mentioned this issue Feb 27, 2024
Merged
@jonthysell jonthysell added New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Parity: Fabric vs. Paper RNW Fabric does not look or behave like RNW Paper Area: Component Views API: Completion labels Mar 7, 2024
@jonthysell
Copy link
Contributor Author

Closing this deliverable, all remaining component properties required for parity are now being tracked by individual issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@TatianaKapos TatianaKapos

Labels
API: Completion Area: Component Views Area: Fabric Support Facebook Fabric Area: Modal Deliverable Major item tracked for top-level planning in ADO enhancement New Architecture Broad category for issues that apply to the RN "new" architecture of Turbo Modules + Fabric Parity: Fabric vs. Paper RNW Fabric does not look or behave like RNW Paper
Projects
RNW New Architecture
Status: Done
Milestone
Next
Development

No branches or pull requests
4 participants
@jonthysell @chrisglein @YajurG @TatianaKapos