search

microsoft / react-native-windows

A framework for building native Windows apps with React.
https://microsoft.github.io/react-native-windows/
Other
16.31k stars 1.14k forks source link

ActivityIndicator component parity for Fabric #11162

Closed jonthysell closed 5 months ago

jonthysell commented 1 year ago

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

ComponentView

  1. [x] Create the ActivityIndicatorComponentView (AICV)
  2. [x] Register the ComponentView in the ComponentViewRegistry
  3. [x] Fix sizing issue in AcitivityIndicator (size always comes back as small)
  4. [x] Adjust animation speed to match XAML ProgressIndicator
  5. [ ] Future: https://github.com/microsoft/react-native-windows/issues/11566

APIs

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

ActivityIndicator Props

4/4 API Platform RNW Paper RNW Fabric Notes
  • [x] animating
 AIVM AICV Fabric: #12124
  • [x] color
 CVM AICV Fabric: #11537
  • [x] hidesWhenStopped
 iOS No No?
  • [x] size
 JS JS

View Props

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

View Style Props

29/32 API Platform RNW Paper RNW Fabric Notes
  • [x] backfaceVisibility
 No CBCV+PCV Fabric: #12115 Impl in CBCV and CV must call updateTransformProps
  • [ ] backgroundColor
 CVM Pri 1
  • [x] borderBottomColor
 No CBCV+AICV Fabric: #11537, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderBottomEndRadius
 CVM CBCV+AICV Fabric: #11537, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderBottomLeftRadius
 CVM CBCV+AICV Fabric: #11537, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderBottomRightRadius
 CVM CBCV+AICV Fabric: #11537, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderBottomStartRadius
 CVM CBCV+AICV Fabric: #11537, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderBottomWidth
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderColor
 CVM CBCV+AICV Fabric: #11537, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderEndColor
 No CBCV+AICV Fabric: #11537, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderEndWidth
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderLeftColor
 No CBCV+AICV Fabric: #11537, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderLeftWidth
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderRadius
 CVM CBCV+AICV Fabric: #11537, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderRightColor
 No CBCV+AICV Fabric: #11537, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderRightWidth
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderStartColor
 No CBCV+AICV Fabric: #11537, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderStartWidth
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
No CBCV Fabric: Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderTopColor
 No CBCV+AICV Fabric: #11537, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderTopEndRadius
 CVM CBCV+AICV Fabric: #11537, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderTopLeftRadius
 CVM CBCV+AICV Fabric: #11537, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderTopRightRadius
 CVM CBCV+AICV Fabric: #11537, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderTopStartRadius
 CVM CBCV+AICV Fabric: #11537, Border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderTopWidth
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderWidth
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] elevation
 Android No No?
  • [ ] opacity
 FEVM Pri 1
  • [ ] transform
 FEVM Pri 1 Fabric: #12115 Impl in CBCV and CV must call updateTransformProps

Layout Props

51/53 API Platform RNW Paper RNW Fabric Notes
  • [x] alignContent
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] alignItems
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] alignSelf
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] aspectRatio
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] borderBottomWidth
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderEndWidth
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderLeftWidth
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderRightWidth
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderStartWidth
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderTopWidth
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] borderWidth
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics, but border impl in CBCV and CV must call updateBorderProps / updateBorderLayoutMetrics
  • [x] bottom
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] direction
 FEVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] display
 FEVM+NUIM AICV Fabric: #11537
  • [x] end
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] flex
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] flexBasis
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] flexDirection
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] flexGrow
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] flexShrink
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] flexWrap
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] height
 VMB+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] justifyContent
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] left
 VMB+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] margin
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] marginBottom
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] marginEnd
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] marginHorizontal
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] marginLeft
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] marginRight
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] marginStart
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] marginTop
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] marginVertical
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] maxHeight
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] maxWidth
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] minHeight
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] minWidth
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [ ] overflow
 NUIM Pri 1
  • [x] padding
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] paddingBottom
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] paddingEnd
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] paddingHorizontal
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] paddingLeft
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] paddingRight
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] paddingStart
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] paddingTop
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] paddingVertical
 CVM+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] position
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] right
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] start
 NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] top
 VMB+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [x] width
 VMB+NUIM CBCV+AICV Fabric: #11537, RN Core resolves LayoutMetrics
  • [ ] zIndex
 FEVM Pri 1

Shadow Props

4/4 API Platform RNW Paper RNW Fabric Notes
  • [x] shadowColor
 No CBCV+AICV Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps
  • [x] shadowOffset
 iOS No CBCV+AICV Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps
  • [x] shadowOpacity
 iOS No CBCV+AICV Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps
  • [x] shadowRadius
 iOS No CBCV+AICV Fabric: #12108, Shadow props impl in CBCV and CV must call updateShadowProps

Native Component Methods

2/2 API Platform RNW Paper RNW Fabric Notes
  • [x] blur()
 Windows VMB CBCV Fabric: #11323
  • [x] focus()
 Windows VMB CBCV Fabric: #11323

Glossary

See the Glossary to decode the abbreviations above and/or the RNW Fabric Inventory.xlsx.

jonthysell commented 5 months ago

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