@fluentui-react-native/tester 0.89.0 → 0.90.2

package/src/TestComponents/Shadow/ShadowTest.tsx

@@ -28,5 +28,7 @@ export const ShadowTest: React.FunctionComponent = () => {
 
   const description = 'A Shadow component using the Fluent Design System. Shadow components can be added to other components.';
 
-  return <Test name="Shadow Test" description={description} sections={shadowSections} status={status} />;
+  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/experimental/Shadow/SPEC.md';
+
+  return <Test name="Shadow Test" description={description} spec={spec} sections={shadowSections} status={status} />;
 };

package/src/TestComponents/Switch/Switch.tsx

@@ -125,5 +125,7 @@ export const SwitchTest: React.FunctionComponent = () => {
 
   const description = 'Switch is a control that has two mutually exclusive states.';
 
-  return <Test name="Switch Test" description={description} sections={toggleSections} status={status}></Test>;
+  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/experimental/Switch/SPEC.md';
+
+  return <Test name="Switch Test" description={description} spec={spec} sections={toggleSections} status={status} />;
 };

package/src/TestComponents/Test.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { Platform, StyleSheet, View } from 'react-native';
-import { Text, ToggleButton, Separator } from '@fluentui/react-native';
+import { Text, ToggleButton, Separator, Link } from '@fluentui/react-native';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from './Common/styles';
 import { useTheme } from '@fluentui-react-native/theme-types';
@@ -25,6 +25,7 @@ export type PlatformStatus = {
 export interface TestProps {
   name: string;
   description: string;
+  spec?: string;
   status: PlatformStatus;
   sections: TestSection[];
 }
@@ -49,6 +50,11 @@ const styles = StyleSheet.create({
     alignItems: 'flex-start',
     flexWrap: 'wrap',
   },
+  header: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
   section: {
     marginTop: 12,
   },
@@ -102,9 +108,12 @@ export const Test = (props: TestProps): React.ReactElement<Record<string, never>
 
   return (
     <View testID="ScrollViewAreaForComponents">
-      <Text style={[styles.name]} variant="heroSemibold">
-        {props.name}
-      </Text>
+      <View style={styles.header}>
+        <Text style={styles.name} variant="heroSemibold">
+          {props.name}
+        </Text>
+        {props.spec && <Link url={props.spec} content="SPEC" />}
+      </View>
       <Separator />
       <Stack style={stackStyle}>
         <Text style={styles.description}>{props.description}</Text>
@@ -116,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>
               );
@@ -149,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/Text/TextTest.tsx

@@ -35,5 +35,7 @@ export const TextTest: React.FunctionComponent = () => {
 
   const description = 'Text is a component for displaying text. You can use Text to standardize text across your app.';
 
-  return <Test name="Text Test" description={description} sections={textSections} status={status} />;
+  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/components/text/SPEC.md';
+
+  return <Test name="Text Test" description={description} spec={spec} sections={textSections} status={status} />;
 };

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