@fluentui-react-native/tester 0.99.6 → 0.99.8

package/CHANGELOG.json

@@ -2,7 +2,211 @@
   "name": "@fluentui-react-native/tester",
   "entries": [
     {
-      "date": "Tue, 04 Oct 2022 17:24:24 GMT",
+      "date": "Wed, 05 Oct 2022 14:33:25 GMT",
+      "tag": "@fluentui-react-native/tester_v0.99.8",
+      "version": "0.99.8",
+      "comments": {
+        "patch": [
+          {
+            "author": "vkozlova@microsoft.com",
+            "package": "@fluentui-react-native/tester",
+            "commit": "2fb2c21644fd9abb3507cc840efd81a13e54a19c",
+            "comment": "Added Shadow to CounterBadge"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/avatar to v1.2.15",
+            "commit": "2fb2c21644fd9abb3507cc840efd81a13e54a19c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/badge to v0.1.38",
+            "commit": "2fb2c21644fd9abb3507cc840efd81a13e54a19c"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 04 Oct 2022 21:09:28 GMT",
+      "tag": "@fluentui-react-native/tester_v0.99.7",
+      "version": "0.99.7",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/android-theme to v0.12.5",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/apple-theme to v0.15.3",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/avatar to v1.2.14",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/badge to v0.1.37",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/button to v0.25.5",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/default-theme to v0.16.1",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/dropdown to v0.4.5",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/experimental-activity-indicator to v0.6.7",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/experimental-avatar to v0.16.10",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/experimental-button to v0.16.32",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/experimental-checkbox to v0.12.23",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/experimental-expander to v0.4.9",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/experimental-menu-button to v0.4.37",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/experimental-radio-group to v0.5.5",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/experimental-shadow to v0.2.25",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/experimental-shimmer to v0.7.7",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/experimental-tabs to v0.5.21",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/experimental-text to v0.11.9",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/framework to v0.8.7",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/icon to v0.13.12",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/interactive-hooks to v0.18.10",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/menu to v1.0.43",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/notification to v0.17.15",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/stack to v0.7.11",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/switch to v0.6.12",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/text to v0.15.3",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui-react-native/win32-theme to v0.21.5",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          },
+          {
+            "author": "beachball",
+            "package": "@fluentui-react-native/tester",
+            "comment": "Bump @fluentui/react-native to v0.32.29",
+            "commit": "32b6348d1077759b38f33ffb00e7ab9db8d2c77c"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Tue, 04 Oct 2022 17:24:59 GMT",
       "tag": "@fluentui-react-native/tester_v0.99.6",
       "version": "0.99.6",
       "comments": {

package/CHANGELOG.md

@@ -1,12 +1,57 @@
 # Change Log - @fluentui-react-native/tester
 
-This log was last generated on Tue, 04 Oct 2022 17:24:24 GMT and should not be manually modified.
+This log was last generated on Wed, 05 Oct 2022 14:33:25 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 0.99.8
+
+Wed, 05 Oct 2022 14:33:25 GMT
+
+### Patches
+
+- Added Shadow to CounterBadge (vkozlova@microsoft.com)
+- Bump @fluentui-react-native/avatar to v1.2.15
+- Bump @fluentui-react-native/badge to v0.1.38
+
+## 0.99.7
+
+Tue, 04 Oct 2022 21:09:28 GMT
+
+### Patches
+
+- Bump @fluentui-react-native/android-theme to v0.12.5
+- Bump @fluentui-react-native/apple-theme to v0.15.3
+- Bump @fluentui-react-native/avatar to v1.2.14
+- Bump @fluentui-react-native/badge to v0.1.37
+- Bump @fluentui-react-native/button to v0.25.5
+- Bump @fluentui-react-native/default-theme to v0.16.1
+- Bump @fluentui-react-native/dropdown to v0.4.5
+- Bump @fluentui-react-native/experimental-activity-indicator to v0.6.7
+- Bump @fluentui-react-native/experimental-avatar to v0.16.10
+- Bump @fluentui-react-native/experimental-button to v0.16.32
+- Bump @fluentui-react-native/experimental-checkbox to v0.12.23
+- Bump @fluentui-react-native/experimental-expander to v0.4.9
+- Bump @fluentui-react-native/experimental-menu-button to v0.4.37
+- Bump @fluentui-react-native/experimental-radio-group to v0.5.5
+- Bump @fluentui-react-native/experimental-shadow to v0.2.25
+- Bump @fluentui-react-native/experimental-shimmer to v0.7.7
+- Bump @fluentui-react-native/experimental-tabs to v0.5.21
+- Bump @fluentui-react-native/experimental-text to v0.11.9
+- Bump @fluentui-react-native/framework to v0.8.7
+- Bump @fluentui-react-native/icon to v0.13.12
+- Bump @fluentui-react-native/interactive-hooks to v0.18.10
+- Bump @fluentui-react-native/menu to v1.0.43
+- Bump @fluentui-react-native/notification to v0.17.15
+- Bump @fluentui-react-native/stack to v0.7.11
+- Bump @fluentui-react-native/switch to v0.6.12
+- Bump @fluentui-react-native/text to v0.15.3
+- Bump @fluentui-react-native/win32-theme to v0.21.5
+- Bump @fluentui/react-native to v0.32.29
+
 ## 0.99.6
 
-Tue, 04 Oct 2022 17:24:24 GMT
+Tue, 04 Oct 2022 17:24:59 GMT
 
 ### Patches
 

package/lib/TestComponents/Badge/BasicBadgeTest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BasicBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BasicBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAuCrD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAoF9B,CAAC"}
+{"version":3,"file":"BasicBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BasicBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAiC9D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBA2G9B,CAAC"}

package/lib/TestComponents/Badge/BasicBadgeTest.js

@@ -1,29 +1,21 @@
 import { __assign, __spreadArray } from "tslib";
 /* eslint-disable @typescript-eslint/no-var-requires */
-import React, { useState, useCallback } from 'react';
+import React, { useState, useCallback, useMemo } from 'react';
 import { View, Platform, Text, Image } from 'react-native';
 import { Badge, BadgeAppearances, BadgeColors, BadgeShapes, BadgeSizes, } from '@fluentui-react-native/badge';
 import { StyledPicker } from '../Common/StyledPicker';
 import { satyaPhotoUrl } from './../PersonaCoin/styles';
 import TestSvg from '../../FluentTester/test-data/test.svg';
 import { ToggleButton } from '@fluentui/react-native';
+import { useFluentTheme } from '@fluentui-react-native/framework';
 var badgeColors = __spreadArray([], BadgeColors, true);
 var badgeShapes = __spreadArray([], BadgeShapes, true);
 var badgeSizes = __spreadArray([], BadgeSizes, true);
 var badgeAppearances = __spreadArray([], BadgeAppearances, true);
 var badgeIconPositions = ['before', 'after'];
-var StyledBadge = Badge.customize({
-    fontWeight: 'bold',
-    fontSize: 12,
-    fontFamily: 'Georgia',
-    backgroundColor: '#f09',
-    borderColor: 'purple',
-    color: 'yellow',
-    borderWidth: 4,
-    borderStyle: 'dashed',
-    borderRadius: 2,
-    iconColor: 'cyan',
-});
+var useCustomizedBadge = function (tokensAndprops) {
+    return useMemo(function () { return Badge.customize(__assign({}, tokensAndprops)); }, [tokensAndprops]);
+};
 export var BasicBadge = function () {
     var _a = useState('filled'), badgeAppearance = _a[0], setBadgeAppearance = _a[1];
     var _b = useState('brand'), badgeColor = _b[0], setBadgeColor = _b[1];
@@ -31,11 +23,15 @@ export var BasicBadge = function () {
     var _d = useState('medium'), size = _d[0], setSize = _d[1];
     var _e = useState(false), showIcon = _e[0], setShowIcon = _e[1];
     var _f = useState('before'), iconPosition = _f[0], setIconPosition = _f[1];
+    var _g = useState(false), showShadow = _g[0], setShowShadow = _g[1];
     var onBadgeAppearanceChange = useCallback(function (value) { return setBadgeAppearance(value); }, []);
     var onBadgeColorChange = useCallback(function (value) { return setBadgeColor(value); }, []);
     var onShapeChange = useCallback(function (value) { return setShape(value); }, []);
     var onSizeChange = useCallback(function (value) { return setSize(value); }, []);
     var onIconPositionChange = useCallback(function (value) { return setIconPosition(value); }, []);
+    var onShowShadowChange = useCallback(function () { return setShowShadow(!showShadow); }, [showShadow, setShowShadow]);
+    var onShowIconChange = useCallback(function () { return setShowIcon(!showIcon); }, [showIcon, setShowIcon]);
+    var theme = useFluentTheme();
     var svgProps = {
         src: TestSvg,
         viewBox: '0 0 500 500',
@@ -47,29 +43,46 @@ export var BasicBadge = function () {
     };
     var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS);
     var iconProps = { svgSource: svgProps, width: 20, height: 20 };
+    var shadow = showShadow ? theme.shadows.shadow4 : undefined;
+    var CustomBadge = useCustomizedBadge({ shadowToken: shadow });
     var badgeConfig = {
         appearance: badgeAppearance,
         badgeColor: badgeColor,
-        position: 'absolute',
         size: size,
         shape: shape,
     };
+    var StyledBadge = useCustomizedBadge({
+        fontWeight: 'bold',
+        fontSize: 12,
+        fontFamily: 'Georgia',
+        backgroundColor: '#f09',
+        borderColor: 'purple',
+        color: 'yellow',
+        borderWidth: 4,
+        borderStyle: 'dashed',
+        borderRadius: 2,
+        iconColor: 'cyan',
+        shadowToken: theme.shadows.shadow16,
+    });
     return (React.createElement(View, null,
         React.createElement(StyledPicker, { prompt: "Badge appearance", selected: badgeAppearance, onChange: onBadgeAppearanceChange, collection: badgeAppearances }),
         React.createElement(StyledPicker, { prompt: "Badge color", selected: badgeColor, onChange: onBadgeColorChange, collection: badgeColors }),
         React.createElement(StyledPicker, { prompt: "Shape", selected: shape, onChange: onShapeChange, collection: badgeShapes }),
         React.createElement(StyledPicker, { prompt: "Size", selected: size, onChange: onSizeChange, collection: badgeSizes }),
         svgIconsEnabled && (React.createElement(React.Fragment, null,
-            React.createElement(ToggleButton, { onClick: function () { return setShowIcon(!showIcon); }, checked: showIcon },
+            React.createElement(ToggleButton, { onClick: onShowIconChange, checked: showIcon },
                 "Set ",
                 showIcon ? ' Hide icon' : ' Show icon'),
             React.createElement(StyledPicker, { prompt: "Icon position", selected: iconPosition, onChange: onIconPositionChange, collection: badgeIconPositions }))),
+        React.createElement(ToggleButton, { onClick: onShowShadowChange, checked: showShadow },
+            "Set ",
+            showShadow ? ' Hide shadow' : ' Show shadow'),
         React.createElement(View, { style: { position: 'relative', backgroundColor: 'yellow', padding: 20, width: 200 } },
             React.createElement(Text, null, "Parent component for the Badge"),
-            svgIconsEnabled && showIcon ? (React.createElement(Badge, __assign({}, badgeConfig, { icon: { svgSource: svgProps }, iconPosition: iconPosition }), "Basic badge")) : (React.createElement(Badge, __assign({}, badgeConfig), "Basic badge"))),
+            svgIconsEnabled && showIcon ? (React.createElement(CustomBadge, __assign({}, badgeConfig, { icon: { svgSource: svgProps }, iconPosition: iconPosition }), "Basic badge")) : (React.createElement(CustomBadge, __assign({}, badgeConfig), "Basic badge"))),
         React.createElement(Text, null, "Size"),
-        React.createElement(Badge, { size: "tiny", shape: "circular" }),
-        React.createElement(Badge, { size: "extraSmall", shape: "circular", badgeColor: "red" }),
+        React.createElement(Badge, { size: "tiny" }),
+        React.createElement(Badge, { size: "extraSmall", badgeColor: "red" }),
         React.createElement(Badge, { size: "small" }, "Small"),
         React.createElement(Badge, { size: "medium" }, "Medium"),
         React.createElement(Badge, { size: "large" }, "Large"),

package/lib/TestComponents/Badge/BasicBadgeTest.js.map

@@ -1 +1 @@
-{"version":3,"file":"BasicBadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BasicBadgeTest.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"BasicBadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BasicBadgeTest.tsx"],"names":[],"mappings":";AAAA,uDAAuD;AACvD,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAC9D,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,cAAc,CAAC;AAC3D,OAAO,EACL,KAAK,EAEL,gBAAgB,EAEhB,WAAW,EAEX,WAAW,EAEX,UAAU,GAIX,MAAM,8BAA8B,CAAC;AAEtC,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AACxD,OAAO,OAAO,MAAM,uCAAuC,CAAC;AAC5D,OAAO,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AACtD,OAAO,EAAE,cAAc,EAAE,MAAM,kCAAkC,CAAC;AAElE,IAAM,WAAW,qBAAqB,WAAW,OAAC,CAAC;AACnD,IAAM,WAAW,qBAAqB,WAAW,OAAC,CAAC;AACnD,IAAM,UAAU,qBAAoB,UAAU,OAAC,CAAC;AAChD,IAAM,gBAAgB,qBAA0B,gBAAgB,OAAC,CAAC;AAClE,IAAM,kBAAkB,GAAG,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;AAE/C,IAAM,kBAAkB,GAAG,UAAC,cAAwC;IAClE,OAAO,OAAO,CAAC,cAAM,OAAA,KAAK,CAAC,SAAS,cAAM,cAAc,EAAG,EAAtC,CAAsC,EAAE,CAAC,cAAc,CAAC,CAAC,CAAC;AACjF,CAAC,CAAC;AAEF,MAAM,CAAC,IAAM,UAAU,GAA4B;IAC3C,IAAA,KAAwC,QAAQ,CAAkB,QAAQ,CAAC,EAA1E,eAAe,QAAA,EAAE,kBAAkB,QAAuC,CAAC;IAC5E,IAAA,KAA8B,QAAQ,CAAa,OAAO,CAAC,EAA1D,UAAU,QAAA,EAAE,aAAa,QAAiC,CAAC;IAC5D,IAAA,KAAoB,QAAQ,CAAa,UAAU,CAAC,EAAnD,KAAK,QAAA,EAAE,QAAQ,QAAoC,CAAC;IACrD,IAAA,KAAkB,QAAQ,CAAY,QAAQ,CAAC,EAA9C,IAAI,QAAA,EAAE,OAAO,QAAiC,CAAC;IAChD,IAAA,KAA0B,QAAQ,CAAC,KAAK,CAAC,EAAxC,QAAQ,QAAA,EAAE,WAAW,QAAmB,CAAC;IAC1C,IAAA,KAAkC,QAAQ,CAAoB,QAAQ,CAAC,EAAtE,YAAY,QAAA,EAAE,eAAe,QAAyC,CAAC;IACxE,IAAA,KAA8B,QAAQ,CAAC,KAAK,CAAC,EAA5C,UAAU,QAAA,EAAE,aAAa,QAAmB,CAAC;IAEpD,IAAM,uBAAuB,GAAG,WAAW,CAAC,UAAC,KAAK,IAAK,OAAA,kBAAkB,CAAC,KAAK,CAAC,EAAzB,CAAyB,EAAE,EAAE,CAAC,CAAC;IACtF,IAAM,kBAAkB,GAAG,WAAW,CAAC,UAAC,KAAK,IAAK,OAAA,aAAa,CAAC,KAAK,CAAC,EAApB,CAAoB,EAAE,EAAE,CAAC,CAAC;IAC5E,IAAM,aAAa,GAAG,WAAW,CAAC,UAAC,KAAK,IAAK,OAAA,QAAQ,CAAC,KAAK,CAAC,EAAf,CAAe,EAAE,EAAE,CAAC,CAAC;IAClE,IAAM,YAAY,GAAG,WAAW,CAAC,UAAC,KAAK,IAAK,OAAA,OAAO,CAAC,KAAK,CAAC,EAAd,CAAc,EAAE,EAAE,CAAC,CAAC;IAChE,IAAM,oBAAoB,GAAG,WAAW,CAAC,UAAC,KAAK,IAAK,OAAA,eAAe,CAAC,KAAK,CAAC,EAAtB,CAAsB,EAAE,EAAE,CAAC,CAAC;IAChF,IAAM,kBAAkB,GAAG,WAAW,CAAC,cAAM,OAAA,aAAa,CAAC,CAAC,UAAU,CAAC,EAA1B,CAA0B,EAAE,CAAC,UAAU,EAAE,aAAa,CAAC,CAAC,CAAC;IACtG,IAAM,gBAAgB,GAAG,WAAW,CAAC,cAAM,OAAA,WAAW,CAAC,CAAC,QAAQ,CAAC,EAAtB,CAAsB,EAAE,CAAC,QAAQ,EAAE,WAAW,CAAC,CAAC,CAAC;IAE5F,IAAM,KAAK,GAAG,cAAc,EAAE,CAAC;IAC/B,IAAM,QAAQ,GAAiB;QAC7B,GAAG,EAAE,OAAO;QACZ,OAAO,EAAE,aAAa;KACvB,CAAC;IAEF,IAAM,gBAAgB,GAAG;QACvB,UAAU,EAAE,OAAO;QACnB,SAAS,EAAE,MAAM;QACjB,QAAQ,EAAE,EAAE;KACb,CAAC;IAEF,IAAM,eAAe,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAY,CAAC,CAAC;IAC7F,IAAM,SAAS,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC;IAEjE,IAAM,MAAM,GAAG,UAAU,CAAC,CAAC,CAAC,KAAK,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,CAAC;IAC9D,IAAM,WAAW,GAAG,kBAAkB,CAAC,EAAE,WAAW,EAAE,MAAM,EAAE,CAAC,CAAC;IAEhE,IAAM,WAAW,GAAG;QAClB,UAAU,EAAE,eAAe;QAC3B,UAAU,YAAA;QACV,IAAI,MAAA;QACJ,KAAK,OAAA;KACN,CAAC;IAEF,IAAM,WAAW,GAAG,kBAAkB,CAAC;QACrC,UAAU,EAAE,MAAM;QAClB,QAAQ,EAAE,EAAE;QACZ,UAAU,EAAE,SAAS;QACrB,eAAe,EAAE,MAAM;QACvB,WAAW,EAAE,QAAQ;QACrB,KAAK,EAAE,QAAQ;QACf,WAAW,EAAE,CAAC;QACd,WAAW,EAAE,QAAQ;QACrB,YAAY,EAAE,CAAC;QACf,SAAS,EAAE,MAAM;QACjB,WAAW,EAAE,KAAK,CAAC,OAAO,CAAC,QAAQ;KACpC,CAAC,CAAC;IAEH,OAAO,CACL,oBAAC,IAAI;QACH,oBAAC,YAAY,IAAC,MAAM,EAAC,kBAAkB,EAAC,QAAQ,EAAE,eAAe,EAAE,QAAQ,EAAE,uBAAuB,EAAE,UAAU,EAAE,gBAAgB,GAAI;QACtI,oBAAC,YAAY,IAAC,MAAM,EAAC,aAAa,EAAC,QAAQ,EAAE,UAAU,EAAE,QAAQ,EAAE,kBAAkB,EAAE,UAAU,EAAE,WAAW,GAAI;QAClH,oBAAC,YAAY,IAAC,MAAM,EAAC,OAAO,EAAC,QAAQ,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE,UAAU,EAAE,WAAW,GAAI;QAClG,oBAAC,YAAY,IAAC,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,YAAY,EAAE,UAAU,EAAE,UAAU,GAAI;QAC7F,eAAe,IAAI,CAClB;YACE,oBAAC,YAAY,IAAC,OAAO,EAAE,gBAAgB,EAAE,OAAO,EAAE,QAAQ;;gBACnD,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,YAAY,CAC9B;YACf,oBAAC,YAAY,IAAC,MAAM,EAAC,eAAe,EAAC,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,oBAAoB,EAAE,UAAU,EAAE,kBAAkB,GAAI,CAC9H,CACJ;QACD,oBAAC,YAAY,IAAC,OAAO,EAAE,kBAAkB,EAAE,OAAO,EAAE,UAAU;;YACvD,UAAU,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,cAAc,CACpC;QAEf,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,eAAe,EAAE,QAAQ,EAAE,OAAO,EAAE,EAAE,EAAE,KAAK,EAAE,GAAG,EAAE;YACvF,oBAAC,IAAI,yCAAsC;YAC1C,eAAe,IAAI,QAAQ,CAAC,CAAC,CAAC,CAC7B,oBAAC,WAAW,eAAK,WAAW,IAAE,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,YAAY,EAAE,YAAY,mBAEzE,CACf,CAAC,CAAC,CAAC,CACF,oBAAC,WAAW,eAAK,WAAW,iBAA2B,CACxD,CACI;QACP,oBAAC,IAAI,eAAY;QACjB,oBAAC,KAAK,IAAC,IAAI,EAAC,MAAM,GAAG;QACrB,oBAAC,KAAK,IAAC,IAAI,EAAC,YAAY,EAAC,UAAU,EAAC,KAAK,GAAG;QAC5C,oBAAC,KAAK,IAAC,IAAI,EAAC,OAAO,YAAc;QACjC,oBAAC,KAAK,IAAC,IAAI,EAAC,QAAQ,aAAe;QACnC,oBAAC,KAAK,IAAC,IAAI,EAAC,OAAO,YAAc;QACjC,oBAAC,KAAK,IAAC,IAAI,EAAC,YAAY,kBAAoB;QAC3C,eAAe,IAAI,CAClB;YACE,oBAAC,IAAI,0BAAuB;YAC5B,oBAAC,KAAK,IAAC,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,YAAY,EAAC,OAAO;;gBAExD,oBAAC,KAAK,IAAC,MAAM,EAAE,EAAE,GAAG,EAAE,aAAa,EAAE,EAAE,KAAK,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,GAAI;gBAC3E,oBAAC,IAAI,IAAC,KAAK,EAAE,EAAE,eAAe,EAAE,QAAQ,EAAE,uBAAyB,CAC7D;YACR,oBAAC,KAAK,IAAC,UAAU,EAAC,SAAS,EAAC,IAAI,EAAE,SAAS,GAAI;YAC/C,oBAAC,KAAK,IAAC,IAAI,EAAE,EAAE,UAAU,eAAO,gBAAgB,CAAE,EAAE,KAAK,EAAE,MAAM,EAAE,sBAAyB;YAC5F,oBAAC,IAAI,qCAAkC;YACvC,oBAAC,WAAW,IAAC,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,mBAA4B,CACrE,CACJ,CACI,CACR,CAAC;AACJ,CAAC,CAAC"}

package/lib/TestComponents/Badge/CounterBadgeTest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CounterBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/CounterBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAyBpC,CAAC"}
+{"version":3,"file":"CounterBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/CounterBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAwBpC,CAAC"}

package/lib/TestComponents/Badge/CounterBadgeTest.js

@@ -21,7 +21,6 @@ export var CounterBadgeTest = function () {
         React.createElement(CounterBadge, { badgeColor: "important", overflowCount: 1000, count: 777 }),
         React.createElement(CounterBadge, { badgeColor: "danger", overflowCount: 1000, count: 1500 }),
         React.createElement(CounterBadge, { count: 13 }),
-        React.createElement(CounterBadge, { count: 13 }, "CounterBadge"),
         svgIconsEnabled && React.createElement(CounterBadge, { count: 17, icon: { svgSource: svgProps }, iconPosition: "after" })));
 };
 //# sourceMappingURL=CounterBadgeTest.js.map

package/lib/TestComponents/Badge/CounterBadgeTest.js.map

@@ -1 +1 @@
-{"version":3,"file":"CounterBadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/CounterBadgeTest.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,OAAO,OAAO,MAAM,uCAAuC,CAAC;AAE5D,MAAM,CAAC,IAAM,gBAAgB,GAA4B;IACvD,IAAM,QAAQ,GAAiB;QAC7B,GAAG,EAAE,OAAO;QACZ,OAAO,EAAE,aAAa;KACvB,CAAC;IAEF,IAAM,eAAe,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAY,CAAC,CAAC;IAE7F,OAAO,CACL,oBAAC,IAAI;QACH,oBAAC,IAAI,oBAAiB;QACtB,oBAAC,YAAY,IAAC,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,GAAiB;QACnD,oBAAC,YAAY,IAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,GAAiB;QAClD,oBAAC,IAAI,mCAAgC;QACrC,oBAAC,YAAY,IAAC,KAAK,EAAE,CAAC,GAAiB;QACvC,oBAAC,IAAI,qDAAkD;QACvD,oBAAC,YAAY,IAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAiB;QACvD,oBAAC,YAAY,IAAC,UAAU,EAAC,aAAa,EAAC,KAAK,EAAE,GAAG,GAAiB;QAClE,oBAAC,YAAY,IAAC,UAAU,EAAC,WAAW,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,GAAiB;QACrF,oBAAC,YAAY,IAAC,UAAU,EAAC,QAAQ,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAiB;QACnF,oBAAC,YAAY,IAAC,KAAK,EAAE,EAAE,GAAiB;QACxC,oBAAC,YAAY,IAAC,KAAK,EAAE,EAAE,mBAA6B;QACnD,eAAe,IAAI,oBAAC,YAAY,IAAC,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,YAAY,EAAC,OAAO,GAAG,CAC9F,CACR,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"CounterBadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/CounterBadgeTest.tsx"],"names":[],"mappings":"AAAA,uDAAuD;AACvD,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,MAAM,cAAc,CAAC;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,8BAA8B,CAAC;AAE5D,OAAO,OAAO,MAAM,uCAAuC,CAAC;AAE5D,MAAM,CAAC,IAAM,gBAAgB,GAA4B;IACvD,IAAM,QAAQ,GAAiB;QAC7B,GAAG,EAAE,OAAO;QACZ,OAAO,EAAE,aAAa;KACvB,CAAC;IAEF,IAAM,eAAe,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAY,CAAC,CAAC;IAE7F,OAAO,CACL,oBAAC,IAAI;QACH,oBAAC,IAAI,oBAAiB;QACtB,oBAAC,YAAY,IAAC,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,GAAiB;QACnD,oBAAC,YAAY,IAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,GAAiB;QAClD,oBAAC,IAAI,mCAAgC;QACrC,oBAAC,YAAY,IAAC,KAAK,EAAE,CAAC,GAAiB;QACvC,oBAAC,IAAI,qDAAkD;QACvD,oBAAC,YAAY,IAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAiB;QACvD,oBAAC,YAAY,IAAC,UAAU,EAAC,aAAa,EAAC,KAAK,EAAE,GAAG,GAAiB;QAClE,oBAAC,YAAY,IAAC,UAAU,EAAC,WAAW,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,GAAiB;QACrF,oBAAC,YAAY,IAAC,UAAU,EAAC,QAAQ,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAiB;QACnF,oBAAC,YAAY,IAAC,KAAK,EAAE,EAAE,GAAI;QAC1B,eAAe,IAAI,oBAAC,YAAY,IAAC,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,YAAY,EAAC,OAAO,GAAG,CAC9F,CACR,CAAC;AACJ,CAAC,CAAC"}

package/lib-commonjs/TestComponents/Badge/BasicBadgeTest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BasicBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BasicBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,KAAgC,MAAM,OAAO,CAAC;AAuCrD,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBAoF9B,CAAC"}
+{"version":3,"file":"BasicBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/BasicBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,KAAyC,MAAM,OAAO,CAAC;AAiC9D,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,iBA2G9B,CAAC"}

package/lib-commonjs/TestComponents/Badge/BasicBadgeTest.js

@@ -10,23 +10,15 @@ var StyledPicker_1 = require("../Common/StyledPicker");
 var styles_1 = require("./../PersonaCoin/styles");
 var test_svg_1 = (0, tslib_1.__importDefault)(require("../../FluentTester/test-data/test.svg"));
 var react_native_2 = require("@fluentui/react-native");
+var framework_1 = require("@fluentui-react-native/framework");
 var badgeColors = (0, tslib_1.__spreadArray)([], badge_1.BadgeColors, true);
 var badgeShapes = (0, tslib_1.__spreadArray)([], badge_1.BadgeShapes, true);
 var badgeSizes = (0, tslib_1.__spreadArray)([], badge_1.BadgeSizes, true);
 var badgeAppearances = (0, tslib_1.__spreadArray)([], badge_1.BadgeAppearances, true);
 var badgeIconPositions = ['before', 'after'];
-var StyledBadge = badge_1.Badge.customize({
-    fontWeight: 'bold',
-    fontSize: 12,
-    fontFamily: 'Georgia',
-    backgroundColor: '#f09',
-    borderColor: 'purple',
-    color: 'yellow',
-    borderWidth: 4,
-    borderStyle: 'dashed',
-    borderRadius: 2,
-    iconColor: 'cyan',
-});
+var useCustomizedBadge = function (tokensAndprops) {
+    return (0, react_1.useMemo)(function () { return badge_1.Badge.customize((0, tslib_1.__assign)({}, tokensAndprops)); }, [tokensAndprops]);
+};
 var BasicBadge = function () {
     var _a = (0, react_1.useState)('filled'), badgeAppearance = _a[0], setBadgeAppearance = _a[1];
     var _b = (0, react_1.useState)('brand'), badgeColor = _b[0], setBadgeColor = _b[1];
@@ -34,11 +26,15 @@ var BasicBadge = function () {
     var _d = (0, react_1.useState)('medium'), size = _d[0], setSize = _d[1];
     var _e = (0, react_1.useState)(false), showIcon = _e[0], setShowIcon = _e[1];
     var _f = (0, react_1.useState)('before'), iconPosition = _f[0], setIconPosition = _f[1];
+    var _g = (0, react_1.useState)(false), showShadow = _g[0], setShowShadow = _g[1];
     var onBadgeAppearanceChange = (0, react_1.useCallback)(function (value) { return setBadgeAppearance(value); }, []);
     var onBadgeColorChange = (0, react_1.useCallback)(function (value) { return setBadgeColor(value); }, []);
     var onShapeChange = (0, react_1.useCallback)(function (value) { return setShape(value); }, []);
     var onSizeChange = (0, react_1.useCallback)(function (value) { return setSize(value); }, []);
     var onIconPositionChange = (0, react_1.useCallback)(function (value) { return setIconPosition(value); }, []);
+    var onShowShadowChange = (0, react_1.useCallback)(function () { return setShowShadow(!showShadow); }, [showShadow, setShowShadow]);
+    var onShowIconChange = (0, react_1.useCallback)(function () { return setShowIcon(!showIcon); }, [showIcon, setShowIcon]);
+    var theme = (0, framework_1.useFluentTheme)();
     var svgProps = {
         src: test_svg_1.default,
         viewBox: '0 0 500 500',
@@ -50,29 +46,46 @@ var BasicBadge = function () {
     };
     var svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(react_native_1.Platform.OS);
     var iconProps = { svgSource: svgProps, width: 20, height: 20 };
+    var shadow = showShadow ? theme.shadows.shadow4 : undefined;
+    var CustomBadge = useCustomizedBadge({ shadowToken: shadow });
     var badgeConfig = {
         appearance: badgeAppearance,
         badgeColor: badgeColor,
-        position: 'absolute',
         size: size,
         shape: shape,
     };
+    var StyledBadge = useCustomizedBadge({
+        fontWeight: 'bold',
+        fontSize: 12,
+        fontFamily: 'Georgia',
+        backgroundColor: '#f09',
+        borderColor: 'purple',
+        color: 'yellow',
+        borderWidth: 4,
+        borderStyle: 'dashed',
+        borderRadius: 2,
+        iconColor: 'cyan',
+        shadowToken: theme.shadows.shadow16,
+    });
     return (react_1.default.createElement(react_native_1.View, null,
         react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Badge appearance", selected: badgeAppearance, onChange: onBadgeAppearanceChange, collection: badgeAppearances }),
         react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Badge color", selected: badgeColor, onChange: onBadgeColorChange, collection: badgeColors }),
         react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Shape", selected: shape, onChange: onShapeChange, collection: badgeShapes }),
         react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Size", selected: size, onChange: onSizeChange, collection: badgeSizes }),
         svgIconsEnabled && (react_1.default.createElement(react_1.default.Fragment, null,
-            react_1.default.createElement(react_native_2.ToggleButton, { onClick: function () { return setShowIcon(!showIcon); }, checked: showIcon },
+            react_1.default.createElement(react_native_2.ToggleButton, { onClick: onShowIconChange, checked: showIcon },
                 "Set ",
                 showIcon ? ' Hide icon' : ' Show icon'),
             react_1.default.createElement(StyledPicker_1.StyledPicker, { prompt: "Icon position", selected: iconPosition, onChange: onIconPositionChange, collection: badgeIconPositions }))),
+        react_1.default.createElement(react_native_2.ToggleButton, { onClick: onShowShadowChange, checked: showShadow },
+            "Set ",
+            showShadow ? ' Hide shadow' : ' Show shadow'),
         react_1.default.createElement(react_native_1.View, { style: { position: 'relative', backgroundColor: 'yellow', padding: 20, width: 200 } },
             react_1.default.createElement(react_native_1.Text, null, "Parent component for the Badge"),
-            svgIconsEnabled && showIcon ? (react_1.default.createElement(badge_1.Badge, (0, tslib_1.__assign)({}, badgeConfig, { icon: { svgSource: svgProps }, iconPosition: iconPosition }), "Basic badge")) : (react_1.default.createElement(badge_1.Badge, (0, tslib_1.__assign)({}, badgeConfig), "Basic badge"))),
+            svgIconsEnabled && showIcon ? (react_1.default.createElement(CustomBadge, (0, tslib_1.__assign)({}, badgeConfig, { icon: { svgSource: svgProps }, iconPosition: iconPosition }), "Basic badge")) : (react_1.default.createElement(CustomBadge, (0, tslib_1.__assign)({}, badgeConfig), "Basic badge"))),
         react_1.default.createElement(react_native_1.Text, null, "Size"),
-        react_1.default.createElement(badge_1.Badge, { size: "tiny", shape: "circular" }),
-        react_1.default.createElement(badge_1.Badge, { size: "extraSmall", shape: "circular", badgeColor: "red" }),
+        react_1.default.createElement(badge_1.Badge, { size: "tiny" }),
+        react_1.default.createElement(badge_1.Badge, { size: "extraSmall", badgeColor: "red" }),
         react_1.default.createElement(badge_1.Badge, { size: "small" }, "Small"),
         react_1.default.createElement(badge_1.Badge, { size: "medium" }, "Medium"),
         react_1.default.createElement(badge_1.Badge, { size: "large" }, "Large"),

package/lib-commonjs/TestComponents/Badge/BasicBadgeTest.js.map

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

package/lib-commonjs/TestComponents/Badge/CounterBadgeTest.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CounterBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/CounterBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAyBpC,CAAC"}
+{"version":3,"file":"CounterBadgeTest.d.ts","sourceRoot":"","sources":["../../../src/TestComponents/Badge/CounterBadgeTest.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,iBAwBpC,CAAC"}

package/lib-commonjs/TestComponents/Badge/CounterBadgeTest.js

@@ -25,7 +25,6 @@ var CounterBadgeTest = function () {
         react_1.default.createElement(badge_1.CounterBadge, { badgeColor: "important", overflowCount: 1000, count: 777 }),
         react_1.default.createElement(badge_1.CounterBadge, { badgeColor: "danger", overflowCount: 1000, count: 1500 }),
         react_1.default.createElement(badge_1.CounterBadge, { count: 13 }),
-        react_1.default.createElement(badge_1.CounterBadge, { count: 13 }, "CounterBadge"),
         svgIconsEnabled && react_1.default.createElement(badge_1.CounterBadge, { count: 17, icon: { svgSource: svgProps }, iconPosition: "after" })));
 };
 exports.CounterBadgeTest = CounterBadgeTest;

package/lib-commonjs/TestComponents/Badge/CounterBadgeTest.js.map

@@ -1 +1 @@
-{"version":3,"file":"CounterBadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/CounterBadgeTest.tsx"],"names":[],"mappings":";;;;AAAA,uDAAuD;AACvD,6DAA0B;AAC1B,6CAAoD;AACpD,sDAA4D;AAE5D,gGAA4D;AAErD,IAAM,gBAAgB,GAA4B;IACvD,IAAM,QAAQ,GAAiB;QAC7B,GAAG,EAAE,kBAAO;QACZ,OAAO,EAAE,aAAa;KACvB,CAAC;IAEF,IAAM,eAAe,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,uBAAQ,CAAC,EAAY,CAAC,CAAC;IAE7F,OAAO,CACL,8BAAC,mBAAI;QACH,8BAAC,mBAAI,oBAAiB;QACtB,8BAAC,oBAAY,IAAC,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,GAAiB;QACnD,8BAAC,oBAAY,IAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,GAAiB;QAClD,8BAAC,mBAAI,mCAAgC;QACrC,8BAAC,oBAAY,IAAC,KAAK,EAAE,CAAC,GAAiB;QACvC,8BAAC,mBAAI,qDAAkD;QACvD,8BAAC,oBAAY,IAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAiB;QACvD,8BAAC,oBAAY,IAAC,UAAU,EAAC,aAAa,EAAC,KAAK,EAAE,GAAG,GAAiB;QAClE,8BAAC,oBAAY,IAAC,UAAU,EAAC,WAAW,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,GAAiB;QACrF,8BAAC,oBAAY,IAAC,UAAU,EAAC,QAAQ,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAiB;QACnF,8BAAC,oBAAY,IAAC,KAAK,EAAE,EAAE,GAAiB;QACxC,8BAAC,oBAAY,IAAC,KAAK,EAAE,EAAE,mBAA6B;QACnD,eAAe,IAAI,8BAAC,oBAAY,IAAC,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,YAAY,EAAC,OAAO,GAAG,CAC9F,CACR,CAAC;AACJ,CAAC,CAAC;AAzBW,QAAA,gBAAgB,oBAyB3B"}
+{"version":3,"file":"CounterBadgeTest.js","sourceRoot":"","sources":["../../../src/TestComponents/Badge/CounterBadgeTest.tsx"],"names":[],"mappings":";;;;AAAA,uDAAuD;AACvD,6DAA0B;AAC1B,6CAAoD;AACpD,sDAA4D;AAE5D,gGAA4D;AAErD,IAAM,gBAAgB,GAA4B;IACvD,IAAM,QAAQ,GAAiB;QAC7B,GAAG,EAAE,kBAAO;QACZ,OAAO,EAAE,aAAa;KACvB,CAAC;IAEF,IAAM,eAAe,GAAG,CAAC,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,SAAS,CAAC,CAAC,QAAQ,CAAC,uBAAQ,CAAC,EAAY,CAAC,CAAC;IAE7F,OAAO,CACL,8BAAC,mBAAI;QACH,8BAAC,mBAAI,oBAAiB;QACtB,8BAAC,oBAAY,IAAC,KAAK,EAAE,EAAE,EAAE,GAAG,EAAE,IAAI,GAAiB;QACnD,8BAAC,oBAAY,IAAC,KAAK,EAAE,CAAC,EAAE,GAAG,EAAE,IAAI,GAAiB;QAClD,8BAAC,mBAAI,mCAAgC;QACrC,8BAAC,oBAAY,IAAC,KAAK,EAAE,CAAC,GAAiB;QACvC,8BAAC,mBAAI,qDAAkD;QACvD,8BAAC,oBAAY,IAAC,KAAK,EAAE,CAAC,EAAE,QAAQ,EAAE,IAAI,GAAiB;QACvD,8BAAC,oBAAY,IAAC,UAAU,EAAC,aAAa,EAAC,KAAK,EAAE,GAAG,GAAiB;QAClE,8BAAC,oBAAY,IAAC,UAAU,EAAC,WAAW,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,GAAG,GAAiB;QACrF,8BAAC,oBAAY,IAAC,UAAU,EAAC,QAAQ,EAAC,aAAa,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,GAAiB;QACnF,8BAAC,oBAAY,IAAC,KAAK,EAAE,EAAE,GAAI;QAC1B,eAAe,IAAI,8BAAC,oBAAY,IAAC,KAAK,EAAE,EAAE,EAAE,IAAI,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,YAAY,EAAC,OAAO,GAAG,CAC9F,CACR,CAAC;AACJ,CAAC,CAAC;AAxBW,QAAA,gBAAgB,oBAwB3B"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.99.6",
+  "version": "0.99.8",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -36,40 +36,40 @@
     "directory": "apps/fluent-tester"
   },
   "dependencies": {
-    "@fluentui-react-native/android-theme": ">=0.12.4 <1.0.0",
-    "@fluentui-react-native/apple-theme": ">=0.15.2 <1.0.0",
-    "@fluentui-react-native/avatar": "^1.2.13",
-    "@fluentui-react-native/badge": ">=0.1.36 <1.0.0",
-    "@fluentui-react-native/button": ">=0.25.4 <1.0.0",
-    "@fluentui-react-native/default-theme": ">=0.16.0 <1.0.0",
-    "@fluentui-react-native/dropdown": ">=0.4.4 <1.0.0",
-    "@fluentui-react-native/experimental-activity-indicator": ">=0.6.6 <1.0.0",
-    "@fluentui-react-native/experimental-avatar": ">=0.16.9 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.16.31",
-    "@fluentui-react-native/experimental-checkbox": "0.12.22",
-    "@fluentui-react-native/experimental-expander": "0.4.8",
-    "@fluentui-react-native/experimental-menu-button": ">=0.4.36 <1.0.0",
+    "@fluentui-react-native/android-theme": ">=0.12.5 <1.0.0",
+    "@fluentui-react-native/apple-theme": ">=0.15.3 <1.0.0",
+    "@fluentui-react-native/avatar": "^1.2.15",
+    "@fluentui-react-native/badge": ">=0.1.38 <1.0.0",
+    "@fluentui-react-native/button": ">=0.25.5 <1.0.0",
+    "@fluentui-react-native/default-theme": ">=0.16.1 <1.0.0",
+    "@fluentui-react-native/dropdown": ">=0.4.5 <1.0.0",
+    "@fluentui-react-native/experimental-activity-indicator": ">=0.6.7 <1.0.0",
+    "@fluentui-react-native/experimental-avatar": ">=0.16.10 <1.0.0",
+    "@fluentui-react-native/experimental-button": "0.16.32",
+    "@fluentui-react-native/experimental-checkbox": "0.12.23",
+    "@fluentui-react-native/experimental-expander": "0.4.9",
+    "@fluentui-react-native/experimental-menu-button": ">=0.4.37 <1.0.0",
     "@fluentui-react-native/experimental-native-date-picker": ">=0.7.2 <1.0.0",
-    "@fluentui-react-native/experimental-radio-group": "^0.5.4",
-    "@fluentui-react-native/experimental-shadow": "0.2.24",
-    "@fluentui-react-native/experimental-shimmer": "0.7.6",
-    "@fluentui-react-native/experimental-tabs": "0.5.20",
-    "@fluentui-react-native/experimental-text": ">=0.11.8 <1.0.0",
-    "@fluentui-react-native/framework": ">=0.8.6 <1.0.0",
-    "@fluentui-react-native/icon": "0.13.11",
-    "@fluentui-react-native/interactive-hooks": ">=0.18.9 <1.0.0",
-    "@fluentui-react-native/menu": "^1.0.42",
+    "@fluentui-react-native/experimental-radio-group": "^0.5.5",
+    "@fluentui-react-native/experimental-shadow": "0.2.25",
+    "@fluentui-react-native/experimental-shimmer": "0.7.7",
+    "@fluentui-react-native/experimental-tabs": "0.5.21",
+    "@fluentui-react-native/experimental-text": ">=0.11.9 <1.0.0",
+    "@fluentui-react-native/framework": ">=0.8.7 <1.0.0",
+    "@fluentui-react-native/icon": "0.13.12",
+    "@fluentui-react-native/interactive-hooks": ">=0.18.10 <1.0.0",
+    "@fluentui-react-native/menu": "^1.0.43",
     "@fluentui-react-native/merge-props": ">=0.5.1 <1.0.0",
-    "@fluentui-react-native/notification": "0.17.14",
-    "@fluentui-react-native/stack": ">=0.7.10 <1.0.0",
-    "@fluentui-react-native/switch": "^0.6.11",
-    "@fluentui-react-native/text": ">=0.15.2 <1.0.0",
+    "@fluentui-react-native/notification": "0.17.15",
+    "@fluentui-react-native/stack": ">=0.7.11 <1.0.0",
+    "@fluentui-react-native/switch": "^0.6.12",
+    "@fluentui-react-native/text": ">=0.15.3 <1.0.0",
     "@fluentui-react-native/theme": ">=0.7.4 <1.0.0",
     "@fluentui-react-native/theme-types": ">=0.20.0 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.4.1",
     "@fluentui-react-native/theming-utils": ">=0.16.0 <1.0.0",
-    "@fluentui-react-native/win32-theme": ">=0.21.4 <1.0.0",
-    "@fluentui/react-native": ">=0.32.28 <1.0.0",
+    "@fluentui-react-native/win32-theme": ">=0.21.5 <1.0.0",
+    "@fluentui/react-native": ">=0.32.29 <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/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, FlexStyle } from 'react-native';
+import React, { useState, useCallback, useMemo } from 'react';
+import { View, Platform, Text, Image } from 'react-native';
 import {
   Badge,
   BadgeAppearance,
@@ -12,12 +12,15 @@ import {
   BadgeSize,
   BadgeSizes,
   BadgeIconPosition,
+  BadgeProps,
+  BadgeTokens,
 } from '@fluentui-react-native/badge';
 import { SvgIconProps } from '@fluentui-react-native/icon';
 import { StyledPicker } from '../Common/StyledPicker';
 import { satyaPhotoUrl } from './../PersonaCoin/styles';
 import TestSvg from '../../FluentTester/test-data/test.svg';
 import { ToggleButton } from '@fluentui/react-native';
+import { useFluentTheme } from '@fluentui-react-native/framework';
 
 const badgeColors: BadgeColor[] = [...BadgeColors];
 const badgeShapes: BadgeShape[] = [...BadgeShapes];
@@ -25,18 +28,9 @@ const badgeSizes: BadgeSize[] = [...BadgeSizes];
 const badgeAppearances: BadgeAppearance[] = [...BadgeAppearances];
 const badgeIconPositions = ['before', 'after'];
 
-const StyledBadge = Badge.customize({
-  fontWeight: 'bold',
-  fontSize: 12,
-  fontFamily: 'Georgia',
-  backgroundColor: '#f09',
-  borderColor: 'purple',
-  color: 'yellow',
-  borderWidth: 4,
-  borderStyle: 'dashed',
-  borderRadius: 2,
-  iconColor: 'cyan',
-});
+const useCustomizedBadge = (tokensAndprops: BadgeProps & BadgeTokens) => {
+  return useMemo(() => Badge.customize({ ...tokensAndprops }), [tokensAndprops]);
+};
 
 export const BasicBadge: React.FunctionComponent = () => {
   const [badgeAppearance, setBadgeAppearance] = useState<BadgeAppearance>('filled');
@@ -45,13 +39,17 @@ export const BasicBadge: React.FunctionComponent = () => {
   const [size, setSize] = useState<BadgeSize>('medium');
   const [showIcon, setShowIcon] = useState(false);
   const [iconPosition, setIconPosition] = useState<BadgeIconPosition>('before');
+  const [showShadow, setShowShadow] = useState(false);
 
   const onBadgeAppearanceChange = useCallback((value) => setBadgeAppearance(value), []);
   const onBadgeColorChange = useCallback((value) => setBadgeColor(value), []);
   const onShapeChange = useCallback((value) => setShape(value), []);
   const onSizeChange = useCallback((value) => setSize(value), []);
   const onIconPositionChange = useCallback((value) => setIconPosition(value), []);
+  const onShowShadowChange = useCallback(() => setShowShadow(!showShadow), [showShadow, setShowShadow]);
+  const onShowIconChange = useCallback(() => setShowIcon(!showIcon), [showIcon, setShowIcon]);
 
+  const theme = useFluentTheme();
   const svgProps: SvgIconProps = {
     src: TestSvg,
     viewBox: '0 0 500 500',
@@ -65,14 +63,31 @@ export const BasicBadge: React.FunctionComponent = () => {
 
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
   const iconProps = { svgSource: svgProps, width: 20, height: 20 };
+
+  const shadow = showShadow ? theme.shadows.shadow4 : undefined;
+  const CustomBadge = useCustomizedBadge({ shadowToken: shadow });
+
   const badgeConfig = {
     appearance: badgeAppearance,
     badgeColor,
-    position: 'absolute' as FlexStyle['position'],
     size,
     shape,
   };
 
+  const StyledBadge = useCustomizedBadge({
+    fontWeight: 'bold',
+    fontSize: 12,
+    fontFamily: 'Georgia',
+    backgroundColor: '#f09',
+    borderColor: 'purple',
+    color: 'yellow',
+    borderWidth: 4,
+    borderStyle: 'dashed',
+    borderRadius: 2,
+    iconColor: 'cyan',
+    shadowToken: theme.shadows.shadow16,
+  });
+
   return (
     <View>
       <StyledPicker prompt="Badge appearance" selected={badgeAppearance} onChange={onBadgeAppearanceChange} collection={badgeAppearances} />
@@ -81,27 +96,29 @@ export const BasicBadge: React.FunctionComponent = () => {
       <StyledPicker prompt="Size" selected={size} onChange={onSizeChange} collection={badgeSizes} />
       {svgIconsEnabled && (
         <>
-          <ToggleButton onClick={() => setShowIcon(!showIcon)} checked={showIcon}>
+          <ToggleButton onClick={onShowIconChange} checked={showIcon}>
             Set {showIcon ? ' Hide icon' : ' Show icon'}
           </ToggleButton>
           <StyledPicker prompt="Icon position" selected={iconPosition} onChange={onIconPositionChange} collection={badgeIconPositions} />
         </>
       )}
+      <ToggleButton onClick={onShowShadowChange} checked={showShadow}>
+        Set {showShadow ? ' Hide shadow' : ' Show shadow'}
+      </ToggleButton>
 
       <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}>
+          <CustomBadge {...badgeConfig} icon={{ svgSource: svgProps }} iconPosition={iconPosition}>
             Basic badge
-          </Badge>
+          </CustomBadge>
         ) : (
-          <Badge {...badgeConfig}>Basic badge</Badge>
+          <CustomBadge {...badgeConfig}>Basic badge</CustomBadge>
         )}
       </View>
-
       <Text>Size</Text>
-      <Badge size="tiny" shape="circular" />
-      <Badge size="extraSmall" shape="circular" badgeColor="red" />
+      <Badge size="tiny" />
+      <Badge size="extraSmall" badgeColor="red" />
       <Badge size="small">Small</Badge>
       <Badge size="medium">Medium</Badge>
       <Badge size="large">Large</Badge>

package/src/TestComponents/Badge/CounterBadgeTest.tsx

@@ -25,8 +25,7 @@ export const CounterBadgeTest: React.FunctionComponent = () => {
       <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>
+      <CounterBadge count={13} />
       {svgIconsEnabled && <CounterBadge count={17} icon={{ svgSource: svgProps }} iconPosition="after" />}
     </View>
   );