@fluentui-react-native/tester 0.90.0 → 0.90.3

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

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>

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

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/Test.tsx

@@ -109,7 +109,7 @@ export const Test = (props: TestProps): React.ReactElement<Record<string, never>
   return (
     <View testID="ScrollViewAreaForComponents">
       <View style={styles.header}>
-        <Text style={[styles.name]} variant="heroSemibold">
+        <Text style={styles.name} variant="heroSemibold">
           {props.name}
         </Text>
         {props.spec && <Link url={props.spec} content="SPEC" />}
@@ -125,28 +125,28 @@ export const Test = (props: TestProps): React.ReactElement<Record<string, never>
         </View>
         {showStatus && (
           <>
-            <Text style={[styles.statusLabel]} variant="bodySemibold">
+            <Text style={styles.statusLabel} variant="bodySemibold">
               Win32: <Text style={styles.status}>{props.status.win32Status}</Text>
             </Text>
-            <Text style={[styles.statusLabel]} variant="bodySemibold">
+            <Text style={styles.statusLabel} variant="bodySemibold">
               UWP: <Text style={styles.status}>{props.status.uwpStatus}</Text>
             </Text>
-            <Text style={[styles.statusLabel]} variant="bodySemibold">
+            <Text style={styles.statusLabel} variant="bodySemibold">
               iOS: <Text style={styles.status}>{props.status.iosStatus}</Text>
             </Text>
-            <Text style={[styles.statusLabel]} variant="bodySemibold">
+            <Text style={styles.statusLabel} variant="bodySemibold">
               macOS: <Text style={styles.status}>{props.status.macosStatus}</Text>
             </Text>
-            <Text style={[styles.statusLabel]} variant="bodySemibold">
+            <Text style={styles.statusLabel} variant="bodySemibold">
               Android: <Text style={styles.status}>{props.status.androidStatus}</Text>
             </Text>
 
-            <Text style={[styles.definitionHeader]} variant="headerStandard">
+            <Text style={styles.definitionHeader} variant="headerStandard">
               Status Definitions
             </Text>
             {Object.entries(definitions).map(([key, value]) => {
               return (
-                <Text style={[styles.statusLabel]} variant="bodySemibold" key={key}>
+                <Text style={styles.statusLabel} variant="bodySemibold" key={key}>
                   {key}: <Text style={styles.status}>{value}</Text>
                 </Text>
               );
@@ -158,7 +158,7 @@ export const Test = (props: TestProps): React.ReactElement<Record<string, never>
         const TestComponent = section.component;
         return (
           <View key={index}>
-            <Text style={[styles.section]} variant="headerSemibold" testID={section.testID}>
+            <Text style={styles.section} variant="headerSemibold" testID={section.testID}>
               {section.name}
             </Text>
             <Separator />