@fluentui-react-native/tester 0.114.2 → 0.116.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.114.2",
+  "version": "0.116.0",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -33,43 +33,43 @@
     "directory": "apps/fluent-tester"
   },
   "dependencies": {
-    "@fluentui-react-native/android-theme": ">=0.15.0 <1.0.0",
-    "@fluentui-react-native/apple-theme": ">=0.17.1 <1.0.0",
-    "@fluentui-react-native/avatar": "^1.5.0",
-    "@fluentui-react-native/badge": ">=0.4.1 <1.0.0",
-    "@fluentui-react-native/button": ">=0.32.6 <1.0.0",
-    "@fluentui-react-native/default-theme": ">=0.16.15 <1.0.0",
-    "@fluentui-react-native/dropdown": ">=0.7.1 <1.0.0",
-    "@fluentui-react-native/experimental-activity-indicator": ">=0.7.1 <1.0.0",
-    "@fluentui-react-native/experimental-avatar": ">=0.16.28 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.16.64",
-    "@fluentui-react-native/experimental-checkbox": "0.13.10",
-    "@fluentui-react-native/experimental-expander": "0.5.1",
-    "@fluentui-react-native/experimental-icon": ">=0.1.2 <1.0.0",
-    "@fluentui-react-native/experimental-link": "^0.2.6",
-    "@fluentui-react-native/experimental-menu-button": ">=0.6.1 <1.0.0",
+    "@fluentui-react-native/android-theme": ">=0.15.1 <1.0.0",
+    "@fluentui-react-native/apple-theme": ">=0.17.2 <1.0.0",
+    "@fluentui-react-native/avatar": "^1.5.1",
+    "@fluentui-react-native/badge": ">=0.4.2 <1.0.0",
+    "@fluentui-react-native/button": ">=0.32.7 <1.0.0",
+    "@fluentui-react-native/default-theme": ">=0.16.16 <1.0.0",
+    "@fluentui-react-native/dropdown": ">=0.7.2 <1.0.0",
+    "@fluentui-react-native/experimental-activity-indicator": ">=0.7.2 <1.0.0",
+    "@fluentui-react-native/experimental-avatar": ">=0.16.29 <1.0.0",
+    "@fluentui-react-native/experimental-button": "0.16.65",
+    "@fluentui-react-native/experimental-checkbox": "0.13.11",
+    "@fluentui-react-native/experimental-expander": "0.5.2",
+    "@fluentui-react-native/experimental-icon": ">=0.1.3 <1.0.0",
+    "@fluentui-react-native/experimental-link": "^0.3.0",
+    "@fluentui-react-native/experimental-menu-button": ">=0.6.2 <1.0.0",
     "@fluentui-react-native/experimental-native-date-picker": ">=0.7.3 <1.0.0",
-    "@fluentui-react-native/experimental-radio-group": "^0.8.5",
-    "@fluentui-react-native/experimental-shadow": "0.2.48",
-    "@fluentui-react-native/experimental-shimmer": "0.8.1",
-    "@fluentui-react-native/experimental-tabs": "0.8.9",
-    "@fluentui-react-native/experimental-text": ">=0.11.28 <1.0.0",
-    "@fluentui-react-native/framework": ">=0.8.24 <1.0.0",
-    "@fluentui-react-native/icon": "0.16.1",
-    "@fluentui-react-native/interactive-hooks": ">=0.21.5 <1.0.0",
-    "@fluentui-react-native/menu": "^1.1.1",
+    "@fluentui-react-native/experimental-radio-group": "^0.8.6",
+    "@fluentui-react-native/experimental-shadow": "0.2.49",
+    "@fluentui-react-native/experimental-shimmer": "0.8.2",
+    "@fluentui-react-native/experimental-tabs": "0.8.10",
+    "@fluentui-react-native/experimental-text": ">=0.11.29 <1.0.0",
+    "@fluentui-react-native/framework": ">=0.8.25 <1.0.0",
+    "@fluentui-react-native/icon": "0.16.2",
+    "@fluentui-react-native/interactive-hooks": ">=0.22.0 <1.0.0",
+    "@fluentui-react-native/menu": "^1.1.2",
     "@fluentui-react-native/merge-props": ">=0.5.1 <1.0.0",
-    "@fluentui-react-native/notification": "0.20.1",
-    "@fluentui-react-native/stack": ">=0.7.30 <1.0.0",
-    "@fluentui-react-native/switch": "^0.7.9",
-    "@fluentui-react-native/text": ">=0.18.1 <1.0.0",
-    "@fluentui-react-native/theme": ">=0.7.10 <1.0.0",
-    "@fluentui-react-native/theme-tokens": "^0.22.0",
-    "@fluentui-react-native/theme-types": ">=0.25.0 <1.0.0",
+    "@fluentui-react-native/notification": "0.20.2",
+    "@fluentui-react-native/stack": ">=0.7.31 <1.0.0",
+    "@fluentui-react-native/switch": "^0.8.0",
+    "@fluentui-react-native/text": ">=0.18.2 <1.0.0",
+    "@fluentui-react-native/theme": ">=0.7.11 <1.0.0",
+    "@fluentui-react-native/theme-tokens": "^0.22.1",
+    "@fluentui-react-native/theme-types": ">=0.26.0 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.4.1",
-    "@fluentui-react-native/theming-utils": ">=0.19.1 <1.0.0",
-    "@fluentui-react-native/win32-theme": ">=0.24.2 <1.0.0",
-    "@fluentui/react-native": ">=0.33.10 <1.0.0",
+    "@fluentui-react-native/theming-utils": ">=0.20.0 <1.0.0",
+    "@fluentui-react-native/win32-theme": ">=0.24.3 <1.0.0",
+    "@fluentui/react-native": ">=0.33.11 <1.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.0",
@@ -97,7 +97,7 @@
     "react-native-svg-transformer": "^1.0.0",
     "react-native-test-app": "^2.0.2",
     "react-test-renderer": "17.0.2",
-    "@fluentui-react-native/focus-zone": "^0.11.11"
+    "@fluentui-react-native/focus-zone": "^0.11.12"
   },
   "peerDependencies": {
     "@office-iss/react-native-win32": "^0.68.0"

package/src/TestComponents/Common/styles.ts

@@ -60,6 +60,10 @@ export const commonTestStyles = StyleSheet.create({
     minHeight: 200,
     justifyContent: 'space-between',
   },
+  androidContainer: {
+    marginTop: 20,
+    justifyContent: 'space-between',
+  },
 });
 
 export const fluentTesterStyles = StyleSheet.create({

package/src/TestComponents/LinkExperimental/LinkTest.tsx

@@ -6,6 +6,7 @@ import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
 import { EXPERIMENTAL_LINK_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { LinkE2ETest } from './E2ELinkTest';
+import { Platform } from 'react-native';
 
 const DefaultLinks: React.FunctionComponent = () => {
   const doPress = React.useCallback(() => Alert.alert('Alert.', 'You have been alerted.'), []);
@@ -180,10 +181,16 @@ const linkSections: TestSection[] = [
     name: 'Inline Links',
     component: InlineLinks,
   },
-  {
-    name: 'Subtle Links',
-    component: SubtleLinks,
-  },
+  ...Platform.select({
+    // As per design discussion , There is no use case for subtle link on Android , No tokens available for same.
+    android: [null],
+    default: [
+      {
+        name: 'Subtle Links',
+        component: SubtleLinks,
+      },
+    ],
+  }),
   {
     name: 'Custom Link',
     component: CustomLinks,
@@ -200,7 +207,7 @@ export const ExperimentalLinkTest: React.FunctionComponent = () => {
     uwpStatus: 'Experimental',
     iosStatus: 'Experimental',
     macosStatus: 'Beta',
-    androidStatus: 'Backlog',
+    androidStatus: 'Experimental',
   };
 
   const description =

package/src/TestComponents/Switch/CustomizedSwitch.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { View, TextInput, Text, StyleSheet } from 'react-native';
+import { View, TextInput, StyleSheet } from 'react-native';
+import { Text } from '@fluentui-react-native/experimental-text';
 import { Switch, SwitchTokens } from '@fluentui-react-native/switch';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 

package/src/TestComponents/Switch/E2ESwitchTest.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Stack } from '@fluentui-react-native/stack';
 import { Switch } from '@fluentui-react-native/switch';
-import { Text } from 'react-native';
-import { stackStyle } from '../Common/styles';
+import { TextV1 } from '@fluentui-react-native/text';
+import { stackStyle, commonTestStyles } from '../Common/styles';
 import {
   SWITCH_TEST_COMPONENT,
   SWITCH_ACCESSIBILITY_LABEL,
@@ -10,10 +10,16 @@ import {
   SWITCH_TEST_COMPONENT_LABEL,
   SWITCH_ON_PRESS,
 } from './consts';
+import { Platform } from 'react-native';
 
 export const E2ESwitchTest: React.FunctionComponent = () => {
   const [switchPressed, setSwitchSwitchPressed] = React.useState(false);
 
+  const memoizedStyles = React.useMemo(
+    () => (Platform.OS === 'android' ? { ...commonTestStyles.androidContainer, height: 100, marginBottom: 50 } : stackStyle),
+    [],
+  );
+
   const onToggle = React.useCallback(
     (_e, checked) => {
       setSwitchSwitchPressed(checked);
@@ -22,9 +28,9 @@ export const E2ESwitchTest: React.FunctionComponent = () => {
   );
 
   return (
-    <Stack style={stackStyle}>
+    <Stack style={memoizedStyles}>
       <Switch testID={SWITCH_TEST_COMPONENT} label={'Switch Test'} onChange={onToggle} accessibilityLabel={SWITCH_ACCESSIBILITY_LABEL} />
-      {switchPressed ? <Text testID={SWITCH_ON_PRESS}>Switch Toggled On</Text> : null}
+      {switchPressed ? <TextV1 testID={SWITCH_ON_PRESS}>Switch Toggled On</TextV1> : null}
       <Switch label={SWITCH_TEST_COMPONENT_LABEL} testID={SWITCH_NO_A11Y_LABEL_COMPONENT} />
     </Stack>
   );

package/src/TestComponents/Switch/Switch.tsx

@@ -8,6 +8,7 @@ import { commonTestStyles } from '../Common/styles';
 import { ButtonV1 as Button } from '@fluentui-react-native/button';
 import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 import { CustomizedSwitch } from './CustomizedSwitch';
+import { Platform } from 'react-native';
 
 const styles = StyleSheet.create({
   square: {
@@ -18,8 +19,12 @@ const styles = StyleSheet.create({
 });
 
 const StandardUsage: React.FunctionComponent = () => {
+  const memoizedStyles = React.useMemo(
+    () => (Platform.OS === 'android' ? { ...commonTestStyles.androidContainer, height: 180 } : commonTestStyles.settingsPicker),
+    [],
+  );
   return (
-    <View style={commonTestStyles.settingsPicker}>
+    <View style={memoizedStyles}>
       <Switch defaultChecked={true} label={'Default Checked True'} />
       <Switch defaultChecked={false} label={'Default Checked False'} />
       <Switch defaultChecked={true} label={'Disabled Default Checked True'} disabled />
@@ -35,8 +40,13 @@ const OnChangeUsage: React.FunctionComponent = () => {
     setDisplaySquare(checked);
   };
 
+  const memoizedStyles = React.useMemo(
+    () => (Platform.OS === 'android' ? { ...commonTestStyles.androidContainer, height: 150 } : commonTestStyles.settingsPicker),
+    [],
+  );
+
   return (
-    <View style={commonTestStyles.settingsPicker}>
+    <View style={memoizedStyles}>
       <Switch label={'Toggle Square'} defaultChecked={true} onChange={defaultToggleSquare} />
       {displaySquare && <View style={styles.square} />}
     </View>
@@ -54,8 +64,13 @@ const ControlSwitchValues: React.FunctionComponent = () => {
     setToggleSwitch(false);
   };
 
+  const memoizedStyles = React.useMemo(
+    () => (Platform.OS === 'android' ? { ...commonTestStyles.androidContainer, height: 150 } : commonTestStyles.settingsPicker),
+    [],
+  );
+
   return (
-    <View style={commonTestStyles.settingsPicker}>
+    <View style={memoizedStyles}>
       <Button onClick={toggleSwitchTrue}>Toggle Switch True</Button>
       <Button onClick={toggleSwitchFalse}>Toggle Switch False</Button>
       <Switch label={'Switch Value Being Controlled'} checked={toggleSwitch} />
@@ -68,7 +83,7 @@ const LabelPosition: React.FunctionComponent = () => {
     <View style={commonTestStyles.settingsPicker}>
       <Switch defaultChecked={true} labelPosition={'before'} label={'before'} />
       <Switch defaultChecked={true} labelPosition={'after'} label={'after'} />
-      <Switch defaultChecked={true} labelPosition={'above'} label={'above'} />
+      {Platform.OS !== 'android' && <Switch defaultChecked={true} labelPosition={'above'} label={'above'} />}
     </View>
   );
 };
@@ -96,14 +111,20 @@ const toggleSections: TestSection[] = [
     name: 'Control Switch Values',
     component: () => <ControlSwitchValues />,
   },
-  {
-    name: 'Label Position',
-    component: () => <LabelPosition />,
-  },
-  {
-    name: 'On/Off Text',
-    component: () => <OnOffText />,
-  },
+  Platform.select({
+    android: null,
+    default: {
+      name: 'Label Position',
+      component: () => <LabelPosition />,
+    },
+  }),
+  Platform.select({
+    android: null,
+    default: {
+      name: 'On/Off Text',
+      component: () => <OnOffText />,
+    },
+  }),
   {
     name: 'Customized Tokens',
     component: () => <CustomizedSwitch />,
@@ -120,7 +141,7 @@ export const SwitchTest: React.FunctionComponent = () => {
     uwpStatus: 'Backlog',
     iosStatus: 'Backlog',
     macosStatus: 'Backlog',
-    androidStatus: 'Backlog',
+    androidStatus: 'Experimental',
   };
 
   const description = 'Switch is a control that has two mutually exclusive states.';

package/src/testPages.ts

@@ -154,7 +154,7 @@ export const tests: TestDescription[] = [
     name: 'Link V1',
     component: ExperimentalLinkTest,
     testPage: HOMEPAGE_EXPERIMENTAL_LINK_BUTTON,
-    platforms: ['win32'],
+    platforms: ['win32', 'android'],
   },
   {
     name: 'Menu',
@@ -250,7 +250,7 @@ export const tests: TestDescription[] = [
     name: 'Switch',
     component: SwitchTest,
     testPage: HOMEPAGE_SWITCH_BUTTON,
-    platforms: ['win32'],
+    platforms: ['win32', 'android'],
   },
   {
     name: 'Tabs Legacy',