@fluentui-react-native/tester 0.88.0 → 0.90.1

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

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

package/src/TestComponents/PersonaCoin/CustomizeUsage.tsx

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

package/src/TestComponents/RadioGroupExperimental/RadioGroupExperimentalTest.tsx

@@ -23,7 +23,15 @@ export const RadioGroupExperimentalTest: React.FunctionComponent = () => {
   const description =
     'RadioGroup lets users select a single option from two or more choices. Each option is represented by one Radio; a user can select only one Radio in a RadioGroup.';
 
+  const spec = 'https://github.com/microsoft/fluentui-react-native/blob/main/packages/experimental/RadioGroup/SPEC.md';
+
   return (
-    <Test name="Experimental RadioGroup Test" description={description} sections={radioGroupExperimentalSections} status={status}></Test>
+    <Test
+      name="Experimental RadioGroup Test"
+      description={description}
+      spec={spec}
+      sections={radioGroupExperimentalSections}
+      status={status}
+    />
   );
 };

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,8 +1,11 @@
 import * as React from 'react';
-import { StyleSheet, View, Platform } from 'react-native';
-import { Text, Separator } from '@fluentui/react-native';
+import { Platform, StyleSheet, View } from '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';
+import Svg, { G, Path, SvgProps } from 'react-native-svg';
+import { SvgIconProps } from '@fluentui-react-native/icon';
 
 export type TestSection = {
   name: string;
@@ -22,29 +25,44 @@ export type PlatformStatus = {
 export interface TestProps {
   name: string;
   description: string;
+  spec?: string;
   status: PlatformStatus;
   sections: TestSection[];
 }
 
+const definitions = {
+  Production: 'Control is ready for broad partner use and to be used in production-ready scenarios.',
+  Beta: 'Control is ready for partner consumption, but not ready for production release (e.g. fixing bugs).',
+  Experimental: 'Control code checked into repo, but not ready for partner use.',
+  Backlog: 'Control is in plan and on our backlog to deliver.',
+  'N/A': 'Control is not in current plan.',
+};
+
 const styles = StyleSheet.create({
   name: {
     marginTop: 4,
   },
+  definitionHeader: {
+    marginTop: 12,
+    marginBottom: 6,
+  },
   description: {
     alignItems: 'flex-start',
     flexWrap: 'wrap',
   },
+  header: {
+    alignItems: 'center',
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
   section: {
     marginTop: 12,
   },
   statusView: {
     flexDirection: 'row',
-    alignItems: 'flex-start',
+    alignItems: 'center',
     justifyContent: 'space-between',
   },
-  statusHeader: {
-    marginBottom: 6,
-  },
   statusLabel: {
     marginTop: 2,
     marginStart: 4,
@@ -54,75 +72,93 @@ const styles = StyleSheet.create({
   },
 });
 
-// mobile platform check to not render status components.
-const isMobile = Platform.OS == 'android' || (Platform.OS == 'ios' && !Platform.isPad);
-
 export const Test = (props: TestProps): React.ReactElement<Record<string, never>> => {
+  const [showStatus, setShowStatus] = React.useState(false);
+
+  const toggleSvg: React.FunctionComponent<SvgProps> = () => {
+    const plusPath =
+      'M6.5 1.75C6.5 1.33579 6.16421 1 5.75 1C5.33579 1 5 1.33579 5 1.75V5H1.75C1.33579 5 1 5.33579 1 5.75C1 6.16421 1.33579 6.5 1.75 6.5H5V9.75C5 10.1642 5.33579 10.5 5.75 10.5C6.16421 10.5 6.5 10.1642 6.5 9.75V6.5H9.75C10.1642 6.5 10.5 6.16421 10.5 5.75C10.5 5.33579 10.1642 5 9.75 5H6.5V1.75Z';
+    const minusPath = 'M2.75 5.25h6.5s0.75 0 0.75 0.75v0s0 0.75 -0.75 0.75h-6.5s-0.75 0 -0.75 -0.75v0s0 -0.75 0.75 -0.75';
+
+    const path = showStatus ? minusPath : plusPath;
+    return (
+      <Svg>
+        <G>
+          <Path d={path} fill="black" />
+        </G>
+      </Svg>
+    );
+  };
+  const svgProps: SvgIconProps = {
+    src: toggleSvg,
+  };
+
+  const theme = useTheme();
+  const fontFamily = theme.typography.families.primary;
+
+  const plusCodepoint = 0x2795;
+  const minusCodepoint = 0x2796;
+  const fontIconProps = {
+    fontFamily: fontFamily,
+    codepoint: showStatus ? minusCodepoint : plusCodepoint,
+    fontSize: 10,
+  };
+
+  const toggleIconProps = Platform.OS === 'windows' ? { fontSource: fontIconProps } : { svgSource: svgProps, width: 12, height: 12 };
+
   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>
       </Stack>
-      {!isMobile && (
-        <Stack style={stackStyle}>
-          <View style={styles.statusView}>
-            <Stack>
-              <Text style={[styles.statusHeader]} variant="headerStandard">
-                Platform Status
-              </Text>
-              <Text style={[styles.statusLabel]} variant="bodySemibold">
-                Win32: <Text style={styles.status}>{props.status.win32Status}</Text>
-              </Text>
-              <Text style={[styles.statusLabel]} variant="bodySemibold">
-                UWP: <Text style={styles.status}>{props.status.uwpStatus}</Text>
-              </Text>
-              <Text style={[styles.statusLabel]} variant="bodySemibold">
-                iOS: <Text style={styles.status}>{props.status.iosStatus}</Text>
-              </Text>
-              <Text style={[styles.statusLabel]} variant="bodySemibold">
-                macOS: <Text style={styles.status}>{props.status.macosStatus}</Text>
-              </Text>
-              <Text style={[styles.statusLabel]} variant="bodySemibold">
-                Android: <Text style={styles.status}>{props.status.androidStatus}</Text>
-              </Text>
-            </Stack>
+      <Stack style={stackStyle}>
+        <View style={styles.statusView}>
+          <Text variant="headerStandard">Platform Status</Text>
+          <ToggleButton iconOnly={true} icon={toggleIconProps} onClick={() => setShowStatus(!showStatus)} />
+        </View>
+        {showStatus && (
+          <>
+            <Text style={styles.statusLabel} variant="bodySemibold">
+              Win32: <Text style={styles.status}>{props.status.win32Status}</Text>
+            </Text>
+            <Text style={styles.statusLabel} variant="bodySemibold">
+              UWP: <Text style={styles.status}>{props.status.uwpStatus}</Text>
+            </Text>
+            <Text style={styles.statusLabel} variant="bodySemibold">
+              iOS: <Text style={styles.status}>{props.status.iosStatus}</Text>
+            </Text>
+            <Text style={styles.statusLabel} variant="bodySemibold">
+              macOS: <Text style={styles.status}>{props.status.macosStatus}</Text>
+            </Text>
+            <Text style={styles.statusLabel} variant="bodySemibold">
+              Android: <Text style={styles.status}>{props.status.androidStatus}</Text>
+            </Text>
 
-            <Stack style={stackStyle}>
-              <Text style={[styles.statusHeader]} variant="headerStandard">
-                Status Definitions
-              </Text>
-              <Text style={[styles.statusLabel]} variant="bodySemibold">
-                Production:{' '}
-                <Text style={styles.status}>Control is ready for broad partner use and to be used in production-ready scenarios.</Text>
-              </Text>
-              <Text style={[styles.statusLabel]} variant="bodySemibold">
-                Beta:{' '}
-                <Text style={styles.status}>
-                  Control is ready for partner consumption, but not ready for production release (e.g. fixing bugs).
+            <Text style={styles.definitionHeader} variant="headerStandard">
+              Status Definitions
+            </Text>
+            {Object.entries(definitions).map(([key, value]) => {
+              return (
+                <Text style={styles.statusLabel} variant="bodySemibold" key={key}>
+                  {key}: <Text style={styles.status}>{value}</Text>
                 </Text>
-              </Text>
-              <Text style={[styles.statusLabel]} variant="bodySemibold">
-                Experimental: <Text style={styles.status}>Control code checked into repo, but not ready for partner use.</Text>
-              </Text>
-              <Text style={[styles.statusLabel]} variant="bodySemibold">
-                Backlog: <Text style={styles.status}>Control is in plan and on our backlog to deliver.</Text>
-              </Text>
-              <Text style={[styles.statusLabel]} variant="bodySemibold">
-                N/A: <Text style={styles.status}>Control is not in current plan.</Text>
-              </Text>
-            </Stack>
-          </View>
-        </Stack>
-      )}
+              );
+            })}
+          </>
+        )}
+      </Stack>
       {props.sections.map((section, index) => {
         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>
   );
 };