fix: multiple FAB

Author: Srirang.Kalantri

packages/pluggableWidgets/floating-action-button-native/e2e/specs/maestro/FloatingActionButton.yaml

@@ -12,12 +12,12 @@ appId: "${APP_ID}"
     text: "Music w/ action"
 - tapOn:
     id: "floatingActionButtonBottomLeft"
-# - assertVisible:
-#     text: "Zooooom"
+- assertVisible:
+    text: "Zooooom"
 - tapOn:
     id: "floatingActionButtonBottomRight"
-# - assertVisible:
-#     text: "Email"
+- assertVisible:
+    text: "Email"
 - tapOn:
     id: "floatingActionButtonTopRight"
 - takeScreenshot:

packages/pluggableWidgets/floating-action-button-native/src/FloatingActionButton.tsx

@@ -94,7 +94,6 @@ export function FloatingActionButton(props: FloatingActionButtonProps<FloatingAc
         top: 0,
         bottom: 0,
         direction: "ltr",
-        zIndex: 999,
         pointerEvents: "box-none"
     };
 
@@ -126,6 +125,8 @@ export function FloatingActionButton(props: FloatingActionButtonProps<FloatingAc
                     outputRange: [0, yOffset]
                 });
 
+                // For bottom FABs, use top positioning with translated offset
+                // This ensures proper rendering when multiple FABs are on screen
                 const buttonTop = props.verticalPosition === "top" ? margin : undefined;
                 const buttonBottom = props.verticalPosition === "bottom" ? margin : undefined;
 
@@ -141,7 +142,8 @@ export function FloatingActionButton(props: FloatingActionButtonProps<FloatingAc
                                     top: buttonTop,
                                     bottom: buttonBottom,
                                     width: secondaryButtonSize,
-                                    height: secondaryButtonSize
+                                    height: secondaryButtonSize,
+                                    zIndex: 100
                                 },
                                 secondaryButtonHorizontal
                             ]}
@@ -187,7 +189,8 @@ export function FloatingActionButton(props: FloatingActionButtonProps<FloatingAc
                                         top: buttonTop,
                                         bottom: buttonBottom,
                                         height: secondaryButtonSize,
-                                        justifyContent: "center"
+                                        justifyContent: "center",
+                                        zIndex: 100
                                     },
                                     secondaryLabelHorizontal
                                 ]}
@@ -212,7 +215,8 @@ export function FloatingActionButton(props: FloatingActionButtonProps<FloatingAc
                         top: mainButtonTop,
                         bottom: mainButtonBottom,
                         width: mainButtonSize,
-                        height: mainButtonSize
+                        height: mainButtonSize,
+                        zIndex: 200
                     },
                     mainButtonHorizontal
                 ]}

packages/pluggableWidgets/floating-action-button-native/src/__tests__/__snapshots__/FloatingActionButton.spec.tsx.snap

@@ -11,7 +11,6 @@ exports[`FloatingActionButton renders correct props with secondary buttons 1`] =
       "position": "absolute",
       "right": 0,
       "top": 0,
-      "zIndex": 999,
     }
   }
 >
@@ -34,6 +33,7 @@ exports[`FloatingActionButton renders correct props with secondary buttons 1`] =
             },
           ],
           "width": 40,
+          "zIndex": 100,
         }
       }
     >
@@ -111,6 +111,7 @@ exports[`FloatingActionButton renders correct props with secondary buttons 1`] =
               "translateY": 0,
             },
           ],
+          "zIndex": 100,
         }
       }
     >
@@ -149,6 +150,7 @@ exports[`FloatingActionButton renders correct props with secondary buttons 1`] =
             },
           ],
           "width": 40,
+          "zIndex": 100,
         }
       }
     >
@@ -226,6 +228,7 @@ exports[`FloatingActionButton renders correct props with secondary buttons 1`] =
               "translateY": 0,
             },
           ],
+          "zIndex": 100,
         }
       }
     >
@@ -264,6 +267,7 @@ exports[`FloatingActionButton renders correct props with secondary buttons 1`] =
             },
           ],
           "width": 40,
+          "zIndex": 100,
         }
       }
     >
@@ -341,6 +345,7 @@ exports[`FloatingActionButton renders correct props with secondary buttons 1`] =
               "translateY": 0,
             },
           ],
+          "zIndex": 100,
         }
       }
     >
@@ -369,6 +374,7 @@ exports[`FloatingActionButton renders correct props with secondary buttons 1`] =
           "position": "absolute",
           "top": undefined,
           "width": 54,
+          "zIndex": 200,
         },
         {
           "right": 30,
@@ -465,7 +471,6 @@ exports[`FloatingActionButton renders correct props without secondary buttons 1`
       "position": "absolute",
       "right": 0,
       "top": 0,
-      "zIndex": 999,
     }
   }
 >
@@ -478,6 +483,7 @@ exports[`FloatingActionButton renders correct props without secondary buttons 1`
           "position": "absolute",
           "top": undefined,
           "width": 54,
+          "zIndex": 200,
         },
         {
           "right": 30,
@@ -574,7 +580,6 @@ exports[`FloatingActionButton vertical position renders position bottom correctl
       "position": "absolute",
       "right": 0,
       "top": 0,
-      "zIndex": 999,
     }
   }
 >
@@ -587,6 +592,7 @@ exports[`FloatingActionButton vertical position renders position bottom correctl
           "position": "absolute",
           "top": undefined,
           "width": 54,
+          "zIndex": 200,
         },
         {
           "right": 30,
@@ -683,7 +689,6 @@ exports[`FloatingActionButton vertical position renders position top correctly 1
       "position": "absolute",
       "right": 0,
       "top": 0,
-      "zIndex": 999,
     }
   }
 >
@@ -696,6 +701,7 @@ exports[`FloatingActionButton vertical position renders position top correctly 1
           "position": "absolute",
           "top": 30,
           "width": 54,
+          "zIndex": 200,
         },
         {
           "right": 30,