@fluentui-react-native/tester 0.56.1 → 0.57.0

package/lib-commonjs/FluentTester/TestComponents/TextExperimental/CustomizeUsage.js

@@ -7,14 +7,43 @@ var react_native_1 = require("react-native");
 var stack_1 = require("@fluentui-react-native/stack");
 var experimental_text_1 = require("@fluentui-react-native/experimental-text");
 var styles_1 = require("../Common/styles");
+var RedCaptionBold = experimental_text_1.Text.customize({ variant: 'captionStandard', fontWeight: '700', color: '#ff0000' });
+var OrangeSecondaryBold = experimental_text_1.Text.customize({ variant: 'secondaryStandard', fontWeight: '700', color: '#ff9900' });
+var YellowBodyBold = experimental_text_1.Text.customize({ variant: 'bodyStandard', fontWeight: '700', color: '#f3ce00' });
+var GreenSubheaderBold = experimental_text_1.Text.customize({ variant: 'subheaderStandard', fontWeight: '700', color: '#02c440' });
+var BlueHeaderBold = experimental_text_1.Text.customize({ variant: 'headerStandard', fontWeight: '700', color: '#0229c4' });
+var IndigoHeroBold = experimental_text_1.Text.customize({ variant: 'heroStandard', fontWeight: '700', color: '#4b0082' });
+var PurpleHeroLargeBold = experimental_text_1.Text.customize({ variant: 'heroLargeStandard', fontWeight: '700', color: '#8402c4' });
+// Android has a limited fontFamily support and unknown fonts fallback to sans-serif (Roboto).
+// Custom fonts (ttf, otf) are supported but need to be linked using 'react-native link'
+// The supported font families can be found as <aliases> at https://android.googlesource.com/platform/frameworks/base/+/master/data/fonts/fonts.xml
+var CustomFontNames = (0, tslib_1.__assign)({}, react_native_1.Platform.select({
+    android: {
+        CourierNew: 'courier new',
+        Georgia: 'georgia',
+        TimesNewRoman: 'times new roman',
+    },
+    default: {
+        CourierNew: 'Courier New',
+        Georgia: 'Georgia',
+        TimesNewRoman: 'Times New Roman',
+    },
+}));
+var ArialBlack = experimental_text_1.Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Arial Black' });
+var BrushScriptMT = experimental_text_1.Text.customize({ variant: 'heroStandard', fontFamily: 'Brush Script MT' });
+var CourierNew = experimental_text_1.Text.customize({ variant: 'headerStandard', fontFamily: CustomFontNames.CourierNew });
+var Georgia = experimental_text_1.Text.customize({ variant: 'subheaderStandard', fontFamily: CustomFontNames.Georgia });
+var TimesNewRoman = experimental_text_1.Text.customize({ variant: 'secondaryStandard', fontFamily: CustomFontNames.TimesNewRoman });
+var Wingdings = experimental_text_1.Text.customize({ variant: 'captionStandard', fontFamily: 'Wingdings' });
+// Examples of supported Android fonts.
+var Casual = experimental_text_1.Text.customize({ variant: 'heroStandard', fontFamily: 'casual' });
+var Cursive = experimental_text_1.Text.customize({ variant: 'heroStandard', fontFamily: 'cursive' });
+// Examples of iOS fonts.
+var Papyrus = experimental_text_1.Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Papyrus' });
+var Helvetica = experimental_text_1.Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Helvetica' });
+// Fonts supported on Android and iOS
+var Arial = experimental_text_1.Text.customize({ variant: 'heroLargeStandard', fontFamily: 'arial' });
 var CustomizeUsage = function () {
-    var RedCaptionBold = experimental_text_1.Text.customize({ variant: 'captionStandard', fontWeight: '700', color: '#ff0000' });
-    var OrangeSecondaryBold = experimental_text_1.Text.customize({ variant: 'secondaryStandard', fontWeight: '700', color: '#ff9900' });
-    var YellowBodyBold = experimental_text_1.Text.customize({ variant: 'bodyStandard', fontWeight: '700', color: '#f3ce00' });
-    var GreenSubheaderBold = experimental_text_1.Text.customize({ variant: 'subheaderStandard', fontWeight: '700', color: '#02c440' });
-    var BlueHeaderBold = experimental_text_1.Text.customize({ variant: 'headerStandard', fontWeight: '700', color: '#0229c4' });
-    var IndigoHeroBold = experimental_text_1.Text.customize({ variant: 'heroStandard', fontWeight: '700', color: '#4b0082' });
-    var PurpleHeroLargeBold = experimental_text_1.Text.customize({ variant: 'heroLargeStandard', fontWeight: '700', color: '#8402c4' });
     var CustomUsageStack = function () {
         return (React.createElement(stack_1.Stack, { style: styles_1.stackStyle, gap: 5 },
             React.createElement(RedCaptionBold, null, "RedCaptionBold"),
@@ -25,35 +54,6 @@ var CustomizeUsage = function () {
             React.createElement(IndigoHeroBold, null, "IndigoHeroBold"),
             React.createElement(PurpleHeroLargeBold, null, "PurpleHeroLargeBold")));
     };
-    // Android has a limited fontFamily support and unknown fonts fallback to sans-serif (Roboto).
-    // Custom fonts (ttf, otf) are supported but need to be linked using 'react-native link'
-    // The supported font families can be found as <aliases> at https://android.googlesource.com/platform/frameworks/base/+/master/data/fonts/fonts.xml
-    var CustomFontNames = (0, tslib_1.__assign)({}, react_native_1.Platform.select({
-        android: {
-            CourierNew: 'courier new',
-            Georgia: 'georgia',
-            TimesNewRoman: 'times new roman',
-        },
-        default: {
-            CourierNew: 'Courier New',
-            Georgia: 'Georgia',
-            TimesNewRoman: 'Times New Roman',
-        },
-    }));
-    var ArialBlack = experimental_text_1.Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Arial Black' });
-    var BrushScriptMT = experimental_text_1.Text.customize({ variant: 'heroStandard', fontFamily: 'Brush Script MT' });
-    var CourierNew = experimental_text_1.Text.customize({ variant: 'headerStandard', fontFamily: CustomFontNames.CourierNew });
-    var Georgia = experimental_text_1.Text.customize({ variant: 'subheaderStandard', fontFamily: CustomFontNames.Georgia });
-    var TimesNewRoman = experimental_text_1.Text.customize({ variant: 'secondaryStandard', fontFamily: CustomFontNames.TimesNewRoman });
-    var Wingdings = experimental_text_1.Text.customize({ variant: 'captionStandard', fontFamily: 'Wingdings' });
-    // Examples of supported Android fonts.
-    var Casual = experimental_text_1.Text.customize({ variant: 'heroStandard', fontFamily: 'casual' });
-    var Cursive = experimental_text_1.Text.customize({ variant: 'heroStandard', fontFamily: 'cursive' });
-    // Examples of iOS fonts.
-    var Papyrus = experimental_text_1.Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Papyrus' });
-    var Helvetica = experimental_text_1.Text.customize({ variant: 'heroLargeStandard', fontFamily: 'Helvetica' });
-    // Fonts supported on Android and iOS
-    var Arial = experimental_text_1.Text.customize({ variant: 'heroLargeStandard', fontFamily: 'arial' });
     var CustomFontStack = function () {
         return (React.createElement(stack_1.Stack, { style: styles_1.stackStyle, gap: 5 },
             React.createElement(ArialBlack, null, "Arial Black"),

package/lib-commonjs/FluentTester/TestComponents/TextExperimental/CustomizeUsage.js.map

@@ -1 +1 @@
-{"version":3,"file":"CustomizeUsage.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/TextExperimental/CustomizeUsage.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,6CAA8C;AAC9C,sDAAqD;AACrD,8EAAgE;AAChE,2CAA8C;AAEvC,IAAM,cAAc,GAA4B;IACrD,IAAM,cAAc,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IAC3G,IAAM,mBAAmB,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IAClH,IAAM,cAAc,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IACxG,IAAM,kBAAkB,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IACjH,IAAM,cAAc,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IAC1G,IAAM,cAAc,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IACxG,IAAM,mBAAmB,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;IAElH,IAAM,gBAAgB,GAAG;QACvB,OAAO,CACL,oBAAC,aAAK,IAAC,KAAK,EAAE,mBAAU,EAAE,GAAG,EAAE,CAAC;YAC9B,oBAAC,cAAc,yBAAgC;YAC/C,oBAAC,mBAAmB,8BAA0C;YAC9D,oBAAC,cAAc,yBAAgC;YAC/C,oBAAC,kBAAkB,6BAAwC;YAC3D,oBAAC,cAAc,yBAAgC;YAC/C,oBAAC,cAAc,yBAAgC;YAC/C,oBAAC,mBAAmB,8BAA0C,CACxD,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,8FAA8F;IAC9F,wFAAwF;IACxF,mJAAmJ;IACnJ,IAAM,eAAe,6BAChB,uBAAQ,CAAC,MAAM,CAAC;QACjB,OAAO,EAAE;YACP,UAAU,EAAE,aAAa;YACzB,OAAO,EAAE,SAAS;YAClB,aAAa,EAAE,iBAAiB;SACjC;QACD,OAAO,EAAE;YACP,UAAU,EAAE,aAAa;YACzB,OAAO,EAAE,SAAS;YAClB,aAAa,EAAE,iBAAiB;SACjC;KACF,CAAC,CACH,CAAC;IAEF,IAAM,UAAU,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC,CAAC;IAC/F,IAAM,aAAa,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,iBAAiB,EAAE,CAAC,CAAC;IACjG,IAAM,UAAU,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,CAAC,UAAU,EAAE,CAAC,CAAC;IACzG,IAAM,OAAO,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,eAAe,CAAC,OAAO,EAAE,CAAC,CAAC;IACtG,IAAM,aAAa,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,eAAe,CAAC,aAAa,EAAE,CAAC,CAAC;IAClH,IAAM,SAAS,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,CAAC;IAE1F,uCAAuC;IACvC,IAAM,MAAM,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;IACjF,IAAM,OAAO,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC;IACnF,yBAAyB;IACzB,IAAM,OAAO,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC;IACxF,IAAM,SAAS,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,CAAC;IAC5F,qCAAqC;IACrC,IAAM,KAAK,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC;IAEpF,IAAM,eAAe,GAAG;QACtB,OAAO,CACL,oBAAC,aAAK,IAAC,KAAK,EAAE,mBAAU,EAAE,GAAG,EAAE,CAAC;YAC9B,oBAAC,UAAU,sBAAyB;YACpC,oBAAC,aAAa,0BAAgC;YAC9C,oBAAC,UAAU,sBAAyB;YACpC,oBAAC,OAAO,kBAAkB;YAC1B,oBAAC,aAAa,wBAA8B;YAC5C,oBAAC,SAAS,oBAAsB,CAC1B,CACT,CAAC;IACJ,CAAC,CAAC;IACF,IAAM,sBAAsB,GAAG;QAC7B,OAAO,CACL,oBAAC,aAAK,IAAC,KAAK,EAAE,mBAAU,EAAE,GAAG,EAAE,CAAC;YAC9B,oBAAC,KAAK,gBAAc;YACpB,oBAAC,MAAM,iBAAgB;YACvB,oBAAC,OAAO,kBAAkB;YAC1B,oBAAC,UAAU,sBAAyB;YACpC,oBAAC,OAAO,kBAAkB;YAC1B,oBAAC,aAAa,wBAA8B,CACtC,CACT,CAAC;IACJ,CAAC,CAAC;IACF,IAAM,kBAAkB,GAAG;QACzB,OAAO,CACL,oBAAC,aAAK,IAAC,KAAK,EAAE,mBAAU,EAAE,GAAG,EAAE,CAAC;YAC9B,oBAAC,KAAK,gBAAc;YACpB,oBAAC,OAAO,kBAAkB;YAC1B,oBAAC,SAAS,oBAAsB;YAChC,oBAAC,UAAU,sBAAyB;YACpC,oBAAC,OAAO,kBAAkB;YAC1B,oBAAC,aAAa,wBAA8B,CACtC,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,QAAQ,uBAAQ,CAAC,EAAE,EAAE;QACnB,KAAK,SAAS;YACZ,OAAO,CACL,oBAAC,mBAAI;gBACH,oBAAC,gBAAgB,OAAG;gBACpB,oBAAC,sBAAsB,OAAG,CACrB,CACR,CAAC;QACJ,KAAK,KAAK;YACR,OAAO,CACL,oBAAC,mBAAI;gBACH,oBAAC,gBAAgB,OAAG;gBACpB,oBAAC,kBAAkB,OAAG,CACjB,CACR,CAAC;QACJ;YACE,OAAO,CACL,oBAAC,mBAAI;gBACH,oBAAC,gBAAgB,OAAG;gBACpB,oBAAC,eAAe,OAAG,CACd,CACR,CAAC;KACL;AACH,CAAC,CAAC;AArHW,QAAA,cAAc,kBAqHzB"}
+{"version":3,"file":"CustomizeUsage.js","sourceRoot":"","sources":["../../../../src/FluentTester/TestComponents/TextExperimental/CustomizeUsage.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,6CAA8C;AAC9C,sDAAqD;AACrD,8EAAgE;AAChE,2CAA8C;AAE9C,IAAM,cAAc,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;AAC3G,IAAM,mBAAmB,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;AAClH,IAAM,cAAc,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;AACxG,IAAM,kBAAkB,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;AACjH,IAAM,cAAc,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;AAC1G,IAAM,cAAc,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;AACxG,IAAM,mBAAmB,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,KAAK,EAAE,KAAK,EAAE,SAAS,EAAE,CAAC,CAAC;AAElH,8FAA8F;AAC9F,wFAAwF;AACxF,mJAAmJ;AACnJ,IAAM,eAAe,6BAChB,uBAAQ,CAAC,MAAM,CAAC;IACjB,OAAO,EAAE;QACP,UAAU,EAAE,aAAa;QACzB,OAAO,EAAE,SAAS;QAClB,aAAa,EAAE,iBAAiB;KACjC;IACD,OAAO,EAAE;QACP,UAAU,EAAE,aAAa;QACzB,OAAO,EAAE,SAAS;QAClB,aAAa,EAAE,iBAAiB;KACjC;CACF,CAAC,CACH,CAAC;AAEF,IAAM,UAAU,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,aAAa,EAAE,CAAC,CAAC;AAC/F,IAAM,aAAa,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,iBAAiB,EAAE,CAAC,CAAC;AACjG,IAAM,UAAU,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,gBAAgB,EAAE,UAAU,EAAE,eAAe,CAAC,UAAU,EAAE,CAAC,CAAC;AACzG,IAAM,OAAO,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,eAAe,CAAC,OAAO,EAAE,CAAC,CAAC;AACtG,IAAM,aAAa,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,eAAe,CAAC,aAAa,EAAE,CAAC,CAAC;AAClH,IAAM,SAAS,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,CAAC;AAE1F,uCAAuC;AACvC,IAAM,MAAM,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,QAAQ,EAAE,CAAC,CAAC;AACjF,IAAM,OAAO,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,cAAc,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC;AACnF,yBAAyB;AACzB,IAAM,OAAO,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC;AACxF,IAAM,SAAS,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,WAAW,EAAE,CAAC,CAAC;AAC5F,qCAAqC;AACrC,IAAM,KAAK,GAAG,wBAAI,CAAC,SAAS,CAAC,EAAE,OAAO,EAAE,mBAAmB,EAAE,UAAU,EAAE,OAAO,EAAE,CAAC,CAAC;AAE7E,IAAM,cAAc,GAA4B;IACrD,IAAM,gBAAgB,GAAG;QACvB,OAAO,CACL,oBAAC,aAAK,IAAC,KAAK,EAAE,mBAAU,EAAE,GAAG,EAAE,CAAC;YAC9B,oBAAC,cAAc,yBAAgC;YAC/C,oBAAC,mBAAmB,8BAA0C;YAC9D,oBAAC,cAAc,yBAAgC;YAC/C,oBAAC,kBAAkB,6BAAwC;YAC3D,oBAAC,cAAc,yBAAgC;YAC/C,oBAAC,cAAc,yBAAgC;YAC/C,oBAAC,mBAAmB,8BAA0C,CACxD,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,IAAM,eAAe,GAAG;QACtB,OAAO,CACL,oBAAC,aAAK,IAAC,KAAK,EAAE,mBAAU,EAAE,GAAG,EAAE,CAAC;YAC9B,oBAAC,UAAU,sBAAyB;YACpC,oBAAC,aAAa,0BAAgC;YAC9C,oBAAC,UAAU,sBAAyB;YACpC,oBAAC,OAAO,kBAAkB;YAC1B,oBAAC,aAAa,wBAA8B;YAC5C,oBAAC,SAAS,oBAAsB,CAC1B,CACT,CAAC;IACJ,CAAC,CAAC;IACF,IAAM,sBAAsB,GAAG;QAC7B,OAAO,CACL,oBAAC,aAAK,IAAC,KAAK,EAAE,mBAAU,EAAE,GAAG,EAAE,CAAC;YAC9B,oBAAC,KAAK,gBAAc;YACpB,oBAAC,MAAM,iBAAgB;YACvB,oBAAC,OAAO,kBAAkB;YAC1B,oBAAC,UAAU,sBAAyB;YACpC,oBAAC,OAAO,kBAAkB;YAC1B,oBAAC,aAAa,wBAA8B,CACtC,CACT,CAAC;IACJ,CAAC,CAAC;IACF,IAAM,kBAAkB,GAAG;QACzB,OAAO,CACL,oBAAC,aAAK,IAAC,KAAK,EAAE,mBAAU,EAAE,GAAG,EAAE,CAAC;YAC9B,oBAAC,KAAK,gBAAc;YACpB,oBAAC,OAAO,kBAAkB;YAC1B,oBAAC,SAAS,oBAAsB;YAChC,oBAAC,UAAU,sBAAyB;YACpC,oBAAC,OAAO,kBAAkB;YAC1B,oBAAC,aAAa,wBAA8B,CACtC,CACT,CAAC;IACJ,CAAC,CAAC;IAEF,QAAQ,uBAAQ,CAAC,EAAE,EAAE;QACnB,KAAK,SAAS;YACZ,OAAO,CACL,oBAAC,mBAAI;gBACH,oBAAC,gBAAgB,OAAG;gBACpB,oBAAC,sBAAsB,OAAG,CACrB,CACR,CAAC;QACJ,KAAK,KAAK;YACR,OAAO,CACL,oBAAC,mBAAI;gBACH,oBAAC,gBAAgB,OAAG;gBACpB,oBAAC,kBAAkB,OAAG,CACjB,CACR,CAAC;QACJ;YACE,OAAO,CACL,oBAAC,mBAAI;gBACH,oBAAC,gBAAgB,OAAG;gBACpB,oBAAC,eAAe,OAAG,CACd,CACR,CAAC;KACL;AACH,CAAC,CAAC;AA3EW,QAAA,cAAc,kBA2EzB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.56.1",
+  "version": "0.57.0",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -27,17 +27,17 @@
   "dependencies": {
     "@fluentui-react-native/android-theme": ">=0.5.4 <1.0.0",
     "@fluentui-react-native/apple-theme": ">=0.9.10 <1.0.0",
-    "@fluentui-react-native/badge": ">=0.0.13 <1.0.0",
+    "@fluentui-react-native/badge": ">=0.0.14 <1.0.0",
     "@fluentui-react-native/button": ">=0.22.4 <1.0.0",
     "@fluentui-react-native/default-theme": ">=0.9.10 <1.0.0",
     "@fluentui-react-native/experimental-activity-indicator": ">=0.5.13 <1.0.0",
     "@fluentui-react-native/experimental-avatar": ">=0.14.5 <1.0.0",
     "@fluentui-react-native/experimental-button": "0.15.4",
-    "@fluentui-react-native/experimental-checkbox": "0.7.0",
+    "@fluentui-react-native/experimental-checkbox": "0.8.0",
     "@fluentui-react-native/experimental-native-date-picker": ">=0.4.1 <1.0.0",
     "@fluentui-react-native/experimental-expander": "0.3.14",
     "@fluentui-react-native/experimental-menu-button": ">=0.3.13 <1.0.0",
-    "@fluentui-react-native/experimental-shimmer": "0.6.16",
+    "@fluentui-react-native/experimental-shimmer": "0.6.17",
     "@fluentui-react-native/experimental-tabs": "0.4.23",
     "@fluentui-react-native/experimental-text": ">=0.7.14 <1.0.0",
     "@fluentui-react-native/framework": ">=0.7.14 <1.0.0",

package/src/E2E/common/NativeTesting/pages/NativeTestingPageObject.win.ts

@@ -0,0 +1,56 @@
+import { BasePage, By } from '../../../common/BasePage.win';
+
+const ScrollViewTestId = 'SCROLLVIEW_TEST_ID';
+
+class NativeTestingPageObject extends BasePage {
+  waitForScrollViewDisplayed(timeout?: number): void {
+    browser.waitUntil(
+      () => {
+        return this.doesScrollViewParentExist();
+      },
+      {
+        timeout: timeout ?? this.waitForPageTimeout,
+        timeoutMsg:
+          'For testing purposes we require that the root view contains a non-empty, immutable ScrollView of buttons that navigate to test pages.',
+        interval: 1000,
+      },
+    );
+  }
+
+  doesScrollViewParentExist(): boolean {
+    return this._scrollViewParent.isExisting();
+  }
+
+  /* Validate the Children of the ScrollView stay intact. The children are the buttons that
+   * navigate to each test page. Also, validate these children exist with the proper testId format */
+  validateScrollViewChildren(): boolean {
+    // Gets all the children
+    const testChildren = this._scrollViewParent.$$('//*');
+    let foundValidButton = false;
+
+    // Ensure the testID (maps 1:1 to automationId) properties of the button children match the defined testing format
+    const reg = new RegExp('Homepage_[a-zA-Z]*_Button');
+
+    // Iterate through children. Validate at least one valid button exists as a child to the ScrollView.
+    // If automationId is found in the wrong format, return false.
+    for (const child of testChildren) {
+      const autoId = child.getAttribute('AutomationId');
+      if (autoId && autoId !== ScrollViewTestId) {
+        if (autoId.match(reg)) {
+          foundValidButton = true;
+        } else {
+          // The correct format for testId was not followed. Return a failure.
+          return false;
+        }
+      }
+    }
+
+    return foundValidButton;
+  }
+
+  get _scrollViewParent() {
+    return By(ScrollViewTestId);
+  }
+}
+
+export default new NativeTestingPageObject();

package/src/E2E/common/NativeTesting/specs/NativeTesting.spec.win.ts

@@ -0,0 +1,28 @@
+import NavigateAppPage from '../../../common/NavigateAppPage.win';
+import NativeTestingPageObject from '../pages/NativeTestingPageObject.win';
+import { PAGE_TIMEOUT, BOOT_APP_TIMEOUT } from '../../../common/consts';
+
+describe('Native Safety Check Testing Initialization', () => {
+  it('Wait for app load', () => {
+    NavigateAppPage.waitForPageDisplayed(BOOT_APP_TIMEOUT);
+    expect(NavigateAppPage.isPageLoaded()).toBeTruthy(NavigateAppPage.ERRORMESSAGE_APPLOAD);
+  });
+
+  // The ScrollView in testing is the one that contains all the buttons that navigate to each component's
+  // test page. This is vital for our native testing, as we grab this ScrollView on the native side and
+  // to climb down the UI tree and find all of FURN's testable components.
+  // We need to make sure this ScrollView:
+  //    1) Continues to parent all the test buttons
+  //    2) Keeps testID='SCROLLVIEW_TEST_ID'
+  it('Validate the ScrollView containing all the navigational buttons exists', () => {
+    NativeTestingPageObject.waitForScrollViewDisplayed(PAGE_TIMEOUT);
+    expect(NativeTestingPageObject.doesScrollViewParentExist()).toBeTruthy();
+  });
+
+  // In addition to existing, we want to ensure the Children of the ScrollView stay intact. The children are the buttons that
+  // navigate to each test page. Validate these children exist with the proper testId format.
+  it('Validate the children of ScrollView are the buttons that navigate to each test page with proper automationId', () => {
+    NativeTestingPageObject.waitForScrollViewDisplayed(PAGE_TIMEOUT);
+    expect(NativeTestingPageObject.validateScrollViewChildren()).toBeTruthy();
+  });
+});

package/src/FluentTester/FluentTester.tsx

@@ -44,6 +44,16 @@ const getThemedStyles = themedStyleSheet((t: Theme) => {
   };
 });
 
+const HeaderSeparator = Separator.customize((t) => ({
+  color: t.colors.bodyFrameDivider,
+  separatorWidth: 2,
+}));
+
+const TestListSeparator = Separator.customize((t) => ({
+  color: t.colors.menuDivider,
+  separatorWidth: 2,
+}));
+
 export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props: FluentTesterProps) => {
   // sort tests alphabetically by name
   const sortedTestComponents = props.enabledTests.sort((a, b) => a.name.localeCompare(b.name));
@@ -66,16 +76,6 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:
 
   const TestComponent = selectedTestIndex == -1 ? EmptyComponent : sortedTestComponents[selectedTestIndex].component;
 
-  const HeaderSeparator = Separator.customize((t) => ({
-    color: t.colors.bodyFrameDivider,
-    separatorWidth: 2,
-  }));
-
-  const TestListSeparator = Separator.customize((t) => ({
-    color: t.colors.menuDivider,
-    separatorWidth: 2,
-  }));
-
   const themedStyles = getThemedStyles(useTheme());
 
   const RootView = Platform.select({

package/src/FluentTester/TestComponents/ActivityIndicator/ActivityIndicatorTest.tsx

@@ -7,14 +7,30 @@ import { Test, TestSection, PlatformStatus } from '../Test';
 import { ACTIVITY_INDICATOR_TESTPAGE } from './consts';
 import { View, Switch } from 'react-native';
 
+const basicActivityIndicator: React.FunctionComponent = () => {
+  const [animating, setAnimating] = React.useState(true);
+  const [hidesWhenStopped, setHidesWhenStopped] = React.useState(true);
+
+  return (
+    <Stack style={stackStyle}>
+      <View style={commonStyles.root}>
+        <View style={commonStyles.settings}>
+          <View style={commonStyles.switch}>
+            <Text>Animating</Text>
+            <Switch value={animating} onValueChange={setAnimating} />
+          </View>
+          <View style={commonStyles.switch}>
+            <Text>HidesWhenStopped</Text>
+            <Switch value={hidesWhenStopped} onValueChange={setHidesWhenStopped} />
+          </View>
+        </View>
+        <ActivityIndicator animating={animating} hidesWhenStopped={hidesWhenStopped} />
+      </View>
+    </Stack>
+  );
+};
+
 const activityIndicatorTest: React.FunctionComponent = () => {
-  /** Customize doesn't do anything
-   * Tried having tokens not be props, but didn't work
-   * Not sure how to test/check where the tokens are passed through other than just looking at the final render
-   */
-  const CustomizedActivityIndicator = ActivityIndicator.customize({
-    activityIndicatorColor: 'orange',
-  });
   return (
     <Stack style={stackStyle}>
       <Text>Extra Small</Text>
@@ -32,38 +48,27 @@ const activityIndicatorTest: React.FunctionComponent = () => {
       <ActivityIndicator size="xLarge" lineThickness="large" />
       <Text>Color props</Text>
       <ActivityIndicator activityIndicatorColor="orange" accessibilityLabel="orange progressbar" />
-      <Text>Customized Activity Indicator (currently not working)</Text>
-      <CustomizedActivityIndicator />
     </Stack>
   );
 };
 
-const basicActivityIndicator: React.FunctionComponent = () => {
-  const [animating, setAnimating] = React.useState(true);
-  const [hidesWhenStopped, setHidesWhenStopped] = React.useState(true);
+const CustomizedActivityIndicator = ActivityIndicator.customize({
+  activityIndicatorColor: 'orange',
+  size: 'large',
+});
 
+const customizedActivityIndicatorTest: React.FunctionComponent = () => {
   return (
     <Stack style={stackStyle}>
-      <View style={commonStyles.root}>
-        <View style={commonStyles.settings}>
-          <View style={commonStyles.switch}>
-            <Text>Animating</Text>
-            <Switch value={animating} onValueChange={setAnimating} />
-          </View>
-          <View style={commonStyles.switch}>
-            <Text>HidesWhenStopped</Text>
-            <Switch value={hidesWhenStopped} onValueChange={setHidesWhenStopped} />
-          </View>
-        </View>
-        <ActivityIndicator animating={animating} hidesWhenStopped={hidesWhenStopped} />
-      </View>
+      <Text>Customized Activity Indicator</Text>
+      <CustomizedActivityIndicator />
     </Stack>
   );
 };
 
 const activityIndicatorSections: TestSection[] = [
   {
-    name: 'BaseActivityIndicator',
+    name: 'Base ActivityIndicator',
     testID: ACTIVITY_INDICATOR_TESTPAGE,
     component: basicActivityIndicator,
   },
@@ -72,6 +77,11 @@ const activityIndicatorSections: TestSection[] = [
     testID: ACTIVITY_INDICATOR_TESTPAGE,
     component: activityIndicatorTest,
   },
+  {
+    name: 'Customized ActivityIndicator',
+    testID: ACTIVITY_INDICATOR_TESTPAGE,
+    component: customizedActivityIndicatorTest,
+  },
 ];
 
 export const ActivityIndicatorTest: React.FunctionComponent = () => {

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

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { JSAvatar, IconAlignment, JSAvatarTokens } from '@fluentui-react-native/experimental-avatar';
+import { JSAvatar, IconAlignment } from '@fluentui-react-native/experimental-avatar';
 import { Switch, View, Text, TextInput, TextStyle } from 'react-native';
 import { Slider } from '../Common/Slider';
 import { steveBallmerPhotoUrl } from './../PersonaCoin/styles';
@@ -29,36 +29,30 @@ export const CustomizeUsage: React.FunctionComponent = () => {
     borderColor: theme.colors.inputBorder,
   };
 
-  const tokens: JSAvatarTokens = {};
-  if (coinColor) {
-    tokens.backgroundColor = coinColor;
-  }
-  if (textColor) {
-    tokens.color = textColor;
-  }
-  if (horizontalAlignment) {
-    tokens.horizontalIconAlignment = horizontalAlignment;
-  }
-  if (verticalAlignment) {
-    tokens.verticalIconAlignment = verticalAlignment;
-  }
-  if (iconSize) {
-    tokens.iconSize = iconSize;
-  }
-  if (iconStrokeWidth) {
-    tokens.iconStrokeWidth = iconStrokeWidth;
-  }
-  if (iconStrokeColor) {
-    tokens.iconStrokeColor = iconStrokeColor;
-  }
-  if (initialsSize) {
-    tokens.initialsSize = initialsSize;
-  }
-  if (physicalSize) {
-    tokens.avatarSize = physicalSize;
-  }
-
-  const CustomizedAvatar = JSAvatar.customize(tokens);
+  const CustomizedAvatar = React.useMemo(() => {
+    const tokens = {
+      backgroundColor: coinColor,
+      color: textColor,
+      horizontalIconAlignment: horizontalAlignment,
+      verticalIconAlignment: verticalAlignment,
+      iconSize: iconSize,
+      iconStrokeWidth: iconStrokeWidth,
+      iconStrokeColor: iconStrokeColor,
+      initialsSize: initialsSize,
+      avatarSize: physicalSize,
+    };
+    return JSAvatar.customize(tokens);
+  }, [
+    coinColor,
+    textColor,
+    horizontalAlignment,
+    verticalAlignment,
+    iconSize,
+    iconStrokeWidth,
+    iconStrokeColor,
+    initialsSize,
+    physicalSize,
+  ]);
 
   return (
     <View style={commonStyles.root}>

package/src/FluentTester/TestComponents/Badge/BadgeTest.tsx

@@ -8,6 +8,17 @@ import BadgeSvg from './oof.svg';
 
 import { SvgIconProps } from '@fluentui-react-native/icon';
 
+const BadgeNoBorder = Badge.customize({
+  borderColor: 'transparent',
+  borderWidth: 0,
+});
+
+const StyledBadge = Badge.customize({
+  backgroundColor: 'yellow',
+  borderColor: '#f09',
+  borderWidth: 4,
+});
+
 export const BasicBadge: React.FunctionComponent = () => {
   const svgProps: SvgIconProps = {
     src: BadgeSvg,
@@ -20,17 +31,6 @@ export const BasicBadge: React.FunctionComponent = () => {
     fontSize: 16,
   };
 
-  const BadgeNoBorder = Badge.customize({
-    borderColor: 'transparent',
-    borderWidth: 0,
-  });
-
-  const StyledBadge = Badge.customize({
-    backgroundColor: 'yellow',
-    borderColor: '#f09',
-    borderWidth: 4,
-  });
-
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
   const iconProps = { svgSource: svgProps, width: 20, height: 20 };
 

package/src/FluentTester/TestComponents/Checkbox/CheckboxTest.tsx

@@ -53,41 +53,41 @@ const otherCheckbox: React.FunctionComponent = () => {
   );
 };
 
-const tokenCheckbox: React.FunctionComponent = () => {
-  const CircularCheckbox = Checkbox.customize({ tokens: { borderRadius: 50 } });
-
-  const CircleColorCheckbox = Checkbox.customize({
-    tokens: { borderRadius: 50, checkboxBackgroundColor: 'white' },
-    _overrides: {
-      checked: {
-        tokens: {
-          checkboxBackgroundColor: 'green',
-          checkboxBorderColor: 'green',
-          checkmarkColor: 'white',
-        },
+const CircularCheckbox = Checkbox.customize({ tokens: { borderRadius: 50 } });
+
+const CircleColorCheckbox = Checkbox.customize({
+  tokens: { borderRadius: 50, checkboxBackgroundColor: 'white' },
+  _overrides: {
+    checked: {
+      tokens: {
+        checkboxBackgroundColor: 'green',
+        checkboxBorderColor: 'green',
+        checkmarkColor: 'white',
       },
-      focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-      hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
-      pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
     },
-  });
-
-  const HoverCheckbox = Checkbox.customize({
-    _overrides: {
-      checked: {
-        tokens: {
-          checkboxBackgroundColor: 'black',
-          checkmarkColor: 'white',
-        },
+    focused: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
+    hovered: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundHovered' } },
+    pressed: { tokens: { checkboxBackgroundColor: 'menuItemBackgroundPressed' } },
+  },
+});
+
+const HoverCheckbox = Checkbox.customize({
+  _overrides: {
+    checked: {
+      tokens: {
+        checkboxBackgroundColor: 'black',
+        checkmarkColor: 'white',
       },
-      hovered: {
-        tokens: {
-          checkmarkVisibility: 1,
-        },
+    },
+    hovered: {
+      tokens: {
+        checkmarkVisibility: 1,
       },
     },
-  });
+  },
+});
 
+const tokenCheckbox: React.FunctionComponent = () => {
   const [checkboxColor, setCheckboxColor] = React.useState('blue');
   const [checkmarkColor, setCheckmarkColor] = React.useState('white');
 

package/src/FluentTester/TestComponents/CheckboxExperimental/CheckboxTest.tsx

@@ -20,8 +20,8 @@ const basicCheckbox: React.FunctionComponent = () => {
       <Checkbox label="Disabled checkbox" disabled />
       <Checkbox label="Disabled checked checkbox" defaultChecked disabled />
       <Checkbox label="Checkbox will display a tooltip" tooltip="This is a tooltip" />
-      <Checkbox label="A circular checkbox" circular />
-      <Checkbox label="A circular checkbox" labelPosition="before" />
+      <Checkbox label="A circular checkbox" shape="circular" />
+      <Checkbox label="A checkbox with label placed before" labelPosition="before" />
     </View>
   );
 };
@@ -61,29 +61,29 @@ const otherCheckbox: React.FunctionComponent = () => {
   );
 };
 
-const tokenCheckbox: React.FunctionComponent = () => {
-  const CircleColorCheckbox = Checkbox.customize({
-    checkboxBackgroundColor: 'white',
-    checked: {
-      checkboxBackgroundColor: 'green',
-      checkboxBorderColor: 'green',
-      checkmarkColor: 'white',
-    },
-    focused: { checkboxBackgroundColor: 'menuItemBackgroundHovered' },
-    hovered: { checkboxBackgroundColor: 'menuItemBackgroundHovered' },
-    pressed: { checkboxBackgroundColor: 'menuItemBackgroundPressed' },
-  });
-
-  const HoverCheckbox = Checkbox.customize({
-    checked: {
-      checkboxBackgroundColor: 'black',
-      checkmarkColor: 'white',
-    },
-    hovered: {
-      checkmarkOpacity: 1,
-    },
-  });
+const CircleColorCheckbox = Checkbox.customize({
+  checkboxBackgroundColor: 'white',
+  checked: {
+    checkboxBackgroundColor: 'green',
+    checkboxBorderColor: 'green',
+    checkmarkColor: 'white',
+  },
+  focused: { checkboxBackgroundColor: 'menuItemBackgroundHovered' },
+  hovered: { checkboxBackgroundColor: 'menuItemBackgroundHovered' },
+  pressed: { checkboxBackgroundColor: 'menuItemBackgroundPressed' },
+});
+
+const HoverCheckbox = Checkbox.customize({
+  checked: {
+    checkboxBackgroundColor: 'black',
+    checkmarkColor: 'white',
+  },
+  hovered: {
+    checkmarkOpacity: 1,
+  },
+});
 
+const tokenCheckbox: React.FunctionComponent = () => {
   const [checkboxColor, setCheckboxColor] = React.useState('blue');
   const [checkmarkColor, setCheckmarkColor] = React.useState('white');
 
@@ -106,7 +106,12 @@ const tokenCheckbox: React.FunctionComponent = () => {
   return (
     <View>
       <HoverCheckbox label="A checkbox with checkmark visible on hover" onChange={onChangeUncontrolled} defaultChecked={false} />
-      <CircleColorCheckbox label="A circular token-customized checkbox" circular onChange={onChangeUncontrolled} defaultChecked={true} />
+      <CircleColorCheckbox
+        label="A circular token-customized checkbox"
+        shape="circular"
+        onChange={onChangeUncontrolled}
+        defaultChecked={true}
+      />
       <BlueCheckbox
         label="Token-customized checkbox. Customizable below."
         onChange={onChangeUncontrolled}

package/src/FluentTester/TestComponents/ContextualMenu/ContextualMenuTest.tsx

@@ -232,6 +232,9 @@ const nestedContextualMenu: React.FunctionComponent = () => {
   );
 };
 
+// custom text
+const IndigoHeroBold = FURNText.customize({ tokens: { variant: 'heroStandard', fontWeight: '100', color: '#4b0082' } });
+
 const IconContextualMenu: React.FunctionComponent = () => {
   const stdBtnRef = React.useRef(null);
 
@@ -258,9 +261,6 @@ const IconContextualMenu: React.FunctionComponent = () => {
     setIsContextualMenuVisible(false);
   }, [setShowContextualMenu]);
 
-  // custom text
-  const IndigoHeroBold = FURNText.customize({ tokens: { variant: 'heroStandard', fontWeight: '100', color: '#4b0082' } });
-
   return (
     <View>
       <View style={{ flexDirection: 'row', paddingVertical: 5 }}>