fix: correct animated fab elevation value (#3812)

Author: lukewalczak

src/components/FAB/AnimatedFAB.tsx

@@ -314,6 +314,12 @@ const AnimatedFAB = ({
   const md2Elevation = disabled || !isIOS ? 0 : 6;
   const md3Elevation = disabled || !isIOS ? 0 : 3;
 
+  const shadowStyle = isV3 ? styles.v3Shadow : styles.shadow;
+  const baseStyle = [
+    StyleSheet.absoluteFill,
+    disabled ? styles.disabled : shadowStyle,
+  ];
+
   const newAccessibilityState = { ...accessibilityState, disabled };
 
   return (
@@ -359,8 +365,7 @@ const AnimatedFAB = ({
           <Animated.View
             pointerEvents="none"
             style={[
-              StyleSheet.absoluteFill,
-              disabled ? styles.disabled : styles.shadow,
+              baseStyle,
               {
                 width: extendedWidth,
                 opacity: animFAB.interpolate({
@@ -370,12 +375,12 @@ const AnimatedFAB = ({
                 borderRadius,
               },
             ]}
+            testID={`${testID}-extended-shadow`}
           />
           <Animated.View
             pointerEvents="none"
             style={[
-              StyleSheet.absoluteFill,
-              disabled ? styles.disabled : styles.shadow,
+              baseStyle,
               {
                 opacity: animFAB.interpolate({
                   inputRange: propForDirection([distance, 0.9 * distance, 0]),
@@ -392,6 +397,7 @@ const AnimatedFAB = ({
               },
               combinedStyles.absoluteFill,
             ]}
+            testID={`${testID}-shadow`}
           />
         </View>
         <Animated.View
@@ -519,6 +525,9 @@ const styles = StyleSheet.create({
   shadow: {
     elevation: 6,
   },
+  v3Shadow: {
+    elevation: 3,
+  },
   iconWrapper: {
     alignItems: 'center',
     justifyContent: 'center',

src/components/__tests__/AnimatedFAB.test.tsx

@@ -126,3 +126,21 @@ it('renders FAB with uppercase styling if uppercase prop is truthy', () => {
     textTransform: 'uppercase',
   });
 });
+
+it('renders correct elevation value for shadow views', () => {
+  const { getByTestId } = render(
+    <AnimatedFAB
+      extended
+      label="text"
+      animateFrom="left"
+      onPress={() => {}}
+      icon="plus"
+      testID="animated-fab"
+    />
+  );
+
+  expect(getByTestId('animated-fab-shadow')).toHaveStyle({ elevation: 3 });
+  expect(getByTestId('animated-fab-extended-shadow')).toHaveStyle({
+    elevation: 3,
+  });
+});

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

@@ -85,7 +85,7 @@ exports[`renders animated fab 1`] = `
             Object {
               "borderRadius": 16,
               "bottom": 0,
-              "elevation": 6,
+              "elevation": 3,
               "left": 0,
               "opacity": 0,
               "position": "absolute",
@@ -94,6 +94,7 @@ exports[`renders animated fab 1`] = `
               "width": 72,
             }
           }
+          testID="animated-fab-extended-shadow"
         />
         <View
           collapsable={false}
@@ -102,7 +103,7 @@ exports[`renders animated fab 1`] = `
             Object {
               "borderRadius": 16,
               "bottom": 0,
-              "elevation": 6,
+              "elevation": 3,
               "left": 0,
               "opacity": 1,
               "position": "absolute",
@@ -116,6 +117,7 @@ exports[`renders animated fab 1`] = `
               "width": 56,
             }
           }
+          testID="animated-fab-shadow"
         />
       </View>
       <View
@@ -376,7 +378,7 @@ exports[`renders animated fab with label on the left 1`] = `
             Object {
               "borderRadius": 16,
               "bottom": 0,
-              "elevation": 6,
+              "elevation": 3,
               "left": 0,
               "opacity": 0,
               "position": "absolute",
@@ -385,6 +387,7 @@ exports[`renders animated fab with label on the left 1`] = `
               "width": 72,
             }
           }
+          testID="animated-fab-extended-shadow"
         />
         <View
           collapsable={false}
@@ -393,7 +396,7 @@ exports[`renders animated fab with label on the left 1`] = `
             Object {
               "borderRadius": 16,
               "bottom": 0,
-              "elevation": 6,
+              "elevation": 3,
               "left": 0,
               "opacity": 1,
               "position": "absolute",
@@ -407,6 +410,7 @@ exports[`renders animated fab with label on the left 1`] = `
               "width": 56,
             }
           }
+          testID="animated-fab-shadow"
         />
       </View>
       <View
@@ -669,7 +673,7 @@ exports[`renders animated fab with label on the right by default 1`] = `
             Object {
               "borderRadius": 16,
               "bottom": 0,
-              "elevation": 6,
+              "elevation": 3,
               "left": 0,
               "opacity": 0,
               "position": "absolute",
@@ -678,6 +682,7 @@ exports[`renders animated fab with label on the right by default 1`] = `
               "width": 72,
             }
           }
+          testID="animated-fab-extended-shadow"
         />
         <View
           collapsable={false}
@@ -686,7 +691,7 @@ exports[`renders animated fab with label on the right by default 1`] = `
             Object {
               "borderRadius": 16,
               "bottom": 0,
-              "elevation": 6,
+              "elevation": 3,
               "left": 0,
               "opacity": 1,
               "position": "absolute",
@@ -700,6 +705,7 @@ exports[`renders animated fab with label on the right by default 1`] = `
               "width": 56,
             }
           }
+          testID="animated-fab-shadow"
         />
       </View>
       <View