@fluentui-react-native/tester 0.88.0 → 0.90.1

package/lib-commonjs/TestComponents/Tokens/TokenTest.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.88.0",
+  "version": "0.90.1",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -57,7 +57,7 @@
     "@fluentui-react-native/icon": "0.13.4",
     "@fluentui-react-native/interactive-hooks": ">=0.18.1 <1.0.0",
     "@fluentui-react-native/menu": "^1.0.26",
-    "@fluentui-react-native/notification": "0.16.1",
+    "@fluentui-react-native/notification": "0.17.0",
     "@fluentui-react-native/stack": ">=0.7.3 <1.0.0",
     "@fluentui-react-native/switch": "^0.6.2",
     "@fluentui-react-native/text": ">=0.14.0 <1.0.0",

package/src/FluentTester.tsx

@@ -5,7 +5,7 @@ import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 import * as React from 'react';
 import { ScrollView, View, Text as RNText, Platform, SafeAreaView, BackHandler } from 'react-native';
 import { BASE_TESTPAGE } from './TestComponents/Common/consts';
-import { fluentTesterStyles, mobileStyles } from './TestComponents/Common/styles';
+import { commonTestStyles, fluentTesterStyles, mobileStyles } from './TestComponents/Common/styles';
 import { useTheme } from '@fluentui-react-native/theme-types';
 import { ThemePickers } from './theme/ThemePickers';
 import { tests } from './testPages';
@@ -89,7 +89,7 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:
       <View style={fluentTesterStyles.header}>
         <Text
           testID={BASE_TESTPAGE}
-          style={[fluentTesterStyles.testHeader]}
+          style={fluentTesterStyles.testHeader}
           variant="heroLargeSemibold"
           color={theme.host.palette?.TextEmphasis}
         >
@@ -107,7 +107,7 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:
     return (
       <View style={mobileStyles.header}>
         <Text
-          style={[fluentTesterStyles.testHeader]}
+          style={fluentTesterStyles.testHeader}
           variant="heroLargeSemibold"
           color={theme.host.palette?.TextEmphasis}
           testID={BASE_TESTPAGE}
@@ -153,7 +153,7 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:
           })}
         </ScrollView>
 
-        <TestListSeparator vertical style={{ marginHorizontal: 8 }} />
+        <TestListSeparator vertical style={fluentTesterStyles.testListSeparator} />
       </View>
     );
   };
@@ -208,7 +208,7 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:
 
   const TesterContent: React.FunctionComponent = () => {
     return (
-      <View style={{ flex: 1 }}>
+      <View style={commonTestStyles.flex}>
         {enableSinglePaneView ? <MobileHeader /> : <Header />}
 
         <HeaderSeparator />
@@ -222,7 +222,7 @@ export const FluentTester: React.FunctionComponent<FluentTesterProps> = (props:
   };
 
   return (
-    <View style={{ flex: 1 }}>
+    <View style={commonTestStyles.flex}>
       {Platform.OS === ('win32' as any) ? (
         <FocusTrapZone style={themedStyles.root}>
           <TesterContent />

package/src/TestComponents/Avatar/AvatarTest.tsx

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

package/src/TestComponents/Avatar/BasicAvatar.tsx

@@ -100,7 +100,7 @@ export const StandardUsage: FunctionComponent = () => {
           size={36}
           shape={isSquare ? 'square' : 'circular'}
           accessibilityLabel="SVG Icon"
-          icon={{ fontSource: { ...fontBuiltInProps } }}
+          icon={{ fontSource: fontBuiltInProps }}
           avatarColor={avatarColor}
           badge={{ status: 'outOfOffice', outOfOffice }}
         />
@@ -110,7 +110,7 @@ export const StandardUsage: FunctionComponent = () => {
           size={imageSize === undefinedText ? undefined : imageSize}
           shape={isSquare ? 'square' : 'circular'}
           accessibilityLabel="SVG Icon"
-          icon={{ fontSource: { ...fontBuiltInProps }, color: 'green' }}
+          icon={{ fontSource: fontBuiltInProps, color: 'green' }}
           avatarColor={avatarColor}
           badge={{ status: 'outOfOffice', outOfOffice }}
         />

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/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) => {