fix: custom position logic for badgeWrapper (#6864)

* Fixed custom position logic for badgeWrapper * Fixed lint error
MetaMask · Aug 2, 2023 · 68c642c · 68c642c
1 parent 9c35255
commit 68c642c
Showing 1 changed file with 17 additions and 10 deletions.
diff --git a/app/component-library/components/Badges/BadgeWrapper/BadgeWrapper.styles.ts b/app/component-library/components/Badges/BadgeWrapper/BadgeWrapper.styles.ts
@@ -27,6 +27,7 @@ const styleSheet = (params: {
   const { style, anchorElementShape, badgePosition, containerSize } = vars;
   let anchoringOffset, positionObj, xOffset, yOffset;
   const elementHeight = containerSize?.height || 0;
+  let isCustomPosition = false;
 
   switch (anchorElementShape) {
     case BadgeAnchorElementShape.Circular:
@@ -75,6 +76,7 @@ const styleSheet = (params: {
       break;
     default:
       positionObj = badgePosition;
+      isCustomPosition = true;
       xOffset = 0;
       yOffset = 0;
   }
@@ -84,16 +86,21 @@ const styleSheet = (params: {
       { position: 'relative', alignSelf: 'flex-start' } as ViewStyle,
       style,
     ) as ViewStyle,
-    badge: {
-      // This is needed to pass the anchor element's bounding box to the Badge.
-      position: 'absolute',
-      height: elementHeight,
-      aspectRatio: 1,
-      alignItems: 'center',
-      justifyContent: 'center',
-      ...positionObj,
-      transform: [{ translateX: xOffset }, { translateY: yOffset }],
-    },
+    badge: isCustomPosition
+      ? {
+          position: 'absolute',
+          ...positionObj,
+        }
+      : {
+          // This is needed to pass the anchor element's bounding box to the Badge.
+          position: 'absolute',
+          height: elementHeight,
+          aspectRatio: 1,
+          alignItems: 'center',
+          justifyContent: 'center',
+          ...positionObj,
+          transform: [{ translateX: xOffset }, { translateY: yOffset }],
+        },
   });
 };