Fabric: ViewProps::zIndex now is optional<int> to be able store auto

Summary:
In W3C standard, `zIndex` prop can have `auto` value which is the default.
In classic React Native and in Fabric before this diff, the default value was `0`. The only difference between `auto` and `0` is that nodes with `auto` do not form stacking context whereas nodes with `0` (or any other numeric value) do. This worked fine in pre-Fabric RN where every view always formed staking context but in Fabric we need to finally implement it right.

https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
https://stackoverflow.com/a/57892072/496389

Changelog: [Internal] Fabric-specific internal change.

Reviewed By: sammy-SC

Differential Revision: D22403383

fbshipit-source-id: 6532d180a00f22bde763e3ebadd6683b344a0672

ReactCommon/fabric/components/view/ConcreteViewShadowNode.h

@@ -105,7 +105,7 @@ class ConcreteViewShadowNode : public ConcreteShadowNode<
   void initialize() noexcept {
     auto &props = BaseShadowNode::getConcreteProps();
 
-    BaseShadowNode::orderIndex_ = props.zIndex;
+    BaseShadowNode::orderIndex_ = props.zIndex.value_or(0);
 
     if (props.yogaStyle.display() == YGDisplayNone) {
       BaseShadowNode::traits_.set(ShadowNodeTraits::Trait::Hidden);

ReactCommon/fabric/components/view/ViewProps.cpp

@@ -184,7 +184,8 @@ SharedDebugStringConvertibleList ViewProps::getDebugProps() const {
   return AccessibilityProps::getDebugProps() +
       YogaStylableProps::getDebugProps() +
       SharedDebugStringConvertibleList{
-          debugStringConvertibleItem("zIndex", zIndex, defaultViewProps.zIndex),
+          debugStringConvertibleItem(
+              "zIndex", zIndex, defaultViewProps.zIndex.value_or(0)),
           debugStringConvertibleItem(
               "opacity", opacity, defaultViewProps.opacity),
           debugStringConvertibleItem(

ReactCommon/fabric/components/view/ViewProps.h

@@ -50,7 +50,7 @@ class ViewProps : public YogaStylableProps, public AccessibilityProps {
   Transform transform{};
   BackfaceVisibility backfaceVisibility{};
   bool shouldRasterize{};
-  int zIndex{};
+  better::optional<int> zIndex{};
 
   // Events
   PointerEventsMode pointerEvents{};

ReactCommon/fabric/components/view/ViewShadowNode.cpp

@@ -44,7 +44,7 @@ void ViewShadowNode::initialize() noexcept {
       !viewProps.nativeId.empty() || viewProps.accessible ||
       viewProps.opacity != 1.0 || viewProps.transform != Transform{} ||
       viewProps.elevation != 0 ||
-      (viewProps.zIndex != 0 &&
+      (viewProps.zIndex.has_value() &&
        viewProps.yogaStyle.positionType() == YGPositionTypeAbsolute) ||
       viewProps.yogaStyle.display() == YGDisplayNone ||
       viewProps.getClipsContentToBounds() ||

ReactCommon/fabric/components/view/tests/ViewTest.cpp

@@ -109,7 +109,7 @@ TEST_F(YogaDirtyFlagTest, changingNonLayoutSubPropsMustNotDirtyYogaNode) {
         props.foregroundColor = whiteColor();
         props.backgroundColor = blackColor();
         props.opacity = props.opacity + 0.042;
-        props.zIndex = props.zIndex + 42;
+        props.zIndex = props.zIndex.value_or(0) + 42;
         props.shouldRasterize = !props.shouldRasterize;
         props.collapsable = !props.collapsable;