@fluentui-react-native/tester 0.87.0 → 0.90.0

package/lib-commonjs/TestComponents/Test.js

@@ -7,25 +7,40 @@ var react_native_1 = require("react-native");
 var react_native_2 = require("@fluentui/react-native");
 var stack_1 = require("@fluentui-react-native/stack");
 var styles_1 = require("./Common/styles");
+var theme_types_1 = require("@fluentui-react-native/theme-types");
+var react_native_svg_1 = (0, tslib_1.__importStar)(require("react-native-svg"));
+var definitions = {
+    Production: 'Control is ready for broad partner use and to be used in production-ready scenarios.',
+    Beta: 'Control is ready for partner consumption, but not ready for production release (e.g. fixing bugs).',
+    Experimental: 'Control code checked into repo, but not ready for partner use.',
+    Backlog: 'Control is in plan and on our backlog to deliver.',
+    'N/A': 'Control is not in current plan.',
+};
 var styles = react_native_1.StyleSheet.create({
     name: {
         marginTop: 4,
     },
+    definitionHeader: {
+        marginTop: 12,
+        marginBottom: 6,
+    },
     description: {
         alignItems: 'flex-start',
         flexWrap: 'wrap',
     },
+    header: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        justifyContent: 'space-between',
+    },
     section: {
         marginTop: 12,
     },
     statusView: {
         flexDirection: 'row',
-        alignItems: 'flex-start',
+        alignItems: 'center',
         justifyContent: 'space-between',
     },
-    statusHeader: {
-        marginBottom: 6,
-    },
     statusLabel: {
         marginTop: 2,
         marginStart: 4,
@@ -34,52 +49,64 @@ var styles = react_native_1.StyleSheet.create({
         fontWeight: 'normal',
     },
 });
-// mobile platform check to not render status components.
-var isMobile = react_native_1.Platform.OS == 'android' || (react_native_1.Platform.OS == 'ios' && !react_native_1.Platform.isPad);
 var Test = function (props) {
+    var _a = React.useState(false), showStatus = _a[0], setShowStatus = _a[1];
+    var toggleSvg = function () {
+        var plusPath = 'M6.5 1.75C6.5 1.33579 6.16421 1 5.75 1C5.33579 1 5 1.33579 5 1.75V5H1.75C1.33579 5 1 5.33579 1 5.75C1 6.16421 1.33579 6.5 1.75 6.5H5V9.75C5 10.1642 5.33579 10.5 5.75 10.5C6.16421 10.5 6.5 10.1642 6.5 9.75V6.5H9.75C10.1642 6.5 10.5 6.16421 10.5 5.75C10.5 5.33579 10.1642 5 9.75 5H6.5V1.75Z';
+        var minusPath = 'M2.75 5.25h6.5s0.75 0 0.75 0.75v0s0 0.75 -0.75 0.75h-6.5s-0.75 0 -0.75 -0.75v0s0 -0.75 0.75 -0.75';
+        var path = showStatus ? minusPath : plusPath;
+        return (React.createElement(react_native_svg_1.default, null,
+            React.createElement(react_native_svg_1.G, null,
+                React.createElement(react_native_svg_1.Path, { d: path, fill: "black" }))));
+    };
+    var svgProps = {
+        src: toggleSvg,
+    };
+    var theme = (0, theme_types_1.useTheme)();
+    var fontFamily = theme.typography.families.primary;
+    var plusCodepoint = 0x2795;
+    var minusCodepoint = 0x2796;
+    var fontIconProps = {
+        fontFamily: fontFamily,
+        codepoint: showStatus ? minusCodepoint : plusCodepoint,
+        fontSize: 10,
+    };
+    var toggleIconProps = react_native_1.Platform.OS === 'windows' ? { fontSource: fontIconProps } : { svgSource: svgProps, width: 12, height: 12 };
     return (React.createElement(react_native_1.View, { testID: "ScrollViewAreaForComponents" },
-        React.createElement(react_native_2.Text, { style: [styles.name], variant: "heroSemibold" }, props.name),
+        React.createElement(react_native_1.View, { style: styles.header },
+            React.createElement(react_native_2.Text, { style: [styles.name], variant: "heroSemibold" }, props.name),
+            props.spec && React.createElement(react_native_2.Link, { url: props.spec, content: "SPEC" })),
         React.createElement(react_native_2.Separator, null),
         React.createElement(stack_1.Stack, { style: styles_1.stackStyle },
             React.createElement(react_native_2.Text, { style: styles.description }, props.description)),
-        !isMobile && (React.createElement(stack_1.Stack, { style: styles_1.stackStyle },
+        React.createElement(stack_1.Stack, { style: styles_1.stackStyle },
             React.createElement(react_native_1.View, { style: styles.statusView },
-                React.createElement(stack_1.Stack, null,
-                    React.createElement(react_native_2.Text, { style: [styles.statusHeader], variant: "headerStandard" }, "Platform Status"),
-                    React.createElement(react_native_2.Text, { style: [styles.statusLabel], variant: "bodySemibold" },
-                        "Win32: ",
-                        React.createElement(react_native_2.Text, { style: styles.status }, props.status.win32Status)),
-                    React.createElement(react_native_2.Text, { style: [styles.statusLabel], variant: "bodySemibold" },
-                        "UWP: ",
-                        React.createElement(react_native_2.Text, { style: styles.status }, props.status.uwpStatus)),
-                    React.createElement(react_native_2.Text, { style: [styles.statusLabel], variant: "bodySemibold" },
-                        "iOS: ",
-                        React.createElement(react_native_2.Text, { style: styles.status }, props.status.iosStatus)),
-                    React.createElement(react_native_2.Text, { style: [styles.statusLabel], variant: "bodySemibold" },
-                        "macOS: ",
-                        React.createElement(react_native_2.Text, { style: styles.status }, props.status.macosStatus)),
-                    React.createElement(react_native_2.Text, { style: [styles.statusLabel], variant: "bodySemibold" },
-                        "Android: ",
-                        React.createElement(react_native_2.Text, { style: styles.status }, props.status.androidStatus))),
-                React.createElement(stack_1.Stack, { style: styles_1.stackStyle },
-                    React.createElement(react_native_2.Text, { style: [styles.statusHeader], variant: "headerStandard" }, "Status Definitions"),
-                    React.createElement(react_native_2.Text, { style: [styles.statusLabel], variant: "bodySemibold" },
-                        "Production:",
-                        ' ',
-                        React.createElement(react_native_2.Text, { style: styles.status }, "Control is ready for broad partner use and to be used in production-ready scenarios.")),
-                    React.createElement(react_native_2.Text, { style: [styles.statusLabel], variant: "bodySemibold" },
-                        "Beta:",
-                        ' ',
-                        React.createElement(react_native_2.Text, { style: styles.status }, "Control is ready for partner consumption, but not ready for production release (e.g. fixing bugs).")),
-                    React.createElement(react_native_2.Text, { style: [styles.statusLabel], variant: "bodySemibold" },
-                        "Experimental: ",
-                        React.createElement(react_native_2.Text, { style: styles.status }, "Control code checked into repo, but not ready for partner use.")),
-                    React.createElement(react_native_2.Text, { style: [styles.statusLabel], variant: "bodySemibold" },
-                        "Backlog: ",
-                        React.createElement(react_native_2.Text, { style: styles.status }, "Control is in plan and on our backlog to deliver.")),
-                    React.createElement(react_native_2.Text, { style: [styles.statusLabel], variant: "bodySemibold" },
-                        "N/A: ",
-                        React.createElement(react_native_2.Text, { style: styles.status }, "Control is not in current plan.")))))),
+                React.createElement(react_native_2.Text, { variant: "headerStandard" }, "Platform Status"),
+                React.createElement(react_native_2.ToggleButton, { iconOnly: true, icon: toggleIconProps, onClick: function () { return setShowStatus(!showStatus); } })),
+            showStatus && (React.createElement(React.Fragment, null,
+                React.createElement(react_native_2.Text, { style: [styles.statusLabel], variant: "bodySemibold" },
+                    "Win32: ",
+                    React.createElement(react_native_2.Text, { style: styles.status }, props.status.win32Status)),
+                React.createElement(react_native_2.Text, { style: [styles.statusLabel], variant: "bodySemibold" },
+                    "UWP: ",
+                    React.createElement(react_native_2.Text, { style: styles.status }, props.status.uwpStatus)),
+                React.createElement(react_native_2.Text, { style: [styles.statusLabel], variant: "bodySemibold" },
+                    "iOS: ",
+                    React.createElement(react_native_2.Text, { style: styles.status }, props.status.iosStatus)),
+                React.createElement(react_native_2.Text, { style: [styles.statusLabel], variant: "bodySemibold" },
+                    "macOS: ",
+                    React.createElement(react_native_2.Text, { style: styles.status }, props.status.macosStatus)),
+                React.createElement(react_native_2.Text, { style: [styles.statusLabel], variant: "bodySemibold" },
+                    "Android: ",
+                    React.createElement(react_native_2.Text, { style: styles.status }, props.status.androidStatus)),
+                React.createElement(react_native_2.Text, { style: [styles.definitionHeader], variant: "headerStandard" }, "Status Definitions"),
+                Object.entries(definitions).map(function (_a) {
+                    var key = _a[0], value = _a[1];
+                    return (React.createElement(react_native_2.Text, { style: [styles.statusLabel], variant: "bodySemibold", key: key },
+                        key,
+                        ": ",
+                        React.createElement(react_native_2.Text, { style: styles.status }, value)));
+                })))),
         props.sections.map(function (section, index) {
             var TestComponent = section.component;
             return (React.createElement(react_native_1.View, { key: index },

package/lib-commonjs/TestComponents/Test.js.map

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

package/lib-commonjs/TestComponents/Text/TextTest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TextTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Text/TextTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA0B/B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,iBAY5B,CAAC"}
+{"version":3,"file":"TextTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Text/TextTest.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AA0B/B,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,iBAc5B,CAAC"}

package/lib-commonjs/TestComponents/Text/TextTest.js

@@ -35,7 +35,8 @@ var TextTest = function () {
         androidStatus: 'Beta',
     };
     var description = 'Text is a component for displaying text. You can use Text to standardize text across your app.';
-    return React.createElement(Test_1.Test, { name: "Text Test", description: description, sections: textSections, status: status });
+    var spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/text/SPEC.md';
+    return React.createElement(Test_1.Test, { name: "Text Test", description: description, spec: spec, sections: textSections, status: status });
 };
 exports.TextTest = TextTest;
 //# sourceMappingURL=TextTest.js.map

package/lib-commonjs/TestComponents/Text/TextTest.js.map

@@ -1 +1 @@
-{"version":3,"file":"TextTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Text/TextTest.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,iDAAgD;AAChD,mDAAkD;AAClD,mDAAkD;AAClD,6CAA4C;AAC5C,gCAA4D;AAE5D,IAAM,YAAY,GAAkB;IAClC;QACE,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,6BAAa;KACzB;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,SAAS,EAAE,+BAAc;KAC1B;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,SAAS,EAAE,+BAAc;KAC1B;IACD;QACE,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,yBAAW;KACvB;CACF,CAAC;AAEK,IAAM,QAAQ,GAA4B;IAC/C,IAAM,MAAM,GAAmB;QAC7B,WAAW,EAAE,cAAc;QAC3B,SAAS,EAAE,cAAc;QACzB,SAAS,EAAE,cAAc;QACzB,WAAW,EAAE,cAAc;QAC3B,aAAa,EAAE,MAAM;KACtB,CAAC;IAEF,IAAM,WAAW,GAAG,gGAAgG,CAAC;IAErH,OAAO,oBAAC,WAAI,IAAC,IAAI,EAAC,WAAW,EAAC,WAAW,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AACrG,CAAC,CAAC;AAZW,QAAA,QAAQ,YAYnB"}
+{"version":3,"file":"TextTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Text/TextTest.tsx"],"names":[],"mappings":";;;;AAAA,wDAA+B;AAC/B,iDAAgD;AAChD,mDAAkD;AAClD,mDAAkD;AAClD,6CAA4C;AAC5C,gCAA4D;AAE5D,IAAM,YAAY,GAAkB;IAClC;QACE,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,6BAAa;KACzB;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,SAAS,EAAE,+BAAc;KAC1B;IACD;QACE,IAAI,EAAE,iBAAiB;QACvB,SAAS,EAAE,+BAAc;KAC1B;IACD;QACE,IAAI,EAAE,gBAAgB;QACtB,SAAS,EAAE,yBAAW;KACvB;CACF,CAAC;AAEK,IAAM,QAAQ,GAA4B;IAC/C,IAAM,MAAM,GAAmB;QAC7B,WAAW,EAAE,cAAc;QAC3B,SAAS,EAAE,cAAc;QACzB,SAAS,EAAE,cAAc;QACzB,WAAW,EAAE,cAAc;QAC3B,aAAa,EAAE,MAAM;KACtB,CAAC;IAEF,IAAM,WAAW,GAAG,gGAAgG,CAAC;IAErH,IAAM,IAAI,GAAG,+FAA+F,CAAC;IAE7G,OAAO,oBAAC,WAAI,IAAC,IAAI,EAAC,WAAW,EAAC,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,GAAI,CAAC;AACjH,CAAC,CAAC;AAdW,QAAA,QAAQ,YAcnB"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.87.0",
+  "version": "0.90.0",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -37,36 +37,36 @@
   "dependencies": {
     "@fluentui-react-native/android-theme": ">=0.11.0 <1.0.0",
     "@fluentui-react-native/apple-theme": ">=0.13.2 <1.0.0",
-    "@fluentui-react-native/avatar": "^1.1.40",
-    "@fluentui-react-native/badge": ">=0.1.23 <1.0.0",
-    "@fluentui-react-native/button": ">=0.24.16 <1.0.0",
+    "@fluentui-react-native/avatar": "^1.2.0",
+    "@fluentui-react-native/badge": ">=0.1.24 <1.0.0",
+    "@fluentui-react-native/button": ">=0.24.17 <1.0.0",
     "@fluentui-react-native/default-theme": ">=0.14.0 <1.0.0",
     "@fluentui-react-native/experimental-activity-indicator": ">=0.6.0 <1.0.0",
     "@fluentui-react-native/experimental-avatar": ">=0.16.1 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.16.16",
+    "@fluentui-react-native/experimental-button": "0.16.17",
     "@fluentui-react-native/experimental-checkbox": "0.12.10",
     "@fluentui-react-native/experimental-expander": "0.4.0",
-    "@fluentui-react-native/experimental-menu-button": ">=0.4.19 <1.0.0",
+    "@fluentui-react-native/experimental-menu-button": ">=0.4.20 <1.0.0",
     "@fluentui-react-native/experimental-native-date-picker": ">=0.7.0 <1.0.0",
-    "@fluentui-react-native/experimental-shadow": "0.2.12",
+    "@fluentui-react-native/experimental-shadow": "0.2.13",
     "@fluentui-react-native/experimental-shimmer": "0.7.0",
     "@fluentui-react-native/experimental-tabs": "0.5.9",
     "@fluentui-react-native/experimental-text": ">=0.11.1 <1.0.0",
-    "@fluentui-react-native/experimental-radio-group": "^0.2.0",
+    "@fluentui-react-native/experimental-radio-group": "^0.2.1",
     "@fluentui-react-native/framework": ">=0.8.0 <1.0.0",
     "@fluentui-react-native/icon": "0.13.4",
     "@fluentui-react-native/interactive-hooks": ">=0.18.1 <1.0.0",
-    "@fluentui-react-native/menu": "^1.0.25",
-    "@fluentui-react-native/notification": "0.16.0",
+    "@fluentui-react-native/menu": "^1.0.26",
+    "@fluentui-react-native/notification": "0.17.0",
     "@fluentui-react-native/stack": ">=0.7.3 <1.0.0",
-    "@fluentui-react-native/switch": "^0.6.1",
+    "@fluentui-react-native/switch": "^0.6.2",
     "@fluentui-react-native/text": ">=0.14.0 <1.0.0",
     "@fluentui-react-native/theme": ">=0.7.0 <1.0.0",
     "@fluentui-react-native/theme-types": ">=0.18.0 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.4.0",
     "@fluentui-react-native/theming-utils": ">=0.14.0 <1.0.0",
     "@fluentui-react-native/win32-theme": ">=0.20.1 <1.0.0",
-    "@fluentui/react-native": ">=0.32.7 <1.0.0",
+    "@fluentui/react-native": ">=0.32.8 <1.0.0",
     "@react-native-community/slider": "^4.2.0",
     "@react-native-menu/menu": "^0.1.2",
     "@react-native-picker/picker": "^2.2.1",

package/src/TestComponents/Avatar/AvatarTest.tsx

@@ -33,5 +33,7 @@ export const AvatarTest: React.FunctionComponent = () => {
   const description =
     'AvatarView is a visual representation of a user, entity, or group. If an image is supplied, it is cropped to a circle of the requested size. If an image is not supplied, initials are extracted from the given name and email address provided and displayed on a colorful background.';
 
-  return <Test name="Avatar Test" description={description} sections={avatarSections} status={status} />;
+  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Avatar/SPEC.md';
+
+  return <Test name="Avatar Test" description={description} spec={spec} sections={avatarSections} status={status} />;
 };

package/src/TestComponents/Avatar/CustomizedAvatar.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useMemo } from 'react';
-import { Avatar, AvatarSize } from '@fluentui-react-native/avatar';
+import { Avatar, AvatarColors, AvatarSize, getJavaHashCode } from '@fluentui-react-native/avatar';
 import { View, Text, TextInput, Platform } from 'react-native';
 import { steveBallmerPhotoUrl } from './../PersonaCoin/styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
@@ -65,6 +65,9 @@ export const CustomizeUsage: React.FunctionComponent = () => {
     viewBox: '0 0 500 500',
   };
 
+  const useJavaHashCode = ['ios', 'macos', 'android'].includes(Platform.OS);
+  const hashedColor = AvatarColors[getJavaHashCode(name) % (AvatarColors.length - 3)];
+
   return (
     <View style={commonStyles.root}>
       <View style={commonStyles.settings}>
@@ -247,6 +250,24 @@ export const CustomizeUsage: React.FunctionComponent = () => {
           ringInnerGap={parseInt(ringInnerGap)}
         />
       </View>
+      {useJavaHashCode && (
+        <View style={{ marginLeft: 20 }}>
+          <Text>Avatar with hashed color</Text>
+          <Avatar
+            active="active"
+            activeAppearance="ring"
+            avatarColor={hashedColor}
+            initials={showInitials ? initials : undefined}
+            name={showInitials ? name : undefined}
+            ringBackgroundColor={ringBackgroundColor}
+            ringColor={ringColor}
+            ringThickness={parseInt(ringThickness)}
+            size={parseInt(size) as AvatarSize}
+            transparentRing={!showRing}
+            ringInnerGap={parseInt(ringInnerGap)}
+          />
+        </View>
+      )}
     </View>
   );
 };

package/src/TestComponents/Badge/BadgeTest.tsx

@@ -38,5 +38,7 @@ export const BadgeTest: React.FunctionComponent = () => {
   const description =
     'A badge is an additional visual descriptor for UI elements. It can be used to denote numerical value, status or general information.\n Included in this spec are base properties for usage in all badge scenarios. Reference properties for other badge types i.e. size, layout, and style variations';
 
-  return <Test name="Badge Test" description={description} sections={badgeSections} status={status}></Test>;
+  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/experimental/Badge/SPEC.md';
+
+  return <Test name="Badge Test" description={description} spec={spec} sections={badgeSections} status={status} />;
 };

package/src/TestComponents/Badge/BasicBadgeTest.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 import React, { useState, useCallback } from 'react';
-import { View, Platform, Text, Image } from 'react-native';
+import { View, Platform, Text, Image, FlexStyle } from 'react-native';
 import {
   Badge,
   BadgeAppearance,
@@ -25,15 +25,12 @@ const badgeSizes: BadgeSize[] = [...BadgeSizes];
 const badgeAppearances: BadgeAppearance[] = [...BadgeAppearances];
 const badgeIconPositions = ['before', 'after'];
 
-const BadgeNoBorder = Badge.customize({
-  borderColor: 'transparent',
-  borderWidth: 0,
-});
-
 const StyledBadge = Badge.customize({
   backgroundColor: 'yellow',
   borderColor: '#f09',
   borderWidth: 4,
+  color: '#f07',
+  fontWeight: 'bold',
 });
 
 export const BasicBadge: React.FunctionComponent = () => {
@@ -65,10 +62,12 @@ export const BasicBadge: React.FunctionComponent = () => {
   const iconProps = { svgSource: svgProps, width: 20, height: 20 };
   const badgeConfig = {
     appearance: badgeAppearance,
-    color: badgeColor,
+    badgeColor,
+    position: 'absolute' as FlexStyle['position'],
     size,
     shape,
   };
+  const badgeContent = size === 'tiny' || size === 'extraSmall' ? '' : 'Basic badge';
 
   return (
     <View>
@@ -85,17 +84,20 @@ export const BasicBadge: React.FunctionComponent = () => {
         </>
       )}
 
-      {svgIconsEnabled && showIcon ? (
-        <Badge {...badgeConfig} icon={{ svgSource: svgProps }} iconPosition={iconPosition}>
-          Basic badge
-        </Badge>
-      ) : (
-        <Badge {...badgeConfig}>Basic badge</Badge>
-      )}
+      <View style={{ position: 'relative', backgroundColor: 'yellow', padding: 20, width: 200 }}>
+        <Text>Parent component for the Badge</Text>
+        {svgIconsEnabled && showIcon ? (
+          <Badge {...badgeConfig} icon={{ svgSource: svgProps }} iconPosition={iconPosition}>
+            {badgeContent}
+          </Badge>
+        ) : (
+          <Badge {...badgeConfig}>{badgeContent}</Badge>
+        )}
+      </View>
 
       <Text>Size</Text>
       <Badge size="tiny" shape="circular" />
-      <Badge size="extraSmall" shape="circular" />
+      <Badge size="extraSmall" shape="circular" badgeColor="red" />
       <Badge size="small">Small</Badge>
       <Badge size="medium">Medium</Badge>
       <Badge size="large">Large</Badge>
@@ -110,11 +112,10 @@ export const BasicBadge: React.FunctionComponent = () => {
           </Badge>
           <Badge appearance="outline" icon={iconProps} />
           <Badge icon={{ fontSource: { ...fontBuiltInProps }, color: '#fff' }}>Badge with icon</Badge>
-          <Text>Customized Badge</Text>
-          <BadgeNoBorder appearance="outline" icon={iconProps} />
         </>
       )}
       <StyledBadge appearance="outline">Styled badge</StyledBadge>
+      <StyledBadge>Styled badge</StyledBadge>
     </View>
   );
 };

package/src/TestComponents/Badge/CounterBadgeTest.tsx

@@ -22,9 +22,9 @@ export const CounterBadgeTest: React.FunctionComponent = () => {
       <CounterBadge count={0}></CounterBadge>
       <Text>And here is the Badge with showZero = true</Text>
       <CounterBadge count={0} showZero={true}></CounterBadge>
-      <CounterBadge color="informative" count={777}></CounterBadge>
-      <CounterBadge color="important" overflowCount={1000} count={777}></CounterBadge>
-      <CounterBadge color="danger" overflowCount={1000} count={1500}></CounterBadge>
+      <CounterBadge badgeColor="informative" count={777}></CounterBadge>
+      <CounterBadge badgeColor="important" overflowCount={1000} count={777}></CounterBadge>
+      <CounterBadge badgeColor="danger" overflowCount={1000} count={1500}></CounterBadge>
       <CounterBadge count={13}></CounterBadge>
       <CounterBadge count={13}>CounterBadge</CounterBadge>
       {svgIconsEnabled && <CounterBadge count={17} icon={{ svgSource: svgProps }} iconPosition="after" />}

package/src/TestComponents/Badge/E2EBadgeTest.tsx

@@ -6,7 +6,7 @@ import { BADGE_TEST_COMPONENT, BADGE_SECONDARY_TEST_COMPONENT } from './consts';
 export const E2EBadgeTest: React.FunctionComponent = () => {
   return (
     <View>
-      <Badge testID={BADGE_TEST_COMPONENT} appearance="outline" size="extraLarge" color="success" shape="square">
+      <Badge testID={BADGE_TEST_COMPONENT} appearance="outline" size="extraLarge" badgeColor="success" shape="square">
         Basic Badge
       </Badge>
       <PresenceBadge testID={BADGE_SECONDARY_TEST_COMPONENT} status="available" outOfOffice={true} />

package/src/TestComponents/Badge/PresenceBadgeTest.tsx

@@ -1,24 +1,36 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-import React from 'react';
+import React, { useState, useCallback } from 'react';
 import { View, Platform, Text } from 'react-native';
-import { PresenceBadge } from '@fluentui-react-native/badge';
+import { PresenceBadge, BadgeSize, BadgeSizes } from '@fluentui-react-native/badge';
+import { StyledPicker } from '../Common/StyledPicker';
+import { ToggleButton } from '@fluentui/react-native';
 
+const badgeSizes: BadgeSize[] = [...BadgeSizes];
 export const PresenceBadgeTest: React.FunctionComponent = () => {
+  const [size, setSize] = useState<BadgeSize>('medium');
+  const [outOfOffice, setOutOfOffice] = useState(false);
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
 
+  const onSizeChange = useCallback((value) => setSize(value), []);
   return (
     <View>
+      <StyledPicker prompt="Size" selected={size} onChange={onSizeChange} collection={badgeSizes} />
+      <ToggleButton onClick={() => setOutOfOffice(!outOfOffice)} checked={outOfOffice}>
+        Set {outOfOffice ? ' In office' : ' Out of office'}
+      </ToggleButton>
       {svgIconsEnabled && (
         <>
           <Text>Presence Badge</Text>
-          <PresenceBadge status="available" size="extraLarge" />
-          <PresenceBadge status="available" outOfOffice={true} size="large" />
-          <PresenceBadge status="doNotDisturb" outOfOffice={true} />
-          <PresenceBadge status="away" size="small" />
-          <PresenceBadge status="busy" size="tiny" />
-          <PresenceBadge status="offline" />
-          <PresenceBadge status="outOfOffice" />
-          <PresenceBadge status="away" />
+          <View style={{ flexDirection: 'row', marginEnd: 8 }}>
+            <PresenceBadge status="available" size={size} outOfOffice={outOfOffice} />
+            <PresenceBadge status="blocked" size={size} outOfOffice={outOfOffice} />
+            <PresenceBadge status="doNotDisturb" size={size} outOfOffice={outOfOffice} />
+            <PresenceBadge status="away" size={size} outOfOffice={outOfOffice} />
+            <PresenceBadge status="busy" size={size} outOfOffice={outOfOffice} />
+            <PresenceBadge status="offline" size={size} outOfOffice={outOfOffice} />
+            <PresenceBadge status="outOfOffice" size={size} outOfOffice={outOfOffice} />
+            <PresenceBadge status="unknown" size={size} outOfOffice={outOfOffice} />
+          </View>
         </>
       )}
     </View>

package/src/TestComponents/Button/ButtonTest.tsx

@@ -68,5 +68,7 @@ export const ButtonTest: React.FunctionComponent = () => {
   const description =
     'Buttons are best used to enable a user to commit a change or complete steps in a task. They are typically found inside forms, dialogs, panels or pages. An example of their usage is confirming the deletion of a file in a confirmation dialog.\n\nWhen considering their place in a layout, contemplate the order in which a user will flow through the UI. As an example, in a form, the individual will need to read and interact with the form fields before submiting the form. Therefore, as a general rule, the button should be placed at the bottom of the UI container (a dialog, panel, or page) which holds the related UI elements.\n\nWhile buttons can technically be used to navigate a user to another part of the experience, this is not recommended unless that navigation is part of an action or their flow.';
 
-  return <Test name="Button Test" description={description} sections={buttonSections} status={status}></Test>;
+  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Button/SPEC.md';
+
+  return <Test name="Button Test" description={description} spec={spec} sections={buttonSections} status={status} />;
 };

package/src/TestComponents/Checkbox/CheckboxTest.tsx

@@ -178,5 +178,7 @@ export const CheckboxTest: React.FunctionComponent = () => {
   const description =
     'Checkboxes give people a way to select one or more items from a group, or switch between two mutually exclusive options (checked or unchecked, on or off).';
 
-  return <Test name="Checkbox Test" description={description} sections={checkboxSections} status={status} />;
+  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Checkbox/SPEC.md';
+
+  return <Test name="Checkbox Test" description={description} spec={spec} sections={checkboxSections} status={status} />;
 };

package/src/TestComponents/Menu/MenuTest.tsx

@@ -283,5 +283,7 @@ export const MenuTest: React.FunctionComponent = () => {
   const description =
     'A Menu is an component that displays a list of options on a temporary surface. They are invoked when users interact with a button, action, or other control.';
 
-  return <Test name="Menu Test" description={description} sections={menuSections} status={status}></Test>;
+  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Menu/SPEC.md';
+
+  return <Test name="Menu Test" description={description} spec={spec} sections={menuSections} status={status} />;
 };

package/src/TestComponents/Notification/NotificationTest.tsx

@@ -282,5 +282,7 @@ export const NotificationTest: React.FunctionComponent = () => {
 
   const description = 'Testing notification component';
 
-  return <Test name="Notification Test" description={description} sections={notificationSections} status={status}></Test>;
+  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/Notification/SPEC.md';
+
+  return <Test name="Notification Test" description={description} spec={spec} sections={notificationSections} status={status} />;
 };

package/src/TestComponents/RadioGroupExperimental/RadioGroupExperimentalTest.tsx

@@ -23,7 +23,15 @@ export const RadioGroupExperimentalTest: React.FunctionComponent = () => {
   const description =
     'RadioGroup lets users select a single option from two or more choices. Each option is represented by one Radio; a user can select only one Radio in a RadioGroup.';
 
+  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/experimental/RadioGroup/SPEC.md';
+
   return (
-    <Test name="Experimental RadioGroup Test" description={description} sections={radioGroupExperimentalSections} status={status}></Test>
+    <Test
+      name="Experimental RadioGroup Test"
+      description={description}
+      spec={spec}
+      sections={radioGroupExperimentalSections}
+      status={status}
+    />
   );
 };

package/src/TestComponents/Shadow/ShadowTest.tsx

@@ -28,5 +28,7 @@ export const ShadowTest: React.FunctionComponent = () => {
 
   const description = 'A Shadow component using the Fluent Design System. Shadow components can be added to other components.';
 
-  return <Test name="Shadow Test" description={description} sections={shadowSections} status={status} />;
+  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/experimental/Shadow/SPEC.md';
+
+  return <Test name="Shadow Test" description={description} spec={spec} sections={shadowSections} status={status} />;
 };

package/src/TestComponents/Switch/Switch.tsx

@@ -125,5 +125,7 @@ export const SwitchTest: React.FunctionComponent = () => {
 
   const description = 'Switch is a control that has two mutually exclusive states.';
 
-  return <Test name="Switch Test" description={description} sections={toggleSections} status={status}></Test>;
+  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/experimental/Switch/SPEC.md';
+
+  return <Test name="Switch Test" description={description} spec={spec} sections={toggleSections} status={status} />;
 };