@fluentui-react-native/tester 0.127.2 → 0.128.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.127.2",
+  "version": "0.128.1",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -33,42 +33,42 @@
     "directory": "apps/fluent-tester"
   },
   "dependencies": {
-    "@fluentui-react-native/android-theme": ">=0.15.9 <1.0.0",
-    "@fluentui-react-native/apple-theme": ">=0.18.2 <1.0.0",
-    "@fluentui-react-native/avatar": "^1.5.19",
-    "@fluentui-react-native/badge": ">=0.4.20 <1.0.0",
-    "@fluentui-react-native/button": ">=0.32.24 <1.0.0",
-    "@fluentui-react-native/default-theme": ">=0.16.25 <1.0.0",
-    "@fluentui-react-native/dropdown": ">=0.7.19 <1.0.0",
-    "@fluentui-react-native/experimental-activity-indicator": ">=0.7.12 <1.0.0",
-    "@fluentui-react-native/experimental-avatar": ">=0.17.9 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.16.82",
-    "@fluentui-react-native/experimental-checkbox": "0.13.31",
-    "@fluentui-react-native/experimental-expander": "0.5.12",
-    "@fluentui-react-native/experimental-menu-button": ">=0.6.21 <1.0.0",
+    "@fluentui-react-native/android-theme": ">=0.16.0 <1.0.0",
+    "@fluentui-react-native/apple-theme": ">=0.18.3 <1.0.0",
+    "@fluentui-react-native/avatar": "^1.6.0",
+    "@fluentui-react-native/badge": ">=0.4.21 <1.0.0",
+    "@fluentui-react-native/button": ">=0.32.25 <1.0.0",
+    "@fluentui-react-native/default-theme": ">=0.16.26 <1.0.0",
+    "@fluentui-react-native/dropdown": ">=0.7.20 <1.0.0",
+    "@fluentui-react-native/experimental-activity-indicator": ">=0.7.13 <1.0.0",
+    "@fluentui-react-native/experimental-avatar": ">=0.17.10 <1.0.0",
+    "@fluentui-react-native/experimental-button": "0.16.83",
+    "@fluentui-react-native/experimental-checkbox": "0.13.32",
+    "@fluentui-react-native/experimental-expander": "0.5.13",
+    "@fluentui-react-native/experimental-menu-button": ">=0.6.22 <1.0.0",
     "@fluentui-react-native/experimental-native-date-picker": ">=0.7.4 <1.0.0",
-    "@fluentui-react-native/experimental-radio-group": "^0.9.12",
-    "@fluentui-react-native/experimental-shadow": "0.2.61",
-    "@fluentui-react-native/experimental-shimmer": "0.8.12",
-    "@fluentui-react-native/experimental-tabs": "0.8.26",
-    "@fluentui-react-native/experimental-text": ">=0.11.45 <1.0.0",
-    "@fluentui-react-native/framework": ">=0.8.35 <1.0.0",
-    "@fluentui-react-native/icon": "0.17.6",
-    "@fluentui-react-native/interactive-hooks": ">=0.22.12 <1.0.0",
-    "@fluentui-react-native/menu": "^1.2.21",
+    "@fluentui-react-native/experimental-radio-group": "^0.9.13",
+    "@fluentui-react-native/experimental-shadow": "0.2.62",
+    "@fluentui-react-native/experimental-shimmer": "0.8.13",
+    "@fluentui-react-native/experimental-tabs": "0.8.27",
+    "@fluentui-react-native/experimental-text": ">=0.11.46 <1.0.0",
+    "@fluentui-react-native/framework": ">=0.8.36 <1.0.0",
+    "@fluentui-react-native/icon": "0.17.7",
+    "@fluentui-react-native/interactive-hooks": ">=0.22.13 <1.0.0",
+    "@fluentui-react-native/menu": "^1.2.23",
     "@fluentui-react-native/merge-props": ">=0.5.1 <1.0.0",
-    "@fluentui-react-native/separator": "^0.14.9",
-    "@fluentui-react-native/notification": "0.21.20",
-    "@fluentui-react-native/stack": ">=0.7.46 <1.0.0",
-    "@fluentui-react-native/switch": "^0.8.18",
-    "@fluentui-react-native/text": ">=0.19.14 <1.0.0",
-    "@fluentui-react-native/theme": ">=0.7.17 <1.0.0",
-    "@fluentui-react-native/theme-tokens": "^0.23.2",
-    "@fluentui-react-native/theme-types": ">=0.29.1 <1.0.0",
+    "@fluentui-react-native/separator": "^0.14.10",
+    "@fluentui-react-native/notification": "0.21.21",
+    "@fluentui-react-native/stack": ">=0.7.47 <1.0.0",
+    "@fluentui-react-native/switch": "^0.8.19",
+    "@fluentui-react-native/text": ">=0.19.15 <1.0.0",
+    "@fluentui-react-native/theme": ">=0.7.18 <1.0.0",
+    "@fluentui-react-native/theme-tokens": "^0.24.0",
+    "@fluentui-react-native/theme-types": ">=0.30.0 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.4.1",
-    "@fluentui-react-native/theming-utils": ">=0.22.2 <1.0.0",
-    "@fluentui-react-native/win32-theme": ">=0.24.12 <1.0.0",
-    "@fluentui/react-native": ">=0.35.11 <1.0.0",
+    "@fluentui-react-native/theming-utils": ">=0.23.0 <1.0.0",
+    "@fluentui-react-native/win32-theme": ">=0.24.13 <1.0.0",
+    "@fluentui/react-native": ">=0.35.12 <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.24"
+    "@fluentui-react-native/focus-zone": "^0.11.25"
   },
   "peerDependencies": {
     "@office-iss/react-native-win32": "^0.68.0"

package/src/TestComponents/Avatar/BasicAvatar.android.tsx

@@ -3,109 +3,145 @@ import { Avatar } from '@fluentui-react-native/avatar';
 import { View } from 'react-native';
 import { steveBallmerPhotoUrl } from './../PersonaCoin/styles';
 import { mobileStyles } from '../Common/styles';
+import { Switch } from '@fluentui-react-native/switch';
+import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
 
 export const StandardUsage: FunctionComponent = () => {
-  return (
-    <View style={{ paddingBottom: 40 }}>
-      <View style={mobileStyles.testVariants}>
-        {/* Variation - Standard */}
+  const [activityRing, setActivityRing] = React.useState(true);
 
-        {/* With badge. */}
-        <Avatar badge={{ status: 'available' }} avatarColor={'brand'} size={40} />
+  const toggleActivityState = (_e: InteractionEvent, isActive: boolean) => {
+    setActivityRing(isActive);
+  };
 
-        {/* Variation - No Ring and badge. */}
-        <Avatar size={56} avatarColor={'brand'} />
+  return (
+    <View style={mobileStyles.pageStyle}>
+      <Switch label={'Show Activity Ring'} defaultChecked={true} onChange={toggleActivityState} />
 
-        {/* Variation - With Ring.*/}
-        <Avatar active="active" activeAppearance="ring" size={56} avatarColor={'brand'} />
+      <View style={mobileStyles.testVariants}>
+        {/* Variation  - Initials. */}
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={16} name="Rafi" avatarColor={'colorful'} />
+        <Avatar
+          active={activityRing ? 'active' : 'inactive'}
+          activeAppearance="ring"
+          size={20}
+          name="Richard Faynman"
+          avatarColor={'colorful'}
+        />
+        <Avatar
+          active={activityRing ? 'active' : 'inactive'}
+          activeAppearance="ring"
+          size={24}
+          name="Gita Khawas"
+          avatarColor={'colorful'}
+        />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={32} name="Mary Kom" avatarColor={'colorful'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={40} name="Khan Sir" avatarColor={'colorful'} />
+        <Avatar
+          active={activityRing ? 'active' : 'inactive'}
+          activeAppearance="ring"
+          size={56}
+          name="Harry Potter"
+          avatarColor={'colorful'}
+        />
+        <Avatar
+          active={activityRing ? 'active' : 'inactive'}
+          activeAppearance="ring"
+          size={72}
+          name="Ellie armstrong"
+          avatarColor={'colorful'}
+        />
       </View>
 
       <View style={mobileStyles.testVariants}>
-        {/* Variation - Standard Inverted */}
-
-        {/* With badge only.*/}
-        <Avatar size={56} badge={{ status: 'available' }} avatarColor={'brandInverted'} />
-
-        {/* No ring and badge.*/}
-        <Avatar size={56} avatarColor={'brandInverted'} />
-
-        {/* With ring.*/}
-        <Avatar active="active" activeAppearance="ring" size={56} avatarColor={'brandInverted'} />
+        {/* Variation - Image */}
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={16} imageUrl={steveBallmerPhotoUrl} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={20} imageUrl={steveBallmerPhotoUrl} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={24} imageUrl={steveBallmerPhotoUrl} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={32} imageUrl={steveBallmerPhotoUrl} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={40} imageUrl={steveBallmerPhotoUrl} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={56} imageUrl={steveBallmerPhotoUrl} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={72} imageUrl={steveBallmerPhotoUrl} />
       </View>
 
       <View style={mobileStyles.testVariants}>
-        {/*Variation - Anonymous*/}
+        {/* Variation - Standard */}
 
-        {/* With Badge.*/}
-        <Avatar size={56} badge={{ status: 'available' }} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={16} avatarColor={'brand'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={20} avatarColor={'brand'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={24} avatarColor={'brand'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={32} avatarColor={'brand'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={40} avatarColor={'brand'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={56} avatarColor={'brand'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={72} avatarColor={'brand'} />
+      </View>
 
-        {/* No ring and badge.*/}
-        <Avatar accessibilityLabel="Fall-back Icon" accessibilityHint="A picture representing a user" size={56} />
+      <View style={mobileStyles.testVariants}>
+        {/* Variation - Standard Inverted */}
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={16} avatarColor={'brandInverted'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={20} avatarColor={'brandInverted'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={24} avatarColor={'brandInverted'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={32} avatarColor={'brandInverted'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={40} avatarColor={'brandInverted'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={56} avatarColor={'brandInverted'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={72} avatarColor={'brandInverted'} />
+      </View>
 
-        {/* With ring. */}
+      <View style={mobileStyles.testVariants}>
+        {/* Variation - Anonymous */}
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={16} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={20} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={24} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={32} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={40} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={56} />
         <Avatar
           accessibilityLabel="Fall-back Icon"
           accessibilityHint="A picture representing a user"
-          size={56}
+          size={72}
           activeAppearance="ring"
-          active="active"
+          active={activityRing ? 'active' : 'inactive'}
         />
       </View>
 
       <View style={mobileStyles.testVariants}>
-        {/* Variation - Anonymous accent.*/}
-
-        {/* With badge.*/}
-        <Avatar size={56} badge={{ status: 'available' }} avatarColor={'accent'} />
-
-        {/* No ring and badge.*/}
-        <Avatar accessibilityLabel="Fall-back Icon" accessibilityHint="A picture representing a user" size={56} avatarColor={'accent'} />
-
-        {/* With ring. */}
+        {/* Variation - Anonymous accent */}
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={16} avatarColor={'accent'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={20} avatarColor={'accent'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={24} avatarColor={'accent'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={32} avatarColor={'accent'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={40} avatarColor={'accent'} />
+        <Avatar active={activityRing ? 'active' : 'inactive'} activeAppearance="ring" size={56} avatarColor={'accent'} />
         <Avatar
           accessibilityLabel="Fall-back Icon"
           accessibilityHint="A picture representing a user"
-          size={56}
+          size={72}
           activeAppearance="ring"
-          active="active"
+          active={activityRing ? 'active' : 'inactive'}
           avatarColor={'accent'}
         />
       </View>
 
       <View style={mobileStyles.testVariants}>
-        {/* Variation - Initials.*/}
-
-        {/* With badge.*/}
-        <Avatar size={56} badge={{ status: 'outOfOffice' }} name="* Richard Faynman *" />
-
-        {/* No ring and badge.*/}
-        <Avatar size={56} name="* Annie Markus *" avatarColor={'colorful'} />
-
-        {/* With ring. */}
-        <Avatar active="active" activeAppearance="ring" size={56} name="* Keshav Madhav *" avatarColor={'colorful'} />
-      </View>
-
-      <View style={mobileStyles.testVariants}>
-        {/* Variation - Image. */}
-
-        {/* With badge.*/}
-        <Avatar size={56} badge={{ status: 'outOfOffice' }} name="* Richard Faynman *" imageUrl={steveBallmerPhotoUrl} />
-
-        {/* No ring and badge.*/}
-        <Avatar size={56} imageUrl={steveBallmerPhotoUrl} avatarColor={'colorful'} />
+        {/* Variation - Overflow .*/}
 
-        {/* With ring.*/}
-        <Avatar active="active" activeAppearance="ring" size={56} name="* Richard Faynman *" imageUrl={steveBallmerPhotoUrl} />
+        <Avatar shape={'square'} size={16} name="Rafi" avatarColor={'colorful'} />
+        <Avatar shape={'square'} size={20} name="Richard Faynman" avatarColor={'colorful'} />
+        <Avatar shape={'square'} size={24} name="Gita Khawas" avatarColor={'colorful'} />
+        <Avatar shape={'square'} size={32} name="Mary Kom" avatarColor={'colorful'} />
+        <Avatar shape={'square'} size={40} name="Khan Sir" avatarColor={'colorful'} imageUrl={steveBallmerPhotoUrl} />
+        <Avatar shape={'square'} size={56} name="Harry Potter" avatarColor={'colorful'} />
+        <Avatar shape={'square'} size={72} name="Ellie armstrong" avatarColor={'colorful'} />
       </View>
 
       <View style={mobileStyles.testVariants}>
         {/* Variation - Overflow .*/}
-
-        <Avatar size={56} initials="20" avatarColor={'colorful'} />
-
-        {/* Variation - Group avatar*/}
-
-        <Avatar size={56} shape={'square'} avatarColor={'colorful'} name="*Annie Martha*" />
+        <Avatar size={16} initials="20" />
+        <Avatar size={20} initials="11" />
+        <Avatar size={24} initials="88" />
+        <Avatar size={32} initials="20" />
+        <Avatar size={40} initials="20" />
+        <Avatar size={56} initials="56" />
+        <Avatar size={72} initials="20" />
       </View>
     </View>
   );

package/src/TestComponents/Common/styles.ts

@@ -151,12 +151,15 @@ export const mobileStyles = StyleSheet.create({
   },
   testVariants: {
     flexDirection: 'row',
-    marginHorizontal: 10,
+    marginHorizontal: 5,
     paddingTop: 10,
     paddingBottom: 5,
     flex: 1,
     justifyContent: 'space-evenly',
   },
+  pageStyle: {
+    padding: 5,
+  },
   testList: {
     width: '100%',
   },

package/src/TestComponents/RadioGroupV1/RadioGroupV1Test.tsx

@@ -55,11 +55,11 @@ const radioGroupV1Sections: TestSection[] = [
 
 export const RadioGroupV1Test: React.FunctionComponent = () => {
   const status: PlatformStatus = {
-    win32Status: 'Beta',
+    win32Status: 'Production',
     uwpStatus: 'Experimental',
     iosStatus: 'Experimental',
     macosStatus: 'Backlog',
-    androidStatus: 'Backlog',
+    androidStatus: 'Experimental',
   };
 
   const description =

package/src/TestComponents/Shimmer/ShimmerTest.tsx

@@ -6,6 +6,7 @@ import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
 import { shimmerBorderRadiusTests, shimmerRectsAndRect, shimmerRectsAndCircle } from './ShimmerTestElementSets';
 import { E2ETestingShimmer } from './ShimmerE2ETest';
+import { Platform } from 'react-native';
 
 const TestCompareCustomizeShimmer = Shimmer.customize({
   shimmerWaveColor: 'blue',
@@ -53,7 +54,7 @@ export const RoundedCornerClipCheckShimmer: React.FunctionComponent = () => {
 const RectShimmers: React.FunctionComponent<Record<string, never>> = () => {
   return (
     <Stack style={stackStyle}>
-      <Shimmer elements={shimmerRectsAndRect()} duration={2000} delay={1000} style={{ width: 300, height: 100 }} />
+      <Shimmer elements={shimmerRectsAndRect()} style={{ width: 300, height: 100 }} />
     </Stack>
   );
 };
@@ -61,7 +62,7 @@ const RectShimmers: React.FunctionComponent<Record<string, never>> = () => {
 const RectCircleShimmers: React.FunctionComponent<Record<string, never>> = () => {
   return (
     <Stack style={stackStyle}>
-      <Shimmer elements={shimmerRectsAndCircle()} duration={3000} style={{ width: 300, height: 100 }} />
+      <Shimmer elements={shimmerRectsAndCircle()} duration={3000} delay={1000} style={{ width: 300, height: 100 }} />
     </Stack>
   );
 };
@@ -94,16 +95,21 @@ const shimmerSections: TestSection[] = [
     testID: SHIMMER_TESTPAGE,
     component: RectCircleShimmers,
   },
-  {
-    name: 'Border Radius Tests',
-    testID: SHIMMER_TESTPAGE,
-    component: ShimmerBorderRadii,
-  },
-  {
-    name: 'Customized Shimmer',
-    testID: SHIMMER_TESTPAGE,
-    component: CustomizedShimmer,
-  },
+  ...Platform.select({
+    android: [null],
+    default: [
+      {
+        name: 'Border Radius Tests',
+        testID: SHIMMER_TESTPAGE,
+        component: ShimmerBorderRadii,
+      },
+      {
+        name: 'Customized Shimmer',
+        testID: SHIMMER_TESTPAGE,
+        component: CustomizedShimmer,
+      },
+    ],
+  }),
   {
     name: 'Shimmer for E2E Testing',
     component: E2ETestingShimmer,