@fluentui-react-native/tester 0.61.8 → 0.62.0

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>
@@ -148,6 +176,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>
+      );
+  }
 };