@fluentui-react-native/tester 0.90.0 → 0.90.1

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 />

package/src/TestComponents/Theme/ThemeTest.tsx

@@ -16,11 +16,6 @@ const getThemedStyles = themedStyleSheet((theme: Theme) => {
       borderWidth: 2,
       borderColor: theme.colors.bodyText,
     },
-    stackStyle: {
-      borderWidth: 2,
-      padding: 12,
-      margin: 8,
-    },
   };
 });
 
@@ -30,18 +25,28 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginVertical: 5,
   },
+  panel: {
+    ...commonTestStyles.view,
+    borderWidth: 2,
+    padding: 12,
+    margin: 8,
+  },
   pickerContainer: {
     flexDirection: 'row',
     justifyContent: 'space-evenly',
   },
+  stackStyle: {
+    borderWidth: 2,
+    padding: 12,
+    margin: 8,
+  },
 });
 
 const Panel: React.FunctionComponent = () => {
   const [disabled, setDisabled] = React.useState(false);
   const onClick = React.useCallback(() => setDisabled(!disabled), [disabled, setDisabled]);
-  const themedStyles = getThemedStyles(useTheme());
   return (
-    <View style={[commonTestStyles.view, themedStyles.stackStyle]}>
+    <View style={styles.panel}>
       <PrimaryButton onClick={onClick} content="Primary Button" disabled={disabled} />
       <Button onClick={onClick} content="Default Button" disabled={disabled} />
       <StealthButton onClick={onClick} content="Stealth Button" disabled={disabled} />
@@ -69,7 +74,6 @@ const SemanticColor: React.FunctionComponent<SemanticColorProps> = (p: SemanticC
 
 const SwatchList: React.FunctionComponent = () => {
   const theme = useTheme();
-  const themedStyles = getThemedStyles(theme);
   const palette = theme.colors;
 
   const aggregator = React.useCallback(
@@ -84,14 +88,14 @@ const SwatchList: React.FunctionComponent = () => {
   }, [palette, aggregator]);
 
   const paletteAsArray = React.useMemo(flattenArray, [flattenArray]);
-  const renderSwatch = React.useCallback(({ item }) => {
+  const renderSwatch = React.useCallback((item) => {
     const { color, key } = item;
     return <SemanticColor key={key} color={color} name={key} />;
   }, []);
   return (
-    <View style={[commonTestStyles.view]}>
+    <View style={commonTestStyles.view}>
       <Text>getHostSettingsWin32(theme: ITheme).palette</Text>
-      <View style={themedStyles.stackStyle}>{paletteAsArray.map((item) => renderSwatch({ item }))}</View>
+      <View style={styles.stackStyle}>{paletteAsArray.map((item) => renderSwatch(item))}</View>
     </View>
   );
 };

package/src/TestComponents/Tokens/TokenTest.tsx

@@ -19,11 +19,6 @@ const getThemedStyles = themedStyleSheet((theme: Theme) => {
       borderWidth: 2,
       borderColor: theme.colors.bodyText,
     },
-    stackStyle: {
-      borderWidth: 2,
-      padding: 12,
-      margin: 8,
-    },
   };
 });
 
@@ -37,6 +32,11 @@ const styles = StyleSheet.create({
     flexDirection: 'row',
     justifyContent: 'space-evenly',
   },
+  stackStyle: {
+    borderWidth: 2,
+    padding: 12,
+    margin: 8,
+  },
 });
 
 const getSwatchColorStyle = (name: string, color: ColorValue): ViewStyle => {
@@ -57,7 +57,6 @@ const ColorToken: React.FunctionComponent<ColorTokenProps> = (p: ColorTokenProps
 
 const AliasTokensSwatchList: React.FunctionComponent = () => {
   const theme = useTheme();
-  const themedStyles = getThemedStyles(theme);
   const isOfficeTheme =
     theme.name === 'White' ||
     theme.name === 'Colorful' ||
@@ -80,14 +79,14 @@ const AliasTokensSwatchList: React.FunctionComponent = () => {
   }, [aliasColorTokens, aggregator]);
 
   const aliasTokensAsArray = React.useMemo(flattenArray, [flattenArray]);
-  const renderSwatch = React.useCallback(({ item }) => {
+  const renderSwatch = React.useCallback((item) => {
     const { color, key } = item;
     return <ColorToken key={key} color={color} name={key} />;
   }, []);
   return (
-    <View style={[commonTestStyles.view]}>
+    <View style={commonTestStyles.view}>
       <Text>Alias Color Tokens from Token Pipeline</Text>
-      <View style={themedStyles.stackStyle}>{aliasTokensAsArray.map((item) => renderSwatch({ item }))}</View>
+      <View style={styles.stackStyle}>{aliasTokensAsArray.map((item) => renderSwatch(item))}</View>
     </View>
   );
 };