@fluentui-react-native/tester 0.62.5 → 0.63.0

package/lib-commonjs/FluentTester/TestComponents/Avatar/CustomizedAvatar.js

@@ -2,76 +2,99 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomizeUsage = void 0;
 var tslib_1 = require("tslib");
-var React = (0, tslib_1.__importStar)(require("react"));
+var react_1 = (0, tslib_1.__importStar)(require("react"));
 var experimental_avatar_1 = require("@fluentui-react-native/experimental-avatar");
 var react_native_1 = require("react-native");
 var styles_1 = require("./../PersonaCoin/styles");
 var AlignmentPicker_1 = require("../Common/AlignmentPicker");
 var styles_2 = require("../Common/styles");
 var CustomizeUsage = function () {
-    var _a = React.useState(true), showImage = _a[0], setShowImage = _a[1];
-    var _b = React.useState(), coinColor = _b[0], setCoinColor = _b[1];
-    var _c = React.useState(), textColor = _c[0], setTextColor = _c[1];
-    var _d = React.useState(96), size = _d[0], setSize = _d[1];
-    var _e = React.useState(24), iconSize = _e[0], setIconSize = _e[1];
-    var _f = React.useState(14), initialsSize = _f[0], setInitialsSize = _f[1];
-    var _g = React.useState(), horizontalAlignment = _g[0], setHorizontalAlignment = _g[1];
-    var _h = React.useState(), verticalAlignment = _h[0], setVerticalAlignment = _h[1];
-    var _j = React.useState('red'), ringColor = _j[0], setRingColor = _j[1];
-    var _k = React.useState(undefined), ringBackgroundColor = _k[0], setRingBackgroundColor = _k[1];
-    var _l = React.useState(true), showRing = _l[0], setShowRing = _l[1];
-    var _m = React.useState(false), transparent = _m[0], setTransparent = _m[1];
-    var CustomizedAvatar = React.useMemo(function () {
+    var _a = (0, react_1.useState)(true), showImage = _a[0], setShowImage = _a[1];
+    var _b = (0, react_1.useState)(), coinColor = _b[0], setCoinColor = _b[1];
+    var _c = (0, react_1.useState)(), textColor = _c[0], setTextColor = _c[1];
+    var _d = (0, react_1.useState)('96'), size = _d[0], setSize = _d[1];
+    var _e = (0, react_1.useState)(24), iconSize = _e[0], setIconSize = _e[1];
+    var _f = (0, react_1.useState)(16), initialsSize = _f[0], setInitialsSize = _f[1];
+    var _g = (0, react_1.useState)('normal'), fontWeight = _g[0], setFontWeight = _g[1];
+    var _h = (0, react_1.useState)('Georgia'), fontFamily = _h[0], setFontFamily = _h[1];
+    var _j = (0, react_1.useState)(), horizontalAlignment = _j[0], setHorizontalAlignment = _j[1];
+    var _k = (0, react_1.useState)(), verticalAlignment = _k[0], setVerticalAlignment = _k[1];
+    var _l = (0, react_1.useState)('red'), ringColor = _l[0], setRingColor = _l[1];
+    var _m = (0, react_1.useState)(undefined), ringBackgroundColor = _m[0], setRingBackgroundColor = _m[1];
+    var _o = (0, react_1.useState)(true), showRing = _o[0], setShowRing = _o[1];
+    var _p = (0, react_1.useState)(false), transparent = _p[0], setTransparent = _p[1];
+    var CustomizedAvatar = (0, react_1.useMemo)(function () {
         var tokens = {
             backgroundColor: coinColor,
             color: textColor,
             horizontalIconAlignment: horizontalAlignment,
             verticalIconAlignment: verticalAlignment,
             iconSize: iconSize,
-            initialsSize: initialsSize,
-            size: size,
+            fontSize: initialsSize,
+            fontWeight: fontWeight,
+            fontFamily: fontFamily,
+            size: parseInt(size),
             ringColor: ringColor,
             ringBackgroundColor: ringBackgroundColor,
         };
         return experimental_avatar_1.JSAvatar.customize(tokens);
-    }, [coinColor, textColor, horizontalAlignment, verticalAlignment, iconSize, initialsSize, size, ringColor, ringBackgroundColor]);
-    return (React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.root },
-        React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.settings },
-            React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.switch },
-                React.createElement(react_native_1.Text, null, "Show image"),
-                React.createElement(react_native_1.Switch, { value: showImage, onValueChange: setShowImage })),
-            React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.switch },
-                React.createElement(react_native_1.Text, null, "Show rings"),
-                React.createElement(react_native_1.Switch, { value: showRing, onValueChange: setShowRing })),
-            React.createElement(react_native_1.View, { style: styles_2.commonTestStyles.switch },
-                React.createElement(react_native_1.Text, null, "Transparent Ring"),
-                React.createElement(react_native_1.Switch, { value: transparent, onValueChange: setTransparent })),
-            React.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Background color", blurOnSubmit: true, onSubmitEditing: function (e) {
-                    setCoinColor(e.nativeEvent.text);
-                } }),
-            React.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Initials text color", blurOnSubmit: true, onSubmitEditing: function (e) {
-                    setTextColor(e.nativeEvent.text);
-                } }),
-            React.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Ring color", blurOnSubmit: true, onSubmitEditing: function (e) {
-                    setRingColor(e.nativeEvent.text);
-                } }),
-            React.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Avatar size", blurOnSubmit: true, onSubmitEditing: function (e) {
-                    var size = e.nativeEvent.text;
-                    setSize(size);
-                } }),
-            React.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Icon size", blurOnSubmit: true, onSubmitEditing: function (e) {
-                    setIconSize(parseInt(e.nativeEvent.text));
-                } }),
-            React.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Initials size", blurOnSubmit: true, onSubmitEditing: function (e) {
-                    setInitialsSize(parseInt(e.nativeEvent.text));
-                } }),
-            React.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Ring background color", blurOnSubmit: true, onSubmitEditing: function (e) {
-                    setRingBackgroundColor(e.nativeEvent.text);
-                } }),
-            React.createElement(react_native_1.Text, null, "These features will be available later"),
-            React.createElement(AlignmentPicker_1.AlignmentPicker, { style: styles_2.commonTestStyles.header, label: "Horizontal icon alignment", onSelectionChange: setHorizontalAlignment }),
-            React.createElement(AlignmentPicker_1.AlignmentPicker, { style: styles_2.commonTestStyles.header, label: "Vertical icon alignment", onSelectionChange: setVerticalAlignment })),
-        React.createElement(CustomizedAvatar, { active: "active", activeAppearance: "ring", initials: "SB", accessibilityLabel: "Former CEO of Microsoft", badge: { status: 'blocked' }, src: showImage ? styles_1.steveBallmerPhotoUrl : undefined, ring: showRing
+    }, [
+        coinColor,
+        textColor,
+        horizontalAlignment,
+        verticalAlignment,
+        iconSize,
+        initialsSize,
+        size,
+        ringColor,
+        ringBackgroundColor,
+        fontWeight,
+        fontFamily,
+    ]);
+    return (react_1.default.createElement(react_native_1.View, { style: styles_2.commonTestStyles.root },
+        react_1.default.createElement(react_native_1.View, { style: styles_2.commonTestStyles.settings },
+            react_1.default.createElement(react_native_1.View, { style: styles_2.commonTestStyles.switch },
+                react_1.default.createElement(react_native_1.Text, null, "Show image"),
+                react_1.default.createElement(react_native_1.Switch, { value: showImage, onValueChange: setShowImage })),
+            react_1.default.createElement(react_native_1.View, { style: styles_2.commonTestStyles.switch },
+                react_1.default.createElement(react_native_1.Text, null, "Show rings"),
+                react_1.default.createElement(react_native_1.Switch, { value: showRing, onValueChange: setShowRing })),
+            react_1.default.createElement(react_native_1.View, { style: styles_2.commonTestStyles.switch },
+                react_1.default.createElement(react_native_1.Text, null, "Transparent Ring"),
+                react_1.default.createElement(react_native_1.Switch, { value: transparent, onValueChange: setTransparent })),
+            react_1.default.createElement(react_native_1.View, null,
+                react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Background color", blurOnSubmit: true, onSubmitEditing: function (e) {
+                        setCoinColor(e.nativeEvent.text);
+                    } }),
+                react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Ring color", blurOnSubmit: true, onSubmitEditing: function (e) {
+                        setRingColor(e.nativeEvent.text);
+                    } }),
+                react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Avatar size", blurOnSubmit: true, onSubmitEditing: function (e) {
+                        setSize(e.nativeEvent.text);
+                    } }),
+                react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Icon size", blurOnSubmit: true, onSubmitEditing: function (e) {
+                        setIconSize(parseInt(e.nativeEvent.text));
+                    } }),
+                react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Ring background color", blurOnSubmit: true, onSubmitEditing: function (e) {
+                        setRingBackgroundColor(e.nativeEvent.text);
+                    } }),
+                react_1.default.createElement(react_native_1.Text, { style: { fontWeight: 'bold' } }, "Font tokens"),
+                react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Initials text color", blurOnSubmit: true, onSubmitEditing: function (e) {
+                        setTextColor(e.nativeEvent.text);
+                    } }),
+                react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Initials size", blurOnSubmit: true, onSubmitEditing: function (e) {
+                        setInitialsSize(parseInt(e.nativeEvent.text));
+                    } }),
+                react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Font weight", blurOnSubmit: true, onSubmitEditing: function (e) {
+                        setFontWeight(e.nativeEvent.text);
+                    } }),
+                react_1.default.createElement(react_native_1.TextInput, { style: [styles_2.commonTestStyles.textBox], placeholder: "Font family", blurOnSubmit: true, onSubmitEditing: function (e) {
+                        setFontFamily(e.nativeEvent.text);
+                    } })),
+            react_1.default.createElement(react_native_1.Text, null, "These features will be available later"),
+            react_1.default.createElement(AlignmentPicker_1.AlignmentPicker, { style: styles_2.commonTestStyles.header, label: "Horizontal icon alignment", onSelectionChange: setHorizontalAlignment }),
+            react_1.default.createElement(AlignmentPicker_1.AlignmentPicker, { style: styles_2.commonTestStyles.header, label: "Vertical icon alignment", onSelectionChange: setVerticalAlignment })),
+        react_1.default.createElement(CustomizedAvatar, { active: "active", activeAppearance: "ring", avatarColor: "colorful", initials: "SB", accessibilityLabel: "Former CEO of Microsoft", src: showImage ? styles_1.steveBallmerPhotoUrl : undefined, ring: showRing
                 ? {
                     ringThickness: 4,
                     innerGap: 4,

package/lib-commonjs/FluentTester/TestComponents/Avatar/CustomizedAvatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomizedAvatar.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/CustomizedAvatar.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"CustomizedAvatar.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Avatar/CustomizedAvatar.tsx"],"names":[],"mappings":"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"}

package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowTest.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+export declare const ShadowTest: React.FunctionComponent;
+//# sourceMappingURL=ShadowTest.d.ts.map

package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowTest.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShadowTest.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/ShadowTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA0B/B,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAY9B,CAAC"}

package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowTest.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ShadowTest = void 0;
+var tslib_1 = require("tslib");
+var React = (0, tslib_1.__importStar)(require("react"));
+var react_native_1 = require("react-native");
+var Test_1 = require("../Test");
+var consts_1 = require("./consts");
+var ShadowDepthRampTest = function () {
+    return React.createElement(react_native_1.Text, null, "TODO");
+};
+var ShadowButtonTest = function () {
+    return React.createElement(react_native_1.Text, null, "TODO");
+};
+var shadowSections = [
+    {
+        name: 'Shadow Depth Ramp',
+        testID: consts_1.SHADOW_TESTPAGE,
+        component: ShadowDepthRampTest,
+    },
+    {
+        name: 'Shadows on Button Examples',
+        testID: consts_1.SHADOW_TESTPAGE,
+        component: ShadowButtonTest,
+    },
+];
+var ShadowTest = function () {
+    var status = {
+        win32Status: 'Experimental',
+        uwpStatus: 'Experimental',
+        iosStatus: 'Experimental',
+        macosStatus: 'Experimental',
+        androidStatus: 'Experimental',
+    };
+    var description = 'A Shadow component using the Fluent Design System. Shadow components can be added to other components.';
+    return React.createElement(Test_1.Test, { name: "Shadow Test", description: description, sections: shadowSections, status: status });
+};
+exports.ShadowTest = ShadowTest;
+//# sourceMappingURL=ShadowTest.js.map

package/lib-commonjs/FluentTester/TestComponents/Shadow/ShadowTest.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ShadowTest.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/ShadowTest.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,6CAAoC;AACpC,gCAA4D;AAC5D,mCAA2C;AAE3C,IAAM,mBAAmB,GAA4B;IACnD,OAAO,oBAAC,mBAAI,eAAY,CAAC;AAC3B,CAAC,CAAC;AAEF,IAAM,gBAAgB,GAA4B;IAChD,OAAO,oBAAC,mBAAI,eAAY,CAAC;AAC3B,CAAC,CAAC;AAEF,IAAM,cAAc,GAAkB;IACpC;QACE,IAAI,EAAE,mBAAmB;QACzB,MAAM,EAAE,wBAAe;QACvB,SAAS,EAAE,mBAAmB;KAC/B;IACD;QACE,IAAI,EAAE,4BAA4B;QAClC,MAAM,EAAE,wBAAe;QACvB,SAAS,EAAE,gBAAgB;KAC5B;CACF,CAAC;AAEK,IAAM,UAAU,GAA4B;IACjD,IAAM,MAAM,GAAmB;QAC7B,WAAW,EAAE,cAAc;QAC3B,SAAS,EAAE,cAAc;QACzB,SAAS,EAAE,cAAc;QACzB,WAAW,EAAE,cAAc;QAC3B,aAAa,EAAE,cAAc;KAC9B,CAAC;IAEF,IAAM,WAAW,GAAG,wGAAwG,CAAC;IAE7H,OAAO,oBAAC,WAAI,IAAC,IAAI,EAAC,aAAa,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AACzG,CAAC,CAAC;AAZW,QAAA,UAAU,cAYrB"}

package/lib-commonjs/FluentTester/TestComponents/Shadow/consts.d.ts

@@ -0,0 +1,3 @@
+export declare const HOMEPAGE_SHADOW_BUTTON = "Homepage_Shadow_Button";
+export declare const SHADOW_TESTPAGE = "Shadow_TestPage";
+//# sourceMappingURL=consts.d.ts.map

package/lib-commonjs/FluentTester/TestComponents/Shadow/consts.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,sBAAsB,2BAA2B,CAAC;AAC/D,eAAO,MAAM,eAAe,oBAAoB,CAAC"}

package/lib-commonjs/FluentTester/TestComponents/Shadow/consts.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SHADOW_TESTPAGE = exports.HOMEPAGE_SHADOW_BUTTON = void 0;
+exports.HOMEPAGE_SHADOW_BUTTON = 'Homepage_Shadow_Button';
+exports.SHADOW_TESTPAGE = 'Shadow_TestPage';
+//# sourceMappingURL=consts.js.map

package/lib-commonjs/FluentTester/TestComponents/Shadow/consts.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"consts.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/consts.ts"],"names":[],"mappings":";;;AAAa,QAAA,sBAAsB,GAAG,wBAAwB,CAAC;AAClD,QAAA,eAAe,GAAG,iBAAiB,CAAC"}

package/lib-commonjs/FluentTester/TestComponents/Shadow/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ShadowTest';
+export * from './consts';
+//# sourceMappingURL=index.d.ts.map

package/lib-commonjs/FluentTester/TestComponents/Shadow/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,UAAU,CAAC"}

package/lib-commonjs/FluentTester/TestComponents/Shadow/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var tslib_1 = require("tslib");
+(0, tslib_1.__exportStar)(require("./ShadowTest"), exports);
+(0, tslib_1.__exportStar)(require("./consts"), exports);
+//# sourceMappingURL=index.js.map

package/lib-commonjs/FluentTester/TestComponents/Shadow/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/Shadow/index.ts"],"names":[],"mappings":";;;AAAA,4DAA6B;AAC7B,wDAAyB"}

package/lib-commonjs/FluentTester/testPages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testPages.d.ts","sourceRoot":"","sources":["../../src/FluentTester/testPages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AA6BnD,eAAO,MAAM,KAAK,EAAE,eAAe,EA6IlC,CAAC"}
+{"version":3,"file":"testPages.d.ts","sourceRoot":"","sources":["../../src/FluentTester/testPages.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AA8BnD,eAAO,MAAM,KAAK,EAAE,eAAe,EAkJlC,CAAC"}

package/lib-commonjs/FluentTester/testPages.js

@@ -12,6 +12,7 @@ var PersonaCoin_1 = require("./TestComponents/PersonaCoin");
 var Pressable_1 = require("./TestComponents/Pressable");
 var RadioGroup_1 = require("./TestComponents/RadioGroup");
 var Separator_1 = require("./TestComponents/Separator");
+var Shadow_1 = require("./TestComponents/Shadow");
 var Shimmer_1 = require("./TestComponents/Shimmer");
 var Svg_1 = require("./TestComponents/Svg");
 var Text_1 = require("./TestComponents/Text");
@@ -74,6 +75,11 @@ exports.tests = [
         component: Link_1.LinkTest,
         testPage: Link_1.HOMEPAGE_LINK_BUTTON,
     },
+    {
+        name: 'Shadow Test',
+        component: Shadow_1.ShadowTest,
+        testPage: Shadow_1.HOMEPAGE_SHADOW_BUTTON,
+    },
     {
         name: 'Separator Test',
         component: Separator_1.SeparatorTest,

package/lib-commonjs/FluentTester/testPages.js.map

@@ -1 +1 @@
-{"version":3,"file":"testPages.js","sourceRoot":"","sources":["../../src/FluentTester/testPages.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"testPages.js","sourceRoot":"","sources":["../../src/FluentTester/testPages.ts"],"names":[],"mappings":"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"}

package/lib-commonjs/FluentTester/testPages.macos.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"testPages.macos.d.ts","sourceRoot":"","sources":["../../src/FluentTester/testPages.macos.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AA6BnD,eAAO,MAAM,KAAK,EAAE,eAAe,EAwIlC,CAAC"}
+{"version":3,"file":"testPages.macos.d.ts","sourceRoot":"","sources":["../../src/FluentTester/testPages.macos.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AA8BnD,eAAO,MAAM,KAAK,EAAE,eAAe,EA6IlC,CAAC"}

package/lib-commonjs/FluentTester/testPages.macos.js

@@ -17,6 +17,7 @@ var Pressable_1 = require("./TestComponents/Pressable");
 var Shimmer_1 = require("./TestComponents/Shimmer");
 var RadioGroup_1 = require("./TestComponents/RadioGroup");
 var Separator_1 = require("./TestComponents/Separator");
+var Shadow_1 = require("./TestComponents/Shadow");
 var Svg_1 = require("./TestComponents/Svg");
 var Text_1 = require("./TestComponents/Text");
 var Theme_1 = require("./TestComponents/Theme");
@@ -134,6 +135,11 @@ exports.tests = [
         component: Separator_1.SeparatorTest,
         testPage: Separator_1.HOMEPAGE_SEPARATOR_BUTTON,
     },
+    {
+        name: 'Shadow Test',
+        component: Shadow_1.ShadowTest,
+        testPage: Shadow_1.HOMEPAGE_SHADOW_BUTTON,
+    },
     {
         name: 'Shimmer Test',
         component: Shimmer_1.ShimmerTest,

package/lib-commonjs/FluentTester/testPages.macos.js.map

@@ -1 +1 @@
-{"version":3,"file":"testPages.macos.js","sourceRoot":"","sources":["../../src/FluentTester/testPages.macos.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"testPages.macos.js","sourceRoot":"","sources":["../../src/FluentTester/testPages.macos.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.62.5",
+  "version": "0.63.0",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -31,12 +31,12 @@
     "@fluentui-react-native/button": ">=0.22.26 <1.0.0",
     "@fluentui-react-native/default-theme": ">=0.13.0 <1.0.0",
     "@fluentui-react-native/experimental-activity-indicator": ">=0.5.29 <1.0.0",
-    "@fluentui-react-native/experimental-avatar": ">=0.14.34 <1.0.0",
+    "@fluentui-react-native/experimental-avatar": ">=0.14.35 <1.0.0",
     "@fluentui-react-native/experimental-button": "0.15.27",
     "@fluentui-react-native/experimental-checkbox": "0.11.9",
     "@fluentui-react-native/experimental-drawer": ">=0.1.13 <1.0.0",
     "@fluentui-react-native/experimental-native-date-picker": ">=0.4.3 <1.0.0",
-    "@fluentui-react-native/experimental-expander": "0.3.32",
+    "@fluentui-react-native/experimental-expander": "0.3.33",
     "@fluentui-react-native/experimental-menu-button": ">=0.3.44 <1.0.0",
     "@fluentui-react-native/experimental-shimmer": "0.6.33",
     "@fluentui-react-native/experimental-tabs": "0.4.49",

package/src/E2E/Avatar/pages/AvatarPageObject.ts

@@ -0,0 +1,17 @@
+import { JSAVATAR_TESTPAGE, HOMEPAGE_AVATAR_BUTTON } from '../../../FluentTester/TestComponents/Avatar/consts';
+import { BasePage, By } from '../../common/BasePage.win';
+
+class AvatarPageObject extends BasePage {
+  /*****************************************/
+  /**************** Getters ****************/
+  /*****************************************/
+  get _testPage() {
+    return By(JSAVATAR_TESTPAGE);
+  }
+
+  get _pageButton() {
+    return By(HOMEPAGE_AVATAR_BUTTON);
+  }
+}
+
+export default new AvatarPageObject();

package/src/E2E/Avatar/specs/Avatar.spec.win.ts

@@ -0,0 +1,24 @@
+import NavigateAppPage from '../../common/NavigateAppPage.win';
+import AvatarPageObject from '../pages/AvatarPageObject';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../common/consts';
+
+// Before testing begins, allow up to 60 seconds for app to open
+describe('Avatar Testing Initialization', function () {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
+  });
+
+  it('Click and navigate to Avatar test page', () => {
+    /* Scroll to component test page button in scrollview if not already visible*/
+    AvatarPageObject.scrollToComponentButton();
+    AvatarPageObject.waitForButtonDisplayed(PAGE_TIMEOUT);
+
+    /* Click on component button to navigate to test page */
+    NavigateAppPage.clickAndGoToAvatarPage();
+    AvatarPageObject.waitForPageDisplayed(PAGE_TIMEOUT);
+
+    expect(AvatarPageObject.isPageLoaded()).toBeTruthy(AvatarPageObject.ERRORMESSAGE_PAGELOAD);
+    expect(AvatarPageObject.didAssertPopup()).toBeFalsy(AvatarPageObject.ERRORMESSAGE_ASSERT);
+  });
+});

package/src/E2E/common/NavigateAppPage.win.ts

@@ -1,4 +1,5 @@
 import { HOMEPAGE_ACTIVITY_INDICATOR_BUTTON } from '../../FluentTester/TestComponents/ActivityIndicator/consts';
+import { HOMEPAGE_AVATAR_BUTTON } from '../../FluentTester/TestComponents/Avatar/consts';
 import { HOMEPAGE_CHECKBOX_BUTTON } from '../../FluentTester/TestComponents/Checkbox/consts';
 import { HOMEPAGE_CHECKBOX_EXPERIMENTAL_BUTTON } from '../../FluentTester/TestComponents/CheckboxExperimental/consts';
 import { HOMEPAGE_BUTTON_BUTTON } from '../../FluentTester/TestComponents/Button/consts';
@@ -31,6 +32,10 @@ class NavigateAppPage extends BasePage {
     this.activityIndicatorPage.click();
   }
 
+  clickAndGoToAvatarPage() {
+    this.avatarPage.click();
+  }
+
   clickAndGoToButtonPage() {
     this.buttonPage.click();
   }
@@ -139,6 +144,10 @@ class NavigateAppPage extends BasePage {
     return By(HOMEPAGE_ACTIVITY_INDICATOR_BUTTON);
   }
 
+  private get avatarPage() {
+    return By(HOMEPAGE_AVATAR_BUTTON);
+  }
+
   private get buttonPage() {
     return By(HOMEPAGE_BUTTON_BUTTON);
   }

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

@@ -96,7 +96,7 @@ export const StandardUsage: FunctionComponent = () => {
         <StyledPicker prompt="Avatar Color" selected={avatarColor} onChange={onAvatarColorChange} collection={avatarColors} />
         <StyledPicker prompt="Presence status" selected={presence} onChange={onPresenceChange} collection={allPresences} />
       </View>
-      <JSAvatar />
+      <JSAvatar name="Richard" avatarColor="colorful" />
       <JSAvatar icon={{ fontSource: { ...fontBuiltInProps, fontSize: 32 }, color: 'red' }} size={56} />
       <JSAvatar icon={{ fontSource: { ...fontBuiltInProps }, color: 'white' }} size={120} />
       <JSAvatar
@@ -139,6 +139,7 @@ export const StandardUsage: FunctionComponent = () => {
             accessibilityLabel="SVG Icon"
             icon={{ svgSource: svgProps, width: 20, height: 20 }}
             avatarColor={avatarColor}
+            idForColor="15"
           />
         </>
       )}