@fluentui-react-native/tester 0.131.1 → 0.133.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.131.1",
+  "version": "0.133.0",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -33,49 +33,51 @@
     "directory": "apps/fluent-tester"
   },
   "dependencies": {
-    "@fluentui-react-native/android-theme": ">=0.16.5 <1.0.0",
-    "@fluentui-react-native/apple-theme": ">=0.18.10 <1.0.0",
-    "@fluentui-react-native/avatar": "^1.6.4",
-    "@fluentui-react-native/badge": ">=0.4.25 <1.0.0",
-    "@fluentui-react-native/button": ">=0.32.30 <1.0.0",
-    "@fluentui-react-native/default-theme": ">=0.17.0 <1.0.0",
-    "@fluentui-react-native/dropdown": ">=0.7.27 <1.0.0",
-    "@fluentui-react-native/experimental-activity-indicator": ">=0.7.17 <1.0.0",
-    "@fluentui-react-native/experimental-appearance-additions": "^0.3.0",
-    "@fluentui-react-native/experimental-avatar": ">=0.17.14 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.16.88",
-    "@fluentui-react-native/experimental-checkbox": "0.13.36",
-    "@fluentui-react-native/experimental-expander": "0.5.17",
-    "@fluentui-react-native/experimental-menu-button": ">=0.6.29 <1.0.0",
+    "@fluentui-react-native/android-theme": ">=0.16.6 <1.0.0",
+    "@fluentui-react-native/apple-theme": ">=0.18.11 <1.0.0",
+    "@fluentui-react-native/avatar": "^1.6.5",
+    "@fluentui-react-native/badge": ">=0.4.26 <1.0.0",
+    "@fluentui-react-native/button": ">=0.32.31 <1.0.0",
+    "@fluentui-react-native/default-theme": ">=0.17.1 <1.0.0",
+    "@fluentui-react-native/divider": "^0.2.0",
+    "@fluentui-react-native/dropdown": ">=0.7.28 <1.0.0",
+    "@fluentui-react-native/experimental-activity-indicator": ">=0.7.18 <1.0.0",
+    "@fluentui-react-native/experimental-appearance-additions": "^0.3.1",
+    "@fluentui-react-native/experimental-avatar": ">=0.17.15 <1.0.0",
+    "@fluentui-react-native/experimental-button": "0.16.89",
+    "@fluentui-react-native/experimental-checkbox": "0.13.37",
+    "@fluentui-react-native/experimental-expander": "0.5.18",
+    "@fluentui-react-native/experimental-menu-button": ">=0.6.30 <1.0.0",
     "@fluentui-react-native/experimental-native-date-picker": ">=0.7.5 <1.0.0",
-    "@fluentui-react-native/experimental-radio-group": "^0.9.17",
-    "@fluentui-react-native/experimental-shadow": "0.2.66",
-    "@fluentui-react-native/experimental-shimmer": "0.8.18",
-    "@fluentui-react-native/experimental-tabs": "0.8.31",
-    "@fluentui-react-native/experimental-text": ">=0.11.50 <1.0.0",
-    "@fluentui-react-native/framework": ">=0.9.0 <1.0.0",
-    "@fluentui-react-native/icon": "0.17.11",
-    "@fluentui-react-native/interactive-hooks": ">=0.22.17 <1.0.0",
-    "@fluentui-react-native/menu": "^1.4.0",
+    "@fluentui-react-native/experimental-radio-group": "^0.9.18",
+    "@fluentui-react-native/experimental-shadow": "0.2.67",
+    "@fluentui-react-native/experimental-shimmer": "0.8.19",
+    "@fluentui-react-native/experimental-tabs": "0.8.32",
+    "@fluentui-react-native/experimental-text": ">=0.11.51 <1.0.0",
+    "@fluentui-react-native/framework": ">=0.9.1 <1.0.0",
+    "@fluentui-react-native/icon": "0.17.12",
+    "@fluentui-react-native/interactive-hooks": ">=0.22.18 <1.0.0",
+    "@fluentui-react-native/menu": "^1.4.1",
     "@fluentui-react-native/merge-props": ">=0.5.2 <1.0.0",
-    "@fluentui-react-native/notification": "0.21.30",
-    "@fluentui-react-native/separator": "^0.14.14",
-    "@fluentui-react-native/stack": ">=0.7.51 <1.0.0",
-    "@fluentui-react-native/switch": "^0.8.24",
-    "@fluentui-react-native/text": ">=0.19.19 <1.0.0",
+    "@fluentui-react-native/notification": "0.21.31",
+    "@fluentui-react-native/separator": "^0.14.15",
+    "@fluentui-react-native/stack": ">=0.7.52 <1.0.0",
+    "@fluentui-react-native/switch": "^0.8.25",
+    "@fluentui-react-native/text": ">=0.19.20 <1.0.0",
     "@fluentui-react-native/theme": ">=0.8.0 <1.0.0",
     "@fluentui-react-native/theme-tokens": "^0.24.2",
     "@fluentui-react-native/theme-types": ">=0.30.2 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.4.2",
-    "@fluentui-react-native/theming-utils": ">=0.23.2 <1.0.0",
-    "@fluentui-react-native/win32-theme": ">=0.25.0 <1.0.0",
-    "@fluentui/react-native": ">=0.35.19 <1.0.0",
+    "@fluentui-react-native/theming-utils": ">=0.23.3 <1.0.0",
+    "@fluentui-react-native/win32-theme": ">=0.25.1 <1.0.0",
+    "@fluentui/react-native": ">=0.36.1 <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",
+    "@fluentui-react-native/spinner": "^0.2.1",
     "@warren-ms/react-native-icons": "^0.0.13",
     "react": "17.0.2",
     "react-native": "^0.68.0",
@@ -88,7 +90,7 @@
     "@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.29",
+    "@fluentui-react-native/focus-zone": "^0.11.30",
     "@fluentui-react-native/scripts": "^0.1.1",
     "@rnx-kit/cli": "^0.16.2",
     "@rnx-kit/metro-config": "^1.3.1",

package/src/TestComponents/Divider/DividerTest.tsx

@@ -0,0 +1,116 @@
+import * as React from 'react';
+import { Platform, StyleSheet, View } from 'react-native';
+import { Divider } from '@fluentui-react-native/divider';
+import { Stack } from '@fluentui-react-native/stack';
+import { TextV1 as Text } from '@fluentui-react-native/text';
+import { DIVIDER_TESTPAGE } from './consts';
+import { Test } from '../Test';
+import type { TestSection, PlatformStatus } from '../Test';
+import { commonTestStyles } from '../Common/styles';
+import TestSvg from '../../../assets/test.svg';
+
+const CustomDivider = Divider.customize({ thickness: 3, paddingVertical: 4 });
+const CustomText = Text.customize({ margin: 8 });
+
+const RedDivider = Divider.customize({ contentColor: 'red', lineColor: 'red' });
+
+const dividerTestStyles = StyleSheet.create({
+  verticalDividerContainer: {
+    marginVertical: 8,
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+  },
+});
+
+export const HorizontalDividers: React.FunctionComponent = () => (
+  <Stack style={commonTestStyles.stack}>
+    <CustomText>Regular divider with no content below.</CustomText>
+    <Divider />
+    <CustomText>Regular divider with no content above.</CustomText>
+    <Divider>Divider with text content.</Divider>
+    <Divider insetSize={16}>Colored divider with text + inset.</Divider>
+    <CustomDivider alignContent="start">I am a start-aligned divider with a thickness = 3</CustomDivider>
+    <CustomDivider alignContent="end">I am a end-aligned divider with a thickness = 3</CustomDivider>
+  </Stack>
+);
+
+export const VerticalDividers: React.FunctionComponent = () => (
+  <Stack style={commonTestStyles.stack}>
+    <View style={dividerTestStyles.verticalDividerContainer}>
+      <CustomText>Regular divider {'->'}</CustomText>
+      <Divider vertical />
+      <CustomText>Divider with an inset {'->'}</CustomText>
+      <Divider vertical insetSize={16} />
+      <CustomDivider vertical>Thick divider with text</CustomDivider>
+      <RedDivider vertical alignContent="start">
+        Start-aligned divider
+      </RedDivider>
+      <Divider vertical alignContent="end">
+        End-aligned divider
+      </Divider>
+    </View>
+    <Divider />
+    <View style={dividerTestStyles.verticalDividerContainer}>
+      <CustomText>The divider to the right of me should have a min height of 24px</CustomText>
+      <Divider vertical />
+      <CustomText>The divider to the left of me should have a min height of 24px</CustomText>
+    </View>
+  </Stack>
+);
+
+export const DividersWithAppearance: React.FunctionComponent = () => (
+  <Stack style={commonTestStyles.stack}>
+    <CustomDivider appearance="default">Default divider</CustomDivider>
+    <CustomDivider appearance="subtle">Subtle divider</CustomDivider>
+    <CustomDivider appearance="brand">Branded divider</CustomDivider>
+    <CustomDivider appearance="strong">Strong divider</CustomDivider>
+  </Stack>
+);
+
+export const DividersWithIcons: React.FunctionComponent = () => (
+  <Stack style={commonTestStyles.stack}>
+    <Divider appearance="brand" icon={{ fontSource: { fontFamily: 'Arial', codepoint: 0x2663, fontSize: 32 } }} />
+    <CustomText align="center">
+      Above is a branded Divider with a font icon as content. Below me is a branded divider with an svg icon as content - this will not show
+      on UWP.
+    </CustomText>
+    {Platform.OS !== 'windows' && (
+      <Divider appearance="brand" icon={{ svgSource: { viewBox: '0 0 500 500', src: TestSvg, width: 32, height: 32 } }} />
+    )}
+  </Stack>
+);
+
+const dividerSections: TestSection[] = [
+  {
+    name: 'Horizontal Dividers',
+    testID: DIVIDER_TESTPAGE,
+    component: HorizontalDividers,
+  },
+  {
+    name: 'Vertical Dividers',
+    component: VerticalDividers,
+  },
+  {
+    name: 'Divider Appearances',
+    component: DividersWithAppearance,
+  },
+  {
+    name: 'Dividers with Icons',
+    component: DividersWithIcons,
+  },
+];
+
+export const DividerTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Experimental',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Backlog',
+    macosStatus: 'Backlog',
+    androidStatus: 'Backlog',
+  };
+
+  const description =
+    'A Divider is a visual separator that can contain content (text or an icon). Dividers can be horizontal or vertical. As of now, the component is being designed for win32 only.';
+
+  return <Test name="Divider Test" description={description} sections={dividerSections} status={status}></Test>;
+};

package/src/TestComponents/Divider/consts.ts

@@ -0,0 +1,2 @@
+export const HOMEPAGE_DIVIDER_BUTTON = 'Homepage_Divider_Button';
+export const DIVIDER_TESTPAGE = 'Divider_TestPage';

package/src/TestComponents/Divider/index.ts

@@ -0,0 +1,2 @@
+export * from './DividerTest';
+export * from './consts';

package/src/TestComponents/Spinner/SpinnerE2ETest.tsx

@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Spinner } from '@fluentui-react-native/spinner';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle } from '../Common/styles';
+import { testProps } from '../Common/TestProps';
+import { SPINNER_TEST_COMPONENT } from '../../../../E2E/src/Spinner/consts';
+
+export const E2ETestingSpinner: React.FunctionComponent<Record<string, never>> = () => {
+  return (
+    <Stack style={stackStyle}>
+      <Spinner
+        size="large"
+        /* For Android E2E testing purposes, testProps must be passed in after accessibilityLabel. */
+        {...testProps(SPINNER_TEST_COMPONENT)}
+      />
+    </Stack>
+  );
+};

package/src/TestComponents/Spinner/SpinnerTest.tsx

@@ -0,0 +1,103 @@
+import * as React from 'react';
+import { Text, TextV1 } from '@fluentui-react-native/text';
+import { Stack } from '@fluentui-react-native/stack';
+import { stackStyle, commonTestStyles as commonStyles, commonTestStyles } from '../Common/styles';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+import { SPINNER_TESTPAGE } from '../../../../E2E/src/Spinner/consts';
+import { View, Switch } from 'react-native';
+import { Spinner } from '@fluentui-react-native/spinner';
+import { E2ETestingSpinner } from './SpinnerE2ETest';
+
+const BasicSpinnerTest: React.FunctionComponent = () => {
+  const [animating, setAnimating] = React.useState(true);
+  const [hidesWhenStopped, setHidesWhenStopped] = React.useState(true);
+
+  return (
+    <Stack style={stackStyle}>
+      <View style={commonStyles.root}>
+        <View style={commonStyles.settings}>
+          <View style={commonStyles.switch}>
+            <Text>Animating</Text>
+            <Switch value={animating} onValueChange={setAnimating} />
+          </View>
+          <View style={commonStyles.switch}>
+            <Text>HidesWhenStopped</Text>
+            <Switch value={hidesWhenStopped} onValueChange={setHidesWhenStopped} />
+          </View>
+        </View>
+        <Spinner animating={animating} hidesWhenStopped={hidesWhenStopped} />
+      </View>
+    </Stack>
+  );
+};
+
+const CustomisedSpinner = Spinner.customize({
+  trackColor: 'red',
+  size: 'medium',
+});
+
+const SpinnerSizeTest: React.FunctionComponent = () => {
+  const memoizedStyles = React.useMemo(() => ({ ...commonTestStyles.androidContainer, height: 250 }), []);
+  return (
+    <Stack style={stackStyle}>
+      <View style={memoizedStyles}>
+        <View>
+          <TextV1>xx-small</TextV1>
+          <Spinner size="xx-small" />
+        </View>
+        <View>
+          <TextV1>x-small</TextV1>
+          <Spinner size="x-small" />
+        </View>
+        <View>
+          <TextV1>medium</TextV1>
+          <Spinner size="medium" />
+        </View>
+        <View>
+          <TextV1>large</TextV1>
+          <Spinner size="large" />
+        </View>
+        <View>
+          <TextV1>x-large</TextV1>
+          <Spinner size="x-large" />
+        </View>
+      </View>
+    </Stack>
+  );
+};
+
+const spinnerSections: TestSection[] = [
+  {
+    name: 'Basic Spinner',
+    testID: SPINNER_TESTPAGE,
+    component: BasicSpinnerTest,
+  },
+  {
+    name: 'Spinner Size Test',
+    component: SpinnerSizeTest,
+  },
+  {
+    name: 'Customized Spinner Test',
+    component: () => <CustomisedSpinner />,
+  },
+  {
+    name: 'Spinner for E2E Testing',
+    component: () => <E2ETestingSpinner />,
+  },
+];
+
+export const SpinnerTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Backlog',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Beta',
+    macosStatus: 'Backlog',
+    androidStatus: 'Backlog',
+  };
+
+  const description =
+    'Spinner is a visual representation that data is being loaded. It is implemented with a View wrapping an Animated SVG. The View is to ensure that AccessibilityRole works. AccessibilityRole currently does not work on SVGs.';
+
+  return <Test name="Spinner Test" description={description} sections={spinnerSections} status={status}></Test>;
+};

package/src/TestComponents/Spinner/index.ts

@@ -0,0 +1 @@
+export * from './SpinnerTest';

package/src/testPages.ts

@@ -10,6 +10,7 @@ import { ColorTokensTest } from './TestComponents/ColorTokens';
 import { ContextualMenuTest } from './TestComponents/ContextualMenu';
 import { CornerRadiusTokensTest } from './TestComponents/CornerRadius';
 import { NativeDatePickerTest, HOMEPAGE_NATIVEDATEPICKER_BUTTON } from './TestComponents/NativeDatePicker';
+import { DividerTest, HOMEPAGE_DIVIDER_BUTTON } from './TestComponents/Divider';
 import { DropdownTest, HOMEPAGE_DROPDOWN_BUTTON } from './TestComponents/Dropdown';
 // import { DrawerTest, Constants.HOMEPAGE_DRAWER_BUTTON } from './TestComponents/Drawer';
 // import { ExpanderTest, Constants.HOMEPAGE_EXPANDER_BUTTON } from './TestComponents/Expander';
@@ -40,6 +41,7 @@ import { TextLegacyTest } from './TestComponents/TextLegacy';
 import { TextV1Test } from './TestComponents/TextV1';
 import { ThemeTest } from './TestComponents/Theme';
 import * as Constants from '../../E2E/src/index.consts';
+import { SpinnerTest } from './TestComponents/Spinner';
 
 export const tests: TestDescription[] = [
   {
@@ -114,6 +116,12 @@ export const tests: TestDescription[] = [
     testPageButton: HOMEPAGE_NATIVEDATEPICKER_BUTTON,
     platforms: ['ios'],
   },
+  {
+    name: 'Divider',
+    component: DividerTest,
+    testPageButton: HOMEPAGE_DIVIDER_BUTTON,
+    platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
+  },
   {
     name: 'Dropdown',
     component: DropdownTest,
@@ -241,6 +249,12 @@ export const tests: TestDescription[] = [
     testPageButton: Constants.HOMEPAGE_SPACING_BUTTON,
     platforms: ['android', 'ios', 'macos', 'win32', 'windows'],
   },
+  {
+    name: 'Spinner V1',
+    component: SpinnerTest,
+    testPageButton: Constants.HOMEPAGE_SPINNER_BUTTON,
+    platforms: ['android'],
+  },
   {
     name: 'Stroke Width Tokens',
     component: StrokeWidthTest,