@fluentui-react-native/tester 0.61.10 → 0.62.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@fluentui-react-native/tester",
-  "version": "0.61.10",
+  "version": "0.62.2",
   "description": "A test app to test FluentUI React Native Components during development",
   "license": "MIT",
   "author": "Microsoft <fluentuinativeowners@microsoft.com>",
@@ -25,33 +25,33 @@
     "directory": "apps/fluent-tester"
   },
   "dependencies": {
-    "@fluentui-react-native/android-theme": ">=0.8.0 <1.0.0",
-    "@fluentui-react-native/apple-theme": ">=0.12.1 <1.0.0",
-    "@fluentui-react-native/badge": ">=0.0.36 <1.0.0",
-    "@fluentui-react-native/button": ">=0.22.23 <1.0.0",
-    "@fluentui-react-native/default-theme": ">=0.11.0 <1.0.0",
-    "@fluentui-react-native/experimental-activity-indicator": ">=0.5.27 <1.0.0",
-    "@fluentui-react-native/experimental-avatar": ">=0.14.31 <1.0.0",
-    "@fluentui-react-native/experimental-button": "0.15.24",
-    "@fluentui-react-native/experimental-checkbox": "0.11.6",
-    "@fluentui-react-native/experimental-drawer": ">=0.1.11 <1.0.0",
-    "@fluentui-react-native/experimental-native-date-picker": ">=0.4.2 <1.0.0",
-    "@fluentui-react-native/experimental-expander": "0.3.29",
-    "@fluentui-react-native/experimental-menu-button": ">=0.3.41 <1.0.0",
-    "@fluentui-react-native/experimental-shimmer": "0.6.31",
-    "@fluentui-react-native/experimental-tabs": "0.4.46",
-    "@fluentui-react-native/experimental-text": ">=0.7.28 <1.0.0",
-    "@fluentui-react-native/framework": ">=0.7.28 <1.0.0",
-    "@fluentui-react-native/icon": "0.11.23",
-    "@fluentui-react-native/interactive-hooks": ">=0.15.8 <1.0.0",
-    "@fluentui-react-native/menu": ">=0.9.3 <1.0.0",
-    "@fluentui-react-native/stack": ">=0.6.28 <1.0.0",
-    "@fluentui-react-native/theme": ">=0.6.9 <1.0.0",
-    "@fluentui-react-native/theme-types": ">=0.15.0 <1.0.0",
+    "@fluentui-react-native/android-theme": ">=0.10.0 <1.0.0",
+    "@fluentui-react-native/apple-theme": ">=0.12.3 <1.0.0",
+    "@fluentui-react-native/badge": ">=0.0.39 <1.0.0",
+    "@fluentui-react-native/button": ">=0.22.26 <1.0.0",
+    "@fluentui-react-native/default-theme": ">=0.13.0 <1.0.0",
+    "@fluentui-react-native/experimental-activity-indicator": ">=0.5.29 <1.0.0",
+    "@fluentui-react-native/experimental-avatar": ">=0.14.34 <1.0.0",
+    "@fluentui-react-native/experimental-button": "0.15.27",
+    "@fluentui-react-native/experimental-checkbox": "0.11.9",
+    "@fluentui-react-native/experimental-drawer": ">=0.1.13 <1.0.0",
+    "@fluentui-react-native/experimental-native-date-picker": ">=0.4.3 <1.0.0",
+    "@fluentui-react-native/experimental-expander": "0.3.31",
+    "@fluentui-react-native/experimental-menu-button": ">=0.3.44 <1.0.0",
+    "@fluentui-react-native/experimental-shimmer": "0.6.33",
+    "@fluentui-react-native/experimental-tabs": "0.4.49",
+    "@fluentui-react-native/experimental-text": ">=0.9.0 <1.0.0",
+    "@fluentui-react-native/framework": ">=0.7.30 <1.0.0",
+    "@fluentui-react-native/icon": "0.12.0",
+    "@fluentui-react-native/interactive-hooks": ">=0.16.1 <1.0.0",
+    "@fluentui-react-native/menu": ">=0.11.1 <1.0.0",
+    "@fluentui-react-native/stack": ">=0.6.29 <1.0.0",
+    "@fluentui-react-native/theme": ">=0.6.11 <1.0.0",
+    "@fluentui-react-native/theme-types": ">=0.17.0 <1.0.0",
     "@fluentui-react-native/themed-stylesheet": "^1.3.3",
-    "@fluentui-react-native/theming-utils": ">=0.11.0 <1.0.0",
-    "@fluentui-react-native/win32-theme": ">=0.17.0 <1.0.0",
-    "@fluentui/react-native": ">=0.29.9 <1.0.0",
+    "@fluentui-react-native/theming-utils": ">=0.13.0 <1.0.0",
+    "@fluentui-react-native/win32-theme": ">=0.19.0 <1.0.0",
+    "@fluentui/react-native": ">=0.29.12 <1.0.0",
     "@react-native-community/slider": "^4.2.0",
     "@react-native-menu/menu": "^0.1.2",
     "@react-native-picker/picker": "^2.2.1",

package/src/FluentTester/TestComponents/Icon/IconTest.tsx

@@ -72,7 +72,7 @@ const Icons: React.FunctionComponent = () => {
       {showSvgIcons ? (
         <View>
           <Text>SVG icons</Text>
-          <Icon svgSource={svgProps} width={100} height={100} color="orange" />
+          <Icon svgSource={svgProps} width={100} height={100} color="orange" accessibilityLabel="Wheelchair" />
           {
             // TODO: Causes TypeError: Network request failed on Android
             shouldShowDataUri ? <Icon svgSource={svgD20DataUriProps} width={100} height={100} color="#7a7" /> : null

package/src/FluentTester/TestComponents/Menu/MenuTest.tsx

@@ -1,6 +1,15 @@
 import * as React from 'react';
 import { ButtonV1 as Button } from '@fluentui/react-native';
-import { Menu, MenuItem, MenuItemCheckbox, MenuTrigger, MenuPopover, MenuList, MenuDivider } from '@fluentui-react-native/menu';
+import {
+  Menu,
+  MenuItem,
+  MenuItemCheckbox,
+  MenuItemRadio,
+  MenuTrigger,
+  MenuPopover,
+  MenuList,
+  MenuDivider,
+} from '@fluentui-react-native/menu';
 import { Stack } from '@fluentui-react-native/stack';
 import { Text } from '@fluentui-react-native/experimental-text';
 import { stackStyle } from '../Common/styles';
@@ -67,6 +76,25 @@ const MenuCheckmarks: React.FunctionComponent = () => {
   );
 };
 
+const MenuRadioItem: React.FunctionComponent = () => {
+  return (
+    <Stack style={stackStyle}>
+      <Menu defaultChecked={{ itemOne: true }}>
+        <MenuTrigger>
+          <Button>Items with radio selection</Button>
+        </MenuTrigger>
+        <MenuPopover>
+          <MenuList>
+            <MenuItemRadio name="itemOne" content="A MenuItem with checkmark" />
+            <MenuItemRadio name="itemTwo" content="Another MenuItem with checkmark" />
+            <MenuItemRadio name="itemThree" content="A third MenuItem with checkmark" />
+          </MenuList>
+        </MenuPopover>
+      </Menu>
+    </Stack>
+  );
+};
+
 const Submenu: React.FunctionComponent = () => {
   return (
     <Menu>
@@ -75,7 +103,8 @@ const Submenu: React.FunctionComponent = () => {
       </MenuTrigger>
       <MenuPopover>
         <MenuList>
-          <Text>Hello world!!!</Text>
+          <MenuItem content="A nested MenuItem" />
+          <MenuItem content="A second nested MenuItem" />
         </MenuList>
       </MenuPopover>
     </Menu>
@@ -148,6 +177,10 @@ const menuSections: TestSection[] = [
     name: 'Menu Checkmarks',
     component: MenuCheckmarks,
   },
+  {
+    name: 'Menu Radioitem',
+    component: MenuRadioItem,
+  },
   {
     name: 'Menu open on hover',
     component: MenuOpenOnHover,

package/src/FluentTester/TestComponents/NativeDatePicker/NativeDatePickerTest.tsx

@@ -4,12 +4,14 @@ import { NATIVEDATEPICKER_TESTPAGE } from './consts';
 import { PlatformStatus, Test, TestSection } from '../Test';
 import * as React from 'react';
 import { Stack } from '@fluentui-react-native/stack';
-import { stackStyle } from '../Common/styles';
+import { stackStyle, commonTestStyles as commonStyles } from '../Common/styles';
+import { Switch, View } from 'react-native';
 import { Text } from '@fluentui/react-native';
 
 const NativeDatePickerMainTest: React.FunctionComponent = () => {
   const [startDate, setStartDate] = React.useState<Date>(new Date());
   const [endDate, setEndDate] = React.useState<Date>(null);
+  const [overrideDefaultCalendarConfiguration, setOverrideDefaultCalendarConfiguration] = React.useState(false);
 
   function didPickDates(pickedStartDate: string, pickedEndDate: string) {
     setStartDate(NativeDatePicker.parseISOString(pickedStartDate));
@@ -20,6 +22,10 @@ const NativeDatePickerMainTest: React.FunctionComponent = () => {
   const fixedDates = {
     startDate: NativeDatePicker.parseISOString('2020-02-29T12:25:00.000Z'),
     endDate: NativeDatePicker.parseISOString('2020-03-07T11:55:00.000Z'),
+    overrideReferenceStartDate: NativeDatePicker.parseISOString('1999-01-01T00:00:00.000Z'),
+    overrideReferenceEndDate: NativeDatePicker.parseISOString('2000-01-01T00:00:00.000Z'),
+    defaultReferenceStartDate: new Date(new Date().getFullYear() - 3, 1, 1),
+    defaultReferenceEndDate: new Date(new Date().getFullYear() + 7, 1, 1),
   };
   const titles = {
     startTitle: 'Start Title',
@@ -36,14 +42,14 @@ const NativeDatePickerMainTest: React.FunctionComponent = () => {
 
   return (
     <Stack style={stackStyle}>
-      <Text variant="headerStandard">Start Date/Time</Text>
+      <Text variant="headerStandard">Selected Start Date/Time</Text>
       <Text variant="subheaderStandard">
         {startDate?.toString()} {'\n'}
       </Text>
 
-      <Text variant="headerStandard">End Date/Time</Text>
+      <Text variant="headerStandard">Selected End Date/Time</Text>
       <Text variant="subheaderStandard">
-        {endDate?.toString()} {'\n'}
+        {endDate?.toString() ?? 'N/A'} {'\n'}
       </Text>
 
       <Button content="Date picker" onClick={() => NativeDatePicker.present({ callback: didPickDates })} />
@@ -101,6 +107,27 @@ const NativeDatePickerMainTest: React.FunctionComponent = () => {
         content="Date time range with custom titles (tabbed)"
         onClick={() => NativeDatePicker.present({ mode: 'dateTimeRange', ...fixedDates, ...titles, callback: didPickDates })}
       />
+
+      <Text variant="headerStandard">Calendar configuration</Text>
+      <View style={commonStyles.switch}>
+        <Text>Override default calendar configuration</Text>
+        <Switch
+          value={overrideDefaultCalendarConfiguration}
+          onValueChange={(value) => {
+            setOverrideDefaultCalendarConfiguration(value);
+            NativeDatePicker.setDefaultCalendarConfiguration({
+              referenceStartDate: value ? fixedDates.overrideReferenceStartDate : fixedDates.defaultReferenceStartDate,
+              referenceEndDate: value ? fixedDates.overrideReferenceEndDate : fixedDates.defaultReferenceEndDate,
+            });
+          }}
+        />
+      </View>
+      <Text variant="subheaderStandard">
+        Override reference start date: {fixedDates.overrideReferenceStartDate.getUTCFullYear().toString()}
+      </Text>
+      <Text variant="subheaderStandard">
+        Override reference end date: {fixedDates.overrideReferenceEndDate.getUTCFullYear().toString()}
+      </Text>
     </Stack>
   );
 };

package/src/FluentTester/TestComponents/TextExperimental/CustomizeUsage.tsx

@@ -47,6 +47,39 @@ const Helvetica = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'He
 const Arial = Text.customize({ variant: 'heroLargeStandard', fontFamily: 'arial' });
 
 export const CustomizeUsage: React.FunctionComponent = () => {
+  const BlockText = () => {
+    return (
+      <>
+        <Text style={{ textTransform: 'uppercase' }} font="base" weight="medium">
+          I am going to be truncated since I am a very very very very very very very very very very very very very very very very very very
+          very very very very very very very very very very very very very very very very very very very very very very very very very very
+          very very very very very very very very very very very very very very very very long block text.
+        </Text>
+        <Text font="monospace" weight="semibold" wrap={false}>
+          I am not going to be wrapped since I am a very very very very very very very very very very very very very very very very very
+          very very very very very very very very very very very very very very very very very very very very very very very very very very
+          very very very very very very very very very very very very very very very very very long block text.
+        </Text>
+        <Text underline>Since text components are inside a View</Text>
+        <Text>every block of text</Text>
+        <Text underline strikethrough align="end">
+          gets its own line. This line has been underlined, striked through, and right aligned.
+        </Text>
+      </>
+    );
+  };
+
+  const NonBlockText = () => {
+    return (
+      <Text>
+        <Text italic>I am italisized inline text.</Text>
+        <Text weight="medium">Since text components are inside a Text, (medium) </Text>
+        <Text weight="bold">every block of text (bolded) </Text>
+        <Text size={600}>gets placed inline.</Text>
+      </Text>
+    );
+  };
+
   const CustomUsageStack = () => {
     return (
       <Stack style={stackStyle} gap={5}>
@@ -73,6 +106,7 @@ export const CustomizeUsage: React.FunctionComponent = () => {
       </Stack>
     );
   };
+
   const CustomFontStackAndroid = () => {
     return (
       <Stack style={stackStyle} gap={5}>
@@ -116,6 +150,10 @@ export const CustomizeUsage: React.FunctionComponent = () => {
     default:
       return (
         <View>
+          <BlockText />
+          <Text>{'\n'}</Text>
+          <NonBlockText />
+          <Text>{'\n'}</Text>
           <CustomUsageStack />
           <CustomFontStack />
         </View>

package/src/FluentTester/TestComponents/TextExperimental/StandardUsage.tsx

@@ -1,30 +1,83 @@
 import * as React from 'react';
-import { View } from 'react-native';
-import { Text } from '@fluentui-react-native/experimental-text';
+import { Platform, View } from 'react-native';
+import {
+  Text,
+  Caption1,
+  Body1,
+  Body1Strong,
+  Body2,
+  Body2Strong,
+  Subtitle1,
+  Subtitle1Strong,
+  Subtitle2,
+  Subtitle2Strong,
+  Title1,
+  Title1Strong,
+  LargeTitle,
+  Display,
+} from '@fluentui-react-native/experimental-text';
 import { Stack } from '@fluentui-react-native/stack';
 import { stackStyle } from '../Common/styles';
 import { HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON } from './consts';
 
 export const StandardUsage: React.FunctionComponent = () => {
-  return (
-    <View>
-      <Stack style={stackStyle} gap={5}>
-        <Text variant="captionStandard" testID={HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON}>
-          CaptionStandard
-        </Text>
-        <Text variant="secondaryStandard">SecondaryStandard</Text>
-        <Text variant="secondarySemibold">SecondarySemibold</Text>
-        <Text variant="bodyStandard">BodyStandard</Text>
-        <Text variant="bodySemibold">BodySemibold</Text>
-        <Text variant="subheaderStandard">SubheaderStandard</Text>
-        <Text variant="subheaderSemibold">SubheaderSemibold</Text>
-        <Text variant="headerStandard">HeaderStandard</Text>
-        <Text variant="headerSemibold">HeaderSemibold</Text>
-        <Text variant="heroStandard">HeroStandard</Text>
-        <Text variant="heroSemibold">HeroSemibold</Text>
-        <Text variant="heroLargeStandard">HeroLargeStandard</Text>
-        <Text variant="heroLargeSemibold">HeroLargeSemibold</Text>
-      </Stack>
-    </View>
-  );
+  const V1Usage: React.FunctionComponent = () => {
+    return (
+      <View>
+        <Stack style={stackStyle} gap={5}>
+          <Text variant="captionStandard" testID={HOMEPAGE_EXPERIMENTAL_TEXT_BUTTON}>
+            CaptionStandard
+          </Text>
+          <Text variant="secondaryStandard">SecondaryStandard</Text>
+          <Text variant="secondarySemibold">SecondarySemibold</Text>
+          <Text variant="bodyStandard">BodyStandard</Text>
+          <Text variant="bodySemibold">BodySemibold</Text>
+          <Text variant="subheaderStandard">SubheaderStandard</Text>
+          <Text variant="subheaderSemibold">SubheaderSemibold</Text>
+          <Text variant="headerStandard">HeaderStandard</Text>
+          <Text variant="headerSemibold">HeaderSemibold</Text>
+          <Text variant="heroStandard">HeroStandard</Text>
+          <Text variant="heroSemibold">HeroSemibold</Text>
+          <Text variant="heroLargeStandard">HeroLargeStandard</Text>
+          <Text variant="heroLargeSemibold">HeroLargeSemibold</Text>
+        </Stack>
+      </View>
+    );
+  };
+
+  const V2Usage: React.FunctionComponent = () => {
+    return (
+      <View>
+        <Stack style={stackStyle} gap={5}>
+          <Caption1>Caption1</Caption1>
+          <Body1>Body1</Body1>
+          <Body1Strong>Body1Strong</Body1Strong>
+          <Body2>Body2</Body2>
+          <Body2Strong>Body2Strong</Body2Strong>
+          <Subtitle2>Subtitle2</Subtitle2>
+          <Subtitle2Strong>Subtitle2Strong</Subtitle2Strong>
+          <Subtitle1>Subtitle1</Subtitle1>
+          <Subtitle1Strong>Subtitle1Strong</Subtitle1Strong>
+          <Title1>Title1</Title1>
+          <Title1Strong>Title1Strong</Title1Strong>
+          <LargeTitle>LargeTitle</LargeTitle>
+          <Display>Display</Display>
+        </Stack>
+      </View>
+    );
+  };
+
+  switch (Platform.OS) {
+    case 'android':
+    case 'ios':
+    case 'macos':
+      return <V1Usage />;
+    default:
+      return (
+        <View>
+          <V1Usage />
+          <V2Usage />
+        </View>
+      );
+  }
 };