feat: 4088 add z-index support for ui elements (#1127)

* Updated protocol pointers to dev branch

* Added zIndex to the react-ecs component and test

(cherry picked from commit 7ea5cfd)

* Added opacity property to ui elements

* Fixed tests

* Updated protocol

* Updated snapshots

* Removed redundant definitions. Added test coverage

* Adjusted the default value in test

* ui transform  test wip

* Added more tests. Refactored parseUiTransform utility function to properly handle the new properties

* Deep clean and snapshot

* Removed redundant tests, removed redundant defaults definitions.

* Updated snapshots

* Updated default value for opacity and updated snapshots

Author: AlejandroAlvarezMelucciDCL

package-lock.json

@@ -6,7 +6,7 @@
   "bugs": "https://github.com/decentraland/js-sdk-toolchain/issues",
   "dependencies": {
     "@actions/core": "^1.10.0",
-    "@dcl/protocol": "1.0.0-15216214787.commit-b85a860",
+    "@dcl/protocol": "1.0.0-15560497739.commit-8e03daa",
     "@dcl/quickjs-emscripten": "^0.21.0-3680274614.commit-1808aa1",
     "@dcl/ts-proto": "1.153.0",
     "@types/fs-extra": "^9.0.12",

package.json

@@ -3181,6 +3181,7 @@ export interface PBUiTransform {
     // (undocumented)
     minWidth: number;
     minWidthUnit: YGUnit;
+    opacity?: number | undefined;
     overflow: YGOverflow;
     // (undocumented)
     paddingBottom: number;
@@ -3215,6 +3216,7 @@ export interface PBUiTransform {
     // (undocumented)
     width: number;
     widthUnit: YGUnit;
+    zIndex?: number | undefined;
 }
 
 // @public (undocumented)
@@ -4365,12 +4367,14 @@ export interface UiTransformProps {
     maxWidth?: PositionUnit;
     minHeight?: PositionUnit;
     minWidth?: PositionUnit;
+    opacity?: number;
     overflow?: OverflowType;
     padding?: Partial<Position> | PositionShorthand;
     pointerFilter?: PointerFilterType;
     position?: Partial<Position> | PositionShorthand;
     positionType?: PositionType;
     width?: PositionUnit | 'auto';
+    zIndex?: number;
 }
 
 // @public (undocumented)

packages/@dcl/playground-assets/etc/playground-assets.api.md

@@ -79,7 +79,9 @@ const defaultUiTransform: PBUiTransform = {
   flexBasisUnit: YGUnit.YGU_UNDEFINED,
   widthUnit: YGUnit.YGU_AUTO,
   heightUnit: YGUnit.YGU_UNDEFINED,
-  pointerFilter: PointerFilterMode.PFM_NONE
+  pointerFilter: PointerFilterMode.PFM_NONE,
+  opacity: 1,
+  zIndex: 0
 }
 
 /**

packages/@dcl/react-ecs/src/components/uiTransform/index.ts

@@ -150,4 +150,9 @@ export interface UiTransformProps {
   borderColor?: Record<keyof Partial<Position>, Color4> | Color4 | undefined
   borderRadius?: Partial<BorderRadius> | PositionUnit
   borderWidth?: Partial<Position> | PositionUnit
+
+  /** The opacity property sets the opacity level for an element, it's accumulated across children @defaultValue 1 */
+  opacity?: number
+  /** default 0 */
+  zIndex?: number
 }

packages/@dcl/react-ecs/src/components/uiTransform/types.ts

@@ -13,7 +13,7 @@
     "@dcl/inspector": "file:../inspector",
     "@dcl/linker-dapp": "^0.14.2",
     "@dcl/mini-comms": "1.0.1-20230216163137.commit-a4c75be",
-    "@dcl/protocol": "1.0.0-15216214787.commit-b85a860",
+    "@dcl/protocol": "1.0.0-15560497739.commit-8e03daa",
     "@dcl/quests-client": "^1.0.3",
     "@dcl/quests-manager": "^0.1.4",
     "@dcl/rpc": "^1.1.1",

packages/@dcl/sdk-commands/package-lock.json

@@ -87,7 +87,9 @@ describe('UiTransform component', () => {
       borderTopColor: undefined,
       borderBottomColor: undefined,
       borderLeftColor: undefined,
-      borderRightColor: undefined
+      borderRightColor: undefined,
+      opacity: undefined,
+      zIndex: undefined
     })
   })
 })