From ca6700f3c336676fc778ad9d8189f6dca8a765fa Mon Sep 17 00:00:00 2001
From: Valentin Shergin <shergin@fb.com>
Date: Sun, 26 Jul 2020 22:03:48 -0700
Subject: [PATCH] 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 | 2 +-
 ReactCommon/fabric/components/view/ViewProps.cpp            | 3 ++-
 ReactCommon/fabric/components/view/ViewProps.h              | 2 +-
 ReactCommon/fabric/components/view/ViewShadowNode.cpp       | 2 +-
 ReactCommon/fabric/components/view/tests/ViewTest.cpp       | 2 +-
 5 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/ReactCommon/fabric/components/view/ConcreteViewShadowNode.h b/ReactCommon/fabric/components/view/ConcreteViewShadowNode.h
index 9fd77d342ea..8454d2dd7c1 100644
--- a/ReactCommon/fabric/components/view/ConcreteViewShadowNode.h
+++ b/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);
diff --git a/ReactCommon/fabric/components/view/ViewProps.cpp b/ReactCommon/fabric/components/view/ViewProps.cpp
index f391c709493..311f0a0e763 100644
--- a/ReactCommon/fabric/components/view/ViewProps.cpp
+++ b/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(
diff --git a/ReactCommon/fabric/components/view/ViewProps.h b/ReactCommon/fabric/components/view/ViewProps.h
index 6d004213414..59fb492e240 100644
--- a/ReactCommon/fabric/components/view/ViewProps.h
+++ b/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{};
diff --git a/ReactCommon/fabric/components/view/ViewShadowNode.cpp b/ReactCommon/fabric/components/view/ViewShadowNode.cpp
index 421f69c7c8b..9a0ee18d462 100644
--- a/ReactCommon/fabric/components/view/ViewShadowNode.cpp
+++ b/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() ||
diff --git a/ReactCommon/fabric/components/view/tests/ViewTest.cpp b/ReactCommon/fabric/components/view/tests/ViewTest.cpp
index 2224bc68294..993a7097215 100644
--- a/ReactCommon/fabric/components/view/tests/ViewTest.cpp
+++ b/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;