@fluentui-react-native/tester 0.139.0 → 0.141.0

package/src/TestComponents/Input/InputDefault.tsx

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import { View } from 'react-native';
+
+import type { IconProps } from '@fluentui-react-native/icon';
+import { Input } from '@fluentui-react-native/input';
+
+import DismissSvg from '../../../assets/dismissIcon.svg';
+import FilledSvg from '../../../assets/filledIcon.svg';
+import OutlineSvg from '../../../assets/outlineIcon.svg';
+
+export const dismissIconProps: IconProps = { svgSource: { src: DismissSvg, viewBox: '0 0 20 20' } };
+export const outlineIconProps: IconProps = { svgSource: { src: OutlineSvg, viewBox: '0 0 20 20' } };
+export const filledIconProps: IconProps = { svgSource: { src: FilledSvg, viewBox: '0 0 20 20' } };
+
+export const InputDefault: React.FunctionComponent = () => {
+  const [error, setError] = React.useState<string>('');
+  const [controlText, setControlText] = React.useState<string>('Controls other text input!');
+
+  return (
+    <View>
+      <Input onChange={(text) => setControlText(text)} defaultValue={controlText} />
+      <Input value={'Controlled text - ' + controlText} />
+      <Input placeholder="Enter text here!" type="decimal-pad" accessoryIcon={null} />
+      <Input placeholder="Custom dismiss icon" accessoryIcon={outlineIconProps} secondaryText="Secondary" type="email-address" />
+      <Input
+        placeholder="Enter text here!"
+        accessoryIcon={dismissIconProps}
+        label="Label"
+        assistiveText="Assistive Text"
+        secondaryText="Secondary"
+      />
+      <Input
+        error={error}
+        icon={outlineIconProps}
+        placeholder="Only text up to 5 characters!"
+        label="Label"
+        onChange={(text) => {
+          if (text.length > 5) setError('Text must be less than 5 characters!');
+          else setError('');
+        }}
+      />
+    </View>
+  );
+};

package/src/TestComponents/Input/InputTest.tsx

@@ -0,0 +1,28 @@
+import * as React from 'react';
+
+import { InputDefault } from './InputDefault';
+import { INPUT_TESTPAGE } from '../../../../E2E/src/Input/consts';
+import type { TestSection, PlatformStatus } from '../Test';
+import { Test } from '../Test';
+
+const inputSections: TestSection[] = [
+  {
+    name: 'Input Page',
+    testID: INPUT_TESTPAGE,
+    component: InputDefault,
+  },
+];
+
+export const InputTest: React.FunctionComponent = () => {
+  const status: PlatformStatus = {
+    win32Status: 'Backlog',
+    uwpStatus: 'Backlog',
+    iosStatus: 'Backlog',
+    macosStatus: 'Backlog',
+    androidStatus: 'Experimental',
+  };
+
+  const description = 'Input allows the user to enter and edit text.';
+
+  return <Test name="Input Test" description={description} sections={inputSections} status={status}></Test>;
+};

package/src/TestComponents/Input/index.ts

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

package/src/TestComponents/Menu/MenuTest.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { Platform, StyleSheet, View } from 'react-native';
 
 import { ButtonV1 as Button } from '@fluentui/react-native';
 import type { MenuProps } from '@fluentui-react-native/menu';
@@ -86,8 +86,8 @@ const MenuCheckmarks: React.FunctionComponent = () => {
         <MenuPopover>
           <MenuList>
             <MenuItem>A plain MenuItem</MenuItem>
-            <MenuItemCheckbox name="itemTwo">A MenuItem with checkmark</MenuItemCheckbox>
-            <MenuItemCheckbox name="itemThree">A MenuItem with checkmark</MenuItemCheckbox>
+            <MenuItemCheckbox name="itemTwo">A MenuItem with checkmark without alignment</MenuItemCheckbox>
+            <MenuItemCheckbox name="itemThree">A MenuItem with checkmark without alignment</MenuItemCheckbox>
           </MenuList>
         </MenuPopover>
       </Menu>
@@ -181,17 +181,24 @@ const rootStackStyle = StyleSheet.create({ root: { ...(stackStyle as object), fl
 
 const MenuControlledOpen: React.FunctionComponent = () => {
   const [open, setOpen] = React.useState<boolean>(false);
+
+  const onOpenChange = () => {
+    setOpen(false);
+  };
+
   return (
     <Stack style={rootStackStyle.root}>
       <Button onClick={() => setOpen(!open)}>Toggle open</Button>
-      <Menu open={open}>
+      {/* For Android Platform the Controlled trigger becomes unavailable because of the screen we show on the screen click on which closes the Menu , Hence we need to make the state change based on open change */}
+
+      <Menu {...(Platform.OS === 'android' && { onOpenChange })} open={open}>
         <MenuTrigger>
           <Button>Test</Button>
         </MenuTrigger>
         <MenuPopover>
           <MenuList>
             <MenuItem>A MenuItem</MenuItem>
-            <Submenu />
+            {Platform.OS !== 'android' && <Submenu />}
           </MenuList>
         </MenuPopover>
       </Menu>
@@ -263,7 +270,7 @@ const MenuNofM: React.FunctionComponent = () => {
             <MenuItem disabled>A disabled MenuItem</MenuItem>
             <MenuItem accessibilityPositionInSet={9}>A plain MenuItem</MenuItem>
             <MenuDivider />
-            <Submenu accessibilityPositionInSet={16} accessibilitySetSize={7} />
+            {Platform.OS !== 'android' && <Submenu accessibilityPositionInSet={16} accessibilitySetSize={7} />}
             <MenuItem disabled accessibilitySetSize={2}>
               A disabled MenuItem
             </MenuItem>
@@ -296,7 +303,7 @@ const MenuWithCustomMenuTrigger: React.FunctionComponent = () => {
             <MenuItem disabled>A disabled MenuItem</MenuItem>
             <MenuItem accessibilityPositionInSet={9}>A plain MenuItem</MenuItem>
             <MenuDivider />
-            <Submenu accessibilityPositionInSet={16} accessibilitySetSize={7} />
+            {Platform.OS !== 'android' && <Submenu accessibilityPositionInSet={16} accessibilitySetSize={7} />}
             <MenuItem disabled accessibilitySetSize={2}>
               A disabled MenuItem
             </MenuItem>
@@ -322,26 +329,35 @@ const menuSections: TestSection[] = [
     name: 'Menu Radioitem',
     component: MenuRadioItem,
   },
-  {
-    name: 'Menu open on hover',
-    component: MenuOpenOnHover,
-  },
+  Platform.select({
+    android: null,
+    default: {
+      name: 'Menu open on hover',
+      component: MenuOpenOnHover,
+    },
+  }),
   {
     name: 'Menu open controlled',
     component: MenuControlledOpen,
   },
-  {
-    name: 'Menu with tooltips on items',
-    component: MenuTooltips,
-  },
+  Platform.select({
+    android: null,
+    default: {
+      name: 'Menu with tooltips on items',
+      component: MenuTooltips,
+    },
+  }),
   {
     name: 'Menu with icons',
     component: MenuIcons,
   },
-  {
-    name: 'Menu Submenu',
-    component: MenuSubMenu,
-  },
+  Platform.select({
+    android: null,
+    default: {
+      name: 'Menu Submenu',
+      component: MenuSubMenu,
+    },
+  }),
   {
     name: 'Menu with ScrollView',
     component: MenuScrollView,
@@ -350,18 +366,24 @@ const menuSections: TestSection[] = [
     name: 'Menu Trigger onClick Override',
     component: MenuTriggerOnClickCallback,
   },
-  {
-    name: 'Menu Trigger Hover Override',
-    component: MenuTriggerHoverCallback,
-  },
+  Platform.select({
+    android: null,
+    default: {
+      name: 'Menu Trigger Hover Override',
+      component: MenuTriggerHoverCallback,
+    },
+  }),
   {
     name: 'Menu Customized',
     component: MenuCustomized,
   },
-  {
-    name: 'Menu Refs',
-    component: MenuTriggerChildRef,
-  },
+  Platform.select({
+    android: null,
+    default: {
+      name: 'Menu Refs',
+      component: MenuTriggerChildRef,
+    },
+  }),
   {
     name: 'Menu N of M Override',
     component: MenuNofM,
@@ -385,7 +407,7 @@ export const MenuTest: React.FunctionComponent = () => {
     uwpStatus: 'Backlog',
     iosStatus: 'Backlog',
     macosStatus: 'Beta',
-    androidStatus: 'Backlog',
+    androidStatus: 'Experimental',
   };
 
   const description =

package/src/testPages.ts

@@ -16,6 +16,7 @@ import { DropdownTest, HOMEPAGE_DROPDOWN_BUTTON } from './TestComponents/Dropdow
 import { FocusTrapTest } from './TestComponents/FocusTrapZone';
 import { FocusZoneTest } from './TestComponents/FocusZone';
 import { IconTest } from './TestComponents/Icon';
+import { InputTest } from './TestComponents/Input';
 import { LinkLegacyTest } from './TestComponents/LinkLegacy';
 import { LinkV1Test } from './TestComponents/LinkV1';
 import { MenuTest } from './TestComponents/Menu';
@@ -159,6 +160,12 @@ export const tests: TestDescription[] = [
     testPageButton: Constants.HOMEPAGE_ICON_BUTTON,
     platforms: ['android', 'ios', 'macos', 'win32'],
   },
+  {
+    name: 'Input',
+    component: InputTest,
+    testPageButton: Constants.HOMEPAGE_INPUT_BUTTON,
+    platforms: ['android'],
+  },
   {
     name: 'Link Legacy',
     component: LinkLegacyTest,
@@ -175,7 +182,7 @@ export const tests: TestDescription[] = [
     name: 'Menu',
     component: MenuTest,
     testPageButton: Constants.HOMEPAGE_MENU_BUTTON,
-    platforms: ['macos', 'win32'],
+    platforms: ['macos', 'win32', 'android'],
   },
   {
     name: 'MenuButton Legacy',