@fluentui-react-native/experimental-shadow 0.2.69 → 0.2.71

package/src/Shadow.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
 import type { ViewStyle } from 'react-native';
 import { View } from 'react-native';
-import type { ShadowProps } from './Shadow.types';
-import { shadowName } from './Shadow.types';
+
 import { mergeProps, stagedComponent } from '@fluentui-react-native/framework';
-import { getShadowTokenStyleSet } from './shadowStyle';
 import { memoize } from '@fluentui-react-native/framework';
 import type { ShadowToken } from '@fluentui-react-native/theme-types';
 
+import type { ShadowProps } from './Shadow.types';
+import { shadowName } from './Shadow.types';
+import { getShadowTokenStyleSet } from './shadowStyle';
+
 export const Shadow = stagedComponent((props: ShadowProps) => {
   return (final: ShadowProps, children: React.ReactNode) => {
     if (!props.shadowToken) {
@@ -39,6 +41,12 @@ const getStylePropsForShadowViews = memoize(getStylePropsForShadowViewsWorker);
 function getStylePropsForShadowViewsWorker(childStyleProps: ViewStyle = {}, shadowToken: ShadowToken) {
   const shadowTokenStyleSet = getShadowTokenStyleSet(shadowToken);
 
+  if (__DEV__) {
+    if (!childStyleProps.backgroundColor) {
+      console.warn('The View that the Shadow is set on must have a background color set');
+    }
+  }
+
   const {
     borderBottomWidth,
     borderEndWidth,
@@ -83,68 +91,65 @@ function getStylePropsForShadowViewsWorker(childStyleProps: ViewStyle = {}, shad
     ...restOfChildStyleProps
   } = childStyleProps;
 
-  if (__DEV__) {
-    if (!childStyleProps.backgroundColor) {
-      console.warn('The View that the Shadow is set on must have a background color set');
-    }
-  }
+  // Remove undefined properties, otherwise every prop will be added and be set to
+  // undefined, which can cause unexpected behaviour with some of the styles
+  const innerStyle = removeUndefinedProperties({
+    borderBottomWidth,
+    borderEndWidth,
+    borderLeftWidth,
+    borderRightWidth,
+    borderStartWidth,
+    borderTopWidth,
+    borderWidth,
 
-  return {
-    inner: {
-      style: {
-        borderBottomWidth,
-        borderEndWidth,
-        borderLeftWidth,
-        borderRightWidth,
-        borderStartWidth,
-        borderTopWidth,
-        borderWidth,
-
-        padding,
-        paddingBottom,
-        paddingEnd,
-        paddingHorizontal,
-        paddingLeft,
-        paddingRight,
-        paddingStart,
-        paddingTop,
-        paddingVertical,
-
-        alignItems,
-
-        flexWrap,
-        flexDirection,
-
-        ...shadowTokenStyleSet.key,
-        ...restOfChildStyleProps,
-      },
-    },
-    outer: {
-      style: {
-        margin,
-        marginBottom,
-        marginEnd,
-        marginHorizontal,
-        marginLeft,
-        marginRight,
-        marginStart,
-        marginTop,
-        marginVertical,
-
-        start,
-        end,
-        left,
-        right,
-        top,
-        bottom,
-
-        ...shadowTokenStyleSet.ambient,
-        ...restOfChildStyleProps,
-      },
-    },
-  };
+    padding,
+    paddingBottom,
+    paddingEnd,
+    paddingHorizontal,
+    paddingLeft,
+    paddingRight,
+    paddingStart,
+    paddingTop,
+    paddingVertical,
+
+    alignItems,
+
+    flexWrap,
+    flexDirection,
+
+    ...shadowTokenStyleSet.key,
+    ...restOfChildStyleProps,
+  });
+
+  const outerStyle = removeUndefinedProperties({
+    margin,
+    marginBottom,
+    marginEnd,
+    marginHorizontal,
+    marginLeft,
+    marginRight,
+    marginStart,
+    marginTop,
+    marginVertical,
+
+    start,
+    end,
+    left,
+    right,
+    top,
+    bottom,
+
+    ...shadowTokenStyleSet.ambient,
+    ...restOfChildStyleProps,
+  });
+
+  return { inner: { style: innerStyle }, outer: { style: outerStyle } };
 }
 
+const removeUndefinedProperties = (object: any) => {
+  return Object.fromEntries(Object.entries(object).filter(([_, v]) => v != null));
+};
+
 Shadow.displayName = shadowName;
 
 export default Shadow;

package/src/Shadow.types.ts

@@ -1,6 +1,7 @@
-import type { ShadowToken } from '@fluentui-react-native/theme-types';
 import type { ViewProps } from 'react-native';
 
+import type { ShadowToken } from '@fluentui-react-native/theme-types';
+
 export const shadowName = 'Shadow';
 
 export interface ShadowProps extends ViewProps {

package/src/__tests__/Shadow.test.tsx

@@ -1,10 +1,12 @@
 import * as React from 'react';
 import { Text, View } from 'react-native';
-import { Shadow } from '../Shadow';
+
 import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework';
-import * as renderer from 'react-test-renderer';
-import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
 import { Pressable } from '@fluentui-react-native/pressable';
+import { checkRenderConsistency, checkReRender } from '@fluentui-react-native/test-tools';
+import * as renderer from 'react-test-renderer';
+
+import { Shadow } from '../Shadow';
 
 const backgroundColor = { backgroundColor: 'red' };
 interface ShadowTestProps {
@@ -23,12 +25,17 @@ const TestShadow: React.FunctionComponent<ShadowTestProps> = (props: ShadowTestP
   );
 };
 
-const TestPressableWithShadow: React.FunctionComponent = () => {
+const TestPressableWithAndWithoutShadow: React.FunctionComponent = () => {
   const theme = useFluentTheme();
   return (
-    <Shadow shadowToken={theme.shadows['shadow16']}>
-      <Pressable style={backgroundColor} />
-    </Shadow>
+    <View>
+      <Shadow shadowToken={theme.shadows['shadow16']}>
+        <Pressable style={backgroundColor} />
+      </Shadow>
+      <View>
+        <Pressable style={backgroundColor} />
+      </View>
+    </View>
   );
 };
 
@@ -115,8 +122,8 @@ describe('Shadow component tests', () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it('Pressable that has a shadow', () => {
-    const tree = renderer.create(<TestPressableWithShadow />).toJSON();
+  it('Pressable that has a shadow vs. pressable without shadow', () => {
+    const tree = renderer.create(<TestPressableWithAndWithoutShadow />).toJSON();
     expect(tree).toMatchSnapshot();
   });