@fluentui-react-native/tester 0.151.17 → 0.151.19

package/lib-commonjs/fluent-tester/src/TestComponents/TabList/TabListTest.js

@@ -4,94 +4,148 @@ exports.TabListTest = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
 var react_native_1 = require("react-native");
+var button_1 = require("@fluentui-react-native/button");
 var divider_1 = require("@fluentui-react-native/divider");
+var menu_1 = require("@fluentui-react-native/menu");
 var tablist_1 = require("@fluentui-react-native/tablist");
 var text_1 = require("@fluentui-react-native/text");
+var iconExamples_1 = require("../Common/iconExamples");
+var styles_1 = require("../Common/styles");
 var Test_1 = require("../Test");
-var Header = text_1.TextV1.customize({ variant: 'subheaderStandard' });
+var SubHeader = text_1.TextV1.customize({ variant: 'subheaderStandard' });
+var Header = text_1.TextV1.customize({ variant: 'headerStandard' });
 var Line = divider_1.Divider.customize({ paddingVertical: 4 });
 var PaddedTabList = tablist_1.TabList.customize({
     paddingVertical: 4,
 });
-var styles = react_native_1.StyleSheet.create({
-    container: {
-        paddingVertical: 8,
-    },
-});
-var TabListSizeTest = function () {
-    return (react_1.default.createElement(react_native_1.View, { style: styles.container },
-        react_1.default.createElement(Header, null, "Small"),
-        react_1.default.createElement(PaddedTabList, { size: "small" },
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")),
+var TabListDefaultTest = function () {
+    var _a = react_1.default.useState('tab1'), key = _a[0], setKey = _a[1];
+    return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
+        react_1.default.createElement(Header, null, "Uncontrolled Component"),
         react_1.default.createElement(Line, null),
-        react_1.default.createElement(Header, null, "Medium (default)"),
-        react_1.default.createElement(PaddedTabList, { size: "medium" },
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")),
+        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: 'tab1' },
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3")),
+        react_1.default.createElement(Header, null, "Controlled Component"),
         react_1.default.createElement(Line, null),
-        react_1.default.createElement(Header, null, "Large"),
-        react_1.default.createElement(PaddedTabList, { size: "large" },
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2"))));
-};
-var TabListVerticalTest = function () {
-    return (react_1.default.createElement(tablist_1.TabList, { vertical: true },
-        react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
-        react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")));
-};
-var TabListAppearanceTest = function () {
-    return (react_1.default.createElement(react_native_1.View, { style: styles.container },
-        react_1.default.createElement(Header, null, "Transparent Appearance"),
-        react_1.default.createElement(PaddedTabList, { appearance: "transparent" },
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")),
-        react_1.default.createElement(Header, null, "Subtle Appearance"),
-        react_1.default.createElement(PaddedTabList, { appearance: "subtle" },
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2"))));
+        react_1.default.createElement(text_1.TextV1, null,
+            "Selected Key: ",
+            key),
+        react_1.default.createElement(PaddedTabList, { selectedKey: key, onTabSelect: function (val) {
+                console.log('New key:', val);
+                setKey(val);
+            } },
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3"))));
 };
 var TabListDisabledTest = function () {
-    return (react_1.default.createElement(react_native_1.View, null,
-        react_1.default.createElement(PaddedTabList, null,
-            react_1.default.createElement(tablist_1.Tab, { disabled: true, tabKey: "hello" }, "Tab 1"),
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2")),
+    return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
+        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "tab2" },
+            react_1.default.createElement(tablist_1.Tab, { disabled: true, tabKey: "tab1" }, "Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { disabled: true, tabKey: "tab3" }, "Tab 3"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab4" }, "Tab 4")),
         react_1.default.createElement(PaddedTabList, { disabled: true },
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "hello" }, "Tab 1"),
-            react_1.default.createElement(tablist_1.Tab, { tabKey: "world" }, "Tab 2"))));
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3"))));
+};
+var TabListVariantsTest = function () {
+    return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
+        react_1.default.createElement(Header, null, "Size Variants"),
+        react_1.default.createElement(Line, null),
+        react_1.default.createElement(SubHeader, null, "Small"),
+        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "sm1", size: "small" },
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "sm1" }, "Small Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "sm2" }, "Small Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "sm3" }, "Small Tab 3")),
+        react_1.default.createElement(SubHeader, null, "Medium (default)"),
+        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "m1", size: "medium" },
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "m1" }, "Medium Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "m2" }, "Medium Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "m3" }, "Medium Tab 3")),
+        react_1.default.createElement(SubHeader, null, "Large"),
+        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "lg1", size: "large" },
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "lg1" }, "Large Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "lg2" }, "Large Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "lg3" }, "Large Tab 3")),
+        react_1.default.createElement(Header, null, "Appearance"),
+        react_1.default.createElement(Line, null),
+        react_1.default.createElement(SubHeader, null, "Transparent Appearance"),
+        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "tab1", appearance: "transparent" },
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3")),
+        react_1.default.createElement(SubHeader, null, "Subtle Appearance"),
+        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "tab1", appearance: "subtle" },
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3")),
+        react_1.default.createElement(Header, null, "Vertical Orientation"),
+        react_1.default.createElement(Line, null),
+        react_1.default.createElement(PaddedTabList, { defaultSelectedKey: "tab1", vertical: true },
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab1" }, "Tab 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab2" }, "Tab 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "tab3" }, "Tab 3"))));
 };
 var TabListIconTest = function () {
-    var iconProp = {
-        fontSource: {
-            fontFamily: 'Arial',
-            codepoint: 0x2663,
-        },
-    };
-    return (react_1.default.createElement(tablist_1.TabList, null,
-        react_1.default.createElement(tablist_1.Tab, { icon: iconProp, tabKey: "withIcon" }, "Tab Item"),
-        react_1.default.createElement(tablist_1.Tab, { icon: iconProp, tabKey: "iconOnly" })));
+    return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
+        react_1.default.createElement(tablist_1.TabList, { defaultSelectedKey: "fontIcon" },
+            react_1.default.createElement(tablist_1.Tab, { icon: { fontSource: iconExamples_1.fontProps }, tabKey: "fontIcon" }, "Font Icon"),
+            react_1.default.createElement(tablist_1.Tab, { icon: { fontSource: iconExamples_1.fontProps }, tabKey: "fontIconOnly" }),
+            react_1.default.createElement(tablist_1.Tab, { icon: { svgSource: iconExamples_1.svgProps }, tabKey: "svgIcon" }, "SVG Icon"),
+            react_1.default.createElement(tablist_1.Tab, { icon: { svgSource: iconExamples_1.svgProps }, tabKey: "svgIconOnly" }))));
+};
+var TabListViewTest = function () {
+    var _a = react_1.default.useState('a'), key = _a[0], setKey = _a[1];
+    var views = react_1.default.useMemo(function () { return ({
+        a: (react_1.default.createElement(react_native_1.View, null,
+            react_1.default.createElement(SubHeader, null, "This is View 1"),
+            react_1.default.createElement(text_1.TextV1, { variant: "body1" }, "Here is some text."))),
+        b: (react_1.default.createElement(react_native_1.View, null,
+            react_1.default.createElement(SubHeader, null, "This is View 2"),
+            react_1.default.createElement(button_1.ButtonV1, null, "Button 1"))),
+        c: (react_1.default.createElement(react_native_1.View, null,
+            react_1.default.createElement(SubHeader, null, "This is View 3"),
+            react_1.default.createElement(menu_1.Menu, null,
+                react_1.default.createElement(menu_1.MenuTrigger, null,
+                    react_1.default.createElement(button_1.ButtonV1, null, "Menu")),
+                react_1.default.createElement(menu_1.MenuPopover, null,
+                    react_1.default.createElement(menu_1.MenuList, null,
+                        react_1.default.createElement(menu_1.MenuItem, null, "Item 1"),
+                        react_1.default.createElement(menu_1.MenuItem, null, "Item 2"),
+                        react_1.default.createElement(menu_1.MenuItem, null, "Item 3")))))),
+    }); }, []);
+    return (react_1.default.createElement(react_native_1.View, { style: styles_1.stackStyle },
+        react_1.default.createElement(tablist_1.TabList, { selectedKey: key, onTabSelect: setKey },
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "a" }, "View 1"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "b" }, "View 2"),
+            react_1.default.createElement(tablist_1.Tab, { tabKey: "c" }, "View 3")),
+        views[key]));
 };
 var sections = [
     {
-        name: 'Size',
-        component: TabListSizeTest,
-    },
-    {
-        name: 'Vertical',
-        component: TabListVerticalTest,
-    },
-    {
-        name: 'Appearance',
-        component: TabListAppearanceTest,
+        name: 'TabList Controlled vs Uncontrolled',
+        component: TabListDefaultTest,
     },
     {
         name: 'Disabled',
         component: TabListDisabledTest,
     },
+    {
+        name: 'Variants',
+        component: TabListVariantsTest,
+    },
     {
         name: 'Icon',
         component: TabListIconTest,
     },
+    {
+        name: 'Rendering Content Separately',
+        component: TabListViewTest,
+    },
 ];
 var TabListTest = function () {
     var status = {

package/lib-commonjs/fluent-tester/src/TestComponents/TabList/TabListTest.js.map

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

package/macos/Podfile.lock

@@ -620,4 +620,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: d3fe834dea1e24594a8ba545f70b5250bbc25c91
 
-COCOAPODS: 1.12.0
+COCOAPODS: 1.12.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.151.17",
+  "version": "0.151.19",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -33,49 +33,49 @@
     "directory": "apps/fluent-tester"
   },
   "dependencies": {
-    "@fluentui-react-native/android-theme": ">=0.18.3 <1.0.0",
-    "@fluentui-react-native/apple-theme": ">=0.21.5 <1.0.0",
-    "@fluentui-react-native/avatar": "^1.10.7",
-    "@fluentui-react-native/badge": ">=0.7.3 <1.0.0",
-    "@fluentui-react-native/button": ">=0.34.8 <1.0.0",
-    "@fluentui-react-native/chip": "^0.1.4",
-    "@fluentui-react-native/default-theme": ">=0.19.4 <1.0.0",
-    "@fluentui-react-native/divider": "^0.5.5",
-    "@fluentui-react-native/dropdown": ">=0.8.15 <1.0.0",
-    "@fluentui-react-native/experimental-activity-indicator": ">=0.8.4 <1.0.0",
-    "@fluentui-react-native/experimental-appearance-additions": "^0.5.5",
-    "@fluentui-react-native/experimental-avatar": ">=0.19.4 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.18.8",
-    "@fluentui-react-native/experimental-checkbox": "0.15.7",
-    "@fluentui-react-native/experimental-expander": "0.6.6",
-    "@fluentui-react-native/experimental-menu-button": ">=0.7.15 <1.0.0",
+    "@fluentui-react-native/android-theme": ">=0.18.4 <1.0.0",
+    "@fluentui-react-native/apple-theme": ">=0.21.6 <1.0.0",
+    "@fluentui-react-native/avatar": "^1.10.8",
+    "@fluentui-react-native/badge": ">=0.7.4 <1.0.0",
+    "@fluentui-react-native/button": ">=0.34.9 <1.0.0",
+    "@fluentui-react-native/chip": "^0.1.5",
+    "@fluentui-react-native/default-theme": ">=0.19.5 <1.0.0",
+    "@fluentui-react-native/divider": "^0.5.6",
+    "@fluentui-react-native/drawer": "^0.2.7",
+    "@fluentui-react-native/dropdown": ">=0.8.16 <1.0.0",
+    "@fluentui-react-native/experimental-activity-indicator": ">=0.8.5 <1.0.0",
+    "@fluentui-react-native/experimental-appearance-additions": "^0.5.6",
+    "@fluentui-react-native/experimental-avatar": ">=0.19.5 <1.0.0",
+    "@fluentui-react-native/experimental-button": "0.18.9",
+    "@fluentui-react-native/experimental-checkbox": "0.15.8",
+    "@fluentui-react-native/experimental-expander": "0.6.7",
+    "@fluentui-react-native/experimental-menu-button": ">=0.7.16 <1.0.0",
     "@fluentui-react-native/experimental-native-date-picker": ">=0.8.0 <1.0.0",
-    "@fluentui-react-native/experimental-shadow": "0.4.5",
-    "@fluentui-react-native/experimental-shimmer": "0.10.6",
-    "@fluentui-react-native/experimental-tabs": "0.9.8",
-    "@fluentui-react-native/experimental-text": ">=0.13.5 <1.0.0",
-    "@fluentui-react-native/framework": ">=0.11.3 <1.0.0",
-    "@fluentui-react-native/icon": "0.19.5",
-    "@fluentui-react-native/input": "^0.3.7",
-    "@fluentui-react-native/drawer": "^0.2.6",
-    "@fluentui-react-native/interactive-hooks": ">=0.24.5 <1.0.0",
-    "@fluentui-react-native/menu": "^1.11.14",
-    "@fluentui-react-native/merge-props": ">=0.7.0 <1.0.0",
-    "@fluentui-react-native/notification": "0.23.8",
-    "@fluentui-react-native/radio-group": ">=0.18.7 <1.0.0",
-    "@fluentui-react-native/separator": "^0.16.3",
-    "@fluentui-react-native/spinner": "^0.7.6",
-    "@fluentui-react-native/stack": ">=0.8.7 <1.0.0",
-    "@fluentui-react-native/switch": "^0.10.5",
-    "@fluentui-react-native/tablist": "0.3.3",
-    "@fluentui-react-native/text": ">=0.21.5 <1.0.0",
-    "@fluentui-react-native/theme": ">=0.9.0 <1.0.0",
-    "@fluentui-react-native/theme-tokens": "^0.25.0",
+    "@fluentui-react-native/experimental-shadow": "0.4.6",
+    "@fluentui-react-native/experimental-shimmer": "0.10.7",
+    "@fluentui-react-native/experimental-tabs": "0.9.9",
+    "@fluentui-react-native/experimental-text": ">=0.13.6 <1.0.0",
+    "@fluentui-react-native/framework": ">=0.11.4 <1.0.0",
+    "@fluentui-react-native/icon": "0.19.6",
+    "@fluentui-react-native/input": "^0.3.8",
+    "@fluentui-react-native/interactive-hooks": ">=0.24.6 <1.0.0",
+    "@fluentui-react-native/menu": "^1.11.15",
+    "@fluentui-react-native/merge-props": ">=0.7.1 <1.0.0",
+    "@fluentui-react-native/notification": "0.23.9",
+    "@fluentui-react-native/radio-group": ">=0.18.8 <1.0.0",
+    "@fluentui-react-native/separator": "^0.16.4",
+    "@fluentui-react-native/spinner": "^0.7.7",
+    "@fluentui-react-native/stack": ">=0.8.8 <1.0.0",
+    "@fluentui-react-native/switch": "^0.10.6",
+    "@fluentui-react-native/tablist": "0.3.5",
+    "@fluentui-react-native/text": ">=0.21.6 <1.0.0",
+    "@fluentui-react-native/theme": ">=0.9.1 <1.0.0",
+    "@fluentui-react-native/theme-tokens": "^0.25.1",
     "@fluentui-react-native/theme-types": ">=0.32.0 <1.0.0",
-    "@fluentui-react-native/themed-stylesheet": "^1.5.1",
-    "@fluentui-react-native/theming-utils": ">=0.24.1 <1.0.0",
-    "@fluentui-react-native/win32-theme": ">=0.27.2 <1.0.0",
-    "@fluentui/react-native": ">=0.37.16 <1.0.0",
+    "@fluentui-react-native/themed-stylesheet": "^1.5.2",
+    "@fluentui-react-native/theming-utils": ">=0.24.2 <1.0.0",
+    "@fluentui-react-native/win32-theme": ">=0.27.3 <1.0.0",
+    "@fluentui/react-native": ">=0.37.17 <1.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.0",
@@ -94,7 +94,7 @@
     "@babel/core": "^7.8.0",
     "@babel/runtime": "^7.8.0",
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",
-    "@fluentui-react-native/focus-zone": "^0.12.7",
+    "@fluentui-react-native/focus-zone": "^0.12.8",
     "@fluentui-react-native/scripts": "^0.1.1",
     "@rnx-kit/cli": "^0.16.2",
     "@rnx-kit/metro-config": "^1.3.1",
@@ -102,7 +102,7 @@
     "metro-config": "^0.73.7",
     "metro-react-native-babel-preset": "^0.73.7",
     "react-native-svg-transformer": "^1.0.0",
-    "react-native-test-app": "^2.2.1",
+    "react-native-test-app": "^2.5.15",
     "react-test-renderer": "18.2.0"
   },
   "peerDependencies": {

package/src/TestComponents/Callout/CalloutTest.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import type { KeyboardMetrics } from 'react-native';
-import { Text, View, Switch, ScrollView } from 'react-native';
+import { Text, View, Switch, ScrollView, Platform } from 'react-native';
 
 import { Button, Callout, Separator, Pressable, StealthButton } from '@fluentui/react-native';
 import type { IFocusable, RestoreFocusEvent, DismissBehaviors, ICalloutProps } from '@fluentui/react-native';
@@ -190,8 +190,8 @@ const StandardCallout: React.FunctionComponent = () => {
   const [selectedBackgroundColor, setSelectedBackgroundColor] = React.useState<string | undefined>(undefined);
   const [selectedBorderColor, setSelectedBorderColor] = React.useState<string | undefined>(undefined);
 
-  const borderWidthDefault: string = '1';
-  const borderWidthSelections: string[] = ['1', '2', '4', '10'];
+  const borderWidthDefault: string = Platform.OS === 'macos' ? '0' : '1';
+  const borderWidthSelections: string[] = ['0', '1', '2', '4', '10'];
   const menuPickerBorderWidthCollection = borderWidthSelections.map((width) => {
     return {
       label: width,
@@ -199,7 +199,17 @@ const StandardCallout: React.FunctionComponent = () => {
     };
   });
 
+  const borderRadiusDefault: string = '5';
+  const borderRadiusSelections: string[] = ['0', '5', '7', '15'];
+  const menuPickerBorderRadiusCollection = borderRadiusSelections.map((width) => {
+    return {
+      label: width,
+      value: width,
+    };
+  });
+
   const [selectedBorderWidth, setSelectedBorderWidth] = React.useState<string | undefined>(undefined);
+  const [selectedBorderRadius, setSelectedBorderRadius] = React.useState<string | undefined>(undefined);
 
   const [showScrollViewCallout, setShowScrollViewCalout] = React.useState(false);
   const [scrollviewContents, setScrollviewContents] = React.useState([1, 2, 3]);
@@ -278,6 +288,12 @@ const StandardCallout: React.FunctionComponent = () => {
             onChange={(color) => setSelectedBorderWidth(color === colorDefault ? undefined : color)}
             collection={menuPickerBorderWidthCollection}
           />
+          <MenuPicker
+            prompt="Border Radius"
+            selected={selectedBorderRadius || borderRadiusDefault}
+            onChange={(radius) => setSelectedBorderRadius(radius === borderRadiusDefault ? undefined : radius)}
+            collection={menuPickerBorderRadiusCollection}
+          />
         </View>
 
         <Separator vertical />
@@ -345,6 +361,7 @@ const StandardCallout: React.FunctionComponent = () => {
             ...(selectedBorderColor && { borderColor: selectedBorderColor }),
             ...(selectedBackgroundColor && { backgroundColor: selectedBackgroundColor }),
             ...(selectedBorderWidth && { borderWidth: parseInt(selectedBorderWidth) }),
+            ...(selectedBorderRadius && { borderRadius: parseInt(selectedBorderRadius) }),
             ...(calloutDismissBehaviors && { dismissBehaviors: calloutDismissBehaviors }),
           }}
         >

package/src/TestComponents/StrokeWidth/StrokeWidthTest.tsx

@@ -24,7 +24,6 @@ const getThemedStyles = themedStyleSheet((t: Theme) => {
       height: 100,
       backgroundColor: isLightMode ? globalTokens.color.grey80 : globalTokens.color.grey10,
       display: 'flex',
-      justifyContent: 'center',
       marginTop: 8,
     },
   };
@@ -41,10 +40,11 @@ const StrokeWidthTestComponent: React.FunctionComponent<StrokeWidthTestComponent
   const isLightMode = getCurrentAppearance(theme.host.appearance, 'light') === 'light';
   const exampleStrokeStyle = React.useMemo(
     () => ({
-      height: props.strokeWidth,
-      backgroundColor: isLightMode ? globalTokens.color.grey10 : globalTokens.color.grey80,
+      height: 50,
+      borderBottomWidth: props.strokeWidth,
+      borderColor: isLightMode ? globalTokens.color.grey10 : globalTokens.color.grey80,
     }),
-    [props.strokeWidth],
+    [props.strokeWidth, isLightMode],
   );
 
   return (