fix: correct animated fab container bg color (#3558)

Author: lukewalczak

src/components/FAB/AnimatedFAB.tsx

@@ -201,7 +201,7 @@ const AnimatedFAB = ({
   style,
   visible = true,
   uppercase = !theme.isV3,
-  testID,
+  testID = 'animated-fab',
   animateFrom = 'right',
   extended = false,
   iconMode = 'dynamic',
@@ -242,12 +242,15 @@ const AnimatedFAB = ({
     }
   }, [visible, scale, visibility]);
 
+  const { backgroundColor: customBackgroundColor, ...restStyle } =
+    (StyleSheet.flatten(style) || {}) as ViewStyle;
+
   const { backgroundColor, foregroundColor } = getFABColors({
     theme,
     variant,
     disabled,
     customColor,
-    style,
+    customBackgroundColor,
   });
 
   const rippleColor = color(foregroundColor).alpha(0.12).rgb().string();
@@ -314,6 +317,7 @@ const AnimatedFAB = ({
   return (
     <Surface
       {...rest}
+      testID={`${testID}-container`}
       style={
         [
           {
@@ -329,7 +333,7 @@ const AnimatedFAB = ({
             elevation: md2Elevation,
           },
           styles.container,
-          style,
+          restStyle,
         ] as StyleProp<ViewStyle>
       }
       {...(isV3 && { elevation: md3Elevation })}

src/components/FAB/FAB.tsx

@@ -205,12 +205,19 @@ const FAB = React.forwardRef<View, Props>(
 
     const IconComponent = animated ? CrossFadeIcon : Icon;
 
+    const fabStyle = getFabStyle({ customSize, size, theme });
+
+    const {
+      borderRadius = fabStyle.borderRadius,
+      backgroundColor: customBackgroundColor,
+    } = (StyleSheet.flatten(style) || {}) as ViewStyle;
+
     const { backgroundColor, foregroundColor, rippleColor } = getFABColors({
       theme,
       variant,
       disabled,
       customColor,
-      style,
+      customBackgroundColor,
     });
 
     const isLargeSize = size === 'large';
@@ -219,17 +226,12 @@ const FAB = React.forwardRef<View, Props>(
     const loadingIndicatorSize = isLargeSize ? 24 : 18;
     const font = isV3 ? theme.fonts.labelLarge : theme.fonts.medium;
 
-    const fabStyle = getFabStyle({ customSize, size, theme });
     const extendedStyle = getExtendedFabStyle({ customSize, theme });
     const textStyle = {
       color: foregroundColor,
       ...font,
     };
 
-    const { borderRadius = fabStyle.borderRadius } = (StyleSheet.flatten(
-      style
-    ) || {}) as ViewStyle;
-
     const md3Elevation = isFlatMode || disabled ? 0 : 3;
 
     const newAccessibilityState = { ...accessibilityState, disabled };

src/components/FAB/utils.ts

@@ -1,10 +1,4 @@
-import {
-  Animated,
-  I18nManager,
-  StyleProp,
-  StyleSheet,
-  ViewStyle,
-} from 'react-native';
+import { Animated, ColorValue, I18nManager, ViewStyle } from 'react-native';
 
 import color from 'color';
 
@@ -167,11 +161,10 @@ const getBackgroundColor = ({
   theme,
   isVariant,
   disabled,
-  style,
-}: BaseProps & { style?: StyleProp<ViewStyle> }) => {
-  const { backgroundColor } = StyleSheet.flatten(style) || {};
-  if (backgroundColor && !disabled) {
-    return backgroundColor;
+  customBackgroundColor,
+}: BaseProps & { customBackgroundColor?: ColorValue }) => {
+  if (customBackgroundColor && !disabled) {
+    return customBackgroundColor;
   }
 
   if (theme.isV3) {
@@ -263,13 +256,13 @@ export const getFABColors = ({
   variant,
   disabled,
   customColor,
-  style,
+  customBackgroundColor,
 }: {
   theme: InternalTheme;
   variant: string;
   disabled?: boolean;
   customColor?: string;
-  style?: StyleProp<ViewStyle>;
+  customBackgroundColor?: ColorValue;
 }) => {
   const isVariant = (variantToCompare: Variant) => {
     return variant === variantToCompare;
@@ -279,7 +272,7 @@ export const getFABColors = ({
 
   const backgroundColor = getBackgroundColor({
     ...baseFABColorProps,
-    style,
+    customBackgroundColor,
   });
 
   const foregroundColor = getForegroundColor({

src/components/__tests__/AnimatedFAB.test.js

@@ -1,9 +1,17 @@
 import * as React from 'react';
+import { StyleSheet } from 'react-native';
 
+import { render } from '@testing-library/react-native';
 import renderer from 'react-test-renderer';
 
 import AnimatedFAB from '../FAB/AnimatedFAB';
 
+const styles = StyleSheet.create({
+  background: {
+    backgroundColor: 'purple',
+  },
+});
+
 it('renders animated fab', () => {
   const tree = renderer
     .create(<AnimatedFAB onPress={() => {}} icon="plus" />)
@@ -37,3 +45,19 @@ it('renders animated fab with label on the left', () => {
 
   expect(tree).toMatchSnapshot();
 });
+
+it('renders animated fab with only transparent container', () => {
+  const { getByTestId } = render(
+    <AnimatedFAB
+      label="text"
+      animateFrom="left"
+      onPress={() => {}}
+      icon="plus"
+      testID="animated-fab"
+      style={styles.background}
+    />
+  );
+  expect(getByTestId('animated-fab-container')).toHaveStyle({
+    backgroundColor: 'transparent',
+  });
+});

src/components/__tests__/FAB.test.js

@@ -162,7 +162,7 @@ describe('getFABColors - background color', () => {
       getFABColors({
         theme: getTheme(),
         variant: 'primary',
-        style: { backgroundColor: 'purple' },
+        customBackgroundColor: 'purple',
       })
     ).toMatchObject({
       backgroundColor: 'purple',

src/components/__tests__/__snapshots__/AnimatedFAB.test.js.snap

@@ -49,6 +49,7 @@ exports[`renders animated fab 1`] = `
           ],
         }
       }
+      testID="animated-fab-container"
     >
       <View
         collapsable={false}
@@ -174,6 +175,7 @@ exports[`renders animated fab 1`] = `
                   },
                 ]
               }
+              testID="animated-fab"
             >
               <View
                 style={
@@ -335,6 +337,7 @@ exports[`renders animated fab with label on the left 1`] = `
           ],
         }
       }
+      testID="animated-fab-container"
     >
       <View
         collapsable={false}
@@ -461,6 +464,7 @@ exports[`renders animated fab with label on the left 1`] = `
                   },
                 ]
               }
+              testID="animated-fab"
             >
               <View
                 style={
@@ -624,6 +628,7 @@ exports[`renders animated fab with label on the right by default 1`] = `
           ],
         }
       }
+      testID="animated-fab-container"
     >
       <View
         collapsable={false}
@@ -750,6 +755,7 @@ exports[`renders animated fab with label on the right by default 1`] = `
                   },
                 ]
               }
+              testID="animated-fab"
             >
               <View
                 style={