@fluentui-react-native/tester 0.95.4 → 0.95.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.95.4",
+  "version": "0.95.6",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -40,26 +40,27 @@
     "@fluentui-react-native/apple-theme": ">=0.14.1 <1.0.0",
     "@fluentui-react-native/avatar": "^1.2.9",
     "@fluentui-react-native/badge": ">=0.1.32 <1.0.0",
-    "@fluentui-react-native/button": ">=0.24.24 <1.0.0",
+    "@fluentui-react-native/button": ">=0.24.25 <1.0.0",
     "@fluentui-react-native/default-theme": ">=0.15.1 <1.0.0",
     "@fluentui-react-native/dropdown": ">=0.4.0 <1.0.0",
     "@fluentui-react-native/experimental-activity-indicator": ">=0.6.3 <1.0.0",
-    "@fluentui-react-native/experimental-avatar": ">=0.16.4 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.16.24",
+    "@fluentui-react-native/experimental-avatar": ">=0.16.5 <1.0.0",
+    "@fluentui-react-native/experimental-button": "0.16.25",
     "@fluentui-react-native/experimental-checkbox": "0.12.16",
     "@fluentui-react-native/experimental-expander": "0.4.3",
-    "@fluentui-react-native/experimental-menu-button": ">=0.4.28 <1.0.0",
-    "@fluentui-react-native/experimental-native-date-picker": ">=0.7.0 <1.0.0",
+    "@fluentui-react-native/experimental-menu-button": ">=0.4.29 <1.0.0",
+    "@fluentui-react-native/experimental-native-date-picker": ">=0.7.1 <1.0.0",
     "@fluentui-react-native/experimental-radio-group": "^0.3.3",
-    "@fluentui-react-native/experimental-shadow": "0.2.18",
+    "@fluentui-react-native/experimental-shadow": "0.2.19",
     "@fluentui-react-native/experimental-shimmer": "0.7.3",
     "@fluentui-react-native/experimental-tabs": "0.5.14",
     "@fluentui-react-native/experimental-text": ">=0.11.5 <1.0.0",
     "@fluentui-react-native/framework": ">=0.8.3 <1.0.0",
     "@fluentui-react-native/icon": "0.13.8",
     "@fluentui-react-native/interactive-hooks": ">=0.18.5 <1.0.0",
-    "@fluentui-react-native/menu": "^1.0.34",
-    "@fluentui-react-native/notification": "0.17.7",
+    "@fluentui-react-native/menu": "^1.0.35",
+    "@fluentui-react-native/merge-props": ">=0.5.0 <1.0.0",
+    "@fluentui-react-native/notification": "0.17.8",
     "@fluentui-react-native/stack": ">=0.7.7 <1.0.0",
     "@fluentui-react-native/switch": "^0.6.7",
     "@fluentui-react-native/text": ">=0.14.4 <1.0.0",
@@ -68,7 +69,7 @@
     "@fluentui-react-native/themed-stylesheet": "^1.4.0",
     "@fluentui-react-native/theming-utils": ">=0.15.1 <1.0.0",
     "@fluentui-react-native/win32-theme": ">=0.21.1 <1.0.0",
-    "@fluentui/react-native": ">=0.32.18 <1.0.0",
+    "@fluentui/react-native": ">=0.32.19 <1.0.0",
     "@react-native-community/slider": "^4.2.0",
     "@react-native-menu/menu": "^0.1.2",
     "@react-native-picker/picker": "^2.2.1",

package/src/TestComponents/Shadow/ShadowDepthTestSection.tsx

@@ -1,26 +1,27 @@
 import * as React from 'react';
-import { commonTestStyles } from '../Common/styles';
 import { View } from 'react-native';
 import { Text } from '@fluentui/react-native';
 import { Shadow, getShadowTokenStyleSet } from '@fluentui-react-native/experimental-shadow';
-import { ShadowToken, useTheme } from '@fluentui-react-native/theme-types';
+import { ShadowToken, Theme, useTheme } from '@fluentui-react-native/theme-types';
+import { mergeStyles, useFluentTheme } from '@fluentui-react-native/framework';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
-import { useFluentTheme } from '@fluentui-react-native/framework';
 
-const getThemedStyles = themedStyleSheet(() => {
+const getThemedStyles = themedStyleSheet((t: Theme) => {
   return {
-    effectBox: {
+    shadowTestBox: {
       maxWidth: 732,
       minHeight: 64,
       borderRadius: 8,
-    },
-    padding: {
       padding: 20,
-    },
-    vmargin: {
       marginVertical: 16,
       marginHorizontal: 32,
     },
+    defaultBackground: {
+      backgroundColor: t.colors.background,
+    },
+    brandedBackground: {
+      backgroundColor: t.colors.brandedBackground,
+    },
   };
 });
 
@@ -33,20 +34,13 @@ interface ShadowTestBoxProps {
 const ShadowTestBox: React.FunctionComponent<ShadowTestBoxProps> = (props: ShadowTestBoxProps) => {
   const theme = useTheme();
   const themedStyles = getThemedStyles(theme);
-  const backgroundColor = props.isBrand ? theme.colors.brandedBackground : theme.colors.background;
+
+  const backgroundColor = props.isBrand ? themedStyles.brandedBackground : themedStyles.defaultBackground;
   const textColor = props.isBrand ? theme.colors.primaryButtonText : theme.colors.bodyText;
 
   return (
     <Shadow shadowToken={props.shadowToken}>
-      <View
-        style={[
-          commonTestStyles.view,
-          themedStyles.effectBox,
-          themedStyles.vmargin,
-          themedStyles.padding,
-          { backgroundColor: backgroundColor },
-        ]}
-      >
+      <View style={mergeStyles(themedStyles.shadowTestBox, backgroundColor)}>
         <Text variant="bodySemibold" color={textColor}>
           {props.shadowDepthText}
         </Text>

package/src/TestComponents/Shadow/ShadowTest.tsx

@@ -3,6 +3,7 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 import { SHADOW_TESTPAGE } from './consts';
 import { ShadowDepthTestSection } from './ShadowDepthTestSection';
 import { ShadowButtonTestSection } from './ShadowButtonTestSection';
+import { ShadowWithDifferentPropsTestSection } from './ShadowWithDifferentPropsTestSection';
 
 const shadowSections: TestSection[] = [
   {
@@ -15,6 +16,11 @@ const shadowSections: TestSection[] = [
     testID: SHADOW_TESTPAGE,
     component: ShadowButtonTestSection,
   },
+  {
+    name: 'Shadows with Different Props Test',
+    testID: SHADOW_TESTPAGE,
+    component: ShadowWithDifferentPropsTestSection,
+  },
 ];
 
 export const ShadowTest: React.FunctionComponent = () => {

package/src/TestComponents/Shadow/ShadowWithDifferentPropsTestSection.tsx

@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { Text } from '@fluentui/react-native';
+import { Shadow } from '@fluentui-react-native/experimental-shadow';
+import { Theme, useFluentTheme } from '@fluentui-react-native/framework';
+import { View } from 'react-native';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+import { mergeStyles } from '@fluentui-react-native/merge-props';
+
+const getThemedStyles = themedStyleSheet((t: Theme) => {
+  const defaultShadowTestBoxPropsWithoutSpacing = {
+    maxWidth: 732,
+    minHeight: 64,
+    backgroundColor: t.colors.background,
+  };
+  const marginTestProps = {
+    marginVertical: 16,
+    marginHorizontal: 32,
+  };
+  const paddingTestProps = {
+    padding: 20,
+  };
+
+  return {
+    headerTextPadding: {
+      padding: 16,
+    },
+    defaultShadowTestBoxPropsWithoutSpacing,
+    defaultShadowTestBoxProps: {
+      ...defaultShadowTestBoxPropsWithoutSpacing,
+      ...marginTestProps,
+      ...paddingTestProps,
+    },
+    marginTestProps,
+    paddingTestProps,
+    borderRadiusTestProps: {
+      borderRadius: 8,
+    },
+    borderWidthTestProps: {
+      borderWidth: 2,
+      borderColor: 'black',
+    },
+  };
+});
+
+export const ShadowWithDifferentPropsTestSection: React.FunctionComponent = () => {
+  const theme = useFluentTheme();
+  const themedStyles = getThemedStyles(theme);
+
+  return (
+    <View>
+      <Text style={themedStyles.headerTextPadding}>
+        The following tests have a Shadow16 set on a child view that has some specific props.
+      </Text>
+      <View>
+        <Shadow shadowToken={theme.shadows.shadow16}>
+          <View style={themedStyles.defaultShadowTestBoxProps}>
+            <Text variant="bodySemibold">padding: 20, marginVertical: 16, marginHorizontal: 32</Text>
+          </View>
+        </Shadow>
+        <Shadow shadowToken={theme.shadows.shadow16}>
+          <View style={mergeStyles(themedStyles.defaultShadowTestBoxPropsWithoutSpacing, themedStyles.paddingTestProps)}>
+            <Text variant="bodySemibold">padding only</Text>
+          </View>
+        </Shadow>
+        <Shadow shadowToken={theme.shadows.shadow16}>
+          <View style={mergeStyles(themedStyles.defaultShadowTestBoxPropsWithoutSpacing, themedStyles.marginTestProps)}>
+            <Text variant="bodySemibold">margins only</Text>
+          </View>
+        </Shadow>
+        <Shadow shadowToken={theme.shadows.shadow16}>
+          <View style={mergeStyles(themedStyles.defaultShadowTestBoxProps, themedStyles.borderRadiusTestProps)}>
+            <Text variant="bodySemibold">borderRadius: 8</Text>
+          </View>
+        </Shadow>
+        <Shadow shadowToken={theme.shadows.shadow16}>
+          <View
+            style={mergeStyles(
+              themedStyles.defaultShadowTestBoxProps,
+              themedStyles.borderRadiusTestProps,
+              themedStyles.borderWidthTestProps,
+            )}
+          >
+            <Text variant="bodySemibold">borderWidth: 2</Text>
+          </View>
+        </Shadow>
+      </View>
+    </View>
+  );
+};