From 90189588e21499e63a6a998341f686e45073548b Mon Sep 17 00:00:00 2001
From: lukewalczak <lukasz.walczak.pwr@gmail.com>
Date: Mon, 29 Aug 2022 23:26:09 +0200
Subject: [PATCH] fix: correct custom border radius in FAB

---
 src/components/FAB/FAB.tsx                    |  22 +-
 src/components/__tests__/FAB.test.js          |  56 +-
 .../__tests__/__snapshots__/FAB.test.js.snap  | 547 ++++++++++++------
 3 files changed, 431 insertions(+), 194 deletions(-)

diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx
index c71c655d2c..166ed74512 100644
--- a/src/components/FAB/FAB.tsx
+++ b/src/components/FAB/FAB.tsx
@@ -164,7 +164,7 @@ const FAB = ({
   visible = true,
   uppercase = !theme.isV3,
   loading,
-  testID,
+  testID = 'fab',
   size = 'medium',
   customSize,
   mode = 'elevated',
@@ -214,13 +214,10 @@ const FAB = ({
     color: foregroundColor,
     ...(isV3 ? theme.typescale.labelLarge : theme.fonts.medium),
   };
-  const shapeStyle = { borderRadius: fabStyle.borderRadius };
 
-  const containerStyles = [
-    !isV3 && styles.elevated,
-    !isV3 && disabled && styles.disabled,
-    shapeStyle,
-  ];
+  const { borderRadius = fabStyle.borderRadius } = (StyleSheet.flatten(style) ||
+    {}) as ViewStyle;
+
   const md3Elevation = isFlatMode || disabled ? 0 : 3;
 
   return (
@@ -229,6 +226,7 @@ const FAB = ({
       style={
         [
           {
+            borderRadius,
             backgroundColor,
             opacity: visibility,
             transform: [
@@ -237,11 +235,14 @@ const FAB = ({
               },
             ],
           },
-          containerStyles,
+          styles.container,
+          !isV3 && styles.elevated,
+          !isV3 && disabled && styles.disabled,
           style,
         ] as StyleProp<ViewStyle>
       }
       pointerEvents={visible ? 'auto' : 'none'}
+      testID={`${testID}-container`}
       {...(isV3 && { elevation: md3Elevation })}
     >
       <TouchableRipple
@@ -253,11 +254,11 @@ const FAB = ({
         accessibilityLabel={accessibilityLabel}
         accessibilityRole="button"
         accessibilityState={{ ...accessibilityState, disabled }}
-        style={shapeStyle}
         testID={testID}
       >
         <View
           style={[styles.content, label ? extendedStyle : fabStyle]}
+          testID={`${testID}-content`}
           pointerEvents="none"
         >
           {icon && loading !== true ? (
@@ -296,6 +297,9 @@ const styles = StyleSheet.create({
   elevated: {
     elevation: 6,
   },
+  container: {
+    overflow: 'hidden',
+  },
   content: {
     flexDirection: 'row',
     alignItems: 'center',
diff --git a/src/components/__tests__/FAB.test.js b/src/components/__tests__/FAB.test.js
index 614091115e..29f48d6af2 100644
--- a/src/components/__tests__/FAB.test.js
+++ b/src/components/__tests__/FAB.test.js
@@ -1,13 +1,36 @@
 import * as React from 'react';
+import { StyleSheet } from 'react-native';
 import renderer from 'react-test-renderer';
 import color from 'color';
+import { render } from '@testing-library/react-native';
 import FAB from '../FAB';
 import { getFABColors } from '../FAB/utils';
 import getContrastingColor from '../../utils/getContrastingColor';
 import { black, white } from '../../styles/themes/v2/colors';
 import { getTheme } from '../../core/theming';
 
-it('renders normal FAB', () => {
+const styles = StyleSheet.create({
+  borderRadius: {
+    borderRadius: 0,
+  },
+  small: {
+    height: 40,
+    width: 40,
+    borderRadius: 12,
+  },
+  medium: {
+    height: 56,
+    width: 56,
+    borderRadius: 16,
+  },
+  large: {
+    height: 96,
+    width: 96,
+    borderRadius: 28,
+  },
+});
+
+it('renders default FAB', () => {
   const tree = renderer.create(<FAB onPress={() => {}} icon="plus" />).toJSON();
 
   expect(tree).toMatchSnapshot();
@@ -21,6 +44,14 @@ it('renders small FAB', () => {
   expect(tree).toMatchSnapshot();
 });
 
+it('renders large FAB', () => {
+  const tree = renderer
+    .create(<FAB size="large" onPress={() => {}} icon="plus" />)
+    .toJSON();
+
+  expect(tree).toMatchSnapshot();
+});
+
 it('renders FAB with custom size prop', () => {
   const tree = renderer
     .create(<FAB customSize={100} onPress={() => {}} icon="plus" />)
@@ -100,6 +131,29 @@ it('renders visible FAB', () => {
   expect(toJSON()).toMatchSnapshot();
 });
 
+it('renders FAB with custom border radius', () => {
+  const { getByTestId } = render(
+    <FAB
+      onPress={() => {}}
+      icon="plus"
+      testID="fab"
+      style={styles.borderRadius}
+    />
+  );
+
+  expect(getByTestId('fab-container')).toHaveStyle({ borderRadius: 0 });
+});
+
+['small', 'medium', 'large'].forEach((size) => {
+  it(`renders ${size} FAB with correct size and border radius`, () => {
+    const { getByTestId } = render(
+      <FAB onPress={() => {}} size={size} icon="plus" testID={`${size}-fab`} />
+    );
+
+    expect(getByTestId(`${size}-fab-content`)).toHaveStyle(styles[size]);
+  });
+});
+
 describe('getFABColors - background color', () => {
   it('should return color from styles', () => {
     expect(
diff --git a/src/components/__tests__/__snapshots__/FAB.test.js.snap b/src/components/__tests__/__snapshots__/FAB.test.js.snap
index 8e4d2d951e..c344467388 100644
--- a/src/components/__tests__/__snapshots__/FAB.test.js.snap
+++ b/src/components/__tests__/__snapshots__/FAB.test.js.snap
@@ -43,6 +43,7 @@ exports[`renders FAB with custom size prop 1`] = `
           "backgroundColor": "rgba(234, 221, 255, 1)",
           "borderRadius": 25,
           "opacity": 1,
+          "overflow": "hidden",
           "transform": Array [
             Object {
               "scale": 1,
@@ -50,6 +51,7 @@ exports[`renders FAB with custom size prop 1`] = `
           ],
         }
       }
+      testID="fab-container"
     >
       <View
         accessibilityRole="button"
@@ -72,11 +74,10 @@ exports[`renders FAB with custom size prop 1`] = `
             Object {
               "overflow": "hidden",
             },
-            Object {
-              "borderRadius": 25,
-            },
+            undefined,
           ]
         }
+        testID="fab"
       >
         <View
           pointerEvents="none"
@@ -94,6 +95,7 @@ exports[`renders FAB with custom size prop 1`] = `
               },
             ]
           }
+          testID="fab-content"
         >
           <View
             style={
@@ -198,6 +200,7 @@ exports[`renders custom color for the icon and label of the FAB 1`] = `
           "backgroundColor": "rgba(234, 221, 255, 1)",
           "borderRadius": 16,
           "opacity": 1,
+          "overflow": "hidden",
           "transform": Array [
             Object {
               "scale": 1,
@@ -205,6 +208,7 @@ exports[`renders custom color for the icon and label of the FAB 1`] = `
           ],
         }
       }
+      testID="fab-container"
     >
       <View
         accessibilityRole="button"
@@ -227,11 +231,167 @@ exports[`renders custom color for the icon and label of the FAB 1`] = `
             Object {
               "overflow": "hidden",
             },
+            undefined,
+          ]
+        }
+        testID="fab"
+      >
+        <View
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "center",
+              },
+              Object {
+                "borderRadius": 16,
+                "height": 56,
+                "width": 56,
+              },
+            ]
+          }
+          testID="fab-content"
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "justifyContent": "center",
+                },
+                Object {
+                  "height": 24,
+                  "width": 24,
+                },
+              ]
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "opacity": 1,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                  "transform": Array [
+                    Object {
+                      "rotate": "0deg",
+                    },
+                  ],
+                }
+              }
+            >
+              <Text
+                accessibilityElementsHidden={true}
+                importantForAccessibility="no-hide-descendants"
+                pointerEvents="none"
+                selectable={false}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "transparent",
+                    },
+                    Object {
+                      "color": "#AA0114",
+                      "fontSize": 24,
+                    },
+                  ]
+                }
+              >
+                □
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders default FAB 1`] = `
+<View
+  collapsable={false}
+  style={
+    Object {
+      "alignSelf": undefined,
+      "bottom": undefined,
+      "left": undefined,
+      "position": undefined,
+      "right": undefined,
+      "shadowColor": "#000",
+      "shadowOffset": Object {
+        "height": 4,
+        "width": 0,
+      },
+      "shadowOpacity": 0.15,
+      "shadowRadius": 8,
+      "top": undefined,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "shadowColor": "#000",
+        "shadowOffset": Object {
+          "height": 1,
+          "width": 0,
+        },
+        "shadowOpacity": 0.3,
+        "shadowRadius": 3,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      pointerEvents="auto"
+      style={
+        Object {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderRadius": 16,
+          "opacity": 1,
+          "overflow": "hidden",
+          "transform": Array [
+            Object {
+              "scale": 1,
+            },
+          ],
+        }
+      }
+      testID="fab-container"
+    >
+      <View
+        accessibilityRole="button"
+        accessibilityState={
+          Object {
+            "disabled": false,
+          }
+        }
+        accessible={true}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
             Object {
-              "borderRadius": 16,
+              "overflow": "hidden",
             },
+            undefined,
           ]
         }
+        testID="fab"
       >
         <View
           pointerEvents="none"
@@ -249,6 +409,7 @@ exports[`renders custom color for the icon and label of the FAB 1`] = `
               },
             ]
           }
+          testID="fab-content"
         >
           <View
             style={
@@ -293,7 +454,7 @@ exports[`renders custom color for the icon and label of the FAB 1`] = `
                       "backgroundColor": "transparent",
                     },
                     Object {
-                      "color": "#AA0114",
+                      "color": "rgba(33, 0, 93, 1)",
                       "fontSize": 24,
                     },
                   ]
@@ -353,6 +514,7 @@ exports[`renders disabled FAB 1`] = `
           "backgroundColor": "rgba(28, 27, 31, 0.12)",
           "borderRadius": 16,
           "opacity": 1,
+          "overflow": "hidden",
           "transform": Array [
             Object {
               "scale": 1,
@@ -360,6 +522,7 @@ exports[`renders disabled FAB 1`] = `
           ],
         }
       }
+      testID="fab-container"
     >
       <View
         accessibilityRole="button"
@@ -382,11 +545,10 @@ exports[`renders disabled FAB 1`] = `
             Object {
               "overflow": "hidden",
             },
-            Object {
-              "borderRadius": 16,
-            },
+            undefined,
           ]
         }
+        testID="fab"
       >
         <View
           pointerEvents="none"
@@ -404,6 +566,7 @@ exports[`renders disabled FAB 1`] = `
               },
             ]
           }
+          testID="fab-content"
         >
           <View
             style={
@@ -508,6 +671,7 @@ exports[`renders extended FAB 1`] = `
           "backgroundColor": "rgba(234, 221, 255, 1)",
           "borderRadius": 16,
           "opacity": 1,
+          "overflow": "hidden",
           "transform": Array [
             Object {
               "scale": 1,
@@ -515,6 +679,7 @@ exports[`renders extended FAB 1`] = `
           ],
         }
       }
+      testID="fab-container"
     >
       <View
         accessibilityLabel="Add items"
@@ -538,11 +703,10 @@ exports[`renders extended FAB 1`] = `
             Object {
               "overflow": "hidden",
             },
-            Object {
-              "borderRadius": 16,
-            },
+            undefined,
           ]
         }
+        testID="fab"
       >
         <View
           pointerEvents="none"
@@ -560,6 +724,7 @@ exports[`renders extended FAB 1`] = `
               },
             ]
           }
+          testID="fab-content"
         >
           <View
             style={
@@ -700,6 +865,7 @@ exports[`renders extended FAB with custom size prop 1`] = `
           "backgroundColor": "rgba(234, 221, 255, 1)",
           "borderRadius": 25,
           "opacity": 1,
+          "overflow": "hidden",
           "transform": Array [
             Object {
               "scale": 1,
@@ -707,6 +873,7 @@ exports[`renders extended FAB with custom size prop 1`] = `
           ],
         }
       }
+      testID="fab-container"
     >
       <View
         accessibilityLabel="Add items"
@@ -730,11 +897,10 @@ exports[`renders extended FAB with custom size prop 1`] = `
             Object {
               "overflow": "hidden",
             },
-            Object {
-              "borderRadius": 25,
-            },
+            undefined,
           ]
         }
+        testID="fab"
       >
         <View
           pointerEvents="none"
@@ -751,6 +917,7 @@ exports[`renders extended FAB with custom size prop 1`] = `
               },
             ]
           }
+          testID="fab-content"
         >
           <View
             style={
@@ -848,7 +1015,7 @@ exports[`renders extended FAB with custom size prop 1`] = `
 </View>
 `;
 
-exports[`renders loading FAB 1`] = `
+exports[`renders large FAB 1`] = `
 <View
   collapsable={false}
   style={
@@ -889,8 +1056,9 @@ exports[`renders loading FAB 1`] = `
       style={
         Object {
           "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 16,
+          "borderRadius": 28,
           "opacity": 1,
+          "overflow": "hidden",
           "transform": Array [
             Object {
               "scale": 1,
@@ -898,6 +1066,7 @@ exports[`renders loading FAB 1`] = `
           ],
         }
       }
+      testID="fab-container"
     >
       <View
         accessibilityRole="button"
@@ -920,11 +1089,167 @@ exports[`renders loading FAB 1`] = `
             Object {
               "overflow": "hidden",
             },
+            undefined,
+          ]
+        }
+        testID="fab"
+      >
+        <View
+          pointerEvents="none"
+          style={
+            Array [
+              Object {
+                "alignItems": "center",
+                "flexDirection": "row",
+                "justifyContent": "center",
+              },
+              Object {
+                "borderRadius": 28,
+                "height": 96,
+                "width": 96,
+              },
+            ]
+          }
+          testID="fab-content"
+        >
+          <View
+            style={
+              Array [
+                Object {
+                  "alignItems": "center",
+                  "justifyContent": "center",
+                },
+                Object {
+                  "height": 36,
+                  "width": 36,
+                },
+              ]
+            }
+          >
+            <View
+              collapsable={false}
+              style={
+                Object {
+                  "bottom": 0,
+                  "left": 0,
+                  "opacity": 1,
+                  "position": "absolute",
+                  "right": 0,
+                  "top": 0,
+                  "transform": Array [
+                    Object {
+                      "rotate": "0deg",
+                    },
+                  ],
+                }
+              }
+            >
+              <Text
+                accessibilityElementsHidden={true}
+                importantForAccessibility="no-hide-descendants"
+                pointerEvents="none"
+                selectable={false}
+                style={
+                  Array [
+                    Object {
+                      "backgroundColor": "transparent",
+                    },
+                    Object {
+                      "color": "rgba(33, 0, 93, 1)",
+                      "fontSize": 36,
+                    },
+                  ]
+                }
+              >
+                □
+              </Text>
+            </View>
+          </View>
+        </View>
+      </View>
+    </View>
+  </View>
+</View>
+`;
+
+exports[`renders loading FAB 1`] = `
+<View
+  collapsable={false}
+  style={
+    Object {
+      "alignSelf": undefined,
+      "bottom": undefined,
+      "left": undefined,
+      "position": undefined,
+      "right": undefined,
+      "shadowColor": "#000",
+      "shadowOffset": Object {
+        "height": 4,
+        "width": 0,
+      },
+      "shadowOpacity": 0.15,
+      "shadowRadius": 8,
+      "top": undefined,
+    }
+  }
+>
+  <View
+    collapsable={false}
+    style={
+      Object {
+        "shadowColor": "#000",
+        "shadowOffset": Object {
+          "height": 1,
+          "width": 0,
+        },
+        "shadowOpacity": 0.3,
+        "shadowRadius": 3,
+      }
+    }
+  >
+    <View
+      collapsable={false}
+      pointerEvents="auto"
+      style={
+        Object {
+          "backgroundColor": "rgba(234, 221, 255, 1)",
+          "borderRadius": 16,
+          "opacity": 1,
+          "overflow": "hidden",
+          "transform": Array [
+            Object {
+              "scale": 1,
+            },
+          ],
+        }
+      }
+      testID="fab-container"
+    >
+      <View
+        accessibilityRole="button"
+        accessibilityState={
+          Object {
+            "disabled": false,
+          }
+        }
+        accessible={true}
+        focusable={true}
+        onClick={[Function]}
+        onResponderGrant={[Function]}
+        onResponderMove={[Function]}
+        onResponderRelease={[Function]}
+        onResponderTerminate={[Function]}
+        onResponderTerminationRequest={[Function]}
+        onStartShouldSetResponder={[Function]}
+        style={
+          Array [
             Object {
-              "borderRadius": 16,
+              "overflow": "hidden",
             },
+            undefined,
           ]
         }
+        testID="fab"
       >
         <View
           pointerEvents="none"
@@ -942,6 +1267,7 @@ exports[`renders loading FAB 1`] = `
               },
             ]
           }
+          testID="fab-content"
         >
           <View
             accessibilityRole="progressbar"
@@ -1188,6 +1514,7 @@ exports[`renders loading FAB with custom size prop 1`] = `
           "backgroundColor": "rgba(234, 221, 255, 1)",
           "borderRadius": 25,
           "opacity": 1,
+          "overflow": "hidden",
           "transform": Array [
             Object {
               "scale": 1,
@@ -1195,6 +1522,7 @@ exports[`renders loading FAB with custom size prop 1`] = `
           ],
         }
       }
+      testID="fab-container"
     >
       <View
         accessibilityRole="button"
@@ -1217,11 +1545,10 @@ exports[`renders loading FAB with custom size prop 1`] = `
             Object {
               "overflow": "hidden",
             },
-            Object {
-              "borderRadius": 25,
-            },
+            undefined,
           ]
         }
+        testID="fab"
       >
         <View
           pointerEvents="none"
@@ -1239,6 +1566,7 @@ exports[`renders loading FAB with custom size prop 1`] = `
               },
             ]
           }
+          testID="fab-content"
         >
           <View
             accessibilityRole="progressbar"
@@ -1442,161 +1770,6 @@ exports[`renders loading FAB with custom size prop 1`] = `
 </View>
 `;
 
-exports[`renders normal FAB 1`] = `
-<View
-  collapsable={false}
-  style={
-    Object {
-      "alignSelf": undefined,
-      "bottom": undefined,
-      "left": undefined,
-      "position": undefined,
-      "right": undefined,
-      "shadowColor": "#000",
-      "shadowOffset": Object {
-        "height": 4,
-        "width": 0,
-      },
-      "shadowOpacity": 0.15,
-      "shadowRadius": 8,
-      "top": undefined,
-    }
-  }
->
-  <View
-    collapsable={false}
-    style={
-      Object {
-        "shadowColor": "#000",
-        "shadowOffset": Object {
-          "height": 1,
-          "width": 0,
-        },
-        "shadowOpacity": 0.3,
-        "shadowRadius": 3,
-      }
-    }
-  >
-    <View
-      collapsable={false}
-      pointerEvents="auto"
-      style={
-        Object {
-          "backgroundColor": "rgba(234, 221, 255, 1)",
-          "borderRadius": 16,
-          "opacity": 1,
-          "transform": Array [
-            Object {
-              "scale": 1,
-            },
-          ],
-        }
-      }
-    >
-      <View
-        accessibilityRole="button"
-        accessibilityState={
-          Object {
-            "disabled": false,
-          }
-        }
-        accessible={true}
-        focusable={true}
-        onClick={[Function]}
-        onResponderGrant={[Function]}
-        onResponderMove={[Function]}
-        onResponderRelease={[Function]}
-        onResponderTerminate={[Function]}
-        onResponderTerminationRequest={[Function]}
-        onStartShouldSetResponder={[Function]}
-        style={
-          Array [
-            Object {
-              "overflow": "hidden",
-            },
-            Object {
-              "borderRadius": 16,
-            },
-          ]
-        }
-      >
-        <View
-          pointerEvents="none"
-          style={
-            Array [
-              Object {
-                "alignItems": "center",
-                "flexDirection": "row",
-                "justifyContent": "center",
-              },
-              Object {
-                "borderRadius": 16,
-                "height": 56,
-                "width": 56,
-              },
-            ]
-          }
-        >
-          <View
-            style={
-              Array [
-                Object {
-                  "alignItems": "center",
-                  "justifyContent": "center",
-                },
-                Object {
-                  "height": 24,
-                  "width": 24,
-                },
-              ]
-            }
-          >
-            <View
-              collapsable={false}
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "opacity": 1,
-                  "position": "absolute",
-                  "right": 0,
-                  "top": 0,
-                  "transform": Array [
-                    Object {
-                      "rotate": "0deg",
-                    },
-                  ],
-                }
-              }
-            >
-              <Text
-                accessibilityElementsHidden={true}
-                importantForAccessibility="no-hide-descendants"
-                pointerEvents="none"
-                selectable={false}
-                style={
-                  Array [
-                    Object {
-                      "backgroundColor": "transparent",
-                    },
-                    Object {
-                      "color": "rgba(33, 0, 93, 1)",
-                      "fontSize": 24,
-                    },
-                  ]
-                }
-              >
-                □
-              </Text>
-            </View>
-          </View>
-        </View>
-      </View>
-    </View>
-  </View>
-</View>
-`;
-
 exports[`renders not visible FAB 1`] = `
 <View
   collapsable={false}
@@ -1640,6 +1813,7 @@ exports[`renders not visible FAB 1`] = `
           "backgroundColor": "rgba(234, 221, 255, 1)",
           "borderRadius": 16,
           "opacity": 1,
+          "overflow": "hidden",
           "transform": Array [
             Object {
               "scale": 1,
@@ -1647,6 +1821,7 @@ exports[`renders not visible FAB 1`] = `
           ],
         }
       }
+      testID="fab-container"
     >
       <View
         accessibilityRole="button"
@@ -1669,11 +1844,10 @@ exports[`renders not visible FAB 1`] = `
             Object {
               "overflow": "hidden",
             },
-            Object {
-              "borderRadius": 16,
-            },
+            undefined,
           ]
         }
+        testID="fab"
       >
         <View
           pointerEvents="none"
@@ -1691,6 +1865,7 @@ exports[`renders not visible FAB 1`] = `
               },
             ]
           }
+          testID="fab-content"
         >
           <View
             style={
@@ -1795,6 +1970,7 @@ exports[`renders small FAB 1`] = `
           "backgroundColor": "rgba(234, 221, 255, 1)",
           "borderRadius": 12,
           "opacity": 1,
+          "overflow": "hidden",
           "transform": Array [
             Object {
               "scale": 1,
@@ -1802,6 +1978,7 @@ exports[`renders small FAB 1`] = `
           ],
         }
       }
+      testID="fab-container"
     >
       <View
         accessibilityRole="button"
@@ -1824,11 +2001,10 @@ exports[`renders small FAB 1`] = `
             Object {
               "overflow": "hidden",
             },
-            Object {
-              "borderRadius": 12,
-            },
+            undefined,
           ]
         }
+        testID="fab"
       >
         <View
           pointerEvents="none"
@@ -1846,6 +2022,7 @@ exports[`renders small FAB 1`] = `
               },
             ]
           }
+          testID="fab-content"
         >
           <View
             style={
@@ -1950,6 +2127,7 @@ exports[`renders visible FAB 1`] = `
           "backgroundColor": "rgba(234, 221, 255, 1)",
           "borderRadius": 16,
           "opacity": 0,
+          "overflow": "hidden",
           "transform": Array [
             Object {
               "scale": 0,
@@ -1957,6 +2135,7 @@ exports[`renders visible FAB 1`] = `
           ],
         }
       }
+      testID="fab-container"
     >
       <View
         accessibilityRole="button"
@@ -1979,11 +2158,10 @@ exports[`renders visible FAB 1`] = `
             Object {
               "overflow": "hidden",
             },
-            Object {
-              "borderRadius": 16,
-            },
+            undefined,
           ]
         }
+        testID="fab"
       >
         <View
           pointerEvents="none"
@@ -2001,6 +2179,7 @@ exports[`renders visible FAB 1`] = `
               },
             ]
           }
+          testID="fab-content"
         >
           <View
             style={