fix: patch Surface shadow, correct FAB styles (#3203)

callstack · Jun 14, 2022 · ac0f91f · ac0f91f
1 parent 95ff55b
commit ac0f91f
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 44 deletions.
diff --git a/example/src/Examples/ButtonExample.tsx b/example/src/Examples/ButtonExample.tsx
@@ -292,6 +292,7 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     flexWrap: 'wrap',
     paddingHorizontal: 12,
+    alignItems: 'center',
   },
   button: {
     margin: 4,

diff --git a/example/src/Examples/SurfaceExample.tsx b/example/src/Examples/SurfaceExample.tsx
@@ -2,6 +2,7 @@ import * as React from 'react';
 import { StyleSheet } from 'react-native';
 import { Text, Surface, useTheme, MD3Elevation } from 'react-native-paper';
 import ScreenWrapper from '../ScreenWrapper';
+import { isWeb } from '../../utils';
 
 const SurfaceExample = () => {
   const { isV3 } = useTheme();
@@ -10,7 +11,9 @@ const SurfaceExample = () => {
   const baseElevation = isV3 ? Array.from({ length: 6 }) : v2Elevation;
 
   return (
-    <ScreenWrapper contentContainerStyle={styles.content}>
+    <ScreenWrapper
+      contentContainerStyle={[styles.content, isWeb && styles.webContent]}
+    >
       {baseElevation.map((e, i) => (
         <Surface
           key={i}
@@ -36,6 +39,11 @@ const styles = StyleSheet.create({
     padding: 24,
     alignItems: 'center',
   },
+  webContent: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    padding: 0,
+  },
   surface: {
     margin: 24,
     height: 80,

diff --git a/src/components/FAB/FAB.tsx b/src/components/FAB/FAB.tsx
@@ -14,7 +14,7 @@ import Icon, { IconSource } from '../Icon';
 import Text from '../Typography/Text';
 import TouchableRipple from '../TouchableRipple/TouchableRipple';
 import { withTheme } from '../../core/theming';
-import { getFABColors } from './utils';
+import { getFABColors, getFabStyle } from './utils';
 import type { $RemoveChildren, Theme } from '../../types';
 
 type FABSize = 'small' | 'medium' | 'large';
@@ -201,22 +201,9 @@ const FAB = ({
   const iconSize = isLargeSize ? 36 : 24;
   const loadingIndicatorSize = isLargeSize ? 24 : 18;
 
-  const fabStyle = () => {
-    if (!isV3) {
-      return size === 'small' ? styles.small : styles.standard;
-    } else {
-      switch (size) {
-        case 'small':
-          return styles.v3SmallSize;
-        case 'medium':
-          return styles.v3MediumSize;
-        case 'large':
-          return styles.v3LargeSize;
-      }
-    }
-  };
+  const fabStyle = getFabStyle({ size, theme });
 
-  const shapeStyle = { borderRadius: fabStyle().borderRadius };
+  const shapeStyle = { borderRadius: fabStyle.borderRadius };
   const textStyle = {
     color: foregroundColor,
     ...(!isV3 && fonts.medium),
@@ -264,7 +251,7 @@ const FAB = ({
         testID={testID}
       >
         <View
-          style={[styles.content, label ? extendedStyle : fabStyle()]}
+          style={[styles.content, label ? extendedStyle : fabStyle]}
           pointerEvents="none"
         >
           {icon && loading !== true ? (
@@ -303,16 +290,6 @@ const styles = StyleSheet.create({
   elevated: {
     elevation: 6,
   },
-  standard: {
-    height: 56,
-    width: 56,
-    borderRadius: 28,
-  },
-  small: {
-    height: 40,
-    width: 40,
-    borderRadius: 28,
-  },
   extended: {
     height: 48,
     paddingHorizontal: 16,
@@ -331,21 +308,6 @@ const styles = StyleSheet.create({
   disabled: {
     elevation: 0,
   },
-  v3SmallSize: {
-    height: 40,
-    width: 40,
-    borderRadius: 12,
-  },
-  v3MediumSize: {
-    height: 56,
-    width: 56,
-    borderRadius: 16,
-  },
-  v3LargeSize: {
-    height: 96,
-    width: 96,
-    borderRadius: 28,
-  },
   v3Extended: {
     height: 56,
     borderRadius: 16,

diff --git a/src/components/FAB/utils.ts b/src/components/FAB/utils.ts
@@ -326,3 +326,51 @@ export const getFABGroupColors = ({ theme }: { theme: Theme }) => {
     stackedFABBackgroundColor: getStackedFABBackgroundColor({ theme }),
   };
 };
+
+const standardSize = {
+  height: 56,
+  width: 56,
+  borderRadius: 28,
+};
+const smallSize = {
+  height: 40,
+  width: 40,
+  borderRadius: 28,
+};
+const v3SmallSize = {
+  height: 40,
+  width: 40,
+};
+const v3MediumSize = {
+  height: 56,
+  width: 56,
+};
+const v3LargeSize = {
+  height: 96,
+  width: 96,
+};
+
+export const getFabStyle = ({
+  size,
+  theme,
+}: {
+  size: 'small' | 'medium' | 'large';
+  theme: Theme;
+}) => {
+  const { isV3, roundness } = theme;
+  if (isV3) {
+    switch (size) {
+      case 'small':
+        return { ...v3SmallSize, borderRadius: 3 * roundness };
+      case 'medium':
+        return { ...v3MediumSize, borderRadius: 4 * roundness };
+      case 'large':
+        return { ...v3LargeSize, borderRadius: 7 * roundness };
+    }
+  }
+
+  if (size === 'small') {
+    return smallSize;
+  }
+  return standardSize;
+};
diff --git a/src/components/Surface.tsx b/src/components/Surface.tsx
@@ -135,6 +135,21 @@ const Surface = ({
 
   const sharedStyle = [{ backgroundColor }, style];
 
+  if (Platform.OS === 'web') {
+    return (
+      <Animated.View
+        {...props}
+        style={[
+          { backgroundColor },
+          elevation ? shadow(elevation, theme.isV3) : null,
+          style,
+        ]}
+      >
+        {children}
+      </Animated.View>
+    );
+  }
+
   if (Platform.OS === 'android') {
     const elevationLevel = [0, 3, 6, 9, 12, 15];
 

diff --git a/src/styles/shadow.tsx b/src/styles/shadow.tsx
@@ -1,10 +1,20 @@
 import * as MD2Colors from './themes/v2/colors';
 import { Animated } from 'react-native';
+import { MD3Colors } from './themes/v3/tokens';
 
 const SHADOW_COLOR = MD2Colors.black;
 const SHADOW_OPACITY = 0.24;
+const MD3_SHADOW_OPACITY = 0.3;
+const MD3_SHADOW_COLOR = MD3Colors.primary0;
 
-export default function shadow(elevation: number | Animated.Value = 0) {
+export default function shadow(
+  elevation: number | Animated.Value = 0,
+  isV3 = false
+) {
+  return isV3 ? v3Shadow(elevation) : v2Shadow(elevation);
+}
+
+function v2Shadow(elevation: number | Animated.Value = 0) {
   if (elevation instanceof Animated.Value) {
     const inputRange = [0, 1, 2, 3, 8, 24];
 
@@ -58,3 +68,41 @@ export default function shadow(elevation: number | Animated.Value = 0) {
     };
   }
 }
+
+function v3Shadow(elevation: number | Animated.Value = 0) {
+  const inputRange = [0, 1, 2, 3, 4, 5];
+  const shadowHeight = [0, 1, 2, 4, 6, 8];
+  const shadowRadius = [0, 3, 6, 8, 10, 12];
+
+  if (elevation instanceof Animated.Value) {
+    return {
+      shadowColor: MD3_SHADOW_COLOR,
+      shadowOffset: {
+        width: new Animated.Value(0),
+        height: elevation.interpolate({
+          inputRange,
+          outputRange: shadowHeight,
+        }),
+      },
+      shadowOpacity: elevation.interpolate({
+        inputRange: [0, 1],
+        outputRange: [0, MD3_SHADOW_OPACITY],
+        extrapolate: 'clamp',
+      }),
+      shadowRadius: elevation.interpolate({
+        inputRange,
+        outputRange: shadowRadius,
+      }),
+    };
+  } else {
+    return {
+      shadowColor: MD3_SHADOW_COLOR,
+      shadowOpacity: elevation ? MD3_SHADOW_OPACITY : 0,
+      shadowOffset: {
+        width: 0,
+        height: shadowHeight[elevation],
+      },
+      shadowRadius: shadowRadius[elevation],
+    };
+  }
+}