@fluentui-react-native/tester 0.89.0 → 0.90.2

package/src/TestComponents/Avatar/CustomizedAvatar.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useMemo } from 'react';
 import { Avatar, AvatarColors, AvatarSize, getJavaHashCode } from '@fluentui-react-native/avatar';
-import { View, Text, TextInput, Platform } from 'react-native';
+import { View, Text, TextInput, Platform, StyleSheet } from 'react-native';
 import { steveBallmerPhotoUrl } from './../PersonaCoin/styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { FontWeight } from '@fluentui-react-native/theme-types';
@@ -8,6 +8,13 @@ import { SvgIconProps } from '@fluentui-react-native/icon';
 import TestSvg from '../../FluentTester/test-data/test.svg';
 import { ToggleButton } from '@fluentui/react-native';
 
+const styles = StyleSheet.create({
+  avatarTestCaseContainer: { marginLeft: 20 },
+  avatarTokenOptions: { flexDirection: 'row' },
+  fontTokenOptions: { paddingHorizontal: 20 },
+  tokenHeader: { fontWeight: 'bold' },
+});
+
 export const CustomizeUsage: React.FunctionComponent = () => {
   const [showImage, setShowImage] = useState(true);
   const [showInitials, setShowInitials] = useState(true);
@@ -80,7 +87,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
         <ToggleButton onClick={() => setShowRing(!showRing)} checked={showRing} style={commonStyles.vmargin}>
           {showRing ? 'Hide' : 'Show'} ring
         </ToggleButton>
-        <View style={{ flexDirection: 'row' }}>
+        <View style={styles.avatarTokenOptions}>
           <View>
             <TextInput
               accessibilityLabel="Name for generating initials"
@@ -100,7 +107,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
                 setInitials(e.nativeEvent.text);
               }}
             />
-            <Text style={{ fontWeight: 'bold' }}>Avatar tokens</Text>
+            <Text style={styles.tokenHeader}>Avatar tokens</Text>
             <TextInput
               accessibilityLabel="Background color"
               style={commonStyles.textBox}
@@ -139,7 +146,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
                 setIconColor(e.nativeEvent.text);
               }}
             />
-            <Text style={{ fontWeight: 'bold' }}>Ring tokens</Text>
+            <Text style={styles.tokenHeader}>Ring tokens</Text>
             <TextInput
               accessibilityLabel="Ring background color"
               style={commonStyles.textBox}
@@ -177,8 +184,8 @@ export const CustomizeUsage: React.FunctionComponent = () => {
               }}
             />
           </View>
-          <View style={{ paddingHorizontal: 20 }}>
-            <Text style={{ fontWeight: 'bold' }}>Font tokens</Text>
+          <View style={styles.fontTokenOptions}>
+            <Text style={styles.tokenHeader}>Font tokens</Text>
             <TextInput
               accessibilityLabel="Initials text color"
               style={commonStyles.textBox}
@@ -232,7 +239,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
           transparentRing={!showRing}
         />
       </View>
-      <View style={{ marginLeft: 20 }}>
+      <View style={styles.avatarTestCaseContainer}>
         <Text>Avatar customized with props</Text>
         <Avatar
           active="active"
@@ -251,7 +258,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
         />
       </View>
       {useJavaHashCode && (
-        <View style={{ marginLeft: 20 }}>
+        <View style={styles.avatarTestCaseContainer}>
           <Text>Avatar with hashed color</Text>
           <Avatar
             active="active"

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

@@ -67,7 +67,6 @@ export const BasicBadge: React.FunctionComponent = () => {
     size,
     shape,
   };
-  const badgeContent = size === 'tiny' || size === 'extraSmall' ? '' : 'Basic badge';
 
   return (
     <View>
@@ -88,10 +87,10 @@ export const BasicBadge: React.FunctionComponent = () => {
         <Text>Parent component for the Badge</Text>
         {svgIconsEnabled && showIcon ? (
           <Badge {...badgeConfig} icon={{ svgSource: svgProps }} iconPosition={iconPosition}>
-            {badgeContent}
+            Basic badge
           </Badge>
         ) : (
-          <Badge {...badgeConfig}>{badgeContent}</Badge>
+          <Badge {...badgeConfig}>Basic badge</Badge>
         )}
       </View>
 

package/src/TestComponents/Button/ButtonIconTestSection.tsx

@@ -1,7 +1,7 @@
 import { ButtonV1 as Button } from '@fluentui/react-native';
 import * as React from 'react';
 import { Platform, View, StyleSheet } from 'react-native';
-import { commonTestStyles, stackStyle } from '../Common/styles';
+import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
 import { SvgIconProps } from '@fluentui-react-native/icon';
 import TestSvg from './test.svg';
 import { SvgXml } from 'react-native-svg';
@@ -32,7 +32,7 @@ export const ButtonIconTest: React.FunctionComponent = () => {
           </svg>`;
 
   return (
-    <View style={[stackStyle, commonTestStyles.view]}>
+    <View style={testContentRootViewStyle}>
       <Button icon={{ fontSource: { ...fontBuiltInProps, fontSize: 32 }, color: '#060' }} style={commonTestStyles.vmargin}>
         Font icon
       </Button>

package/src/TestComponents/Button/ButtonShapeTestSection.tsx

@@ -1,11 +1,11 @@
 import { ButtonV1 as Button, CompoundButton } from '@fluentui/react-native';
 import * as React from 'react';
 import { View } from 'react-native';
-import { commonTestStyles, stackStyle } from '../Common/styles';
+import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
 
 export const ButtonShapeTest: React.FunctionComponent = () => {
   return (
-    <View style={[stackStyle, commonTestStyles.view]}>
+    <View style={testContentRootViewStyle}>
       <Button shape="rounded" style={commonTestStyles.vmargin}>
         Default Rounded Button
       </Button>

package/src/TestComponents/Button/ButtonSizeTestSection.tsx

@@ -2,7 +2,7 @@ import { ButtonV1 as Button, CompoundButton } from '@fluentui/react-native';
 import { SvgIconProps } from '@fluentui-react-native/icon';
 import * as React from 'react';
 import { Platform, View } from 'react-native';
-import { commonTestStyles, stackStyle } from '../Common/styles';
+import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
 import TestSvg from './test.svg';
 
 export const ButtonSizeTest: React.FunctionComponent = () => {
@@ -12,7 +12,7 @@ export const ButtonSizeTest: React.FunctionComponent = () => {
   };
   const svgIconsEnabled = ['ios', 'macos', 'win32', 'android'].includes(Platform.OS as string);
   return (
-    <View style={[stackStyle, commonTestStyles.view]}>
+    <View style={testContentRootViewStyle}>
       {svgIconsEnabled && (
         <>
           <Button

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/Button/ButtonVariantTestSection.tsx

@@ -1,7 +1,7 @@
 import { Button, CompoundButton, FAB } from '@fluentui-react-native/experimental-button';
 import * as React from 'react';
 import { View } from 'react-native';
-import { commonTestStyles, stackStyle } from '../Common/styles';
+import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
 import { SvgIconProps } from '@fluentui-react-native/icon';
 import TestSvg from './test.svg';
 
@@ -14,7 +14,7 @@ export const ButtonVariantTest: React.FunctionComponent = () => {
   const iconProps = { svgSource: svgProps, width: 20, height: 20 };
 
   return (
-    <View style={[stackStyle, commonTestStyles.view]}>
+    <View style={testContentRootViewStyle}>
       <Button style={commonTestStyles.vmargin}>Default</Button>
       <Button disabled style={commonTestStyles.vmargin}>
         Default Disabled

package/src/TestComponents/Button/ToggleButtonTestSection.tsx

@@ -2,13 +2,14 @@ import { ToggleButton } from '@fluentui/react-native';
 import { Checkbox } from '@fluentui/react-native';
 import * as React from 'react';
 import { StyleSheet, View } from 'react-native';
-import { commonTestStyles, stackStyle } from '../Common/styles';
+import { commonTestStyles, testContentRootViewStyle } from '../Common/styles';
 
 const styles = StyleSheet.create({
   row: {
     flexDirection: 'row',
   },
-  hmargin: {
+  checkbox: {
+    ...commonTestStyles.vmargin,
     marginHorizontal: 8,
   },
 });
@@ -20,12 +21,12 @@ export const ToggleButtonTest: React.FunctionComponent = () => {
   const onGhostClicked = React.useCallback(() => setSubtleChecked(!subtleChecked), [subtleChecked, setSubtleChecked]);
 
   return (
-    <View style={[stackStyle, commonTestStyles.view]}>
+    <View style={testContentRootViewStyle}>
       <View style={styles.row}>
         <ToggleButton onClick={onDefaultClicked} checked={defaultChecked} style={commonTestStyles.vmargin}>
           Default Toggle
         </ToggleButton>
-        <Checkbox checked={defaultChecked} label="Default Toggle is Checked" style={[commonTestStyles.vmargin, styles.hmargin]} />
+        <Checkbox checked={defaultChecked} label="Default Toggle is Checked" style={styles.checkbox} />
       </View>
       <ToggleButton checked style={commonTestStyles.vmargin}>
         Checked Default Toggle
@@ -46,7 +47,7 @@ export const ToggleButtonTest: React.FunctionComponent = () => {
         <ToggleButton appearance="subtle" onClick={onGhostClicked} checked={subtleChecked} style={commonTestStyles.vmargin}>
           Subtle Toggle
         </ToggleButton>
-        <Checkbox checked={subtleChecked} label="Subtle Toggle is Checked" style={[commonTestStyles.vmargin, styles.hmargin]} />
+        <Checkbox checked={subtleChecked} label="Subtle Toggle is Checked" style={styles.checkbox} />
       </View>
       <ToggleButton appearance="subtle" checked style={commonTestStyles.vmargin}>
         Checked Subtle Toggle

package/src/TestComponents/Callout/CalloutTest.tsx

@@ -348,7 +348,7 @@ const StandardCallout: React.FunctionComponent = () => {
               </View>
             ) : (
               //else
-              <View style={[{ padding: 20 }, { backgroundColor: calloutHovered ? 'lightgreen' : 'pink' }]}>
+              <View style={{ padding: 20, backgroundColor: calloutHovered ? 'lightgreen' : 'pink' }}>
                 <Button content="click to change anchor" onClick={toggleCalloutRef} />
               </View>
             )}

package/src/TestComponents/Checkbox/CheckboxTest.tsx

@@ -1,11 +1,12 @@
 import { Checkbox } from '@fluentui/react-native';
-import { useTheme } from '@fluentui-react-native/theme-types';
+import { Theme, useTheme } from '@fluentui-react-native/theme-types';
 import * as React from 'react';
-import { View, TextInput, TextStyle } from 'react-native';
+import { View, TextInput } from 'react-native';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { CHECKBOX_TESTPAGE } from './consts';
 import { E2ECheckboxTest } from './CheckboxE2ETest';
 import { Test, TestSection, PlatformStatus } from '../Test';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 
 function onChangeUncontrolled(isChecked: boolean) {
   console.log(isChecked);
@@ -87,6 +88,10 @@ const HoverCheckbox = Checkbox.customize({
   },
 });
 
+const getThemedStyles = themedStyleSheet((t: Theme) => {
+  return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
+});
+
 const TokenCheckbox: React.FunctionComponent = () => {
   const [checkboxColor, setCheckboxColor] = React.useState('blue');
   const [checkmarkColor, setCheckmarkColor] = React.useState('white');
@@ -108,9 +113,8 @@ const TokenCheckbox: React.FunctionComponent = () => {
   });
 
   const theme = useTheme();
-  const textBoxBorderStyle: TextStyle = {
-    borderColor: theme.colors.inputBorder,
-  };
+  const textBoxBorderStyle = getThemedStyles(theme);
+
   return (
     <View>
       <CircularCheckbox label="A circular checkbox" onChange={onChangeUncontrolled} defaultChecked={false} />
@@ -125,7 +129,7 @@ const TokenCheckbox: React.FunctionComponent = () => {
 
       <TextInput
         accessibilityLabel="Background color"
-        style={[commonStyles.textBox, textBoxBorderStyle]}
+        style={textBoxBorderStyle.textbox}
         placeholder="Background color"
         blurOnSubmit={true}
         onSubmitEditing={(e) => {
@@ -135,7 +139,7 @@ const TokenCheckbox: React.FunctionComponent = () => {
 
       <TextInput
         accessibilityLabel="Checkmark color"
-        style={[commonStyles.textBox, textBoxBorderStyle]}
+        style={textBoxBorderStyle.textbox}
         placeholder="Checkmark color"
         blurOnSubmit={true}
         onSubmitEditing={(e) => {
@@ -178,5 +182,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/CheckboxExperimental/CheckboxTest.tsx

@@ -2,11 +2,12 @@ import * as React from 'react';
 import { EXPERIMENTAL_CHECKBOX_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { Checkbox } from '@fluentui-react-native/experimental-checkbox';
-import { useTheme } from '@fluentui-react-native/theme-types';
-import { View, TextInput, TextStyle } from 'react-native';
+import { Theme, useTheme } from '@fluentui-react-native/theme-types';
+import { View, TextInput } from 'react-native';
 import { commonTestStyles as commonStyles } from '../Common/styles';
 import { E2ECheckboxExperimentalTest } from './E2ECheckboxExperimentalTest';
 import { InteractionEvent } from '@fluentui-react-native/interactive-hooks';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 
 function onChangeUncontrolled(_e: InteractionEvent, isChecked: boolean) {
   console.log(isChecked);
@@ -91,6 +92,10 @@ const ComposedCheckbox = Checkbox.compose({
   },
 });
 
+const getThemedStyles = themedStyleSheet((t: Theme) => {
+  return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
+});
+
 const TokenCheckbox: React.FunctionComponent = () => {
   const [checkboxColor, setCheckboxColor] = React.useState('blue');
   const [checkmarkColor, setCheckmarkColor] = React.useState('white');
@@ -104,9 +109,7 @@ const TokenCheckbox: React.FunctionComponent = () => {
   });
 
   const theme = useTheme();
-  const textBoxBorderStyle: TextStyle = {
-    borderColor: theme.colors.inputBorder,
-  };
+  const textBoxBorderStyle = getThemedStyles(theme);
 
   return (
     <View>
@@ -123,7 +126,7 @@ const TokenCheckbox: React.FunctionComponent = () => {
       />
       <TextInput
         accessibilityLabel="Background color"
-        style={[commonStyles.textBox, textBoxBorderStyle]}
+        style={textBoxBorderStyle.textbox}
         placeholder="Background color"
         blurOnSubmit={true}
         onSubmitEditing={(e) => {
@@ -133,7 +136,7 @@ const TokenCheckbox: React.FunctionComponent = () => {
 
       <TextInput
         accessibilityLabel="Checkmark color"
-        style={[commonStyles.textBox, textBoxBorderStyle]}
+        style={textBoxBorderStyle.textbox}
         placeholder="Checkmark color"
         blurOnSubmit={true}
         onSubmitEditing={(e) => {

package/src/TestComponents/Common/styles.ts

@@ -8,6 +8,7 @@ export const commonTestStyles = StyleSheet.create({
     flexDirection: 'row',
     alignItems: 'flex-start',
   },
+  flex: { flex: 1 },
   header: {
     marginVertical: 6,
     fontSize: 16,
@@ -116,6 +117,8 @@ export const fluentTesterStyles = StyleSheet.create({
     justifyContent: 'flex-start',
   },
 
+  testListSeparator: { marginHorizontal: 8 },
+
   testSection: {
     flexGrow: 1,
   },
@@ -159,3 +162,5 @@ export const mobileStyles = StyleSheet.create({
     width: '100%',
   },
 });
+
+export const testContentRootViewStyle = [stackStyle, commonTestStyles.view];

package/src/TestComponents/Menu/MenuTest.tsx

@@ -16,6 +16,7 @@ import { MENU_TESTPAGE } from './consts';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { TextV1 as Text } from '@fluentui-react-native/text';
 import { E2EMenuTest } from './E2EMenuTest';
+import { StyleSheet } from 'react-native';
 
 const MenuDefault: React.FunctionComponent = () => {
   return (
@@ -36,10 +37,13 @@ const MenuDefault: React.FunctionComponent = () => {
   );
 };
 
+const defaultCheckedTestCase = ['itemOne'];
+const checkedTestCase = ['itemTwo'];
+
 const MenuCheckmarks: React.FunctionComponent = () => {
   return (
     <Stack style={stackStyle}>
-      <Menu defaultChecked={['itemOne']}>
+      <Menu defaultChecked={defaultCheckedTestCase}>
         <MenuTrigger>
           <Button>All checkmark items</Button>
         </MenuTrigger>
@@ -51,7 +55,7 @@ const MenuCheckmarks: React.FunctionComponent = () => {
           </MenuList>
         </MenuPopover>
       </Menu>
-      <Menu hasCheckmarks checked={['itemTwo']}>
+      <Menu hasCheckmarks checked={checkedTestCase}>
         <MenuTrigger>
           <Button>Some controlled checkmark items with alignment</Button>
         </MenuTrigger>
@@ -94,7 +98,7 @@ const MenuRadioItem: React.FunctionComponent = () => {
   return (
     <Stack style={stackStyle}>
       <Text>Current checked: {checked.join(' ')}</Text>
-      <Menu defaultChecked={['itemOne']} onCheckedChange={onCheckedChange}>
+      <Menu defaultChecked={defaultCheckedTestCase} onCheckedChange={onCheckedChange}>
         <MenuTrigger>
           <Button>Items with radio selection</Button>
         </MenuTrigger>
@@ -164,10 +168,12 @@ const MenuOpenOnHover: React.FunctionComponent = () => {
   );
 };
 
+const rootStackStyle = StyleSheet.create({ root: { ...(stackStyle as object), flexDirection: 'row' } });
+
 const MenuControlledOpen: React.FunctionComponent = () => {
   const [open, setOpen] = React.useState<boolean>(false);
   return (
-    <Stack style={[stackStyle, { flexDirection: 'row' }]}>
+    <Stack style={rootStackStyle.root}>
       <Button onClick={() => setOpen(!open)}>Toggle open</Button>
       <Menu open={open}>
         <MenuTrigger>
@@ -283,5 +289,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

@@ -164,7 +164,7 @@ const PrimaryWithAutoHide: React.FunctionComponent = () => {
         {visible ? 'Hide' : 'Show'}
       </Button>
       {!hidden && (
-        <Animated.View style={[animatedViewProps]}>
+        <Animated.View style={animatedViewProps}>
           <Notification
             variant={'primary'}
             action="Undo"
@@ -237,7 +237,7 @@ const PrimaryBarWithAutoHide: React.FunctionComponent = () => {
         {visible ? 'Hide' : 'Show'}
       </Button>
       {!hidden && (
-        <Animated.View style={[animatedViewProps]}>
+        <Animated.View style={animatedViewProps}>
           <Notification
             variant={'primaryBar'}
             onPress={() => {
@@ -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/Persona/CustomizeUsage.tsx

@@ -1,10 +1,15 @@
 import * as React from 'react';
-import { View, Text, Switch, TextInput, TextStyle } from 'react-native';
+import { View, Text, Switch, TextInput } from 'react-native';
 import { Persona } from '@fluentui/react-native';
 import { michaelImageUrl } from './styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
-import { useTheme } from '@fluentui-react-native/theme-types';
+import { Theme, useTheme } from '@fluentui-react-native/theme-types';
 import { Slider } from '../Common/Slider';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+
+const getThemedStyles = themedStyleSheet((t: Theme) => {
+  return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
+});
 
 export const CustomizeUsage: React.FunctionComponent = () => {
   const [showImage, setShowImage] = React.useState(true);
@@ -20,9 +25,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
   const [verticalGap, setVerticalGap] = React.useState<number>();
 
   const theme = useTheme();
-  const textBoxBorderStyle: TextStyle = {
-    borderColor: theme.colors.inputBorder,
-  };
+  const textBoxBorderStyle = getThemedStyles(theme);
 
   const CustomizedPersona = React.useMemo(() => {
     const tokens = {
@@ -49,7 +52,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
 
         <TextInput
           accessibilityLabel="Background color"
-          style={[commonStyles.textBox, textBoxBorderStyle]}
+          style={textBoxBorderStyle.textbox}
           placeholder="Background color"
           blurOnSubmit={true}
           onSubmitEditing={(e) => {
@@ -59,7 +62,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
 
         <TextInput
           accessibilityLabel="Initials text color"
-          style={[commonStyles.textBox, textBoxBorderStyle]}
+          style={textBoxBorderStyle.textbox}
           placeholder="Initials text color"
           blurOnSubmit={true}
           onSubmitEditing={(e) => {

package/src/TestComponents/PersonaCoin/CustomizeUsage.mobile.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { PersonaCoin } from '@fluentui/react-native';
-import { Switch, View, Text, TextInput } from 'react-native';
+import { Switch, View, Text, TextInput, StyleSheet } from 'react-native';
 import Slider from '@react-native-community/slider';
 import { steveBallmerPhotoUrl, undefinedText } from './styles';
 import { commonTestStyles as commonStyles } from '../Common/styles';
@@ -8,20 +8,15 @@ import { useTheme } from '@fluentui-react-native/theme-types';
 
 type WithUndefined<T> = T | typeof undefinedText;
 
+const styles = StyleSheet.create({ slider: { ...commonStyles.vmargin, flex: 1 } });
+
 const StyledSlider = (props) => {
   const { title, min, max, initial, onChange, current, step } = props;
   const theme = useTheme();
   return (
     <View style={{ flexDirection: 'row' }}>
       <Text style={{ flex: 0.5, color: theme.colors.inputText }}>{title}</Text>
-      <Slider
-        step={step || 1}
-        minimumValue={min}
-        maximumValue={max}
-        value={initial}
-        style={[commonStyles.vmargin, { flex: 1 }]}
-        onValueChange={onChange}
-      />
+      <Slider step={step || 1} minimumValue={min} maximumValue={max} value={initial} style={styles.slider} onValueChange={onChange} />
       <Text style={{ flex: 0.2, color: theme.colors.inputText }}>{current}</Text>
     </View>
   );

package/src/TestComponents/PersonaCoin/CustomizeUsage.tsx

@@ -1,11 +1,16 @@
 import * as React from 'react';
 import { PersonaCoin, IconAlignment } from '@fluentui/react-native';
-import { Switch, View, Text, TextInput, TextStyle } from 'react-native';
+import { Switch, View, Text, TextInput } from 'react-native';
 import { Slider } from '../Common/Slider';
 import { steveBallmerPhotoUrl } from './styles';
-import { useTheme } from '@fluentui-react-native/theme-types';
+import { Theme, useTheme } from '@fluentui-react-native/theme-types';
 import { AlignmentPicker } from '../Common/AlignmentPicker';
 import { commonTestStyles as commonStyles } from '../Common/styles';
+import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
+
+const getThemedStyles = themedStyleSheet((t: Theme) => {
+  return { textbox: { ...commonStyles.textBox, borderColor: t.colors.inputBorder } };
+});
 
 export const CustomizeUsage: React.FunctionComponent = () => {
   const [showImage, setShowImage] = React.useState(true);
@@ -25,9 +30,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
   const [transparent, setTransparent] = React.useState<boolean>(false);
 
   const theme = useTheme();
-  const textBoxBorderStyle: TextStyle = {
-    borderColor: theme.colors.inputBorder,
-  };
+  const textBoxBorderStyle = getThemedStyles(theme);
 
   const CustomizedPersonaCoin = React.useMemo(() => {
     const tokens = {
@@ -75,7 +78,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
 
         <TextInput
           accessibilityLabel="Background color"
-          style={[commonStyles.textBox, textBoxBorderStyle]}
+          style={textBoxBorderStyle.textbox}
           placeholder="Background color"
           blurOnSubmit={true}
           onSubmitEditing={(e) => {
@@ -85,7 +88,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
 
         <TextInput
           accessibilityLabel="Initials text color"
-          style={[commonStyles.textBox, textBoxBorderStyle]}
+          style={textBoxBorderStyle.textbox}
           placeholder="Initials text color"
           blurOnSubmit={true}
           onSubmitEditing={(e) => {
@@ -95,7 +98,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
 
         <TextInput
           accessibilityLabel="Icon stroke color"
-          style={[commonStyles.textBox, textBoxBorderStyle]}
+          style={textBoxBorderStyle.textbox}
           placeholder="Icon stroke color"
           blurOnSubmit={true}
           onSubmitEditing={(e) => {
@@ -105,7 +108,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
 
         <TextInput
           accessibilityLabel="Ring color"
-          style={[commonStyles.textBox, textBoxBorderStyle]}
+          style={textBoxBorderStyle.textbox}
           placeholder="Ring color"
           blurOnSubmit={true}
           onSubmitEditing={(e) => {
@@ -115,7 +118,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
 
         <TextInput
           accessibilityLabel="Ring background color"
-          style={[commonStyles.textBox, textBoxBorderStyle]}
+          style={textBoxBorderStyle.textbox}
           placeholder="Ring background color"
           blurOnSubmit={true}
           onSubmitEditing={(e) => {

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}
+    />
   );
 };