@fluentui-react-native/tester 0.75.1 → 0.76.0

package/src/FluentTester/TestComponents/Notification/NotificationTest.tsx

@@ -28,8 +28,7 @@ const PrimaryTestWithTitleAndIcon: React.FunctionComponent = () => {
     <Notification
       variant={'primary'}
       icon={iconProps}
-      title="Kat's iPhone X"
-      action="X"
+      title="Kat's iPhoneX"
       onPress={() => {
         console.log('Notification tapped');
       }}
@@ -71,7 +70,6 @@ const WarningTest: React.FunctionComponent = () => {
   return (
     <Notification
       variant={'warning'}
-      action="X"
       onPress={() => {
         console.log('Notification tapped');
       }}

package/src/FluentTester/TestComponents/Shadow/ShadowButtonTestSection.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import { Platform, View } from 'react-native';
+import { FAB, Text } from '@fluentui/react-native';
+import { commonTestStyles, stackStyle } from '../Common/styles';
+
+const CustomFABNoShadow = FAB.customize({ shadowToken: undefined });
+const CustomFABShadow64 = FAB.customize({
+  shadowToken: { ambient: { x: 0, y: 0, blur: 8, color: '#00000033' }, key: { x: 0, y: 32, blur: 64, color: '#0000003d' } },
+});
+
+export const ShadowButtonTestSection: React.FunctionComponent = () => {
+  if (Platform.OS === 'ios') {
+    return (
+      <View style={stackStyle}>
+        <FAB style={commonTestStyles.vmargin}>FAB with default shadow</FAB>
+        <CustomFABShadow64 style={commonTestStyles.vmargin}>Custom FAB with shadow64</CustomFABShadow64>
+        <CustomFABNoShadow style={commonTestStyles.vmargin}>Custom FAB with no shadow</CustomFABNoShadow>
+      </View>
+    );
+  } else {
+    return (
+      <View style={stackStyle}>
+        <Text>Shadows only implemented for iOS at this time</Text>
+      </View>
+    );
+  }
+};

package/src/FluentTester/TestComponents/Shadow/ShadowDepthTestSection.tsx

@@ -2,8 +2,8 @@ import * as React from 'react';
 import { commonTestStyles } from '../Common/styles';
 import { ColorValue, View } from 'react-native';
 import { Text } from '@fluentui/react-native';
-import { Shadow, ShadowDepth, getShadowTokenStyleSet } from '@fluentui-react-native/experimental-shadow';
-import { Theme, useTheme } from '@fluentui-react-native/theme-types';
+import { Shadow, getShadowTokenStyleSet } from '@fluentui-react-native/experimental-shadow';
+import { ShadowToken, useTheme } from '@fluentui-react-native/theme-types';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 import { useFluentTheme } from '@fluentui-react-native/framework';
 
@@ -25,7 +25,8 @@ const getThemedStyles = themedStyleSheet(() => {
 });
 
 interface ShadowTestBoxProps {
-  depth: ShadowDepth;
+  shadowDepthText: string;
+  shadowToken: ShadowToken;
   backgroundColor: ColorValue;
 }
 
@@ -34,7 +35,7 @@ const ShadowTestBox: React.FunctionComponent<ShadowTestBoxProps> = (props: Shado
   const themedStyles = getThemedStyles(theme);
 
   return (
-    <Shadow depth={props.depth}>
+    <Shadow shadowToken={props.shadowToken}>
       <View
         style={[
           commonTestStyles.view,
@@ -44,8 +45,8 @@ const ShadowTestBox: React.FunctionComponent<ShadowTestBoxProps> = (props: Shado
           { backgroundColor: props.backgroundColor },
         ]}
       >
-        <Text variant="bodySemibold">{props.depth}</Text>
-        <Text>{getShadowDescription(props.depth, theme)}</Text>
+        <Text variant="bodySemibold">{props.shadowDepthText}</Text>
+        <Text>{getShadowDescription(props.shadowToken)}</Text>
       </View>
     </Shadow>
   );
@@ -56,24 +57,48 @@ export const ShadowDepthTestSection: React.FunctionComponent = () => {
 
   return (
     <View>
-      <ShadowTestBox depth="shadow2" backgroundColor={theme.colors.background} />
-      <ShadowTestBox depth="shadow4" backgroundColor={theme.colors.background} />
-      <ShadowTestBox depth="shadow8" backgroundColor={theme.colors.background} />
-      <ShadowTestBox depth="shadow16" backgroundColor={theme.colors.background} />
-      <ShadowTestBox depth="shadow28" backgroundColor={theme.colors.background} />
-      <ShadowTestBox depth="shadow64" backgroundColor={theme.colors.background} />
-      <ShadowTestBox depth="shadow2brand" backgroundColor={theme.colors.brandBackground} />
-      <ShadowTestBox depth="shadow4brand" backgroundColor={theme.colors.brandBackground} />
-      <ShadowTestBox depth="shadow8brand" backgroundColor={theme.colors.brandBackground} />
-      <ShadowTestBox depth="shadow16brand" backgroundColor={theme.colors.brandBackground} />
-      <ShadowTestBox depth="shadow28brand" backgroundColor={theme.colors.brandBackground} />
-      <ShadowTestBox depth="shadow64brand" backgroundColor={theme.colors.brandBackground} />
+      <ShadowTestBox shadowDepthText="Shadow 2" shadowToken={theme.shadows.shadow2} backgroundColor={theme.colors.background} />
+      <ShadowTestBox shadowDepthText="Shadow 4" shadowToken={theme.shadows.shadow4} backgroundColor={theme.colors.background} />
+      <ShadowTestBox shadowDepthText="Shadow 8" shadowToken={theme.shadows.shadow8} backgroundColor={theme.colors.background} />
+      <ShadowTestBox shadowDepthText="Shadow 16" shadowToken={theme.shadows.shadow16} backgroundColor={theme.colors.background} />
+      <ShadowTestBox shadowDepthText="Shadow 28" shadowToken={theme.shadows.shadow28} backgroundColor={theme.colors.background} />
+      <ShadowTestBox shadowDepthText="Shadow 64" shadowToken={theme.shadows.shadow64} backgroundColor={theme.colors.background} />
+      <ShadowTestBox
+        shadowDepthText="Brand Shadow 2"
+        shadowToken={theme.shadows.shadow2brand}
+        backgroundColor={theme.colors.brandBackground}
+      />
+      <ShadowTestBox
+        shadowDepthText="Brand Shadow 4"
+        shadowToken={theme.shadows.shadow4brand}
+        backgroundColor={theme.colors.brandBackground}
+      />
+      <ShadowTestBox
+        shadowDepthText="Brand Shadow 8"
+        shadowToken={theme.shadows.shadow8brand}
+        backgroundColor={theme.colors.brandBackground}
+      />
+      <ShadowTestBox
+        shadowDepthText="Brand Shadow 16"
+        shadowToken={theme.shadows.shadow16brand}
+        backgroundColor={theme.colors.brandBackground}
+      />
+      <ShadowTestBox
+        shadowDepthText="Brand Shadow 28"
+        shadowToken={theme.shadows.shadow28brand}
+        backgroundColor={theme.colors.brandBackground}
+      />
+      <ShadowTestBox
+        shadowDepthText="Brand Shadow 64"
+        shadowToken={theme.shadows.shadow64brand}
+        backgroundColor={theme.colors.brandBackground}
+      />
     </View>
   );
 };
 
-function getShadowDescription(depth: ShadowDepth, t: Theme): string {
-  const shadowStyle = getShadowTokenStyleSet(t, depth);
+function getShadowDescription(shadowToken: ShadowToken): string {
+  const shadowStyle = getShadowTokenStyleSet(shadowToken);
 
   return (
     '\nAmbient: ' +

package/src/FluentTester/TestComponents/Shadow/ShadowTest.tsx

@@ -1,12 +1,8 @@
 import * as React from 'react';
-import { Text } from '@fluentui/react-native';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { SHADOW_TESTPAGE } from './consts';
 import { ShadowDepthTestSection } from './ShadowDepthTestSection';
-
-const ShadowButtonTest: React.FunctionComponent = () => {
-  return <Text>TODO</Text>;
-};
+import { ShadowButtonTestSection } from './ShadowButtonTestSection';
 
 const shadowSections: TestSection[] = [
   {
@@ -17,7 +13,7 @@ const shadowSections: TestSection[] = [
   {
     name: 'Shadows on Button Examples',
     testID: SHADOW_TESTPAGE,
-    component: ShadowButtonTest,
+    component: ShadowButtonTestSection,
   },
 ];
 

package/src/FluentTester/TestComponents/TextExperimental/CustomizeUsage.tsx

@@ -50,7 +50,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
   const BlockText = () => {
     return (
       <>
-        <Text style={{ textTransform: 'uppercase' }} font="base" weight="medium">
+        <Text style={{ textTransform: 'uppercase' }} font="base" weight="medium" truncate>
           I am going to be truncated since I am a very very very very very very very very very very very very very very very very very very
           very very very very very very very very very very very very very very very very very very very very very very very very very very
           very very very very very very very very very very very very very very very very long block text.

package/src/FluentTester/TestComponents/TextExperimental/PressableUsage.tsx

@@ -18,6 +18,10 @@ export const PressableUsage: React.FunctionComponent = () => {
     Alert.alert('Alert', 'Success!');
   };
 
+  const _onPress3 = (): void => {
+    Alert.alert('Alert', 'onAccessibilityTap invoked!');
+  };
+
   const _onKeyDown2 = (ev: IKeyboardEvent) => {
     if (ev.nativeEvent.key === 'Enter' || ev.nativeEvent.key == ' ') Alert.alert('Alert', 'Success!');
   };
@@ -29,7 +33,14 @@ export const PressableUsage: React.FunctionComponent = () => {
       <Stack style={stackStyle} gap={5}>
         <Text variant={'bodyStandard'}>
           To learn more about microsoft, visit this{' '}
-          <Text variant={'bodyStandard'} color="blue" keyDownEvents={handledNativeKeyboardEvents} onPress={_onPress} onKeyDown={_onKeyDown}>
+          <Text
+            focusable
+            variant={'bodyStandard'}
+            color="blue"
+            keyDownEvents={handledNativeKeyboardEvents}
+            onPress={_onPress}
+            onKeyDown={_onKeyDown}
+          >
             webpage
           </Text>{' '}
           for more details.
@@ -42,6 +53,7 @@ export const PressableUsage: React.FunctionComponent = () => {
             keyDownEvents={handledNativeKeyboardEvents}
             onPress={_onPress2}
             onKeyDown={_onKeyDown2}
+            onAccessibilityTap={_onPress3}
           >
             here
           </Text>{' '}