@fluentui-react-native/tester 0.128.2 → 0.129.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.128.2",
+  "version": "0.129.0",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -33,71 +33,71 @@
     "directory": "apps/fluent-tester"
   },
   "dependencies": {
-    "@fluentui-react-native/android-theme": ">=0.16.1 <1.0.0",
-    "@fluentui-react-native/apple-theme": ">=0.18.4 <1.0.0",
-    "@fluentui-react-native/avatar": "^1.6.0",
-    "@fluentui-react-native/badge": ">=0.4.21 <1.0.0",
-    "@fluentui-react-native/button": ">=0.32.25 <1.0.0",
-    "@fluentui-react-native/default-theme": ">=0.16.26 <1.0.0",
-    "@fluentui-react-native/dropdown": ">=0.7.20 <1.0.0",
-    "@fluentui-react-native/experimental-activity-indicator": ">=0.7.13 <1.0.0",
-    "@fluentui-react-native/experimental-avatar": ">=0.17.10 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.16.83",
-    "@fluentui-react-native/experimental-checkbox": "0.13.32",
-    "@fluentui-react-native/experimental-expander": "0.5.13",
-    "@fluentui-react-native/experimental-menu-button": ">=0.6.22 <1.0.0",
+    "@fluentui-react-native/android-theme": ">=0.16.2 <1.0.0",
+    "@fluentui-react-native/apple-theme": ">=0.18.5 <1.0.0",
+    "@fluentui-react-native/avatar": "^1.6.1",
+    "@fluentui-react-native/badge": ">=0.4.22 <1.0.0",
+    "@fluentui-react-native/button": ">=0.32.26 <1.0.0",
+    "@fluentui-react-native/default-theme": ">=0.16.27 <1.0.0",
+    "@fluentui-react-native/dropdown": ">=0.7.21 <1.0.0",
+    "@fluentui-react-native/experimental-activity-indicator": ">=0.7.14 <1.0.0",
+    "@fluentui-react-native/experimental-appearance-additions": "^0.2.1",
+    "@fluentui-react-native/experimental-avatar": ">=0.17.11 <1.0.0",
+    "@fluentui-react-native/experimental-button": "0.16.84",
+    "@fluentui-react-native/experimental-checkbox": "0.13.33",
+    "@fluentui-react-native/experimental-expander": "0.5.14",
+    "@fluentui-react-native/experimental-menu-button": ">=0.6.23 <1.0.0",
     "@fluentui-react-native/experimental-native-date-picker": ">=0.7.4 <1.0.0",
-    "@fluentui-react-native/experimental-radio-group": "^0.9.13",
-    "@fluentui-react-native/experimental-shadow": "0.2.62",
-    "@fluentui-react-native/experimental-shimmer": "0.8.13",
-    "@fluentui-react-native/experimental-tabs": "0.8.27",
-    "@fluentui-react-native/experimental-text": ">=0.11.46 <1.0.0",
-    "@fluentui-react-native/framework": ">=0.8.36 <1.0.0",
-    "@fluentui-react-native/icon": "0.17.7",
-    "@fluentui-react-native/interactive-hooks": ">=0.22.13 <1.0.0",
-    "@fluentui-react-native/menu": "^1.2.23",
+    "@fluentui-react-native/experimental-radio-group": "^0.9.14",
+    "@fluentui-react-native/experimental-shadow": "0.2.63",
+    "@fluentui-react-native/experimental-shimmer": "0.8.14",
+    "@fluentui-react-native/experimental-tabs": "0.8.28",
+    "@fluentui-react-native/experimental-text": ">=0.11.47 <1.0.0",
+    "@fluentui-react-native/framework": ">=0.8.37 <1.0.0",
+    "@fluentui-react-native/icon": "0.17.8",
+    "@fluentui-react-native/interactive-hooks": ">=0.22.14 <1.0.0",
+    "@fluentui-react-native/menu": "^1.2.24",
     "@fluentui-react-native/merge-props": ">=0.5.1 <1.0.0",
-    "@fluentui-react-native/separator": "^0.14.10",
-    "@fluentui-react-native/notification": "0.21.21",
-    "@fluentui-react-native/stack": ">=0.7.47 <1.0.0",
-    "@fluentui-react-native/switch": "^0.8.19",
-    "@fluentui-react-native/text": ">=0.19.15 <1.0.0",
-    "@fluentui-react-native/theme": ">=0.7.18 <1.0.0",
-    "@fluentui-react-native/theme-tokens": "^0.24.0",
-    "@fluentui-react-native/theme-types": ">=0.30.0 <1.0.0",
+    "@fluentui-react-native/notification": "0.21.22",
+    "@fluentui-react-native/separator": "^0.14.11",
+    "@fluentui-react-native/stack": ">=0.7.48 <1.0.0",
+    "@fluentui-react-native/switch": "^0.8.20",
+    "@fluentui-react-native/text": ">=0.19.16 <1.0.0",
+    "@fluentui-react-native/theme": ">=0.7.19 <1.0.0",
+    "@fluentui-react-native/theme-tokens": "^0.24.1",
+    "@fluentui-react-native/theme-types": ">=0.30.1 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.4.1",
-    "@fluentui-react-native/theming-utils": ">=0.23.0 <1.0.0",
-    "@fluentui-react-native/win32-theme": ">=0.24.13 <1.0.0",
-    "@fluentui/react-native": ">=0.35.12 <1.0.0",
+    "@fluentui-react-native/theming-utils": ">=0.23.1 <1.0.0",
+    "@fluentui-react-native/win32-theme": ">=0.24.14 <1.0.0",
+    "@fluentui/react-native": ">=0.35.13 <1.0.0",
     "@fortawesome/fontawesome-svg-core": "^6.2.0",
     "@fortawesome/free-solid-svg-icons": "^6.2.0",
     "@fortawesome/react-native-fontawesome": "^0.3.0",
     "@react-native-community/slider": "^4.2.0",
     "@react-native-menu/menu": "^0.1.2",
     "@react-native-picker/picker": "^2.2.1",
+    "@warren-ms/react-native-icons": "^0.0.13",
     "react": "17.0.2",
-    "react-dom": "17.0.2",
     "react-native": "^0.68.0",
     "react-native-macos": "^0.68.0",
-    "react-native-svg": "12.5.0",
+    "react-native-svg": "^12.3.0",
     "react-native-windows": "^0.68.0",
-    "tslib": "^2.3.1",
-    "@warren-ms/react-native-icons": "^0.0.13"
+    "tslib": "^2.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.8.0",
     "@babel/runtime": "^7.8.0",
     "@fluentui-react-native/eslint-config-rules": "^0.1.1",
+    "@fluentui-react-native/focus-zone": "^0.11.26",
     "@fluentui-react-native/scripts": "^0.1.1",
-    "@rnx-kit/cli": "^0.14.8",
+    "@rnx-kit/cli": "^0.16.2",
     "@rnx-kit/metro-config": "^1.3.1",
     "flow-bin": "^0.113.0",
     "metro-config": "^0.67.0",
     "metro-react-native-babel-preset": "^0.67.0",
     "react-native-svg-transformer": "^1.0.0",
     "react-native-test-app": "^2.0.2",
-    "react-test-renderer": "17.0.2",
-    "@fluentui-react-native/focus-zone": "^0.11.25"
+    "react-test-renderer": "17.0.2"
   },
   "peerDependencies": {
     "@office-iss/react-native-win32": "^0.68.0"
@@ -106,7 +106,6 @@
     "preset": "react-native"
   },
   "rnx-kit": {
-    "reactNativeVersion": "^0.68",
     "kitType": "app",
     "bundle": [
       {
@@ -119,13 +118,20 @@
           "macos",
           "windows"
         ],
-        "detectCyclicDependencies": {
-          "throwOnError": true
-        },
-        "detectDuplicateDependencies": {
-          "throwOnError": false
-        },
-        "typescriptValidation": false,
+        "plugins": [
+          [
+            "@rnx-kit/metro-plugin-cyclic-dependencies-detector",
+            {
+              "throwOnError": true
+            }
+          ],
+          [
+            "@rnx-kit/metro-plugin-duplicates-checker",
+            {
+              "throwOnError": false
+            }
+          ]
+        ],
         "platforms": {
           "android": {
             "bundleOutput": "dist/index.android.bundle",
@@ -147,17 +153,25 @@
         }
       }
     ],
-    "capabilities": [
-      "core-android",
-      "core-ios",
-      "core-macos",
-      "core-windows",
-      "babel-preset-react-native",
-      "metro-config",
-      "react",
-      "react-dom",
-      "svg"
-    ]
+    "alignDeps": {
+      "presets": [
+        "microsoft/react-native",
+        "@fluentui-react-native/scripts/align-deps-preset.js"
+      ],
+      "requirements": [
+        "react-native@0.68"
+      ],
+      "capabilities": [
+        "core-android",
+        "core-ios",
+        "core-macos",
+        "core-windows",
+        "babel-preset-react-native",
+        "metro-config",
+        "react",
+        "svg"
+      ]
+    }
   },
   "depcheck": {
     "ignoreMatches": [

package/src/FluentTester.tsx

@@ -31,7 +31,7 @@ interface HeaderProps {
 const getThemedStyles = themedStyleSheet((t: Theme) => {
   return {
     root: {
-      backgroundColor: t.colors.background,
+      backgroundColor: t.colors.neutralBackground1,
       flex: 1,
       flexGrow: 1,
       flexDirection: 'column',

package/src/FluentTesterApp.tsx

@@ -2,41 +2,13 @@
 
 import { ThemeProvider } from '@fluentui-react-native/theme';
 import * as React from 'react';
-import { Platform, useWindowDimensions } from 'react-native';
+import { Platform } from 'react-native';
 import { FluentTester, FluentTesterProps } from './FluentTester';
 import { testerTheme } from './theme/index';
-
-type SizeClassIOS = 'regular' | 'compact' | undefined;
-
-/**
- * Hook that "guesses" our Size Class on iOS based on our window width.
- * Note: this is hacky and should not be used.
- *
- * For more information about Size Classes, see the following:
- * https://developer.apple.com/documentation/uikit/uitraitcollection
- * https://developer.apple.com/design/human-interface-guidelines/foundations/layout/#platform-considerations
- * @returns SizeClassIOS: enum determining our size class
- */
-const useSizeClassIOS_DO_NOT_USE: () => SizeClassIOS = () => {
-  if (Platform.OS === 'ios') {
-    /**
-     * Technically this violates the rules of hooks (calling hooks inside conditions) but Platform.OS checks are pretty non-conditional.
-     * This is necessary because useWindowDimensions() does not work in win32.
-     */
-    // eslint-disable-next-line react-hooks/rules-of-hooks
-    const width = useWindowDimensions().width;
-    if (Platform.isPad && width > 375) {
-      return 'regular';
-    } else {
-      return 'compact';
-    }
-  } else {
-    return undefined;
-  }
-};
+import { useHorizontalSizeClass } from '@fluentui-react-native/experimental-appearance-additions';
 
 export const FluentTesterApp: React.FunctionComponent<FluentTesterProps> = (props) => {
-  const sizeClass = useSizeClassIOS_DO_NOT_USE();
+  const sizeClass = useHorizontalSizeClass();
   const isMobile = Platform.OS === 'android' || (Platform.OS === 'ios' && Platform.isPad === false);
 
   // If on iPad we are presented in a Split View or Slide Over context, show the single pane view.

package/src/TestComponents/ColorTokens/ColorTokenTest.tsx

@@ -1,15 +1,18 @@
 import * as React from 'react';
-import { View, ViewStyle, StyleSheet, ColorValue } from 'react-native';
+import { View, ViewStyle, StyleSheet, ColorValue, Platform } from 'react-native';
 import { useTheme, Theme } from '@fluentui-react-native/theme-types';
 import { themedStyleSheet } from '@fluentui-react-native/themed-stylesheet';
 import { getCurrentAppearance } from '@fluentui-react-native/theming-utils';
 import { createOfficeAliasTokens } from '@fluentui-react-native/win32-theme';
 import { createAliasTokens } from '@fluentui-react-native/default-theme';
 import { commonTestStyles } from '../Common/styles';
-import { Text } from '@fluentui/react-native';
+import { Text, ToggleButton } from '@fluentui/react-native';
 import { Test, TestSection, PlatformStatus } from '../Test';
 import { COLORTOKENS_TEST_COMPONENT, COLORTOKEN_TESTPAGE } from '../../../../E2E/src/ColorTokens/consts';
 import { testProps } from '../Common/TestProps';
+import { globalTokens } from '@fluentui-react-native/theme-tokens';
+import Svg, { G, Path, SvgProps } from 'react-native-svg';
+import { SvgIconProps } from '@fluentui-react-native/icon';
 
 const getThemedStyles = themedStyleSheet((theme: Theme) => {
   return {
@@ -29,52 +32,72 @@ const styles = StyleSheet.create({
     alignItems: 'center',
     marginVertical: 5,
   },
-  pickerContainer: {
-    flexDirection: 'row',
-    justifyContent: 'space-evenly',
-  },
   stackStyle: {
     borderWidth: 2,
     padding: 12,
     margin: 8,
   },
+  statusView: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    margin: 8,
+  },
+  // Needed to ensure that with the button is toggled on, the top of the newly shown
+  // content is visible so the user knows to scroll down
+  toggleButtonAreaPadding: {
+    paddingBottom: 10,
+  },
 });
 
-const getSwatchColorStyle = (name: string, color: ColorValue): ViewStyle => {
-  styles[name] = styles[name] || { backgroundColor: color };
-  return styles[name];
+const getSwatchColorStyle = (colorName: string, colorValue: ColorValue): ViewStyle => {
+  styles[colorName] = styles[colorName] || { backgroundColor: colorValue };
+  return styles[colorName];
 };
 
-type ColorTokenProps = { color: ColorValue; name: string };
+type ColorTokenProps = { colorValue: ColorValue; colorName: string };
 const ColorToken: React.FunctionComponent<ColorTokenProps> = (p: ColorTokenProps) => {
+  if (p.colorValue === undefined) {
+    console.warn('Color token ' + p.colorName + ' is undefined');
+  }
+
   const themedStyles = getThemedStyles(useTheme());
   return (
     <View style={styles.swatchItem}>
       <View
-        style={[getSwatchColorStyle(p.name, p.color), themedStyles.swatch]}
+        style={[getSwatchColorStyle(p.colorName, p.colorValue), themedStyles.swatch]}
         /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
         {...testProps(COLORTOKENS_TEST_COMPONENT)}
       />
-      <Text>{p.name}</Text>
+      <Text>{p.colorName + ' (' + p.colorValue?.toString() + ')'}</Text>
     </View>
   );
 };
 
-const AliasTokensSwatchList: React.FunctionComponent = () => {
+const getSwatch = (item) => {
+  const { colorValue, colorName } = item;
+  return <ColorToken key={colorName} colorValue={colorValue} colorName={colorName} />;
+};
+
+/// Alias color tokens
+
+const AliasColorTokensSwatchList: React.FunctionComponent = () => {
   const theme = useTheme();
+
   const isOfficeTheme =
     theme.name === 'White' ||
     theme.name === 'Colorful' ||
     theme.name === 'DarkGray' ||
     theme.name === 'Black' ||
     theme.name === 'HighContrast';
+
   const aliasColorTokens = isOfficeTheme
     ? createOfficeAliasTokens(theme.name)
     : createAliasTokens(getCurrentAppearance(theme.host.appearance, 'light'));
 
   const aggregator = React.useCallback(
-    (key: string) => {
-      return { key: key + ' (' + (aliasColorTokens[key] as string) + ')', color: aliasColorTokens[key] };
+    (colorName: string) => {
+      return { colorName: colorName, colorValue: aliasColorTokens[colorName] };
     },
     [aliasColorTokens],
   );
@@ -83,15 +106,107 @@ const AliasTokensSwatchList: React.FunctionComponent = () => {
     return Object.keys(aliasColorTokens).map(aggregator);
   }, [aliasColorTokens, aggregator]);
 
-  const aliasTokensAsArray = React.useMemo(flattenArray, [flattenArray]);
-  const renderSwatch = React.useCallback((item) => {
-    const { color, key } = item;
-    return <ColorToken key={key} color={color} name={key} />;
-  }, []);
+  const aliasColorTokensAsArray = React.useMemo(flattenArray, [flattenArray]);
+
+  const renderSwatch = React.useCallback(getSwatch, []);
+
   return (
     <View style={commonTestStyles.view}>
-      <Text>Alias Color Tokens from Token Pipeline</Text>
-      <View style={styles.stackStyle}>{aliasTokensAsArray.map((item) => renderSwatch(item))}</View>
+      <View style={styles.stackStyle}>{aliasColorTokensAsArray.map((item) => renderSwatch(item))}</View>
+    </View>
+  );
+};
+
+/// Global color tokens - neutral
+
+const globalNeutralColorNamesSortedDarkToLight = Object.keys(globalTokens.color)
+  .filter((globalColorName) => globalColorName.includes('grey') || globalColorName === 'black' || globalColorName === 'white')
+  .sort((color1, color2) => {
+    const color1hex = globalTokens.color[color1];
+    const color2hex = globalTokens.color[color2];
+    // All global color tokens are hex based colors, so we can make the assumption that ordering the hex values alphabetically
+    // will order the colors from dark to light
+    return color1hex === color2hex ? 0 : color1hex < color2hex ? -1 : 1;
+  });
+
+const globalNeutralColorTokensAsArray = globalNeutralColorNamesSortedDarkToLight.map((colorName: string) => {
+  return {
+    colorName: colorName,
+    colorValue: globalTokens.color[colorName],
+  };
+});
+
+const GlobalNeutralColorTokensSwatchList: React.FunctionComponent = () => {
+  const renderSwatch = React.useCallback(getSwatch, []);
+
+  return (
+    <View style={commonTestStyles.view}>
+      <View style={styles.stackStyle}>{globalNeutralColorTokensAsArray.map((item) => renderSwatch(item))}</View>
+    </View>
+  );
+};
+
+/// Global color tokens - shared
+
+const globalSharedColorNames = Object.keys(globalTokens.color).filter((key) => globalTokens.color[key].primary !== undefined);
+const globalSharedColorVariantsSortedDarkToLight = Object.keys(globalTokens.color.red).sort((color1, color2) => {
+  const color1hex = globalTokens.color.red[color1];
+  const color2hex = globalTokens.color.red[color2];
+  // All global color tokens are hex based colors, so we can make the assumption that ordering the hex values alphabetically
+  // will order the colors from dark to light
+  return color1hex === color2hex ? 0 : color1hex < color2hex ? -1 : 1;
+});
+const globalSharedColorTokensAsArray = globalSharedColorNames
+  .map((sharedColorName) => {
+    return globalSharedColorVariantsSortedDarkToLight.map((variant) => {
+      return {
+        colorName: sharedColorName + '.' + variant,
+        colorValue: globalTokens.color[sharedColorName][variant],
+      };
+    });
+  })
+  .reduce((accumulator, sharedColor) => accumulator.concat(sharedColor));
+
+const GlobalSharedColorTokensSwatchList: React.FunctionComponent = () => {
+  const renderSwatch = React.useCallback(getSwatch, []);
+
+  const [showGlobalSharedColors, setShowGlobalSharedColors] = 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 = showGlobalSharedColors ? minusPath : plusPath;
+    return (
+      <Svg>
+        <G>
+          <Path d={path} fill="black" />
+        </G>
+      </Svg>
+    );
+  };
+
+  const svgProps: SvgIconProps = { src: toggleSvg };
+  const plusCodepoint = 0x2795;
+  const minusCodepoint = 0x2796;
+  const fontIconProps = {
+    codepoint: showGlobalSharedColors ? minusCodepoint : plusCodepoint,
+    fontSize: 10,
+  };
+  const toggleIconProps = Platform.OS === 'windows' ? { fontSource: fontIconProps } : { svgSource: svgProps, width: 12, height: 12 };
+
+  return (
+    <View style={styles.toggleButtonAreaPadding}>
+      <View style={styles.statusView}>
+        <Text variant="subheaderStandard">Show color tokens</Text>
+        <ToggleButton iconOnly={true} icon={toggleIconProps} onClick={() => setShowGlobalSharedColors(!showGlobalSharedColors)} />
+      </View>
+      {showGlobalSharedColors && (
+        <View style={commonTestStyles.view}>
+          <View style={styles.stackStyle}>{globalSharedColorTokensAsArray.map((item) => renderSwatch(item))}</View>
+        </View>
+      )}
     </View>
   );
 };
@@ -100,7 +215,15 @@ const themeSections: TestSection[] = [
   {
     name: 'Alias Color Tokens',
     testID: COLORTOKEN_TESTPAGE,
-    component: () => <AliasTokensSwatchList />,
+    component: () => <AliasColorTokensSwatchList />,
+  },
+  {
+    name: 'Global Color Tokens - Neutral Colors',
+    component: () => <GlobalNeutralColorTokensSwatchList />,
+  },
+  {
+    name: 'Global Color Tokens - Shared Colors',
+    component: () => <GlobalSharedColorTokensSwatchList />,
   },
 ];
 
@@ -113,7 +236,7 @@ export const ColorTokensTest: React.FunctionComponent = () => {
     androidStatus: 'Experimental',
   };
 
-  const description = 'Alias tokens given from token pipeline. Currently values are pulled from web. Will be used to style components.';
+  const description = 'Alias and global tokens given from token pipeline. Used to style components.';
 
   return <Test name="Color Tokens Test" description={description} sections={themeSections} status={status} />;
 };